Step

【2023年】これからブログを始める人へおすすめの書籍

Kissy

【WordPress】ウィジェットの作り方

作成: 更新:

【WordPress】ウィジェットの作り方

この記事ではウィジェットの作り方を記載します。例として以下のようなプロフィールウィジェットの作り方を記載します。

プロフィール

WordPressにはウィジェットという機能があります。ウィジェットはWebページのパーツのことで、ドラッグアンドドロップで配置できる機能です。例えば、プロフィールやSNSシェアボタンなど、他でも使用できるパーツはウィジェット化しておくことで、配置変更を簡単に行えます。

手順

function.phpに以下のコードを追加する。

以下のコードをfunction.phpに追加するとWordPressのウィジェット管理画面に「[Custom]プロフィール」が表示されるようになります。

名前、アバター、プロフィール情報については、WordPressの[ユーザー]-[あなたのプロフィール]から取得しています。[ユーザー]-[あなたのプロフィール]を設定しておけば、自動的に取得されます。

SNSのURLは自身のURLに書き換えてください。

/*
 * カスタムウィジェット（プロフィール）
 */
 
/* プロフィールウィジェットの登録 */
add_action( 'widgets_init', 'wpcustom_load_widget' );
function  wpcustom_load_widget() {
  register_widget( 'custom_profile_widget' );
}

/* プロフィールウィジェットクラス */
class custom_profile_widget extends WP_Widget {
  function __construct() {
    parent::__construct(
      'custom_profile_widget', // ID
      __('[Custom]プロフィール',
      'custom_profile_widget_domain'), // タイトル
      array('description' => __( 'プロフィールを表示します', 'custom_profile_widget_domain'), ) //　説明文
    );
  }

  /* ウィジェットの出力 */
  public function widget($args, $instance) {
    // before フレーム出力
    $title = apply_filters('widget_title', $instance['title']);
    echo $args['before_widget'];
    
    if (!empty($title)) {
      echo  $args['before_title']. $title.  $args['after_title'];
    }
    ?>

    <!-- プロフィール -->
    <div  class="profile-container">
      <div  class="yourprofile">
        <!-- アバター -->
        <p class="profile-img">
          <?php  $userid = get_the_author_meta('id'); echo  get_avatar($userid); ?>
        </p>

        <!-- 氏名 -->
        <p class="yourname dfont"><?php  the_author_meta('display_name'); ?></p>
      </div>

      <div class="profile-content">
        <!-- プロフィール情報 -->
        <p><?php  the_author_meta('description'); ?></p>
      </div>

      <!-- SNS -->
      <ul  class="profile-sns dfont">
        <!-- Twitter -->
        <li><a  href="<Twitter URL>"  target="_blank"  rel="nofollow"  ><i  class="icon icon-twitter"></i></a></li>
        <!-- Facebook -->
        <li><a  href="<Facebook URL>"  target="_blank"  rel="nofollow"><i  class="icon icon-facebook"></i></a></li>
        <!-- Instagram -->
        <li><a  href="<Instagram URL>"  target="_blank"  rel="nofollow"><i  class="icon icon-instagram"  ></i></a></li>
        <!-- Pintrest -->
        <li><a  href="<Pintrest URL>"  target="_blank"  rel="nofollow"><i  class="icon icon-pinterest"></i></a></li>
      </ul>
    </div>
    
    <?php
    // after フレーム出力
    echo  $args['after_widget'];
  }

  /* 管理画面の出力 */
  public function form($instance) {
    // タイトル
    if ( isset($instance['title']) ) {
      $title = $instance[ 'title' ];
    } else {
      $title = __( 'タイトルを入力', 'custom_profile_widget_domain' ); // 初期値
    }
    ?>

    <p>
      <!-- タイトル -->
      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    
      <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php  echo $this->get_field_name( 'title' ); ?>"  type="text" value="<?php  echo  esc_attr( $title ); ?>" />
    </p>
  
  <?php
  }

