サイドバーウィジェットを増やすWordPressカスタマイズ方法

WordPress のカスタマイズに役立つ、サイドバーウィジェットの追加方法をメモしておきます。ウィジェットを追加してレイアウトを整えれば、カスタマイズの自由度は飛躍的に高まります。
例えば・・・
ヘッダーとコンテンツの間に、ウィジェットで管理できるスペースを設置したり
ヘッダー下・コンテンツ上にウィジェット
３カラム用のサイドバーウィジェットを用意したり
３カラム用ウィジェット
幅の違うウィジェットをサイドバーに設置したり
サイドバーウィジェットを２列
ウィジェットを使えば、ダッシュボードのウィジェット管理画面からいつでも自由に好きなようにコンテンツを入れ替えることができるので非常に便利です。
この部分にあったらいいな〜というコンテンツを自由に追加できます。もちろん、テンプレートに直接 HTML で書き込んでも OK ですが、作業が面倒だと思います。それよりも WordPress の管理画面から変更できた方が便利だと思いませんか？
ウィジェットを好きなように追加・配置できれば、こういったことが可能になります。

WordPressに新規でウィジェットを追加する

ウィジェットの追加はとても簡単です。決まったコードを追記するだけ。それを表示するのも簡単。以下詳しく見ていきます。

(1) ウィジェット用のコードを追加

さて、本題に入って行きます。使用しているテンプレートは WordPress のデフォルトテンプレートとしておなじみの Twenty Eleven です。が、基本的に WordPress 全てのテンプレートに共通する内容です。
ウィジェットを追加するには、【functions.php】に、以下を追記してください（※functions.php をカスタマイズする場合は子テーマの作成をオススメします）。

【注意】functoins.phpをWordPressの子テーマに追加する場合

register_sidebar( array(
	'name' => __( 'サブサイドバー', 'twentyeleven' ),
	'id' => 'sidebar-6',
	'description' => __( '新規で追加したウィジェットです', 'twentyeleven' ),
	'before_widget' => '<aside id="%1$s" class="widget %2$s">',
	'after_widget' => '</aside>',
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
) );

id を【sidebar-6】、つまり 6 番目としているのは、Twenty Eleven の場合すでにデフォルトで 5 つのウィジェットが設定されているからです。新たに追加すると 6 番目になるわけです。
もちろん、名称は任意で決めてもらって大丈夫です。
また、【name】の部分は管理画面上に表示されるので、分りやすく日本語やカタカナで OK です。
これで新しいウィジェットが追加されました。管理画面のウィジェットを見てみると、追加した項目が表示されていると思います。

Twenty Eleven 以外のテーマを使用している場合のウィジェット追加方法は？

上記のコードで基本的にはウィジェットを追加できますが、細かい点はコピペでは印象が悪い気がします。例えば、、、name の部分に ‘twentyeleven’ と入っていたり、、、before_title に <h3> が指定されていたり。
これらの指定はテーマによって異なりますので、今使用しているテーマの functions.php を開いて【register_sidebar】と検索をしてみてください。ウィジェットに関するコードが見つかるはずです。ここの記述を子テーマの functions.php にコピペし【name】や【id】の部分を任意の値に変更すれば、テーマに合ったウィジェットを追加できるはずです。

(2) ウィジェットのコードをテーマに追記して表示させる

続いて【sidebar.php】など、ウィジェットを追加したいテーマファイルを子テーマにコピーして、以下のコードを追記します。


		<?php endif; // end sidebar widget area ?>
	</div><!-- #secondary .widget-area -->


	<div id="tertiary" class="widget-area" role="complementary">
    		<?php dynamic_sidebar( 'sidebar-6' ); ?>
	</div><!-- #tertiary .widget-area -->

<?php endif; ?>

Twenty Eleven の場合、メインサイドバーに対しての id が secondary（第２）となってますので、第３ということで tertiary としています。ちなみに 4 番目は quaternary、5 番目は quinary です。
これでサイドバーに新しいウィジェットエリアが追加されました。

他のウィジェットと同じように使用することができます。後はレイアウトを好きなように整えればいいのですが、これは CSS のカスタマイズになります。

Twenty Elevenのサイドバーに関する仕組みについて

ここで、Twenty Eleven のサイドバーについてまとめておきたいと思います。どのテンプレートファイルが、どこに反映されて、CSS ではどのように指定されているのか・・・？？　このようなことが分ってもらえると思います。
Twenty Eleven は 2 カラムのテンプレートです。デフォルトでは 5 つのウィジェットが用意されています。その内、1 つはサイドバー用、1 つはショーケーステンプレートのサイドバー用、残りの 3 つはフッターに表示されるサイドバー用です。
また、CSS に関しては以下のように指定されています。

ウィジェット１：メインサイドバー（#secondary）
ウィジェット２：ショーケースサイドバー（.widget-area）
ウィジェット３：フッターエリア１（#supplementary #first）
ウィジェット４：フッターエリア２（#supplementary #second）
ウィジェット５：フッターエリア３（#supplementary #third）

※フッターエリアのスタイルは全て #supplementary で指定されており、#first〜#third は使われていません。
基本的なテンプレートの構造は、ヘッダーから始まり、コンテンツ部分が来て、サイドバーを吐き出し、最後にフッターを吐き出す、という流れになっています。つまり、CSS でレイアウトなどを一切指定しなかった場合、以下のように上から順番に表示されるようになっているということです。
CSSの指定が無いTwenty Eleven
Twenty Eleven の場合、いくつかのテンプレートがあり、サイドバーに関しては右サイドバーと左サイドバーの両方を選択できるようになっています。これは、要するにサイドバーを【float】で右に回り込ませるか、左に回り込ませるかの違いです。コンテンツの幅を狭めて、回り込ませるスペースをつくり、サイドバーが横に並ぶように CSS でレイアウトを指定しているわけですね。
Twenty Elevenのレイアウト
そのため、コンテンツの幅をちょっと広げると、サイドバーは回り込むスペースを奪われ、コンテンツの下に位置するようになってしまいます（理屈を把握するためにも、試してみてください）。

ウィジェットのレイアウトを整える

追加したウィジェットは CSS を使ってレイアウトを整えることができます。これによって、3 カラムに構成にしたりコンテンツ部分にウィジェットを表示させたり、結構自由な使い方ができるようになります。
具体的なカスタマイズ方法は、別途詳しくまとめたいと思います。
基本的には、各ウィジェットに id を指定してしているので、その id に対して float や width や margin などを調節すればいいだけです。
例えば先ほどの例で言うと、Twenty Eleven に追加した 3 つ目のウィジェットは【id=”tertiary”】にしました。このウィジェットのレイアウトを調節する場合は【tertiary】で指定してあげれば OK というわけです。
Firefox などのブラウザの拡張機能である Firefbug などを使って、レイアウトを確認しながら調節していけば、そんなに難しくないと思います。
ぜひ挑戦してみてください。