この悩みをお持ちの方いませんか？
今日はそのウィジェットエリアの追加方法について紹介していきます。
ウィジェットエリアについて
ダッシュボード⇒外観⇒カスタマイズ⇒ウィジェット
の順で見ていくとこんな画面が
ウィジェットエリアってこんな感じで設定できて、ブログのレイアウト整えるのには必須のツールです。
自己紹介書いたり、SNS設置したり、広告貼ったりとまあ色々と用途はある訳です。
アドセンス自動広告の暴走
僕が今回ウィジェットエリアを追加した理由はこれです。
自動広告の暴走。
なんじゃこれは、ヘッダーの枠の間にうまいこと挟まっている。。。
僕のスワロー使っている友人は自動広告でもこんなことにはならなそうだったのですが、僕のはこれ消してみても丁度ヘッダー下に表示されないということがありました。
そして仕方ないレスポンシブでも追加するか。。。と思ったのに
僕が使用しているスワローはかなりウィジェットエリアが多く設定されていて使いやすいのですが、ヘッダー下という箇所は設定されていませんでした。
そこで自動広告の代わりにヘッダー下にウィジェットエリアを追加し、レスポンシブ広告を貼ることにしました。
HTMLとCSSの追加手順
まず
ダッシュボード⇒外観⇒テーマエディター
に移ります。
まずfunction.php.をいじります。
どこでもいいので下のコードを入れてください。
ちなみに上の物はウィジェットで追加したもののタイトルが表示されなくなり、下は通常設定通りタイトルが表示されます。
//ウイジェット追加register_sidebar(array( 'name'=>'ヘッダー下ウイジェット（タイトルなし）', 'id'=>'header_widget_no_title', 'description' => 'タイトルは反映されません。', 'before_widget' => '<div class="header-widget clearfix">', 'after_widget' => '</div>', 'before_title' => '<p style="display:none">', 'after_title' => '</p>', ));register_sidebar(array( 'name'=>'ヘッダー下ウイジェット（タイトルあり）', 'id'=>'header_widget', 'before_widget' => '<div class="header-widget clearfix">', 'after_widget' => '</div>', 'before_title' => '<p class="header-widget-title">', 'after_title' => '</p>', ));
こんな感じです。僕はレスポンシブ広告のみ貼りたかったのでタイトルなしを追加しました。
次に挿入したい場所今回はheaderなのでheader.php. を開きます。
フッターに挿入したい人はfooter.php.
そして以下をウィジェットエリアを表示したい場所に置いてください。
<?php dynamic_sidebar('header_widget_no_title'); //ヘッダー下ウィジェット（タイトルなし） ?><?php dynamic_sidebar('header_widget'); //ヘッダー下ウィジェット（タイトルあり） ?>
僕の場合はヘッダーすぐ下だったので</header>の下に追加するだけでしたが
他の部分にウィジェット追加したい場合は正しい場所に表示されるかを新しいタブを開いてカスタマイズ画面を確認しながら作業するといいと思います。
このようにウィジェット管理画面に表示され、変更が確認できれば作業完了です。
まとめ
いかがでしょうか。
CSSとか苦手だよーーって方も割と簡単に設定できるので是非試してみてください。
本日はこれで失礼します。