ウィジェットを使用したWordPressプラグインの作り方 | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

ウィジェットを使用したプラグインを下記サイトを参考にして実際に作ってみました。手順を備忘としてまとめました。

Anatomy of a WordPress Plugin
　
なお、本記事のサンプルコードではブートストラップ３を使ってレイアウトの設定を行っています。テーマのheader.phpなどでブートストラップ３が利用できるように設定されていることを前提としています。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．プラグインファイルを作成
２．ウィジェットの設定
３．ウィジェットの設定画面でプラグインのパラメータ設定

Setting APIの概要

●作成するプラグインの仕様、設定項目
　
指定したカスタムフィールドの値に該当する投稿のうち、最新のN投稿分のリストを表示します。
　
（設定項目）
表示投稿数、ページタイトル、カスタムフィールド名、カスタムフィールド値
　
１）プラグインディレクトリ、ファイル作成
　
下記ディレクトリ、ファイルを作成します。
/wp-content/plugins/new-posts-list/new-posts-list.php
　
２）プラグインファイル（new-posts-list.php）に管理画面に表示するプラグイン概要のコメント記述
　

<?php
/*
Plugin Name: New Posts List
Plugin URI: 
Description: 
Version: 1.0
Author: 
Author URI: 
*/
?>

　
３）プラグインファイル（new-posts-list.php）に処理内容を記述
　

<?php
function list_new_posts($num_posts = 1, $page_title, $cs_key, $cs_value ) {
  $posts = get_posts("numberposts=".$num_posts."&meta_key=".$cs_key."&meta_value=".$cs_value);

  echo "<header class=\"archive-header\"><h1 class=\"page-title\">$page_title</h1></header>";
  global $post;
  $old_post = $post;
  echo "<div class=\"row\">";
  foreach ($posts as $post) :
    setup_postdata($post);
  ?>
    <div class="col-sm-12">
      <ul class="list-unstyled">
        <li>
          <ul class="list-inline">
            <li><span
                class="glyphicon glyphicon-circle-arrow-right icon-red">
                </span>
                <?php the_time('Y.m.d');?>
            </li>
            <li>
              <a href="<?php the_permalink() ?>">
                <?php if ( get_the_title() ) the_title(); else the_ID(); ?>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  <?php
  endforeach;
  echo "</div>";
  $post = $old_post;
  setup_postdata($post);
}

※$post
現在表示されている投稿。ループ内で使用。
get_postsで取得した投稿のループ処理に入る前に現在の値を退避しておきます。
　
※setup_postdata
get_postsでは、（the_content()のコンテンツやIDなど）デフォルトの状態では利用できない記事データが一部あります。そのため内部関数setup_postdata()を使用しています。

ウィジェットの設定

１）プラグインフォルダにwidget.phpを作成
　

<?php
function widget_new_post_list($args) {
  extract($args, EXTR_SKIP);
  echo $before_widget;
  list_new_posts();
  echo $after_widget;
}

function widget_new_post_list_init() {
  wp_register_sidebar_widget(NEW_POST_LIST_WIDGET_ID, 
    __('New Post List'), 'widget_new_post_list');
}

add_action("plugins_loaded", "widget_new_post_list_init");

　
（上記コードの説明）
①widget_new_post_list_init()
　
wp_register_sidebar_widgetでサイドバーにウィジェットを登録
　
・ウィジェットID：NEW_POST_LIST_WIDGET_ID
・ウィジェットの表示タイトル：New Post List
・コールバック関数：widget_new_post_list
　
②コールバック関数　widget_new_post_list
　
上記（１）でプラグインファイルで定義したlist_new_posts()関数を呼び出します。
　
③add_actionで①の処理を登録
　
アクションフック：plugins_loaded
すべてのプラグインが読み込まれた後に実行する。
　
２）プラグインファイル（new-posts-list.php）にwidget.phpをインクルードする記述を追加
　
include_once dirname( __FILE__ ) . ‘/widget.php’;
　
３）管理画面のウィジェットで上記で設定した”New Post List”がサイドバーに登録できる状態になっていることを確認

ウィジェットの設定画面でプラグインのパラメータ設定

ウィジェットの設定画面でプラグインのパラメータ設定画面を表示し、プラグインの設定を出来るようにします。
　
１）widget.phpにウィジェットの設定画面に設定項目を追加
　
wp_register_widget_control()関数を追加

function widget_new_post_list_init() {
  wp_register_sidebar_widget(NEW_POST_LIST_WIDGET_ID, 
    __('New Post List'), 'widget_new_post_list');
  wp_register_widget_control(NEW_POST_LIST_WIDGET_ID, 
    __('New Post List'), 'widget_new_post_list_control');
}

add_action("plugins_loaded", "widget_new_post_list_init");

・ウィジェットID：NEW_POST_LIST_WIDGET_ID
・ウィジェットの表示タイトル：New Post List
・コールバック関数：widget_new_post_list_control
　
２）ウィジェットの設定項目追加画面を作成
　
１）のコールバック関数：widget_new_post_list_controlでウィジェットの設定項目追加画面を記述します。

