WordPress(ワードプレス) で、ヘッダー領域にウィジェットが設置出来ないワードプレス用テーマにウィジェットエリアを、CSSのカスタマイズで５分で簡単に設置出来るようにする方法をご紹介します。
目次
当ブログ「好きなことだけ通信」のトップページのヘッダー上に”Googleアドセンス”広告が設置されているのにお気付きになりましたか？
このブログのテーマは「Simplicity」で作成しています。
しかし「Simplicity」で設置出来るウィジェット領域には、ヘッダーエリアがありません。
けれどブログのタイトルと、グローバルメニューの間にはアドセンス広告がセットしてあります。それは今回ご紹介する、ヘッダー領域にウィジェットをセット出来るようにカスタマイズしたからに他なりません。
ヘッダー上に設置している広告ユニットは928カスタムを設置してあります。
※モバイル用には、320×100を設置
実はこのヘッダー上に設置している理由は、このカスタム広告のインプレッション収益が思いのほか良い結果を出しているからです。
こちらがGoogleアドセンスの広告ユニット別のレポートです。
「レスポンシブamp用」が圧倒的に高いインプレッションとなっていますが、それを除けば一番高いのが、「記事中」そして「関連コンテンツ」その次が「928カスタム」です。「レスポンシブamp用」別で見たら第三位の収益率となっているのがわかるかと思います。
「928カスタム」はヘッダーの上のみの設置で、一見したら下にスクロールしてしまったら表示から外れるためあまり効率がよくなさそうに見えますが、トップページに切り替わったら当然一番最初に表示されます。さらに横に長く大きい広告なので非常に目立ちます。トップページのタイトル下という事もあり滞在時間も長くクリックされる率が高いのです。
それではヘッダー上にウィジェットを設置する有用性が理解してもらえたところで、さっそく設置するためのカスタマイズをご説明します。
テーマのための関数 (functions.php)へ以下のコードを追加します。
//ヘッダーへウィジェットエリア追加
register_sidebar(array(
‘name’ => ‘ヘッダーウィジェット’ ,
‘id’ => ‘header-right’ ,
‘before_widget’ => ‘<div class=”ad-header-widget”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=”header_widget_title”>’,
‘after_title’ => ‘</h3>’,
));
<!– ヘッダーへウィジェット追加 –>
<?php dynamic_sidebar(‘header-right’); ?>
上記の場所を探して、赤字の2行を追加して下さい。
テーマのための関数 (functions.php)への追加、ヘッダー (header.php)とも子テーマがあるテーマであれば、子テーマへ追加して、出来るだけ親テーマへはコードを入れないほうが良いです。
以前、ご紹介した、FTPで、親テーマから(header.php)をコピーして、(functions.php)とも子テーマへ、コードを入れましょう。
| WordPress(ワードプレス)で、必ず必要となるインストーラーＦＴＰのご説明です。今回FTPクライアントソフトウェアのフリーソフト「FFFTP」を本当の初心者でも５分で簡単に設定出来ます。さらに、プラグイン一例をインストールまでやってみましょう。ＦＴＰについて いつもご自宅のパソコンで便利なアプリケーションをダウンロードした後、フリーソフトのような解凍するファイルの場合は、解凍したファイルを、コピペやファイル移動して任意のフォルダへ保存したりしているかと思います。 それが、レンタルサーバー等の外部媒体へフォ... ワードプレス│ファイル転送に必須なインストーラー"FTP"を５分で簡単設定 - 好きなことだけ通信 |
これで、外観→ウィジェットから、ウィジェットを設置出来る場所にヘッダーウィジェットの項目が増えたはずです。
ヘッダー領域へウィジェットが設置出来ると、本当に便利になります。
このブログの場合は現在はアドセンス広告を設置してありますが、以前は人気記事をカスタマズして設置していた事もありました。
とにかく用途は多岐に渡りますので、ブログにあったウィジェットを設置してより便利にご使用下さい。
上記のCSSをコピペして頂ければ、すぐ使用出来ます。
ご参考・ご活用下されば幸いです。
以上、
WordPress CSS ヘッダー領域にウィジェットを5分でカスタマイズ設置！
でした。
