この記事は公開から9年、最終更新日からも7年経過しています。内容が古くなっている可能性があります。
WordPressでフッターにウィジェットを追加する方法
目次
概要
WordPressのテーマでは、サイドバーのウィジェットにはほぼ対応しているが、フッターについては、対応していないものも多い。現在扱っている、BizVektorも標準では対応していない(と思われる)ので、今回、自力で追加してみました。その方法をまとめておきます。
前提
・本投稿では、小テーマを作成し、カスタマイズすることを前提としていますが、小テーマを使用しなくても、同様の考え方で親テーマを直接編集することも可能です。
※小テーマについては、こちらの投稿；[WordPress]小テーマを有効に使う #WordPressを参考にして下さい。
・フッターウィジェットは２領域追加するものとします。
・スクリーンショットは、BizVektorで適用した場合の例を示しています。
・フッター以外の場所にも応用可能です。
カスタマイズ方法(1)functions.phpの編集
・小テーマのフォルダ内に準備した(もしくは新規作成した)、functions.phpにフッターウイジェットの関数を追加します。親テーマを直接編集しても構いません。
※小テーマのfunctions.phpに記述した各関数は親テーマの各関数に追加される形式ですので、style.cssのように、親テーマのfunctions.phpをインクルードする必要はありません。追加する関数のみ記載します。
/* フッターウィジェットを追加 */
register_sidebar(array(‘name’ => ‘フッター１’));
register_sidebar(array(‘name’ => ‘フッター２’));
・そうすると、WordPressの管理画面、外観、ウィジェットに、「フッター１」と「フッター２」が表示されます。
・応用例として、フッター以外の場所用途のウィジェットを追加することも出来ます。
・表示したいウィジェットを追加します。
・親テーマのフォルダ内にあるfooter.phpを小テーマのフォルダ内にコピーします。コピーせず、親テーマのファイルを直接編集しても構いません。
※footer.phpはフッタ部分の表示を記述していますので、小テーマとはいえ、差分のみ記述すれば良いというわけではなく、親テーマの同ファイルと完全に置き換わる形式となります。従い、親テーマから小テーマにコピーした後、小テーマの同ファイルを編集する必要があります。
・footer.php内で、ウィジェットを表示したい部分に、CSSで指定するID/クラス情報とともに、表示する関数を配置します。
<div class=”footer_widget”>
<ul><?php dynamic_sidebar(‘フッター１’); ?></ul>
<ul><?php dynamic_sidebar(‘フッター２’); ?></ul>
</div>
・フッタ(footer.php)以外のファイルに、ウィジェットを追加したい場合は、追加したいファイルの表示したい場所に、上記と同様な記述を追加します。
カスタマイズ方法(3)style.cssの編集
・小テーマ内に準備したstyle.cssにおいて、上記footer.phpに相当する、ID/クラスのレイアウトなどを定義します。今回はフッター１とフッタ２が横に並び、各幅が300pxとなるように定義しました。
・これで準備完了です。
・仮に、フッター以外の場所にウィジェットを追加した際は、該当箇所のCSSを整形します。
#footer .footer_widget ul {
float:left;
width: 300px;
padding: 10px;
}
カスタマイズ方法(1)〜(3)に記載した内容のスクリーンショットを以下に表示しておきます
フッター表示例
カスタマイズ前
カスタマイズ後
備考
フッターのレイアウトを凝ったもの(整然としたもの)にしおようとすると、各プラグインのCSS等もカスタマイズが必要かもしれません。
この方法は、フッター以外の場所にもそのまま応用できますので、良し悪しはともかく、どんな場所(ヘッダでも記事上、記事下でも)にでもウィジェットを追加することが出来ます。
お疲れ様でした。
