function.php で widget の出力内容を変更するメモ

WordPress 2.5 のデフォルトテーマなどに含まれている function.php はサイドバーの名称が数字で表される上に、なぜか全体を <li> で囲むという仕様になっています。（これはもちろん、sidebar.php が widget 全体を <ul> で囲っているからだが。）別にそれがダメだと言い切るつもりはないけど、イマイチ気持ち悪い感は否めないんです。

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));
}

そこでこの <li> を外して <div> に変更してみました。ついでにCSSで処理しやすいように内側に <div> を追加し（ソコdiv厨とか言わないｗ）さらにきれいに改行して見栄えもよくしてみました（注：2008年4月16日現在の当サイトでは使っていません。別のサイトで採用しています）。

if ( function_exists('register_sidebar') ){
    register_sidebar(array(
        'name' => 'sidebar1',
        'before_widget' => "\\n<div id=\"%1\$s\" class=\"widget %2\$s\">\\n<div class=\"widget-inner\">\\n",
        'after_widget' => "\\n</div>\\n</div>\\n",
    ));
}

参考になるのは次の点

before(after)_title の記述は削除

デフォルトと同じ記述だったら不要なので。もちろん class 名を変更したい場合にはつければＯＫ。

name で名前をつけた

管理画面で表示されます。複数のサイドバーをセットする際に管理しやすいです。

before(after)_widget への代入を”(ダブルクォーテーション)にする

\n(改行のしるし)を活かせるので、出力結果をきれいにフォーマットできます。ただし、中に含まれる”をエスケープする必要があります。

閉じ忘れない

内部的に div を増やしたので閉じ忘れないこと。MT でのCSS作成に慣れた人には、inner class は使い勝手がよいと思います。これの最大のメリットは、最近流行りのビッグフッターをウィジェットで作成するときのコントロールのしやすさだと思うので（横に並べてマージンをとったり、背景画像で装飾したりしやすくなる）。

WP に限らずテンプレートシステムからのアウトプットは汚くなりがち。ソース上の見栄えがちょっとでもきれいになって、それをうれしい、と思う人の参考になれば幸いです。