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)とも子テーマへ、コードを入れましょう。
ヘッダーウィジェットエリア
これで、外観→ウィジェットから、ウィジェットを設置出来る場所にヘッダーウィジェットの項目が増えたはずです。
おわりに
ヘッダー領域へウィジェットが設置出来ると、本当に便利になります。
このブログの場合は現在はアドセンス広告を設置してありますが、以前は人気記事をカスタマズして設置していた事もありました。
とにかく用途は多岐に渡りますので、ブログにあったウィジェットを設置してより便利にご使用下さい。
上記のCSSをコピペして頂ければ、すぐ使用出来ます。
ご参考・ご活用下されば幸いです。
以上、
WordPress CSS ヘッダー領域にウィジェットを5分でカスタマイズ設置！
でした。