function widget_new_post_list_control() {
  define(NEW_POST_LIST_WIDGET_ID, "new_post_list_widget_id");
  $options = get_option(NEW_POST_LIST_WIDGET_ID);
  if (!is_array($options)) {
    $options = array();
  }

  $widget_data = $_POST[NEW_POST_LIST_WIDGET_ID];
  if ($widget_data['submit']) {
    $options['num_posts'] = $widget_data['num_posts'];
    $options['page_title'] = $widget_data['page_title'];
    $options['cs_key'] = $widget_data['cs_key'];
    $options['cs_value'] = $widget_data['cs_value'];

    update_option(NEW_POST_LIST_WIDGET_ID, $options);
  }

  $num_posts = $options['num_posts'];
  $page_title = $options['page_title'];
  $cs_key = $options['cs_key'];
  $cs_value = $options['cs_value'];
?>
    <label for="<?php echo NEW_POST_LIST_WIDGET_ID; ?>-num-posts">
      表示する新着ポスト数:
    </label>
    <div class="row"><div class="col-xs-4">
      <input class="form-control"
             id="<?php echo NEW_POST_LIST_WIDGET_ID; ?>-num-posts"
             name="<?php echo NEW_POST_LIST_WIDGET_ID; ?>[num_posts]"
             value="<?php echo $num_posts; ?>"
       />
    </div></div>
    <label for="<?php echo NEW_POST_LIST_WIDGET_ID; ?>-page_title">
      ページのタイトル:
    </label>
    <div class="row"><div class="col-xs-4">
      <input class="form-control"
             id="<?php echo NEW_POST_LIST_WIDGET_ID; ?>-page_title"
             name="<?php echo NEW_POST_LIST_WIDGET_ID; ?>[page_title]"
             value="<?php echo $page_title; ?>"
       />
    </div></div>
    <label for="<?php echo NEW_POST_LIST_WIDGET_ID; ?>-cs_key">
      新着リストに表示する投稿のカスタムフィールド名:
    </label>
    <div class="row"><div class="col-xs-4">
      <input class="form-control"
             id="<?php echo NEW_POST_LIST_WIDGET_ID; ?>-cs_key"
             name="<?php echo NEW_POST_LIST_WIDGET_ID; ?>[cs_key]"
             value="<?php echo $cs_key; ?>"
       />
    </div></div>
    <label for="<?php echo NEW_POST_LIST_WIDGET_ID; ?>-cs_value">
      新着リストに表示する投稿のカスタムフィールド値:
    </label>
    <div class="row"><div class="col-xs-4">
      <input class="form-control"
             id="<?php echo NEW_POST_LIST_WIDGET_ID; ?>-cs_value"
             name="<?php echo NEW_POST_LIST_WIDGET_ID; ?>[cs_value]"
             value="<?php echo $cs_value; ?>"
       />
    </div></div>
  <input type="hidden"
    name="<?php echo NEW_POST_LIST_WIDGET_ID; ?>[submit]"
    value="1"
  />

（上記コードの説明）
・管理画面の既存のウィジェット設定画面に設定項目を追加する形なのでformタグは必要ありません。
　
・ここで追加した設定項目はフォームで設定を保存した際、$_POST[NEW_POST_LIST_WIDGET_ID]に保存されます。
　
・$_POST[NEW_POST_LIST_WIDGET_ID]から設定値を取り出し、
update_option(NEW_POST_LIST_WIDGET_ID, $options)
で”options”というデータベーステーブルに保存されます。
　
・get_option(NEW_POST_LIST_WIDGET_ID)で”options”という名前のデータベーステーブルに保存された値をキーを指定して取得します。
　
３）ウィジェットをサイドバーに表示する関数を修正
　
いったん仮作成していましたが、ウィジェット管理画面で設定変更できるようにしたので、設定変更分を反映するように修正します。

（変更前）
function widget_new_post_list($args) {
  extract($args, EXTR_SKIP);
  echo $before_widget;
  list_new_posts();
  echo $after_widget;
}
　　↓
（変更後）
function widget_new_post_list($args) {
  extract($args, EXTR_SKIP);
  $options = get_option(NEW_POST_LIST_WIDGET_ID);
  $num_posts = $options['num_posts'];
  $page_title = $options['page_title'];
  $cs_key = $options['cs_key'];
  $cs_value = $options['cs_value'];
  echo $before_widget;
  list_new_posts($num_posts, $page_title, $cs_key, $cs_value);
  echo $after_widget;
}

　
※変更内容
２）でフォームで設定した値をoptionsデータベーステーブルに保存しましたので、保存した値を取り出し、プラグインのメイン関数（list_new_posts()）に引数を指定して呼び出します。
　
４）動作確認
　
ウィジェット設定画面に追加した設定項目が表示され、値を設定して保存するとサイドバーに表示されているウィジェットの表示内容が変更されることが確認出来ました。

関連記事の目次

WordPressプラグイン

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル