WordPress でブログを運営している人は、サイドバーをウィジェットでカスタマイズしていることがほとんどだと思います。ウィジェットにしておけば設定を簡単に変更できて、とても便利です。
実は WordPress では、フッターにもウィジェットエリアを追加することが可能です。これは Amazon のキャプチャですが、フッターにもウィジェットを設けておくと、長い文章のエントリーで一番最後までたどり着いていても、わざわざブログのトップにまで戻らずに画面の移動などを行うことができるようになります。
ブログを訪問してくれた人にも便利になるし、直帰率の改善により SEO にも効果がありそうです。サイドバーの設定とは違う個別のウィジェットを作成することができるので、ぜひ挑戦してみてください。
function.php の編集
まずは function.php を編集します。register_sidebar 関数を使います。
関数リファレンス/register sidebar – WordPress Codex 日本語版
register_sidebar 関数は次のように使います。
1 | register_sidebar($args); |
register_sidebar 関数に渡す引数は配列であり、次のような仕様になっています。
1 2 3 4 5 6 7 8 9 10 | $args = array( 'id' => (サイドバーの ID), 'name' => (サイドバーの名前), 'description' => (サイドバーの説明), 'class' => (管理画面の class 属性に付与される。なくても大丈夫), 'before_widget' => (ウィジェットの前に挿入される HTML), 'after_widget' => (ウィジェットの後に挿入される HTML), 'before_title' => (タイトルの前に挿入される HTML), 'after_title' => (タイトルの後に挿入される HTML) ); |
例えば、次のように function.php に追記したとします。
1 2 3 4 5 6 7 8 9 | register_sidebar(array( 'id' => 'footerbar', 'name' => 'フッターウィジェット', 'description' => 'フッターのウィジットエリアですだよ。', 'before_widget' => '<div id="%1$s" class="footer-widget-piyo %2$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="widgettitle-dapyon">', 'after_title' => '</h2>', )); |
「name」と「description」についてはウィジェットの管理画面で確認してください。
フッターウィジェットにアイテムの「カテゴリー」を追加した場合、出力される HTML は次のとおり。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <DIV class="footer-widget-piyo widget_categories" id="categories-3"> <H2 class="widgettitle-dapyon">カテゴリー</H2> <UL> <LI class="cat-item cat-item-5"> <A href="sample.html">カテゴリー１</A> </LI> <LI class="cat-item cat-item-5"> <A href="sample.html">カテゴリー２</A> </LI> ・ ・ ・ </UL> </DIV> |
register_sidebar 関数に渡す引数が、それぞれどこに対応しているのか確認し、スタイルシートでのカスタマイズに役立ててください。ぶっちゃけ、
1 | register_sidebar(array('id' => 'footerbar')); |
これだけでウィジェットエリアの追加ができるのですが、わかりにくかったりするのでちゃんと設定しておいたほうがいいと思います。
footer.php の編集
次に footer.php の編集をします。
関数リファレンス/dynamic sidebar – WordPress Codex 日本語版
dynamic_sidebar 関数に先ほど register_sidebar 関数で設定した「id」を渡します。参考までに、当ブログの footer.php の全文を貼っておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!-- footer --> <div id="footer"> <!-- footer-widget --> <div class="footer-widget"> <?php if (is_active_sidebar('footerbar')) : dynamic_sidebar('footerbar'); else: ?> <div class="widget"> <h2>No Widget</h2> <p>ウィジットは設定されていません。</p> </div> <?php endif; ?> </div> <!-- /footer-widget --> <div class="copy"> Copyright (C) 2015 Naokix.net All Rights Reserved. </div> </div> <!-- /footer --> <?php wp_footer(); ?> </div> <!-- /container --> </body> </html> |
公式でも述べられている通り、if 文を使ってフッターのウィジェットエリアが見つからない場合についても記述しています。
今回、このように設定してみました。
ここまでの設定で次のように表示されます。
あとはスタイルシートでデザインを決めてあげるだけです。
CSS でデザインのカスタマイズ
上で Amazon のフッターバーを例に出しましたが、それにならってシンプルなフッターバーにカスタマイズしてみたいと思います。こちらを参考にしました。
[CSS3] 横並びレイアウトを簡単に実現するdisplay:boxが便利 – YoheiM .NET
DIV 要素を横に並べた後に「display: box;」で中央に配置する方法は、以前の float を使う場合に比べて、clear の処理を入れずに済むのでいいなと思っていたんですが、ブラウザやバージョンによって記述方法がまちまちで、思っていた以上に手こずってしまいました。
フレックスボックスでカラムレイアウトを実装する ｜ Tips Note by TAM
Chrome、Firefox、IE11、Operaで動作確認しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .footer-widget { /* boxレイアウトの指定 */ display: box; /* 標準 */ display: -webkit-box; /* Webkit系(Chrome・Safariなど) */ display: flex; /* Firefox・IE11 */ display: -o-box; /* Opera */ /* 配置したボックスを左右中央寄せにする */ box-align: center; /* 標準 */ -webkit-box-pack: center; /* Webkit系(Chrome・Safariなど) */ justify-content: center; /* Firefox・IE11 */ -o-box-pack: center; /* Opera */ } .footer-widget > div { width: 150px; height: 150px; margin: 30px; } |
このようになります。
最後に UL タグの list-style を none にして、マーカーをなしにすれば完成です。
1 2 3 | .footer-widget ul { list-style: none; } |
一応、float を使ったカスタマイズについても貼っておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .footer-widget { width: 840px; margin: 0 auto; } .footer-widget > div { float: left; width: 150px; height: 150px; margin: 30px; } .footer-widget ul { list-style: none; } .copy { clear: both; } |
サイドバーにはないウィジェットアイテムをプラグインなどで追加したりして、ブログがより使いやすくなるようにカスタマイズしてみてください。
追記：2015年11月21日 18:00
微妙に今でも IE10 が使われていたりするので、一応修正しておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .footer-widget { /* boxレイアウトの指定 */ display: box; /* 標準 */ display: -webkit-box; /* Webkit系(Chrome・Safariなど) */ display: flex; /* Firefox・IE11 */ display: -o-box; /* Opera */ display: -ms-flexbox; /* IE10 */ /* 配置したボックスを左右中央寄せにする */ box-align: center; /* 標準 */ -webkit-box-pack: center; /* Webkit系(Chrome・Safariなど) */ justify-content: center; /* Firefox・IE11 */ -o-box-pack: center; /* Opera */ -ms-flex-pack: center; /* IE10 */ } |
Comment