WordPressのテーマ、wp.Vicunaをウィジェット (widget)追加に対応させた

当ブログで使用しているWordPressテーマ『wp.Vicuna』は、デザイン性が高く且つXHTML1.0 Strict DT準拠やSEOにも考慮した素晴らしいテーマなんだけど、残念ながらサイドバーウィジェット（widget）に対応していないんだよね。

ウィジェット対応などカスタマイズ性を向上させた別テーマ『wp.Vicuna Ext.』なんてのもあるんだけど、これからExtに乗り換えるのはちょっと大変。そんなワケでwp.Vicunaのサイドバーをウィジェット (widget)追加に対応させてみたので、手順をメモっておきます。

やること

サイドバーのウィジェット対応については「Widgetizing Themes - WordPress Codex 日本語版」に書いてあるんだけど、英語を日本語訳したまどろっこしい文章で理解するのに時間が掛かりました。

で、ガッとまとめるとやることは2つだけです。

1. sidebar.phpでdynamic_sidebar関数を呼び出し、ウィジェットを表示させる。
2. functions.phpでregister_sidebar関数を呼び出し、ウィジェットの表示形式を定義する。

以降、詳しい手順について説明していきます。

sidebar.phpの編集作業

ウィジェットを表示させたい場所に以下の行を挿入します。ウチのサイトでは「<dl class="navi">」の直後に追加しています。

この内容を日本語で言うと「もしdynamic_sidebar関数が用意されていたら、dynamic_sidebar関数を実行してね」になります。

WordPress Codexでは「既存のサイドバー」と「サイドバーウィジェット群」のどちらかしか表示しないようにしていますが、ウィジェットって突っ込んだカスタマイズが出来なくて使いにくいんだよね。用意されたモノを使うだけならお手軽で良いんだけど、おいらは基本的に自分でコードを書いて細部までカスタマイズしたい。

だからウィジットを表示させつつ、自前のサイドバーも表示するようにしました。この方法だと自前サイドバーとウィジェットで表示内容が被ることがあるけど、その場合はsidebar.phpの該当箇所を増減させて対応してください。

functions.phpの編集作業

functions.phpの良い感じの場所に以下の内容を記述して、ウィジェットの表示形式を定義します。うちでは「load_textdomain云々」書いてある下あたりに書きました。

注意：なぜか「<」が正しく表示されないので、日本語の「＜」を使用しています。4箇所ある「＜」を、自分で「<」に書き換えてください。

このあたりがウィジェット対応のキモかな。register_sidebar関数の詳細は『WordPress Widgets Api/register sidebar « WordPress Codex』に英語で書いてある。これを超訳すると各ウィジェットの前後に入れるHTMLコード類を定義しろってこと。

で、Vicunaのサイドバーは「dl,dt,dd」を使った定義リスト表示を行っているので、ウィジェットの表示もそれに併せています。register_sidebar関数に渡してる値は、変数名を見ればなんとなく想像付くでしょ？要は「タイトルの前後に何て書く？」とか「ウィジェットの前後に何て書く？」ってのを渡して上げれば良いだけね。

ちなみにfunctions.phpってのはプラグイン用の関数群みたいなモンで、WordPressのロード時に呼び出されるらしいよ。

実際にウィジェットを表示させてみる

管理画面→外観→ウィジェットを開いて、使いたいウィジェットを追加してください。必要なウィジェットを追加しおわったら「変更を保存」ボタンを押すことを忘れずに。

最後に実際にサイドバーを表示させて、思ったように表示されているか確認してください。なんかダブったり表示が崩れたりするかも知れないけど、sidebar.phpやCSSを調整すればきっとうまく行くと思うよ！