WordPressのウィジェットを作ってみた２

前回は管理画面にウィジェットとして表示させることが出来、

サイドバーに追加することで公開側での表示も確認出来た。

今回はウィジェットの設定画面を追加してみるところを書きます。

下記は前回書いたコードです。

<?php
/*
Plugin Name: HogeWorldウィジェット
Plugin URI: https://saitodev.co/
Description: HogeWorld
Author: 齋藤 毅
Version: 1.0
Author URI: https://saitodev.co
*/

class HogeWorldWidget extends WP_Widget {
	function __construct() {
		parent::__construct(false, 'HogeWorldウィジェット');
	}

	//公開側での表示
	function widget($args, $instance) {
		echo "hoge world!!";
	}

	//ウィジェットの設定画面で
	function update($new_instance, $old_instance) {}

	//ウィジェットの設定画面
	function form($instance) {}
}

add_action('widgets_init', create_function('', 'return register_widget("HogeWorldWidget");'));
?>

プラグインの場合はget_optionとupdateオプションでプラグイン固有のデータのやりとりをしましたが、ウィジェットの場合は$instanceに値を格納させるらしいです。

それを加味した上で、フォームを追加してみる。

function form($instance) {
	$name = (isset($instance["name"])) ? htmlspecialchars($instance["name"], ENT_QUOTES, "UTF-8") : "";
	echo '<div>お名前<br><input name="' . $this->get_field_name('name') . '" type="text" id="inputtext" value="' . $name . '" class="regular-text" style="width:250px;"></div>';
}

こんな感じ。

管理画面を確認する前に、データの更新も作っておく。

function update($new_instance, $old_instance) {
	$instance = $old_instance;
	$instance["name"] = strip_tags($new_instance["name"]);
	return $instance;
}

こんな感じ。

これで、フォームと設定内容の保存の処理は出来たことになる。

この状態でウィジェットの設定を開いてみると、

wp_widget_conf

wp_widget_conf2

設定用のフォームができているし、

値も保存できる様になっている。

あとは保存した内容を公開側で表示する処理だけど、

function widget($args, $instance) {
	$name = (isset($instance["name"])) ? htmlspecialchars($instance["name"], ENT_QUOTES, "UTF-8") : "";
	echo $name ."様 hoge world!!";
}

widgetメソッドをこんな感じで修正してみた。

公開側で正しく表示しているか確認してみると、

wp_widget_conf3