WordPress(ワードプレス)で、ヘッダー領域にウィジェットが設置出来ないワードプレス用テーマにウィジェットエリアを、CSSのカスタマイズで５分で簡単に設置出来るようにする方法をご紹介します。
目次
ヘッダー領域にウィジェットを簡単設置
はじめに
当ブログ「好きなことだけ通信」のトップページのヘッダー上に”Googleアドセンス”広告が設置されているのにお気付きになりましたか？
このブログのテーマは「Simplicity」で作成しています。
しかし「Simplicity」で設置出来るウィジェット領域には、ヘッダーエリアがありません。
けれどブログのタイトルと、グローバルメニューの間にはアドセンス広告がセットしてあります。それは今回ご紹介する、ヘッダー領域にウィジェットをセット出来るようにカスタマイズしたからに他なりません。
ヘッダー上に設置している広告ユニットは928カスタムを設置してあります。
※モバイル用には、320×100を設置
実はこのヘッダー上に設置している理由は、このカスタム広告のインプレッション収益が思いのほか良い結果を出しているからです。
こちらがGoogleアドセンスの広告ユニット別のレポートです。
「レスポンシブamp用」が圧倒的に高いインプレッションとなっていますが、それを除けば一番高いのが、「記事中」そして「関連コンテンツ」その次が「928カスタム」です。「レスポンシブamp用」別で見たら第三位の収益率となっているのがわかるかと思います。
「928カスタム」はヘッダーの上のみの設置で、一見したら下にスクロールしてしまったら表示から外れるためあまり効率がよくなさそうに見えますが、トップページに切り替わったら当然一番最初に表示されます。さらに横に長く大きい広告なので非常に目立ちます。トップページのタイトル下という事もあり滞在時間も長くクリックされる率が高いのです。
それではヘッダー上にウィジェットを設置する有用性が理解してもらえたところで、さっそく設置するためのカスタマイズをご説明します。
ＣＳＳカスタマイズ
追加するＣＳＳ
テーマのための関数 (functions.php)へ以下のコードを追加します。
//ヘッダーへウィジェットエリア追加
’,
register_sidebar(array(
‘name’ => ‘ヘッダーウィジェット’ ,
‘id’ => ‘header-right’ ,
‘before_widget’ => ‘
‘before_title’ => ‘’,
’,
‘after_title’ => ‘
));
