WordPress のウィジェットを自作してみる（ただし 2.8以降用）

今年は請けた案件はなるべく WordPress を使うという方針にしたので、スキルアップを兼ねて指定された特定カテゴリの一覧を表示するウィジェットを自作してみました。

ウィジェットの作成自体は、WordPress 2.8 以降で追加された WP_Widget クラスを使うと簡単に作成できそうです。

• WordPress ウィジェット API – WordPress Codex 日本語版

上記によると、

1. WP_Widget クラスを継承するサブクラスとしてウィジェットを定義
2. ウィジェットのコンストラクタ、form(), update(), widget() の各メソッドに処理を記述
3. widgets_init フックにウィジェットを登録

という手順でいけそうです。ということで作成してみたのが以下のソースです。

// WP_Widget クラスを継承するサブクラスとして定義
class My_RecentPosts_Widget extends WP_Widget {
	// コンストラクタ
	function My_RecentPosts_Widget() {
		// ウィジェットの初期設定
		$widget_opts = array('classname' => 'my_recent_posts_widget', 'description' => '特定カテゴリの最新の投稿タイトルを表示' );
		$control_opts = array('width' => 200, 'height' => 300);
		$this->WP_Widget('MyRecentPostsWidget', 'My Recent Posts', $widget_opts, $control_opts);
	}
	// 管理画面にフォームを表示する処理
	// $instance : 保存されているオプション値の連想配列
	function form($instance) {
		// 設定が保存されていない場合はデフォルト値を設定
		$instance = wp_parse_args((array)$instance, array('title' => 'Recent Posts', 'number' => 5, 'category' => 1));
		// それぞれの設定値を取得
		$title = strip_tags($instance['title']);	// タイトル
		$number = $instance['number'];				// 表示する投稿数
		$category = $instance['category'];			// カテゴリID
		// フォーム用の name 属性および id 属性の値を取得
		$titlename = $this->get_field_name('title');
		$titleid = $this->get_field_id('title');
		$numbername = $this->get_field_name('number');
		$numberid = $this->get_field_id('number');
		$categoryname = $this->get_field_name('category');
		$categoryid = $this->get_field_id('category');
		// フォームの出力
		echo '<p><label for="'.$titleid.'">タイトル:</label><br />';
		echo '<input type="text" name="'.$titlename.'" id="'.$titleid.'" value="'.$title.'" style="width:100%;" /></p>';
		echo '<p><label for="'.$numberid.'">表示する投稿数:</label>';
		echo '<input type="text" name="'.$numbername.'" id="'.$numberid.'" value="'.$number.'" style="width:60px;" /></p>';
		echo '<p><label for="'.$categoryid.'">カテゴリーID:</label>';
		echo '<input type="text" name="'.$categoryname.'" id="'.$categoryid.'" value="'.$category.'" style="width:60px;" /></p>';
	}
	// 管理画面でオプションを保存する処理
	// $new_instance : 入力されたオプション値の連想配列
	// $old_instance : 保存されているオプション値の連想配列
	// 戻り値 : 新たに保存されたオプション値の連想配列
	function update($new_instance, $old_instance) {
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['number'] = $new_instance['number'];
		$instance['category'] = $new_instance['category'];
		// 例えばエラーチェックしたい場合は以下のような感じで
		if (!$instance['title']) {
			// タイトルが空白の場合、元の値に戻してエラー表示
			$instance['title'] = strip_tags($old_instance['title']);
			$this->m_error = '<span style="color:#ff0000;">タイトルが空白です。元の値に戻します。</span>';
		}
		return $instance;
	}
	// サイトで表示する処理
	// $args : 出力用文字列の連想配列
	// $instance : 保存されているオプション値の連想配列
	function widget($args, $instance) {
		extract($args);
		$instance = wp_parse_args((array)$instance, array('title' => '', 'number' => 5, 'category' => 1));
		// タイトルはフィルタ処理
		$title = $instance['title'];
		$title = apply_filters('widget_title', $title);
		$number = $instance['number'];
		$category = $instance['category'];
		echo $before_widget."\n";
		echo $before_title.$title.$after_title."\n";
		echo '<ul class="recentEntries">';
		// 最新の投稿タイトルを件数とカテゴリを指定して取得＆出力
		query_posts('&showposts='.$number.'&cat='.$category);
		if (have_posts()) {
			while (have_posts()) {
				the_post();
				echo '<li><a href="'.get_permalink().'">'.the_title('', '', false).'</a></li>';
			}
		}
		echo '</ul>';
		echo $after_widget."\n";
		// WordPress のループ用クエリをリセット
		wp_reset_query();
	}
}
// ウィジェットを widgets_init フックで登録
add_action('widgets_init', create_function('', 'return register_widget("My_RecentPosts_Widget");'));

最後に、このコードをテーマの functions.php とかに突っ込んでやれば、管理画面の 【外観】 → 【ウィジェット】 に表示されます。

とりあえず、なんとなく動いている様子。なかなか楽しい＆役に立ちます。

以下の関連（しているかもしれない）記事もどうぞ！

• タイトルなしのテキストウィジェットの表示方法を変更
• カテゴリ表示の際に各カテゴリの説明を表示
• WordPress に切り替え
• Windows サーバーでビジュアルエディタが使えない
• Google Analytics 携帯版の設置