ウィジェットの作り方：新着・更新記事のウィジェット化と子テーマ運用

by ブログ工房　「 WordPress 」記事で、今日一番読まれているページ TOP 5
WordPress Popular Posts ショートコードで人気ランキングを表示する WordPress Popular Posts ショートコードでカテゴリー別人気ランキングを表示する WordPressのプラグインをインストールする方法 WordPress Popular Postsの活用：閲覧数、人気ランキングを表示する phpMyAdminを使ってMySQLのデータをバックアップ・復元する方法

興味のある所からお読み下さい [隠す]

1 ウィジェット化のメリット
2 ウィジェットの作り方
- 2.1 ウィジェットの基本形
- 2.2 一番シンプルなウィジェットの例
3 新着・更新記事ウィジェットの作成
4 新着・更新記事ウィジェットの機能追加
5 WordPress 関連おススメ記事

ウィジェット化のメリット

過去記事の内容を修正、追記したことをユーザーに通知したい時があります。ですが、WordPress には新着記事の通知ウィジェットはありますが、過去記事の修正通知をする機能がありません。

前回記事で書いた、記事の公開日と更新日を判定して、新しい日時順に公開記事と更新記事を「新着・更新記事」として一緒に表示する方法を、サイドバーに表示できるよう、ウィジェット化しました。

子テーマを利用してフッターに最新の新着・更新記事を表示する

過去記事を追加・変更しても・・ WordPressの投稿記事は「投稿日時」順に記事が表示されますが、過去に書いた記事の内容を補強したり、新...

wp.kikuchisan.net

2015-05-21 08:25

ウィジェットの作り方

ウィジェットの基本形

ウィジェットは「初期化処理」、「表示処理」、「設定の更新処理」、「設定用フォーム」の４つのメソッドから構成されます。
１行目の「My_Widget」は WordPress の WP_Widget クラスを継承するウィジェット名（任意の名前）で、最終行でこの My_Widget を WordPress に登録します。

class My_Widget extends WP_Widget {
	function __construct() {
		 //コンストラクタ。初期化処理
	}
	function widget($args, $instance) {
      ?>
        <div class="widgetContent">
		 // ウィジェットの表示処理を記述
        </div>
      <?php
	}
	function update($new_instance, $old_instance) {
		 // ウィジェットの設定の更新処理を記述
		return $new_instance;
	}
	function form($instance) {
		 // ウィジェットの設定用フォームを記述
	}
}
add_action('widgets_init',create_function('', 'return register_widget("My_Widget");'));

class My_Widget extends WP_Widget {

function __construct() {

//コンストラクタ。初期化処理

}

function widget($args, $instance) {

// ウィジェットの表示処理を記述

</div>

<?php

}

function update($new_instance, $old_instance) {

// ウィジェットの設定の更新処理を記述

return $new_instance;

}

function form($instance) {

// ウィジェットの設定用フォームを記述

}

add_action('widgets_init',create_function('', 'return register_widget("My_Widget");'));

一番シンプルなウィジェットの例

基本形の内「初期化処理」と「表示処理」のみを使い、「初期化処理」でウィジェット管理画面に表示されるウィジェットボックスの名前を定義し、「表示処理」に ”これはサンプルページです。” を出力するコードを記述した、一番シンプルなウィジェットです。

// 一番シンプルなウィジェットの例
class My_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(false,'僕のウィジェット'); //ウィジェットボックスの名前
    }
    function widget($args, $instance) {
      ?>
        <div class="widgetContent">
<?php echo 'これはサンプルページです。' ?>
        </div>
      <?php
    }
}
add_action('widgets_init', create_function('', 'return register_widget("My_Widget");'));

// 一番シンプルなウィジェットの例

