WordPressのサイドバーウィジェットを自作すると、クライアント向けにWordPressを納入する際に色々と便利なので、実際の作り方をなるべく簡単にご紹介します。
ステップ１：WP_Widgetクラスを定義する。
ウィジェットプラグインを作成するには、WP_Widgetというクラスを継承した子クラスを作成する必要があります。
クラスとか継承とか難しそうですが、テンプレートのようなものを用意するだけと思えば簡単です。
以上のソースはウィジェットプラグインを作成するためのテンプレートのようなものです。
とりあえず、このファイルを任意の名前（たとえばmywidget.phpなど）で保存してzip圧縮した後、プラグインのインストール画面からアップロードしましょう。
プラグインを有効にした後でウィジェットの画面に移動すると、以下のような感じで新しいウィジェットが追加されていると思います。
これから実際にウィジェットを自作するわけですが、とりあえず必要なカスタマイズは以下のとおりです。
- 3行目の”My Widget”を任意の名前に変更。この部分がプラグインの名前になります。
- 8行目及び11行目の”MyWidget”を変更。この部分は半角英数またはアンダーバーしか使用できません。また、両方とも同じ文字列である必要があります。
- 18行目の”はじめてのウィジェット”を変更。これが管理画面で表示されるウィジェット名です。
- 14行目の”はじめてのウィジェットです。”を変更。これはウィジェットに関する説明文です。
- 15行目はウィジェットのオプション用フォームの縦横のサイズです。array()とすればデフォルトのサイズが自動的に適用されます。
ここまでの作業で、なにもしないウィジェットが動作するようになります。
実際に、サイドバーにドラッグ＆ドロップできますのでお試しください。
ステップ２：オプションフォームを作成する。
ウィジェットでは以下のようなオプション用のフォームをつくることが可能です。
オプション用のフォームは、form()メソッド内に必要な記述をいれるだけで、多くの処理はWordPressコアが勝手にやってくれます。
今回はテキストをただ表示するだけのシンプルなウィジェットを作りますが、実はそれだけなら以下のようなソースを24〜26行目のform()メソッドと置き換えるだけでフォームの作成から保存する処理までが完了します。
public function form($par) {
// タイトルの入力
$title = (isset($par['title']) && $par['title']) ? $par['title'] : '';
$id = $this->get_field_id('title');
$name = $this->get_field_name('title');
echo 'タイトル：<br />';
echo '<input type="text" id="'.$id.'" name="'.$name.'" value="';
echo trim(htmlentities($title, ENT_QUOTES, 'UTF-8'));
echo '" />';
echo '<br />';
// テキストの入力
$text = (isset($par['text']) && $par['text']) ? $par['text'] : '';
$id = $this->get_field_id('text');
$name = $this->get_field_name('text');
echo 'テキスト：<br />';
echo '<textarea style="width:100%" id="'.$id.'" name="'.$name.'">';
echo trim(htmlentities($par['text'], ENT_QUOTES, 'UTF-8'));
echo '</textarea>';
}
ここでのポイントは以下のとおりです。
- オプションで保存された項目は、form()メソッドの引数に配列（$par）として渡される。
- 各入力項目を区別する名前（この例ではtext）を指定して必要な項目を取得する。
- 各フォーム要素のname属性及びid属性は、get_field_name()及びget_field_id()で取得した値を指定すること。
超簡単にかいつまんで説明すると、titleとかtextを単純に別の文字列（半角英数など）に臨機応変に変えてねということです。
ステップ３：保存した内容を出力する。
保存した内容の出力は、さらに簡単です。
widget()メソッド内で以下のような処理を行うだけです。
public function widget($args, $par) {
echo $args['before_widget'];
echo $args['before_title'];
echo trim(htmlentities($par['title'], ENT_QUOTES, 'UTF-8'));
echo $args['after_title'];
echo trim($par['text']);
echo $args['after_widget'];
}
ここでのポイントは以下のとおりです。
- $argsが含まれる行はそのままでオッケー。むしろ変更しないほうが吉です。
- ウィジェットのタイトルを$args['before_title']と$args['after_title']の間で出力する。
- コンテンツを$args['after_widget']の直前で出力する。必要に応じてdiv要素等で囲むとCSSで扱いやすいと思います。
最後に
このページでのサンプルではいい加減なバリデーションしかしてませんが、WordPressコアには便利なバリデーションがたくさんありますので、ちゃんとやりましょう。
http://codex.wordpress.org/Data_Validation
できあがったウィジェットプラグインは以下のような感じです。
PHPが出来る人には意外と簡単じゃないかなと思うのですがどうでしょう？
