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> タグを使用していない場合は、パラメーター(引数)を使用して出力する形式を指示します。

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

<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 class=”title”> タグになってしまっています。通常は 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 に数字ではなく文字を指定することもできますが、他のテーマとの互換が難しくなります。