「人気記事」を「新着情報」と同じデザインで表示する方法

はじめに

「人気記事」を「記事情報」と同じデザインで表示する機能を追加します。

この記事では、この方法について説明します。

完成イメージ

使用方法

actionオプションを追加します。

[info_list action="popular"]

実装手順

以下のコードをfunctions.phpに追加します。

集計期間は「全期間」となります。

// ショートコード属性を変更
add_filter('shortcode_atts_info_list', function ($out, $pairs, $atts) {
  $GLOBALS['info_list_action'] = $atts['action'] ?? null;

  return $out;
}, 10, 3);


// 新着情報のクエリを設定
add_filter('get_info_list_args', function ($args) {
  // popular以外は処理対象外
  if (($GLOBALS['info_list_action'] ?? '') !== 'popular') {
    return $args;
  }

  $records     = get_access_ranking_records('all', $args['posts_per_page'], 'post');
  $popular_ids = $records ? wp_list_pluck($records, 'ID') : [];

  // 人気記事がない場合は該当する投稿なしに設定
  if (empty($popular_ids)) {
    $popular_ids = [0];
  }

  // 人気順に設定
  $args['orderby']  = 'post__in';
  $args['post__in'] = $popular_ids;

  return $args;
});


// 新着情報に情報を追加
add_action('info_list_item_meta_before', function () {
  // popular以外は処理対象外
  if (($GLOBALS['info_list_action'] ?? '') !== 'popular') {
    return;
  }

  $pv = get_all_pv();
  $pv_unit = ($pv == '1') ? 'view' : 'views';
  $pv_text = $pv . ' ' . $pv_unit;
  $pv_text = apply_filters('popular_entry_card_pv_text', $pv_text, $pv, $pv_unit);

  echo '<span class="popular-entry-card-pv widget-entry-card-pv">' . $pv_text . '</span>';
}, 10, 2);


// ショートコードHTML出力を変更
add_filter('do_shortcode_tag', function ($output, $tag, $attr, $m) {
  if ($tag === 'info_list') {
    $GLOBALS['info_list_action'] = null;
  }

  return $output;
}, 10, 4);

さいごに

今回紹介した方法を使えば、「新着情報」と同じ形式で人気記事を簡単に表示できます。
見た目の統一感を保ちながら、ユーザーが関心を持つ人気コンテンツを効率よく提示できるのが魅力です。