class My_Widget extends WP_Widget {

function __construct() {

parent::__construct(false,'僕のウィジェット'); //ウィジェットボックスの名前

}

function widget($args, $instance) {

<?php echo 'これはサンプルページです。' ?>

</div>

<?php

}

add_action('widgets_init', create_function('', 'return register_widget("My_Widget");'));

上記ウィジェットを子テーマの「function.php」に追加しフッターエリアに表示した例です。

新着・更新記事ウィジェットの作成

最新の新着・更新記事のウィジェット化

ウィジェット管理画面からタイトル、表示数を設定し、それを出力する処理を追加します。参考にさせて頂いたのは、Simplicity の libフォルダーにある widget.php です。

下のコードをコピーして、あなたの function.php に追加し、サイドバーに設定すれば、このウィジェットが使えるようになります。変更箇所は以下の３ヵ所です。

７行目：「僕のウィジェット」はウィジェットボックスの名前、「直近の新着・更新」はそのボックスの下に表示される説明文です。あなたの好きな名前と説明文に変更します。
31行目：サムネイル画像は、WordPressの初期設定で100×100（thumb100）が作られていますので、CSSでそれを75×75に縮小し左寄せにして利用しています。
サムネイル画像が表示されない時は、この名前「thumb100」を変更してください。
25行目、31行目：表示を統一するため、人気記事表示ウイジェット「WordPress Popular Posts」の class：「class=”wpp-list”」（リンク表示）と「class=”wpp-views」（日付のサイズ縮小・イタリック表示）を流用しています。
「WordPress Popular Posts」を使用してない時は、class指定が無効となりますので、CSSで調整してください。

///////////////////////////////////////////////////
//僕のウイジェット(My_Widget)の追加
///////////////////////////////////////////////////
class My_Widget extends WP_Widget {
    function __construct() {
        //ウィジェットボックスの名前と説明文
        parent::__construct(false,'僕のウィジェット',array('description' => '直近の新着・更新'));
    }
    function widget($args, $instance) {
        extract( $args );
        //タイトル名を取得
        $title_new = apply_filters( 'widget_title_new', $instance['title_new'] );
        //表示数を取得
        $entry_count = apply_filters( 'widget_entry_count', $instance['entry_count'] );
        if ( !$entry_count ) $entry_count = 5; //表示数が設定されていない時は5にする
      ?>
        <h4><?php if ($title_new) {
          echo $title_new; //タイトルが設定されている場合は使用する
        } else {
          echo '新着・更新記事';
        }
      ?></h4>
        <div class="widgetContent">
<!-- ここから -->
<ul class="wpp-list" style="margin:20px 0 65px -18px">
<?php global $post; /* グローバル変数$postの宣言 */ ?>
<?php $myposts = get_posts(array('numberposts'=>$entry_count,'orderby'=>'modified'));
foreach($myposts as $post) : 
    setup_postdata($post); /*$mypostsに読み込んだデータを1記事セット */
    if (get_the_time('Ymd') < get_the_modified_time('Ymd')) {$msg='を更新しました';} else {$msg='を公開しました';} ?>
    <li style="clear:both;"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumb100',array('alt'=>get_the_title(),'style'=>'border-radius:10px;width:75px;height:75px;float:left;margin-bottom:13px;')); ?><?php the_title(); ?></a> <?php echo $msg; ?> -<span class="wpp-views"><?php the_modified_date('Y/m/d'); ?></span></li>
<?php endforeach; ?>
<?php wp_reset_postdata(); /* 取得したデータのリセット */ ?>
</ul>
<!-- ここまで -->
        </div>
      <?php
    }
    function update($new_instance, $old_instance) {
     $instance = $old_instance;
     $instance['title_new'] = strip_tags($new_instance['title_new']);
     $instance['entry_count'] = strip_tags($new_instance['entry_count']);
        return $instance;
    }
    function form($instance) {
        if(empty($instance)){
          $instance = array('title_new' => null, 'entry_count' => null);
        }
        $title_new = esc_attr($instance['title_new']);
        $entry_count = esc_attr($instance['entry_count']);
        ?>
        <?php //タイトル入力フォーム ?>
        <p>
          <label for="<?php echo $this->get_field_id('title_new'); ?>">
          <?php echo('新着・更新記事のタイトル'); ?>
          </label>
          <input class="widefat" id="<?php echo $this->get_field_id('title_new'); ?>" name="<?php echo $this->get_field_name('title_new'); ?>" type="text" value="<?php echo $title_new; ?>" />
        </p>
        <?php //表示数入力フォーム ?>
        <p>
          <label for="<?php echo $this->get_field_id('entry_count'); ?>">
          <?php echo('表示数（半角数字、デフォルト：5）'); ?>
          </label>
          <input class="widefat" id="<?php echo $this->get_field_id('entry_count'); ?>" name="<?php echo $this->get_field_name('entry_count'); ?>" type="text" value="<?php echo $entry_count; ?>" />
        </p>
<?php
    }
}
add_action('widgets_init', create_function('', 'return register_widget("My_Widget");'));

///////////////////////////////////////////////////

//僕のウイジェット(My_Widget)の追加

///////////////////////////////////////////////////

class My_Widget extends WP_Widget {

function __construct() {

//ウィジェットボックスの名前と説明文

parent::__construct(false,'僕のウィジェット',array('description' => '直近の新着・更新'));

}

function widget($args, $instance) {

extract( $args );

//タイトル名を取得

$title_new = apply_filters( 'widget_title_new', $instance['title_new'] );

//表示数を取得

$entry_count = apply_filters( 'widget_entry_count', $instance['entry_count'] );

if ( !$entry_count ) $entry_count = 5; //表示数が設定されていない時は5にする

<h4><?php if ($title_new) {

echo $title_new; //タイトルが設定されている場合は使用する

} else {

echo '新着・更新記事';

}

?></h4>

<?php global $post; /* グローバル変数$postの宣言 */ ?>

<?php $myposts = get_posts(array('numberposts'=>$entry_count,'orderby'=>'modified'));

foreach($myposts as $post) :

setup_postdata($post); /*$mypostsに読み込んだデータを1記事セット */

if (get_the_time('Ymd') < get_the_modified_time('Ymd')) {$msg='を更新しました';} else {$msg='を公開しました';} ?>

<li style="clear:both;"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumb100',array('alt'=>get_the_title(),'style'=>'border-radius:10px;width:75px;height:75px;float:left;margin-bottom:13px;')); ?><?php the_title(); ?></a> <?php echo $msg; ?> -<span class="wpp-views"><?php the_modified_date('Y/m/d'); ?></span></li>

<?php endforeach; ?>

<?php wp_reset_postdata(); /* 取得したデータのリセット */ ?>

</ul>

</div>

<?php

}

function update($new_instance, $old_instance) {

$instance = $old_instance;

$instance['title_new'] = strip_tags($new_instance['title_new']);

$instance['entry_count'] = strip_tags($new_instance['entry_count']);

return $instance;

}

function form($instance) {

if(empty($instance)){

$instance = array('title_new' => null, 'entry_count' => null);

}

$title_new = esc_attr($instance['title_new']);

$entry_count = esc_attr($instance['entry_count']);

<?php //タイトル入力フォーム ?>

<p>

<label for="<?php echo $this->get_field_id('title_new'); ?>">

<?php echo('新着・更新記事のタイトル'); ?>

</label>

<input class="widefat" id="<?php echo $this->get_field_id('title_new'); ?>" name="<?php echo $this->get_field_name('title_new'); ?>" type="text" value="<?php echo $title_new; ?>" />

</p>

<?php //表示数入力フォーム ?>

<p>

<label for="<?php echo $this->get_field_id('entry_count'); ?>">

<?php echo('表示数（半角数字、デフォルト：5）'); ?>

</label>

<input class="widefat" id="<?php echo $this->get_field_id('entry_count'); ?>" name="<?php echo $this->get_field_name('entry_count'); ?>" type="text" value="<?php echo $entry_count; ?>" />

</p>

<?php

}

add_action('widgets_init', create_function('', 'return register_widget("My_Widget");'));