オリジナルのウィジェットを追加する方法

2015年10月21日 2015年11月08日 WordPress

WordPressにオリジナルのウィジェットを追加するには、WP_Widgetクラスを継承した新規クラスを作成し、ウィジェットの内容を定義していく必要があります。
以下のコードは現在の時刻を表示するウィジェットを追加するサンプルで、お使いのテーマのfunctions.php等にコピペする事でテストする事が出来ます。

/**
 * WordPressに現在の時刻を表示するウィジェットを追加するテストです。
 * ウィジェットは、WP_Widgetのクラスを継承して定義を行っていきます。
 */
class TestWidget extends WP_Widget {

	/**
	 * 初期化用のメソッドです。
	 * __construct( 'ウィジェットのID', 'ウィジェットのタイトル', array( 'description' => 'ウィジェットの概要' ) );
	 */
	public function __construct() {
		parent::__construct( 'testwidget', '現在の時刻', array( 'description' => 'テストのウィジェットです。' ) );
	}

	/**
	 * ウィジェットの表示内容を定義するメソッドです。
	 * コードにはタイトルなどのウィジェットの基本的な表示内容も含まれますので、
	 * 特別な理由がなければ変更推奨エリア内部のみの変更を行う事を推奨します。
	 */
	public function widget( $args, $instance ) {
		echo $args['before_widget'];
		if ( ! empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
		}
		// 変更推奨エリアここから
		echo date("Y-m-d H:i:s");
		// 変更推奨エリアここまで
		echo $args['after_widget'];
	}

	/**
	 * ウィジェット管理画面で表示するフォームの中身を定義するメソッドです。
	 * 基本的には以下のフォーマットに添ってフォームを作成するようにしましょう。
	 */
	public function form( $instance ) {
		// 初期化内容
		$title = ! empty( $instance['title'] ) ? $instance['title'] : '現在の時刻は';
		// 出力内容
		echo '<p>';
		echo '<label for="' . $this->get_field_id('title') . '">タイトル:</label>';
		echo '<input class="widefat" id="' . $this->get_field_id('title') . '" name="' . $this->get_field_name('title') . '" value="' . esc_html( $title ) . '" type="text">';
		echo '</p>';
	}

	/**
	 * ウィジェット管理画面でフォームによるオプションの更新を行った際の動作を定義するメソッドです。
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		return $instance;
	}
}

// ウィジェットを登録します。
add_action( 'widgets_init', function(){
  register_widget( 'testWidget' );
});

また、作成したウィジェットを登録する際ですが、register_widget()関数の第一引数とウィジェットのクラス名を一致させる必要がある事に気をつけて下さい。 (上記の場合ですと、 “testWidget” が当てはまります。)

補足

このクラスはWordPress2.8.0より利用可能になりました。

参考

WordPress/wp-includes/widgets.php
Widgets API « WordPress Codex

何かお探しですか？

オリジナルのウィジェットを追加する方法

補足

参考

(0) Comments

コメントを残す

何かお探しですか？

補足

参考

関連記事

(0) Comments

コメントを残す