  /* 管理画面の更新 */
  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', 'wpcustom_load_widget' );
function  wpcustom_load_widget() {
  register_widget( 'custom_profile_widget' );
}

ウィジェットの初期化（widgets_init）のタイミングでwpcustom_load_widget()を呼び出すようadd_action()します。wpcustom_load_widget()では、register_widget()を呼び出しウィジェットを登録します。register_widget()の引数には、この後作成するプロフィールウィジェットクラス（名前かインスタンス）を指定します。

WP_Widgetを継承して、ウィジェットクラスを実装する。

class custom_widget extends WP_Widget {
  function __construct();
  public function widget($args, $instance);
  public function form($instance);
  public function update($new_instance, $old_instance);

ウィジェットを作成する際は、WP_Widgetを継承したウィジェットクラスを実装します。ウィジェットクラスでは、コンストラクタ（__construct()）、ウィジェットをHTMLとして出力するwidget()、ウィジェット管理画面上での設定画面のform()、設定画面のデータ更新処理のupdate()を実装する必要があります。

__construct()

__construct()はID、タイトル、説明文を登録する関数になります。

  function __construct() {
    parent::__construct(
      'custom_profile_widget', // ID
      __('[Custom]プロフィール',
      'custom_profile_widget_domain'), // タイトル
      array('description' => __( 'プロフィールを表示します', 'custom_profile_widget_domain'), ) //　説明文
    );
  }

__construct()では、基底クラスのコンストラクタ（parent::__construct())を呼び出します。その際に以下のパラメータを指定します。

  • ID　…　ウィジェットを特定する一意のID。クラス名でよいが、全て小文字にする必要あり。
  • タイトル　…　WordPressのウィジェット画面に表示されるタイトル
  • 説明文　…　WordPressのウィジェット画面に表示される説明文

widget()

widget()ではウィジェットを実際にHTMLに出力するメソッドになります。

  /* ウィジェットの出力 */
  public function widget($args, $instance) {
    // before フレーム出力
    $title = apply_filters('widget_title', $instance['title']);
    echo $args['before_widget'];
    
    if (!empty($title)) {
      echo  $args['before_title']. $title.  $args['after_title'];
    }
    ?>

    <!-- ここにHTMLに出力するコードを記述 -->
    
    <?php
    // after フレーム出力
    echo  $args['after_widget'];
  }

ウィジェットは

などに囲んで出力することになりますが、これを行っているのがecho $args['before_widget'];とecho $args['after_widget'];です。

ウィジェットとして出力するHTMLは<!-- ここにHTMLに出力するコードを記述 -->に記載します。

form()

form()はWordPressのウィジェット管理画面に表示するウィジェットの設定画面を出力する関数です。

  /* 管理画面の出力 */
  public function form($instance) {
    // タイトル
    if ( isset($instance['title']) ) {
      $title = $instance[ 'title' ];
    } else {
      $title = __( 'タイトルを入力', 'custom_profile_widget_domain' ); // 初期値
    }
    ?>

    <p>
      <!-- タイトル -->
      <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    
      <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php  echo $this->get_field_name( 'title' ); ?>"  type="text" value="<?php  echo  esc_attr( $title ); ?>" />
    </p>
  
  <?php
  }

今回作成しているプロフィールウィジェットはタイトルのみ設定できるウィジェットになります。コードの前半では、前回設定したタイトルがあれば取得して$instance変数に格納します。なければ「タイトルを入力」を$instance変数に格納します。

コードの後半では管理画面のHTMLを出力しています。今回作成しているプロフィールウィジェットではタイトルを入力するためのlabelとtextを配置しています。

ウィジェットの管理画面で設定した値は、widget()でウィジェットのHTMLを出力する際に参照できます。参照する際は、$instance[id]で参照できます。今回のタイトルの場合は、$instance['title']で参照できます。

update()

update()関数はウィジェットの管理画面の更新処理になります。update()の引数には更新前のインスタンスである$old_instanceと、更新後のインスタンスである$new_instanceが渡されます。$new_instanceから$instanceに値をコピーして、更新後のインスタンスを返すのがupdate()の役割になります。

  /* 管理画面の更新 */
  public function update($new_instance, $old_instance) {
    $instance = array();

    // タイトル
    $instance['title'] = ( !empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';

    return $instance;
  }
}

Appendix

最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事

SPONSORED LINK
SPONSORED LINK