Wordpress Popular Postsでの表示内容をテーマ内でカスタマイズする方法

投稿日：2021/10/16 ｜最終更新：2021/10/21
Wordpress
ウィジェット

Wordpressで人気記事を表示するプラグイン「Wordpress Popular Posts」では、人気記事一覧の表示内容を、通常は管理画面上でカスタマイズします。
プラグインの基本的な設定はプラグインの設定画面で行い、表示内容（出力内容）はウィジェットメニューで調整します。
Wordpress Popular Posts のウィジェットメニューで、HTMLマークアップをカスタマイズすることで表示内容を設定できますが、例えばリンクの範囲を調整したり、タイトルの文字数を変更したりクラスを変更したりなど、オリジナルのテーマファイルを開発している人にとってはもっと細かく調整したいというリクエストがあると思います。

参考URLでカスタマイズ方法や仕組みを詳細に説明していただいています。
自分がよく使うサンプルコードを掲載して備忘録としてまとめておきます。

テーマファイル側内でWordpress Popular Postsをカスタマイズする方法は下記の通りです。

テーマ内で人気記事一覧の出力内容をカスタマイズする方法

通常は、管理画面のウィジェットメニュー内で人気記事の出力内容の設定を行います。
ウィジェットを使用する箇所に<?php dynamic_sidebar( 'popular-posts' ); ?>などの関数で人気記事を出力できます。

上記コードで出力される内容をカスタマイズするには、function.phpに加筆して対応します。

記事のアイキャッチまたはnoimage用の画像と記事のタイトルをリンクブロックに入れた場合

/**
 * 人気コンテンツ出力調整
 *
 * @param string $post_html post_html.
 * @param object $p post data.
 * @param mixed  $instance wpp setting.
 */
function my_custom_single_popular_post( $post_html, $p, $instance ) {
    $title = wp_strip_all_tags( $p->title );
    if ( mb_strwidth( $title, 'UTF-8' ) / 2 > 40 ) {
        $title = wp_trim_words( $title, 40, '...' );
    }
    if ( get_the_post_thumbnail_url( $p->id, 'full' ) ) {
        $img = get_the_post_thumbnail_url( $p->id, 'full' );
    } else {
        $img = get_template_directory_uri() . '/images/noimage.jpg';
    }
    $output  = '<li>';
    $output .= '<a href="' . get_the_permalink( $p->id ) . '" title="' . esc_attr( $title ) . '">';
    $output .= '<div class="image"><img src="' . esc_url( $img ) . '"></div>';
    $output .= '<div class="title"><h4>' . esc_html( $title ) . '</h4></div>';
    $output .= '</a>';
    $output .= '</li>';

    return $output;
}
add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );

$outputに記事ごとに出力する内容を代入しておきます。
$pの内容や関数を利用してアレンジを行って出力内容を調整できます。

解説

上記関数の引数にはそれぞれ下記の内容が代入されています。

$post_html：もともと設定されていた post_html の値
$p：id やタイトルが格納された配列（下記参照）
$instance：出力用の設定内容値

$pに代入されている情報は下記の通りです。

stdClass Object
(
    [id] => 記事ID
    [title] => 記事タイトル
    [date] => 投稿日時 // Y-m-d H:i:s
    [uid] => 投稿ユーザーID
    [pageviews] => 記事閲覧数
)

まとめ

上記コードを変更すれば、例えばトップページに表示する時だけカテゴリー名を入れたり、記事の本文や抜粋の一部を掲載したり、様々なカスタマイズが可能です。
Wordpress Popular Postsは人気記事表示用のプラグインとしては非常に人気なプラグインなので使うことは多いですが、記事内容表示部分で条件分岐などを利用したいことがよくあったので、これからも積極的に利用していきたいTIPSです。