WordPressでテーマのウィジェット機能を活用する

WordPressには、テーマの管理画面からサイドメニューなどのウィジェットを操作できる機能があります。

HTMLやPHPなどWPソースを調整できない方には、ブラウザを通して管理画面からある程度ウィジェットをカスタマイズできるので便利な機能です。但し、そこから自動生成される各々のウィジェットのHTMLコードは、自由にカスタマイズするには都合が悪く、私の場合はその機能を停止していました。

ここで、Webの世界に入ってある程度CSSでのレイアウト力も身に付きましたし、今一度ウィジェット機能の仕様を見直してみて、活用できないか試してみます。

ウィジェット機能を有効にする

ウィジェット機能が無効の場合、管理画面の「外観」⇒「ウィジェット」にアクセスすると
「ウィジェットは使用できません」
このメッセージが表示されます。

有効にするためには、functions.phpなどに以下を書き込みます。

if(function_exists('register_sidebar')){
	register_sidebar();
}

この状態で管理画面にアクセスすると、ウィジェット機能を利用することができます。

ウィジェットを表示する

ウィジェット機能を有効にするだけでは、ウィジェットは表示されません。
テンプレートの表示する個所に以下を書き込みます。

<?php dynamic_sidebar(); ?>

通常はsidebar.phpなどサイドメニューに設置しますね。
そうすると、管理画面で設定したウィジェットのHTMLコードが出力されます。

コードをカスタマイズする

冒頭でもふれたように、デフォルトのコードは扱いづらく、思うようなデザインに仕上げるのは難しいです。
検索やカテゴリなど各ウィジェットはliタグで囲われており、それぞれの要素にはidやclassが振られていないので、CSSで指定するには限りもあります。
そこで、以下のようにして、機能を有効にする際にタグをカスタマイズします。

if(function_exists('register_sidebar')){
	register_sidebar(array(
			'before_widget' => '<div class="widget %2$s">',
			'after_widget' => "</div>n",
			'before_title' => '<h3>',
			'after_title' => "</h3>n"
		));
}

こちらを簡単に解説すると、

• 各ウィジェットはデフォルトのliタグではなくdivタグで囲われるようになります。
• タイトルがデフォルトでh2タグなのが、h3タグになります。
• divタグのclassにwidgetを設定します。また「%2$s」とすることで、検索ウィジェットには「widget_search」、カテゴリウィジェットには「widget_category」などのクラスが振られます。
• 閉じタグに「n」を挿入することで、ソースをほどよいところで改行して見やすくします。

ここまでできれば、CSSを駆使して好きなようにレイアウトできそうですね。
私ももう少しカスタマイズして、ウィジェット機能をうまく活用したいと思います。

WPに限らず、個人でフレームワークやライブラリなどを何でもかんでもカスタマイズしたい場合、本来コストを削減できるどころか、スクラッチで組むよりもコストが大きくなることがあります。
技術力のある人こそ、コアな部分に手を入れることで力を披露するのではなく、そのツールのルールの範囲内で少ないコストで最大のパフォーマンスを発揮することであってほしいと願うこの頃です。