SWELLでは投稿記事のPVをカウントしています。
その人気記事のランキングを表示するのが投稿リストブロックだったり人気記事ウィジェットです。
ここではウィジェット風のカードをショートコードで出力し、表示対象の投稿タイプを指定できるようにします。
そこでカスタマイズしてカスタム投稿タイプの記事でも人気記事ウィジェットを表示できるようにしてみました。
サンプル
好きなカスタム投稿タイプのランキングを表示できます。
以下は本記事の掲載コードを使った公開サンプルです。
投稿タイプをpost、表示件数を5件に指定しています。
人気記事
SWELLのカスタム投稿タイプ記事に人気記事ウィジェットを表示するカスタマイズ
PV計測の対象を追加する処理と、ランキングを表示する処理を順に設定します。
変更前に子テーマのfunctions.phpをバックアップし、複製環境で表示と戻し方を確認します。
カスタム投稿タイプの記事でもPVを計測する設定
子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットへ追加します。
親テーマは編集せず、同名関数の旧コードは置き換えてください。
この設定は、SWELLがPV計測の対象にする投稿タイプへnewsを追加します。
旧例の配列丸ごとの代入では、別のコードが追加した投稿タイプを外してしまうため、既存の対象と追加分を結合して重複を除く形へ修正しました。
newsは投稿タイプの登録スラッグです。
複数の投稿タイプを追加する場合はadditional_typesの配列へ必要なスラッグだけを入れます。
page・works・servicesなど、使わない投稿タイプを一括で追加する必要はありません。
// 既存のPV計測対象を保ち、newsを追加します。
add_action( 'after_setup_theme', function() {
$additional_types = array( 'news' ); // 必要な投稿タイプのスラッグへ変更。
\SWELL_Theme::$post_types_for_pvct = array_values( array_unique( array_merge(
(array) \SWELL_Theme::$post_types_for_pvct,
$additional_types
) ) );
} );カスタム投稿タイプ用の人気記事ウィジェットのコード
子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットへ追加します。
親テーマは編集せず、同名関数の旧コードは置き換えてください。
- 途中、人気記事というH2のHTMLを入れていますが、好きに変更してください。
- アイキャッチ画像がない場合はno image画像が表示されます。
function swell_popular_posts_shortcode($atts) {
$atts = shortcode_atts([
'post_type' => 'post',
'num' => 5,
], $atts, 'swell_popular_posts');
if (!defined('SWELL_CT_KEY') || !class_exists('SWELL_Theme')) {
return '';
}
$types = array_values(array_intersect(
array_map('sanitize_key', array_map('trim', explode(',', $atts['post_type']))),
get_post_types(['public' => true])
));
if (!$types) {
return '';
}
$limit = max(1, min(24, (int) $atts['num']));
$query_args = [
'post_type' => $types,
'post_status' => 'publish',
'has_password' => false,
'meta_query' => [[
'key' => SWELL_CT_KEY, 'value' => 0, 'compare' => '>', 'type' => 'NUMERIC',
]],
'meta_key' => SWELL_CT_KEY,
'orderby' => [ 'meta_value_num' => 'DESC', 'ID' => 'ASC' ],
'order' => 'DESC',
'posts_per_page' => $limit,
'no_found_rows' => true,
'ignore_sticky_posts' => true,
];
$previous_post = $GLOBALS['post'] ?? null;
$popular_posts = new WP_Query($query_args);
if (!$popular_posts->have_posts()) {
return '';
}
ob_start();
echo '<div class="c-widget widget_swell_popular_posts">';
echo '<h2 class="c-secTitle -widget">人気記事</h2>';
echo '<ul class="p-postList -type-card -w-ranking is-first-big">';
while ($popular_posts->have_posts()) {
$popular_posts->the_post();
$views = get_post_meta(get_the_ID(), SWELL_CT_KEY, true);
if ($views == 0) {
continue;
}
$thumbnail_html = SWELL_Theme::get_thumbnail([
'post_id' => get_the_ID(),
'class' => 'c-postThumb__img u-obf-cover',
'lazy_type' => 'none',
'use_noimg' => true,
'sizes' => '(min-width: 600px) 320px, 50vw',
]);
echo '<li class="p-postList__item">';
echo '<a href="' . esc_url(get_permalink()) . '" class="p-postList__link">';
echo '<div class="p-postList__thumb c-postThumb">';
echo '<figure class="c-postThumb__figure">';
echo $thumbnail_html;
echo '</figure>';
echo '</div>';
echo '<div class="p-postList__body">';
echo '<div class="p-postList__title">' . esc_html(get_the_title()) . '</div>';
echo '<div class="p-postList__meta">';
echo '<div class="p-postList__times c-postTimes u-thin">';
echo '<span class="c-postTimes__posted icon-posted">' . get_the_date('Y年n月j日') . '</span>';
echo '</div>';
$categories = get_the_category();
if (!empty($categories) && !is_wp_error($categories)) {
$category = reset($categories);
echo '<span class="p-postList__cat u-thin icon-folder" data-cat-id="' . (int) $category->term_id . '">' . esc_html($category->name) . '</span>';
}
echo '<span class="p-postList__views icon-eye u-thin">' . (int) $views . '</span>';
echo '</div>';
echo '</div>';
echo '</a>';
echo '</li>';
}
echo '</ul>';
echo '</div>';
wp_reset_postdata();
$GLOBALS['post'] = $previous_post;
if ( $previous_post instanceof WP_Post ) {
setup_postdata( $previous_post );
}
return ob_get_clean();
}
add_shortcode('swell_popular_posts', 'swell_popular_posts_shortcode');
ショートコードを設定する
投稿本文に表示する場合は、ショートコードブロックへ実行用ショートコードを入力します。
ショートコードにカスタム投稿タイプを入力します。
以下の例は、通常の投稿（post）とニュース（news）を混ぜたランキングを5件表示します。
[swell_popular_posts post_type="post,news" num="5"]
ニュースだけを表示する場合は、post_typeをnewsに変更します。
通常の投稿だけならpostを指定します。
表示する投稿タイプはショートコードの指定で決まります。
設置したページの投稿タイプに合わせて自動で切り替わる設定ではありません。
PV計測とランキング表示を分けて確認する
| 設定 | 決めるもの | 確認する場所 |
|---|---|---|
| additional_typesの配列 | 新たにPV計測の対象へ加える投稿タイプ | 対象投稿タイプの個別記事 |
| ショートコードのpost_type | ランキングに掲載する投稿タイプ | ショートコードを設置したページ |
| ショートコードのnum | 掲載する最大件数 | 生成されたカード数 |
newsをPV計測へ追加しても、表示側でpostだけを指定すれば、newsはランキングに出ません。
反対に、表示側でnewsを指定しても、保存されたPVが0・未計測ならカードは出ません。
導入後のアクセスで計測される設定であり、過去の閲覧数を復元するものではありません。
WordPress 7.1.2・SWELL 2.19.0の実処理で、既存の投稿タイプを保ちながらnewsを追加し、対象のPV用属性が出力されることを確認しました。
隔離環境では計測リクエストを1回送信して保存PVが増えることも確認しています。
ブラウザーが閲覧時に自動送信する一連の動作は未検証です。
実サイトではログアウト状態で対象記事を開き、保存PVとランキングの変化を確認してください。
newsと通常投稿を実ランキングで比べる
newsに30、通常投稿に20と10の検証用PVを保存し、掲載ショートコードで3件を表示しました。
スマホ幅390pxではnewsが1位となり、各記事のタイトル・PV表示・本文へのリンクを確認できました。
newsのリンクをEnterで開くと、その投稿の本文へ移動します。
表示用ショートコードのpost_typeには、登録済みの公開投稿タイプを指定します。
固定ページへ実行用ショートコードを置く場合と、記事でコードを説明する場合を区別してください。
ここに掲載した二重角かっこの見本は実行を防ぐ表示用です。
PV対象の追加では、既存のpostとeventを保ってnewsが追加されることも確認しました。
検証用newsへSWELLの計測RESTリクエストを1回送ると、保存PVは30から31へ増えました。
ただし、このブラウザーからの自動計測通信は失敗しており、閲覧するだけで加算されることを確認した結果ではありません。
導入先ではログアウト状態でnewsを開き、計測属性・通信結果・保存PVを順に比べてください。
ランキングの表示成功と自動計測の成功は別です。
戻す場合は追加したPHPと実行用ショートコードだけを外し、蓄積済みPVは削除しません。
テキストウィジェットへ保存して投稿タイプを切り替える
コードを有効にした後、従来のウィジェット画面で「共通サイドバー」に「テキスト」を追加します。
タイトルを入力し、「コード」タブの本文へ、実行用ショートコードを入力して保存します。
実行時は全体を半角の角かっこ1組で囲み、表示用の二重角かっこをそのまま貼り付けないでください。
通常投稿とお知らせを混ぜる場合は、post_type="post,news"と指定します。
num="2"なら、指定した投稿タイプ全体からPV順に2件を表示します。
各投稿タイプを2件ずつ表示する指定ではありません。
お知らせだけに絞る場合は、post_type="news" num="1"へ変更して保存します。
公開記事の投稿タイプ名を指定し、正のPVが記録された記事があることを確認してください。
隔離環境では、混合指定でPV90・80のお知らせ2件が表示され、再編集して入力値が残ることを確認しました。
news・1件へ変更するとPV90の記事だけが表示され、画像が読み込まれ、リンクをEnterで開けました。
表示を戻すときはテキスト本文のショートコードを外して保存します。
コードも不要になった場合は、今回追加したスニペットだけを無効にします。
ブロック型ウィジェット、スマホ専用サイドバー、WP Rocketを含むキャッシュ構成は、この実画面の検証に含みません。
まとめ
人気記事の一覧は、関連する記事を読者が探すための導線として使えます。
カスタム投稿タイプでも活用できます。
回遊率への効果は本記事では測定していないため、導入後にリンクの利用状況を確認してください。
旧版のコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
post_type=”post,news”は投稿とnewsを混ぜたランキングです。
newsだけならpost_type=”news”を指定します。
numは1〜24件に制限し、公開設定の投稿タイプだけを対象とします。
カテゴリー未登録のカスタム投稿ではカテゴリー欄を表示しません。
閲覧数が正の公開記事だけを取得し、パスワード保護記事は除きます。
該当記事がない場合は見出しも表示しません。
別記事の同名swell_popular_posts関数・ショートコードとは併用できません。
戻す場合は追加したPHPとショートコードを外します。
PV計測対象の設定を戻しても既存の閲覧数を削除する必要はありません。
期間別集計やPV計測の正確性はこの表示コードの検証対象外です。
同じPVの記事は投稿IDの昇順で並べます。
別の投稿ループ内で呼び出しても、一覧の取得前に表示していた投稿へ戻してから終了します。
実WordPressとSWELLで、newsのPVが10・10・2の並び、0・未計測・下書き・パスワード保護記事の除外、worksとの混合、件数の下限、画像あり・no imageの生成HTML、別ループ内の投稿復帰を確認しました。
公開サンプルはPC・スマホで5件のカードと実画像の読み込み、Enterによる記事への移動を確認しました。
隔離環境でHTTPリクエスト1回によるPV加算は確認済みですが、閲覧時のブラウザー自動計測が完了する一連の動作は未検証です。
同名ショートコードを別のコードと併用する構成も検証していません。
PVが変わっても人気記事の順位が変わらない場合
| 所有する検証投稿の状態 | サイドバーの順位 |
|---|---|
| PVが100と99の2記事でサイドバーをキャッシュ | PV100の記事を1位として表示 |
| 2記事目の保存済みPVを101へ更新 | 既存キャッシュではPV100の記事が1位のまま |
| 該当サイドバーのキャッシュを作り直す | PV101の記事へ1位が切り替わる |
SWELL 2.19.0の実際のテキストウィジェットで、保存済みPVの変更とランキング表示を比較しました。
PVの保存値と、キャッシュされたランキングHTMLは別です。
値が増えていても順位が変わらないときは、使用しているサイドバーやページのキャッシュを確認してください。
この試験では検証用投稿のPV値だけを変更し、該当するサイドバーキャッシュだけを作り直しました。
閲覧時の自動通信が成功した結果ではありません。
計測値自体が増えない場合は、swell-ct-pvの通信確認と分けて調べます。
掲載している対象追加PHPは、すでに登録されている別のカスタム投稿タイプを残してnewsを追加することも確認しました。
SWELLの実出力では、匿名のnews記事にPV通信対象の属性が付き、ログイン中の同じ記事には付きません。
匿名・ログイン中を混ぜて計測の成否を判断しないでください。
キャッシュの確認後も、公開ページで件数・画像・リンクを照合します。
WP Rocketを含む実製品の構成や、ブラウザーからの自動PV通信が最後まで成功する条件は未検証です。
よくある質問：SWELLのカスタム投稿タイプで人気記事ウィジェットを表示するとき
投稿リストブロックでも、カスタム投稿タイプの人気記事を表示できますか？
記事では、投稿リストブロックは条件を入力すればカスタム投稿タイプの記事でも人気記事を表示できるとしています。この記事のカスタマイズは、ウィジェット風のカードをショートコードで出力し、表示対象の投稿タイプを指定できるようにするものです。
PVの計測とランキングの表示は、別の設定ですか？
別です。記事では、PV計測の対象を追加する処理と、ランキングを表示する処理を順に設定します。newsをPV計測へ追加しても、表示側でpostだけを指定すればnewsはランキングに出ません。反対に、表示側でnewsを指定しても、保存されたPVが0・未計測ならカードは出ません。
過去の閲覧数も、ランキングに反映されますか？
されません。記事では、導入後のアクセスで計測される設定であり、過去の閲覧数を復元するものではないとしています。
表示する投稿タイプは、どう決まりますか？
記事では、表示する投稿タイプはショートコードの指定で決まります。設置したページの投稿タイプに合わせて自動で切り替わる設定ではありません。通常の投稿とニュースを混ぜるときは、post_typeに両方を指定し、ニュースだけならnews、通常の投稿だけならpostを指定します。
件数は、どこまで指定できますか？
記事では、numは1〜24件に制限し、公開設定の投稿タイプだけを対象とします。閲覧数が正の公開記事だけを取得します。複数の投稿タイプを混ぜて2件を指定した場合は、各投稿タイプを2件ずつではなく、指定した投稿タイプ全体からPV順に2件を表示します。
テキストウィジェットに入れるときの注意点はありますか？
記事では、従来のウィジェット画面で「共通サイドバー」に「テキスト」を追加し、「コード」タブの本文へ実行用ショートコードを入力して保存します。実行時は全体を半角の角かっこ1組で囲み、表示用の二重角かっこをそのまま貼り付けないでください。
PVが増えているのに、サイドバーの順位が変わらないのはなぜですか？
記事では、PVの保存値と、キャッシュされたランキングHTMLは別だと説明しています。値が増えていても順位が変わらないときは、使用しているサイドバーやページのキャッシュを確認します。記事の検証では、該当サイドバーのキャッシュを作り直すと順位が切り替わりました。計測値自体が増えない場合は、PVの通信確認と分けて調べます。
この記事のコードは、どこまで検証されていますか？
記事では、WordPress 7.1.2・SWELL 2.19.0の隔離環境で確認しています。一方、ブラウザーが閲覧時に自動送信する一連の計測動作、同名ショートコードを別のコードと併用する構成、ブロック型ウィジェット、スマホ専用サイドバー、WP Rocketを含むキャッシュ構成は未検証です。実サイトではログアウト状態で対象記事を開き、保存PVとランキングの変化を確認してください。
