WP_Widgetクラスを使ってウィジェットを作成する方法

WP_Widgetクラスを使ってウィジェットを作成する方法についてです。
 
ウィジェットの編集画面でタイトルと名前を設定し、サイドバーにウィジェットを追加して、タイトルと名前をサイドバーに表示するサンプルを作成しています。

1)widgets_initフックで登録
 
add_action( ‘widgets_init’, ‘myplg_register_widgets’ );
 
2)WP_Widgetクラスを拡張して新しいクラスを定義
 
①WP_Widgetクラスを継承して新しいクラスを定義
 
class myplg_widget extends WP_Widget {
 :
 
②コンストラクタ関数を定義
 

function __construct() {
  $widget_ops = array(
    'classname' => 'myplg_widget_class',
    'description' => 'ウィジェットのサンプル'
  );
  parent::__construct( 'myplg_widget', 'My Widget', $widget_ops );
}

・’myplg_widget’:ベースIDとなるHTML ID。
・’My Widget’:ウィジェット名
・’description’:WordPress管理画面のウィジェット画面でウィジェット名の下に表示されるウィジェットの説明。
 
③ウィジェット設定のフォームを定義
 

function form( $instance ) {
  $defaults = array(
    'title' => 'タイトルを入力',
    'name' => '名前を入力'
  );
  $instance = wp_parse_args( (array) $instance, $defaults );
  $title = $instance['title'];
  $name = $instance['name'];
  ?>
  <p>タイトル:
    <input class="widefat"
       name="<?php echo $this->get_field_name( 'title' ); ?>"
       type="text"
       value="<?php echo esc_attr( $title ); ?>"
     />
  </p>
  <p>名前:
    <input class="widefat"
      name="<?php echo $this->get_field_name( 'name' ); ?>"
      type="text" value="<?php echo esc_attr( $name ); ?>"
    />
  </p>
<?php
}

・formタグとsubmitボタンはWP_Widgetクラスが処理してくれるので記述する必要がない。
 
・wp_parse_args()
引数の配列とデフォルト値の配列を結合するための汎用の関数
 
④ウィジェットの設定値を保存
 

function update( $new_instance, $old_instance ) {
  $instance = $old_instance;
  $instance['title'] = sanitize_text_field( $new_instance['title'] );
  $instance['name'] = sanitize_text_field( $new_instance['name'] );
  return $instance;
}

⑤ウィジェットを表示
 

function widget( $args, $instance ) {
  extract( $args );
  echo $before_widget;
  $title = apply_filters( 'widget_title', $instance['title'] );
  $name = ( empty( $instance['name'] ) ) ? ' ' : $instance['name'];
  if ( !empty( $title ) ) {
    echo $before_title . esc_html( $title ) . $after_title;
  };
  echo '<p>名前: ' . esc_html( $name ) . '</p>';
  echo $after_widget;
}

・extract()
PHPの関数で、連想配列のキー値を変数名にした変数に値が格納される。
 
●サンプル全体

add_action( 'widgets_init', 'myplg_register_widgets' );

function myplg_register_widgets() {
  register_widget( 'myplg_widget' );
}

class myplg_widget extends WP_Widget {
  function __construct() {
    $widget_ops = array(
      'classname' => 'myplg_widget_class',
      'description' => 'ウィジェットのサンプル'
    );
    parent::__construct( 'myplg_widget', 'My Widget', $widget_ops );
  }
  function form( $instance ) {
    $defaults = array(
      'title' => 'タイトルを入力',
      'name' => '名前を入力'
    );
    $instance = wp_parse_args( (array) $instance, $defaults );
    $title = $instance['title'];
    $name = $instance['name'];
    ?>
    <p>タイトル:
      <input class="widefat"
         name="<?php echo $this->get_field_name( 'title' ); ?>"
         type="text"
         value="<?php echo esc_attr( $title ); ?>"
       />
    </p>
    <p>名前:
      <input class="widefat"
        name="<?php echo $this->get_field_name( 'name' ); ?>"
        type="text" value="<?php echo esc_attr( $name ); ?>"
      />
    </p>
  <?php
  }
  function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance['title'] = sanitize_text_field( $new_instance['title'] );
    $instance['name'] = sanitize_text_field( $new_instance['name'] );
    return $instance;
  }
  function widget( $args, $instance ) {
    extract( $args );
    echo $before_widget;
    $title = apply_filters( 'widget_title', $instance['title'] );
    $name = ( empty( $instance['name'] ) ) ? ' ' : $instance['name'];
    if ( !empty( $title ) ) {
      echo $before_title . esc_html( $title ) . $after_title;
    };
    echo '<p>名前: ' . esc_html( $name ) . '</p>';
    echo $after_widget;
  }
}
関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください