- サイトデザイン工事中です。ご意見をお寄せください。
- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。（詳細）
Widgetizing Themes
この項目「Widgetizing Themes」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。
目次 |
テーマを作成して公開していますが、テーマを更新してほしいとのメールを受け取りました。これはどういうことですか ?
別の人のテーマに切り替えるより、あなたにコンタクトを取った方がいいと思うほどあなたのテーマを気に入ってくれているということなので喜んでください。ユーザーをハッピーにしてるんですよ！もしそれが恐ろしいなら、ゴメンナサイ。私たちよりあなたの方が困ってるんですよね。どうかご自分のテーマを修正してください。ウィジェットはもはや WordPress の標準的なパーツなので、なるべく多くの人に自分のテーマを使ってほしいなら、以前のスタイルのようなサイドバーとともにウィジェットもサポートするべきです。
なるほど。ではどうやって修正するのですか ?
まず、「自分のテーマについて知ってるのか ? サイドバーに順序なしリストを使用しているのか ?」を自分に聞いてみてください。 (もし答えることができないなら、この作業には大きな助けが必要です。それはつまり、誰かに大金を払って助けてもらうか、フォーラムのものすごく優しい人にお願いすることを通常は意味します。HTML を学ぶことができればもっとよいのですが、ここでは教えることはできません)
以下はサイドバーのマークアップの良い例です:
<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>
サイドバー全体が順序なしリストでタイトルがタグで囲まれていることに注目してください。すべてのテーマがこのように作られているわけではなく、こうようにする必要があるわけでもありませんが、調査したところ、このサイドバーのマークアップが現在最も一般的なので採用しました。 id=”links” を持つ要素が基本的にひとつのウィジェットに相当します。
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 行をテンプレートに追加しただけで、利用可能であれば動的サイドバーを表示し、利用できなければ以前のサイドバーを表示します。管理画面でサイドバーからすべてのウィジェットを取り除くと以前のサイドバーが表示されます。
もうひとつテーマを修正する必要があります。WordPress 2.0 以上をお使いなら、テーマディレクトリの functions.php にこの修正を施してください。
次は functions.php がまだないテーマ用の例です (ファイルの最初や最後に空の行を入れないでください):
<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>
たった 4 行です。このコードはテーマがひとつだけの動的サイドバーを必要としていることをプラグインに伝えます。この時点で、管理画面のテーマ（バージョンによっては「外観」、「表示」）に「サイドバーウィジェット」の項目が追加されているはずです。WordPress 2.5 以前では、ウィジェットの管理画面で左側のパレットからいくつかのウィジェットをサイドバー 1 と表示されたボックスにドラッグし、保存してみてください。WordPress 2.5 以降では、各ウィジェット「追加」リンクをクリックすると実際にサイドバー表示されるウィジェットが右側に追加されます。動作してますか ? それはよかった。
私のテーマのサイドバーはリストでマークアップされていません。どうすればいいですか ?
そのことは聞かれると思っていました。まず、サイドバーのデザインパターンを見つけなくてはなりません。そしていくつか追加のパラメータを使用し、どのようにフォーマットすればそのテーマと使用できるようになるかプラグインに伝えます。次に例をあげましょう。
オリジナルのマークアップです:
<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>
このようなマークアップを見たことがあると思います。サイドバーのデザインパターンとしては2番目に多いもので、そのためこの例に選びました。最初の違いはサイドバーが <ul> タグに囲まれていないことです。これはつまり、ウィジェットを <ul> タグで囲ってはいけないということです。2つ目の違いはタイトルが <div class=”title”> instead of <h2> タグで囲まれているということです。
マークアップを標準の ul/li/h2 へ変更する方が望ましいのですが、この API はじゅうぶん強力なのでかならずしも変更が必要なわけではありません。その代わりに 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>
以上です。これであなたの HTML マークアップは解決されました。
えーっと、実はほとんど解決されたというべきですね。デフォルトの before_widget は <li> にもう少し追加されています。id と class を含んでいるのです。えーなんというか、しかしこれは複雑になります。デフォルトの before_widget には sprintf ディレクティブの %1$s と %2$s が含まれていて、これがそれぞれ id と class に置き換わります。id はウィジェット名をサニタイズして生成され (なのでウィジェットの命名には気を付けてください。同一 HTML ドキュメント内で id を重複させたくはないでしょうから !)、class はウィジェットのコールバックから生成されます。これにより例えばすべてのテキストウィジェットや RSS ウィジェットが一意の id と似たような class を持つことができるのです。またさらに、各ウィジェットには “widget” class もあります。
なので、もしテーマをもっと柔軟にしたいのなら上記の空の文字列の代わりに次を使用してください:
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
これであなたの HTML マークアップが本当に解決しました。
HTML は問題なさそうに見えるのですがブラウザではひどく見えます !
ええ、これは起こりうると思ってました。そのテーマはおそらくウィジェットができる前に作られたもので、その作者はサイドバーで新しいマークアップを扱えるほど柔軟なスタイルシートの作り方を知らなかったのでしょう。CSS をいくらか知っているのならスタイルシートの最後に新しいルールをいくつか加えてこの問題を解決することができます。ブログのマークアップで、スタイルを修正したい各ウィジェットに属しているでセレクター (id と/もしくは class) を調べてください。
もし CSS がまったく分からないのなら、残念ながら私たちではどうしようもありません。助けてあげたいのはやまやまなのですが、テーマは非常にバリエーションがあるので不可能です。テーマ作者に連絡をとり、ウィジェットに対応するようにお願いしてみてください。
検索ウィジェットが醜いです。テーマ付属の検索ボックスをウィジェットとして使用したいです。
ウィジェットは CSS を設定できるので入念なスタイルを施せます。とはいえ、そのマークアップが気に入らない場合もあるでしょう。多くのテーマでは、検索やメタなどの基本ウィジェットを置き換える独自のウィジェットが提供されればより良い外観になるでしょう。通常は、sidebar.php から既存のマークアップを functions.php の新しいウィジェットにコピーするのが一番いいでしょう。そして登録関数を使用して標準のウィジェットとカスタムなウィジェットを置き換えます。
テーマサイドバーのどの部分、あるいはすべてでこれを行なうことができます。以下に例を示します:
function widget_mytheme_search() {
?>
<<検索フォームをここに入れる >>
<?php
}
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget(__('Search'), 'widget_mytheme_search');
テーマに複数のサイドバーがあります。すべてを動的にするにはどうすればいいですか？
ああ、これは簡単です。register_sidebar() の代わりに register_sidebars(n) を使用してください。n はサイドバーの数です。そして 1 から始まる適切な数字を dynamic_sidebar() 関数にいれます。(こうした関数の使い方は他にもいくつかあります。API を参照してください)
数字ではなくサイドバー名を与えることもできます。各テーマ用に保存した別々のセットをメンテナンスできます。プラグインについてもっと知りたければ API をお読みください。
関連
ウィジェット API: is_active_sidebar, register_sidebars, register_sidebar, unregister_sidebar, is_dynamic_sidebar, dynamic_sidebar, register_sidebar_widget, unregister_sidebar_widget, wp_register_sidebar_widget, wp_unregister_sidebar_widget, wp_get_sidebars_widgets, wp_set_sidebars_widgets, is_active_widget, the_widget, register_widget, unregister_widget, register_widget_control, unregister_widget_control, wp_register_widget_control, wp_unregister_widget_control, wp_convert_widget_settings, wp_get_widget_defaults, wp_widget_description
