とりさんのソフト屋さん

WordPress 2.8でウィジェット作成(1) – Hello World

WordPress 2.8でWidget APIが変更になった。自作のRecommendationPageプラグインでウィジェットを使用しているが2.8では動かない（泣）なのでウィジェットAPIの勉強の記録を書いていこうと思う。

基本

Widgets API « WordPress Codexを見てみると、まずは新しく作成されたWP_Widgetクラスを継承し、コンストラクタ、widget、update、formメソッドに処理を記述します。デフォルトの使い方は以下です。(動かなかったので少し変えています。)

//クラス名は任意
class My_Widget extends WP_Widget {
	//コンストラクタ　クラスと同じ名称
	function My_Widget() {
		// ウィジェットの初期設定
	}

	function widget($args, $instance) {
		// ウィジェットのコンテンツ出力
	}

	function update($new_instance, $old_instance) {
		// 保存したときのウィジェットのオプションを処理
		// $new_instanceには入力データが連想配列で引き渡される
		// $old_instanceにはそれまでの保存されていたオプション値が連想配列で引き渡される。
		// 最後に連想配列でオプション値を返す。
	}

	function form($instance) {
		// 管理画面のウィジェットに出力するフォームを記述
		// $instanceには保存したオプションが連想配列で引き渡される。
	}
}
//MyWidgetInit関数
function MyWidgetInit() {
	//ウィジェットのクラス名を登録
	register_widget('My_Widget');
}
//widgets_initアクション時にMyWidgetInit関数を実行
add_action('widgets_init', 'MyWidgetInit');

実行すると以下のようにウィジェット管理画面に何も書かれていないウィジェットが表示されます。この段階ではサイドバーに登録できません。

コンストラクタの作成

コンストラクタでウィジェットの基本設定を行います。

	function My_Widget() {
		// ウィジェットの初期設定
	    $widget_ops = array('classname' => 'widget_test_widget', 'description' => 'このウィジェットの説明' );
	    $control_ops = array('width' => 400, 'height' => 300);
	    $this->WP_Widget('TestWidget', 'ウィジェットタイトル', $widget_ops, $control_ops);
	}

最後の$this->WP_Widgetでウィジェットの情報を登録しています。

第一引数はウィジェットのIDです。他と被らない名称を設定します。変更すると以前のIDのデータを取得出来なくなります。公開前に慎重に決めましょう。

第二引数はウィジェットの表示タイトルです。

第三引数はウィジェットのオプションです。classnameはサイト側のリストに表示されるクラス名です。descriptionはウィジェットの説明で管理画面に表示されます。classnameもCSSを作成する前にきちっと決めましょう。

第四引数はコントロールのオプションです。widthは管理画面のウィジェットを設定する箇所の幅です。250px以上の幅が必要な場合設定します。heightは現在使用されていません。

以下が上のコンストラクタのコードを付け足したときのウィジェット管理画面です。サイドバーに登録できるようになりました。

Hello Worldを出力

widgetメソッドにウィジェットとしてサイトに出力する内容を記述します。

	function widget($args, $instance) {
		// ウィジェットのコンテンツ出力
		echo $args['before_widget']."\n";
		echo $args['before_title'].'Hello World!!'.$args['after_title']."\n";
		echo '<p>Hello World Widget</p>'."\n";
		echo $args['after_widget']."\n";
	}

$argには各テーマのregister_sidebar関数で設定されたパラメータが連想配列で引き渡されます。function.phpでのregister_sidebarの実行コードは以下です。

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>',
	));
}

すると以下のHTMLが出力されます。

<li id="testwidget-3" class="widget widget_test_widget">
<h2 class="widgettitle">Hello World!!</h2>

<p>Hello World Widget</p>
</li>

WP_Widgetの第三引数で指定したclassnameが設定されています。

また以前と違い、初めから複数ウィジェットに対応しidの部分は自動的にナンバリングされています。

続き

WordPress 2.8でウィジェット作成(2) – 簡単なウィジェットを完成させる

参考リンク

Widgets API « WordPress Codex

本家の解説

helloworld.php

今回作ったHelloWorld Widgetプラグイン

default-widgets.php

WordPress2.8の標準のWidgetのソース(カテゴリ、タグ、カレンダウィジェットなどなど)

widgets.php

WordPress2.8のWidgetクラスのソース

とりあえず締め

久しぶりの更新です。

ちょいと疲れたのでこれくらいで次回にします。

次回どう纏めよう。。。

来週から予定していた大きな案件が突然一ヶ月以上スタートが遅れるとの報告。。。これで二度目です。。。始まる前に飢え死にしたりして。。。サイト長いしなぁ。。。（汗

WordPressなどのプラグインのご依頼もお待ちしています。また大きな案件も募集しています。