WordPress講座(個別相談)

WordPressでシンプルなテーマを使っているとフッターがウィジェット対応ではないこともあります。必ずしも必要ではありませんが、フッターでウィジェットを使えると各種パーツを組み込めるので便利です。

そこで、ここではStinger5を例に、フッターにウィジェットを追加する方法を紹介します。仕上がりのイメージは次のようになります。4列構成ですが3列などにもできます。

4列構成のフッターウィジェットの完成イメージ

4列構成のフッターウィジェットの完成イメージ

検証したバージョンはstinger5ver20150505bですが、他のテーマでも考え方は同じです。自由にお試しください。

スポンサーリンク

フッターウィジェットを使用可能に

「外観」-「ウィジェット」メニューに「サイドバー1」などのウィジェットエリアを追加するにはregister_sidebarまたはregister_sidebarsという命令を使います。ほとんどのテーマでfunctions.phpを見ると、この命令が使われているので、新たなウィジェットを追加するときの参考にできます。

Stinger5のfunctions.phpでもregister_sidebarsを使ってサイドバーウィジェットが定義されているので、参考にしながら次のようなコードを組み立てます。

子テーマのfunctions.phpにコピーペーストしてお使いください。

/* フッターウィジェットの作成 */
add_action('init', 'my_register_sidebar');
function my_register_sidebar() {
    register_sidebars(1,
        array(
        'name'=>'フッターウィジェット1',
        'before_widget' => '<ul><li>',
        'after_widget' => '</li></ul>',
        ));
    register_sidebars(1,
        array(
        'name'=>'フッターウィジェット2',
        'before_widget' => '<ul><li>',
        'after_widget' => '</li></ul>',
        ));
    register_sidebars(1,
        array(
        'name'=>'フッターウィジェット3',
        'before_widget' => '<ul><li>',
        'after_widget' => '</li></ul>',
        ));
    register_sidebars(1,
        array(
        'name'=>'フッターウィジェット4',
        'before_widget' => '<ul><li>',
        'after_widget' => '</li></ul>',
        ));
}

このようにregister_sidebarまたはregister_sidebarsを使えば好きな名前で好きな数だけウィジェットを追加できます。ここでは4つ追加しましたが、3つで十分な場合は「フッターウィジェット4」のregister_sidebarsのブロックを取り除いてください。

register_sidebarsの他に「function」や「add_action」を使っている理由は、これらのウィジェットを最後に追加するためです。普通にregister_sidebarsだけを使ってウィジェットを追加すると、子テーマが先に実行されるため、既存ウィジェットより先に登録されてしまいます。

フッターウィジェットが先に表示される

フッターウィジェットが先に表示される

既存ウィジェットの順番がずれることでテーマに不具合が発生する場合があるので、できれば既存ウィジェットには影響しないように新たなウィジェットは最後に追加した方が無難です。

ここでは、「外観」-「ウィジェット」メニューの最後にフッターウィジェットが追加されます。

既存ウィジェットの後にフッターウィジェットが表示される

既存ウィジェットの後にフッターウィジェットが表示される

これで、「外観」-「ウィジェット」メニューでウィジェットが使用可能になります。テスト用に好きなパーツを追加してみてください。

ウィジェットに好きなパーツを追加

ウィジェットに好きなパーツを追加

ウィジェットの内容を画面に表示する

続いて、作成したウィジェットの内容をフッターあたりに表示しましょう。それには、footer.phpに次のようなコードを入力します。

<div class="footer-block">
<div class="footer-block-in">
<?php dynamic_sidebar('フッターウィジェット1'); ?>
</div>
<div class="footer-block-in">
<?php dynamic_sidebar('フッターウィジェット2'); ?>
</div>
<div class="footer-block-in">
<?php dynamic_sidebar('フッターウィジェット3'); ?>
</div>
<div class="footer-block-in">
<?php dynamic_sidebar('フッターウィジェット4'); ?>
</div>
</div>

このコードをfooter.phpの先頭にある「<footer id="footer">」の次の行に入力しましょう。コードは次のようなイメージになります。

「id="footer"」の下あたりにコードを入力

「id="footer"」の下あたりにコードを入力

これで、ウィジェットの内容が画面に表示されるようになります。サイトを確認すると、フッターウィジェットに追加したパーツが表示されるはずです。ただし、スタイルを設定していないので、デザインは未完成で崩れた状態です。

フッターにウィジェットパーツが表示される(デザインは未完成の状態)

フッターにウィジェットパーツが表示される(デザインは未完成の状態)

フッターウィジェットのスタイルを設定する

最後に、フッターウィジェットのスタイルを設定しましょう。たとえば、次のようなCSSを子テーマのstyle.cssに入力します。

.footer-block-in {
    width: 23%;
    padding: 10px 1%;
    float: left;
}

.footer-block-in > ul {
    padding: 5px;
    list-style-type: none;
    margin-bottom:20px;
}

.footer-block-in > ul ul {
    text-align: left;
    padding: 10px 12px;
    margin-left: 5px;
}

.footer-block:after{
	content: "";
	clear: both;
	display: block;
}

@media (max-width: 770px) {
    .footer-block-in {
        width: 98%;
        padding: 10px 1%;
        float: none;
    }
}

これで、4つのフッターウィジェットが横並びで表示されるようになります。

4列のフッターウィジェットの完成

4列のフッターウィジェットの完成

おおざっぱな仕上げなので、自由にカスタマイズしてください。設置からのサポートをご希望の場合はWordPress個別サポートで承ります。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク