WordPress 複数カラムテーマのウィジェット対応の注意点

2010-4-12 07:20
このエントリーをはてなブックマークに追加

このサイトでは独自の WordPress テーマを使っています。WP ME 2.1 時代のクラシックテーマを元に、標準的な HTML +CSS 対応や SEO の強化などを行なったものですが、そのまま使い続けていたためウィジェット対応もしていませんでした。

いまさらながらウィジェット対応をしたので、その時の方法のメモを書いておきます。この方法でウィジェット非対応のテーマの改造などもできると思います。

やるべきことはほとんどWidgetizing Themes – WordPress Codex 日本語版に書かれているのですが、そのままでは通らない部分もありましたのでこの記事にまとめています。

sidebar.php の変更

このサイトのテーマは最近3カラムに変更し、サイドバーが2つありますので、dynamic_sidebar 関数を引数付きで2回呼び出すようにします。引数には div 要素の id を指定します。

<div id="sidebar">

<div id="menu1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('menu1') : ?>
~(中略)~
<?php endif; ?>
</div>

<div id="menu2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('menu2') : ?>
~(中略)~
<?php endif; ?>
</div>

</div>

functions.phpの追加

古いテーマなのでそもそも functions.php が存在しないので追加します。サイドバーが2つなので、register_sidebars 関数を呼び出せばよさそうです。

しかし、WordPress 2.9.x の register_sidebars 関数にはバグがあり、サイドバーの id が sidebar-n という命名規則でないと実質利用できません。関数リファレンスを参考に

register_sidebars(2, array(
        'name'       => sprintf(__('Sidebar %d'), $i ),
	'id'            => 'hoge$i',
	……

などとしてもウィジェットの設定画面には1つしかウィジェットが現われず、さらに id も $ が処理されず hoge$i そのままとなってしまいます。

このバグは trunk では修正されていますが、それでも命名規則が foobar-n のようにハイフンが付いている形式でしか利用できないようですし、引数に $i をつけてもそのまま出力されてしまいます。

そこで register_sidebar 関数を2度呼んで回避するようにします。(WordPress 3.0 が出てもテーマを 2.9.2 以前にも対応させたい場合はこの方法を採らざるを得ません。)

また、一般的な WordPress のテーマでは、サイドバーは番号無しリスト(ul 要素)の入れ子になっていることが多いですが、このテーマでは異なっています。また、サイドバー部分に使われている各項目のタイトルは h2 要素ではなく h3 要素としています。そのため、register_sidebar の引数を次のようにしました。

<?php
if ( function_exists('register_sidebar') )
    $widget_config_base = array(
        'before_widget' => '<div class="menuitem" id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
	);
    register_sidebar(array(
        'name'          => __('Sidebar') . ' 1',
		'id'            => 'menu1',
    )+$widget_config_base);
    register_sidebar(array(
        'name'          => __('Sidebar') . ' 2',
		'id'            => 'menu2',
    )+$widget_config_base);
?>

$widget_config_base の部分の記述については S.Satoshiのブログ – wordpressのウィジェット複数指定をする時に使える良い感じの書き方を参考にしています。

あとはウィジェットを実際に配置するだけですが、ブログペットやアドセンスなどは専用のウィジェットがありませんので「テキスト」ウィジェットを使い JavaScript のコードを貼り付けます。

この「テキスト」ウィジェットには PHP のコードを書いても実行されません。条件によって表示するかどうかを制御などをしたい場合は PHP Code Widget を入れて使いましょう。

コメントはまだありません

No comments yet.

Sorry, the comment form is closed at this time.

70 queries. HTML convert time: 1.232 sec. Powered by WordPress. Valid XHTML
Copyright © 2003-2017 @ futuremix.org ログイン