[WordPress]フッター(フッタ以外にも応用可能)にウィジェットを追加する方法 #WordPress

  • スポンサーリンク

  • スポンサーリンク

WordPressでフッターにウィジェットを追加する方法

概要

WordPressのテーマでは、サイドバーのウィジェットにはほぼ対応しているが、フッターについては、対応していないものも多い。現在扱っている、BizVektorも標準では対応していない(と思われる)ので、今回、自力で追加してみました。その方法をまとめておきます。

前提

・本投稿では、小テーマを作成し、カスタマイズすることを前提としていますが、小テーマを使用しなくても、同様の考え方で親テーマを直接編集することも可能です。
 ※小テーマについては、こちらの投稿;[WordPress]小テーマを有効に使う #WordPressを参考にして下さい。
・フッターウィジェットは2領域追加するものとします。
・スクリーンショットは、BizVektorで適用した場合の例を示しています。
・フッター以外の場所にも応用可能です。

カスタマイズ方法(1)functions.phpの編集

・小テーマのフォルダ内に準備した(もしくは新規作成した)、functions.phpにフッターウイジェットの関数を追加します。親テーマを直接編集しても構いません。
※小テーマのfunctions.phpに記述した各関数は親テーマの各関数に追加される形式ですので、style.cssのように、親テーマのfunctions.phpをインクルードする必要はありません。追加する関数のみ記載します。

/* フッターウィジェットを追加 */
register_sidebar(array(‘name’ => ‘フッター1’));
register_sidebar(array(‘name’ => ‘フッター2’));

・そうすると、WordPressの管理画面、外観、ウィジェットに、「フッター1」と「フッター2」が表示されます。
・応用例として、フッター以外の場所用途のウィジェットを追加することも出来ます。
・表示したいウィジェットを追加します。

カスタマイズ方法(2)footer.phpの編集

・親テーマのフォルダ内にあるfooter.phpを小テーマのフォルダ内にコピーします。コピーせず、親テーマのファイルを直接編集しても構いません。
 ※footer.phpはフッタ部分の表示を記述していますので、小テーマとはいえ、差分のみ記述すれば良いというわけではなく、親テーマの同ファイルと完全に置き換わる形式となります。従い、親テーマから小テーマにコピーした後、小テーマの同ファイルを編集する必要があります。

・footer.php内で、ウィジェットを表示したい部分に、CSSで指定するID/クラス情報とともに、表示する関数を配置します。

<div class=”footer_widget”>
 <ul><?php dynamic_sidebar(‘フッター1’); ?></ul>
 <ul><?php dynamic_sidebar(‘フッター2’); ?></ul>
</div>

・フッタ(footer.php)以外のファイルに、ウィジェットを追加したい場合は、追加したいファイルの表示したい場所に、上記と同様な記述を追加します。

カスタマイズ方法(3)style.cssの編集

・小テーマ内に準備したstyle.cssにおいて、上記footer.phpに相当する、ID/クラスのレイアウトなどを定義します。今回はフッター1とフッタ2が横に並び、各幅が300pxとなるように定義しました。
・これで準備完了です。
・仮に、フッター以外の場所にウィジェットを追加した際は、該当箇所のCSSを整形します。

#footer .footer_widget ul {
 float:left;
 width: 300px;
 padding: 10px;
}

カスタマイズ方法(1)〜(3)に記載した内容のスクリーンショットを以下に表示しておきます

フッター作成方法

フッター表示例

カスタマイズ前

スクリーンショット 2014-09-25 22.09.55

カスタマイズ後

スクリーンショット 2014-09-25 22.20.12

備考

フッターのレイアウトを凝ったもの(整然としたもの)にしおようとすると、各プラグインのCSS等もカスタマイズが必要かもしれません。
この方法は、フッター以外の場所にもそのまま応用できますので、良し悪しはともかく、どんな場所(ヘッダでも記事上、記事下でも)にでもウィジェットを追加することが出来ます。
お疲れ様でした。


  • スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA