WordPressでフッターにウィジェットを追加してみる

 WordPress でブログを運営している人は、サイドバーをウィジェットでカスタマイズしていることがほとんどだと思います。ウィジェットにしておけば設定を簡単に変更できて、とても便利です。

20151114_1

 実は WordPress では、フッターにもウィジェットエリアを追加することが可能です。これは Amazon のキャプチャですが、フッターにもウィジェットを設けておくと、長い文章のエントリーで一番最後までたどり着いていても、わざわざブログのトップにまで戻らずに画面の移動などを行うことができるようになります。

20151114_2

 ブログを訪問してくれた人にも便利になるし、直帰率の改善により SEO にも効果がありそうです。サイドバーの設定とは違う個別のウィジェットを作成することができるので、ぜひ挑戦してみてください。

function.php の編集

まずは function.php を編集します。register_sidebar 関数を使います。

register_sidebar 関数は次のように使います。

register_sidebar 関数に渡す引数は配列であり、次のような仕様になっています。

例えば、次のように function.php に追記したとします。

「name」と「description」についてはウィジェットの管理画面で確認してください。

20151114_3

フッターウィジェットにアイテムの「カテゴリー」を追加した場合、出力される HTML は次のとおり。

register_sidebar 関数に渡す引数が、それぞれどこに対応しているのか確認し、スタイルシートでのカスタマイズに役立ててください。ぶっちゃけ、

これだけでウィジェットエリアの追加ができるのですが、わかりにくかったりするのでちゃんと設定しておいたほうがいいと思います。

footer.php の編集

次に footer.php の編集をします。

dynamic_sidebar 関数に先ほど register_sidebar 関数で設定した「id」を渡します。参考までに、当ブログの footer.php の全文を貼っておきます。

公式でも述べられている通り、if 文を使ってフッターのウィジェットエリアが見つからない場合についても記述しています。

今回、このように設定してみました。

20151114_4

ここまでの設定で次のように表示されます。

20151114_5

あとはスタイルシートでデザインを決めてあげるだけです。

CSS でデザインのカスタマイズ

上で Amazon のフッターバーを例に出しましたが、それにならってシンプルなフッターバーにカスタマイズしてみたいと思います。こちらを参考にしました。

DIV 要素を横に並べた後に「display: box;」で中央に配置する方法は、以前の float を使う場合に比べて、clear の処理を入れずに済むのでいいなと思っていたんですが、ブラウザやバージョンによって記述方法がまちまちで、思っていた以上に手こずってしまいました。

Chrome、Firefox、IE11、Operaで動作確認しています。

このようになります。

20151114_6

最後に UL タグの list-style を none にして、マーカーをなしにすれば完成です。

20151114_7

一応、float を使ったカスタマイズについても貼っておきます。

サイドバーにはないウィジェットアイテムをプラグインなどで追加したりして、ブログがより使いやすくなるようにカスタマイズしてみてください。

追記:2015年11月21日 18:00

微妙に今でも IE10 が使われていたりするので、一応修正しておきます。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP