「最近の投稿」ウィジェットの出力内容を変更してアイキャッチ画像などを表示する方法

2018年11月30日2019年8月13日

wp_widget_recent_postsというクラスを継承したクラスを定義し、そこでカスタムウィジェットを作成するのとほぼ同じ要領でコードを組んでいきます。

widget関数の$instanceに入っているパラメータは'title'、'number'、'show_date'の3つ。

クラスが作成できたら、widgets_initフックで新たにそのクラスを登録し、標準の「最新の投稿」ウィジェットの登録は削除しておきます。

例：（投稿日の表示をaタグの中へ移動）

<?php
/**
 * 「最近の投稿」ウィジェットのフォーマット編集（投稿日をaタグの中へ）
 */
class custom_recent_posts_widget extends wp_widget_recent_posts {

    function widget( $args, $instance ) {
        $title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Posts') : $instance['title'], $instance, $this->id_base);

        if( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) ) {
            $number = 10;
        }
        $q = new WP_Query( apply_filters( 'widget_posts_args', array( 'posts_per_page' => $number, 'no_found_rows' => true, 'post_status' => 'publish', 'ignore_sticky_posts' => true ) ) );
        if( $q->have_posts() ) :
            echo $args['before_widget'];
            if( $title ) {
                echo $args['before_title'], $title, $args['after_title'];
            } ?>
            <ul>
            <?php while( $q->have_posts() ) : $q->the_post(); ?>
                <li><a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                    <?php if( !empty( $instance['show_date'] )): ?>
                        <span class="post-date"><?php the_time('Y.m.d'); ?></span>
                    <?php endif; ?>
                </a></li>
            <?php endwhile; ?>
            </ul>
            <?php echo $args['after_widget'];
            wp_reset_postdata(); 
        endif;
    }
}

/**
 * 編集したウィジェットで上書き登録
 */
function custom_recent_widget_registration() {
    unregister_widget('wp_widget_recent_posts');    //標準の「最近の投稿」ウィジェットを削除
    register_widget('custom_recent_posts_widget');  //編集済みの「最近の投稿」ウィジェットを追加
}
add_action('widgets_init', 'custom_recent_widget_registration');

こんな感じですね。上記はただ投稿日の出力位置を変えただけです。

<ul> ~ </ul>の部分を自分の好きな内容に編集してみてください。

カテゴリー・タグ・アイキャッチ画像など、自由に情報を引っ張ってこれます。

例：アイキャッチ画像も表示する

<ul>
<?php while( $q->have_posts() ) : $q->the_post(); ?>
  <li><a href="<?php the_permalink(); ?>">
    <span class="post-thumb">
        <?php if ( has_post_thumbnail()): ?>
            <?php the_post_thumbnail('thumbnail'); ?>
        <?php else: ?>
            <img src="{NO IMAGE画像など}" alt="NO IMAGE">
        <?php endif; ?>
    </span>
    <span class="post-title">
        <?php the_title(); ?>
    </span>
    <?php if( !empty( $instance['show_date'] )): ?>
        <span class="post-date">
            <?php the_time('Y.m.d'); ?>
        </span>
    <?php endif; ?>
  </a></li>
<?php endwhile; ?>
</ul>

WordPress