WordPress : 独自のウィジェットを作る

独自のウィジェットを新規に作る方法をメモします。

functions.php にコード追加

コメントでも区切っていますが、ウィジェット作成には大きく4つのステップがあります。

コンストラクタの指定
管理画面側の表示設定
管理画面で設定を保存した時の処理
ウィジェットを配置した時の表側の表示

class {Widget_Name} extends WP_Widget {

  // 1. コンストラクタの指定
  function {Widget_Name}() {
    parent::WP_Widget(
      false,
      $name = '{ウィジェット名}',
      array( 'description' => '{ウィジェットの説明}', )
    );
  }

  // 2. 管理画面側の表示設定
  function form( $instance ) {
    ?>
    <p>
      <label for="<?php echo $this->get_field_id('{variable_name}'); ?>"><?php _e('{設定名}'); ?></label>
      <input type="text" class="widefat" id="<?php echo $this->get_field_id('{variable_name}'); ?>" name="<?php echo $this->get_field_name('{variable_name}'); ?>" value="<?php echo esc_attr( $instance['{variable_name}'] ); ?>">
    </p>
  <?php
  }

  // 3. 管理画面で設定を保存した時の処理
  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['{variable_name}'] = $new_instance['{variable_name}'];
    return $instance;
  }

  // 4. ウィジェットを配置した時の表側の表示
  function widget( $args, $instance ) {
    extract( $args );
    ${variable_name} = explode(',', $instance['{variable_name}']);
    if(${variable_name}) {
      echo $before_widget;
      echo ${variable_name};
      echo $after_widget;
    }
  }

}

//ウィジェットを使えるように登録する
register_widget('{Widget_Name}');

{}の値を適宜置き換えてくれれば雛形に使えるようなコードにしています。

解説

ステップごとに簡単に解説します。

1. コンストラクタの指定

データの初期化や設定に使用。基本的にはウィジェットの名前を付ける欄ということで良いです。

2. 管理画面側の表示設定

ダッシュボード側からウィジェットエリアに配置して設定を入力するあの表示を作ります。
入力欄はおよそ自由にいくらでも追加できますし、普通にHTMLでいろいろ表示整形できます。

ここで入力した値は最終的に $instance という配列に格納されますが、次のステップで保存を能動的に行う必要があります。

3. 管理画面で設定を保存した時の処理

ウィジェットの設定を保存するステップです。
上記サンプルでは何もやっていませんが、入力項目ごとにバリデートして保存する手法が一般的です。

入力したてのデータは $new_instance に、直前のデータは $old_instance に保存されています。最終的に return した配列を保存します。

4. ウィジェットを配置した時の表側の表示

配置したウィジェットを表側に表示する時の処理を書きます。

$instance の配列からデータを抜き出して好きなように加工して表示しましょう。

なお $before_widget、$after_widget を使うことでウィジェットエリア標準のヘッダー・フッターを利用できます。