WordPress テーマをウィジェットに対応する

ウィジェットは今や WordPress の標準機能です。テーマは古い形式のサイドバーをサポートしながら、ウィジェットをサポートされるようにしましょう。

まず、サイドバーに ul タグを使用しているかどうか確認しましょう。もし確認できないようでしたら、WordPress フォーラムや掲示板などで確認方法を聞いてみてください。ここでは確認方法を掲載していません。

次のコードはよくあるサイドバーの例です。

<ul id="sidebar">
	<li id="about">
		<h2>About</h2>
		<p>This is my blog.</p>
	</li>
	<li id="links">
		<h2>Links</h2>
		<ul>
			<li><a href="http://example.com">Example</a></li>
		</ul>
	</li>
</ul>

サイドバー全体が ul タグでできていて、タイトルが h2 タグになっていることに注意してください。すべてのテーマがこのようになっている訳ではありませんし、このようになっている必要もありません。しかし、私たちが調査したテーマでは、最近のほとんどの一般的なサイドバーはこのようになっています。id=”links” という属性がついているエレメントが基本的な1つのウィジェットに該当します。

Widget API はテンプレートタグのようにテンプレート内で使える簡単な関数を提供しています。これらの関数を使うことで WordPress がテーマ内の古いタイプのサイドバーを動的なウィジェットを使用したサイドバーに置き換えます。

次のコードは先ほどのコードと同じ内容で、サイドバーをウィジェット対応した基本的な例です。

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
	<li id="about">
		<h2>About</h2>
		<p>This is my blog.</p>
	</li>
	<li id="links">
		<h2>Links</h2>
		<ul>
			<li><a href="http://example.com">Example</a></li>
		</ul>
	</li>
<?php endif; ?>
</ul>

わかりますか？先ほどのコードに2行追加しただけで、ヴィジェットに対応したサイドバーが表示されます。管理画面ですべてのウィジェットを削除すると、古いサイドバーが表示されます。

次に functions.php を修正します。もし、WordPress 2.0 以上を使用していれば、テーマフォルダ (ディレクトリ) にある functions.php を変更することでも修正できます。

functions.php がない場合は、functions.php ファイルを新しく作成してください。functions.php ファイルに次のコードを追加してください。(ファイルの最初や最後に空行がないようにしてください。)

<?php
if ( function_exists('register_sidebar') ) register_sidebar();
?>

このコードは、テーマを使用する場合は必ず1つ以上のウィジェットを使うように限定します。ウィジェットがひとつもない場合は、ウィジェット追加ページに移動します。サイドバー1のボックスにウィジェットを追加して保存すると、テーマが選択されます。

サイドバーが ul タグになっていない場合

サイドバーが ul タグを使用していない場合は、パラメーター (引数) を使用して出力する形式を指示します。

元のコードが次のような場合、

<div id="sidebar">
	<div class="title">About</div>
	<p>This is my blog.</p>
	<div class="title">Links</div>
	<ul>
		<li><a href="http://example.com">Example</a></li>
	</ul>
</div>

上のコードのような場合、ウィジェットが li タグになっていると問題があります。次にウィジェットのタイトルが h2 タグの代わりに div タグになってしまっています。通常は li/li/h2 タグを使用するようになっていますが、function.php に次のコードを入れることで、この問題に対応することができます。

<?php
if ( function_exists('register_sidebar') )
	register_sidebar(array(
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '<div class="title">',
		'after_title' => '</div>',
	));
?>

そして、sidebar.php を次のように修正することでウィジェットに対応できます。

<div id="sidebar">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<div class="title">About</div>
<p>This is my blog.</p>
<div class="title">Links</div>
<ul>
	<li><a href="http://example.com">Example</a></li>
</ul>
<?php endif; ?>
</div>

さらに、before_widget では id や class を指定するために、sprintf のディレイブである %1$s や %2$s を使うことができます。id はウィジェットのタイトルをサニタイズした文字が入ります。(id が重複しないよう注意が必要です。) class はウィジェットのコールバックになります。id や class を指定することで、それぞれのウィジェットが固有の id を持ったり、class を持つことができます。

次のコードにすれば、テーマにより自由度を持たせることができます。

'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',

HTML は良くなったけど、ブラウザの表示が汚い場合

CSS を使ってください。

複数のサイドバーをすべてウィジェット対応にする場合

register_sidebar(n) の n にサイドバーの番号を入れてください。n は1から始まります。n に数字ではなく文字を指定することもできますが、他のテーマとの互換が難しくなります。