WordPressウィジェットをフッターに表示する方法

WordPressのウィジェット、便利ですよね。管理画面でぐりぐりとドラッグ&ドロップで設定出来ます。ウィジェットはサイドバーに表示するもの。と思い込んでいませんか?フッターに表示する方法を見つけたのでシェアします。

1.functions.phpを修正

まずは、管理画面に好きなだけサイドバーグループを追加してしまいましょう。普通ならウィジェット管理画面にはお使いのテーマのサイドバーの数だけしかサイドバー設定が出来なくなってますよね。このブログのテーマなら右サイドバーがひとつなので、ひとつだけ。

image
↑右側の「サイドバー1」だけ。

ここにサイドバーグループ(「グループ」としたのは便宜上であり、私の言い回しです)を追加するにはお使いのテーマディレクトリ配下にあるfunctions.phpをいじればいいようです。

私のテーマなら元はこんな風でした。

[php]
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<!–sidebox start –><div id="%1$s" class="dbx-box %2$s">’,
‘after_widget’ => ‘</div></div><!–sidebox end –>’,
‘before_title’ => ‘<h3 class="dbx-handle">’,
‘after_title’ => ‘</h3><div class="dbx-content">’,
));
?>
[/php]

これをこんな風に変えます。

[php]
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<!–sidebox start –><div id="%1$s" class="dbx-box %2$s">’,
‘after_widget’ => ‘</div></div><!–sidebox end –>’,
‘before_title’ => ‘<h3 class="dbx-handle">’,
‘after_title’ => ‘</h3><div class="dbx-content">’,
));
/* Takamorry Start */
register_sidebar(array(‘name’=>’subfooterleft’));
register_sidebar(array(‘name’=>’subfootercenter’));
register_sidebar(array(‘name’=>’subfooterright’));
/* Takamorry end */
?>
[/php]

dynamic_sidebar()に指定するサイドバーグループ名はfunctions.phpで追加したものと同じにします。この例ではフッターに3カラムのサイドバーを追加するようにしています。cssのidやclassはご自分のテーマに合わせてください。実は私にとってはこれが面倒だった。どうもcssはロジックじゃないので馴染めないのですよねぇ。勉強しないとなぁ。

これでフッターにウィジェットを表示する準備が出来ました。

3.ウィジェットの編集

あとは、WordPress管理画面の「外観―ウィジェット」で、好きなウィジェットをサイドバーと同じようにドラッグ&ドロップしたりするだけ。

image

↑subfooterウィジェットにパーツを追加していきます。

4.テスト

表示してみて思い通りにウィジェットが表示されていたら出来上がり。

image

↑フッターにウィジェットが表示された!

ちなみにcssの微調整にはこのFIrefoxプラグインが鉄板ですよね。これなしでは私にはcssいじりは無理。

■Firebug :: Add-ons for Firefox

5.まとめ

ということで、調子に乗ってサイドバーにブログパーツをバコバコ貼ってると長ったらしいサイトになってたのが気に入らなかったのですが、これで少しはスッキリしたでしょうか。

何といっても便利なウィジェット管理画面でサクサクいじれるのが便利ですよ。お試し下さい。

↓最近出たこの本、オススメです。
PHPによるWordPressカスタマイズブック―2.8対応 テンプレートの改造からプラグインの作成まで (単行本)
4883376745

コメント

  1. 本田ゆみ より:

    Currently reading WordPressウィジェットをフッターに表示する方法 | 本質思考道場 at: https://takamorry.com/article/20090917_wordpress_footer_widget.html

  2. […]  参考にさせていただいたページ→WordPressウィジェットをフッターに表示する方法 […]

  3. […] WordPressウィジェットをフッターに表示する方法 | 本質思考道場 […]

タイトルとURLをコピーしました