SWELLが保存した累計PVを読み、閲覧数の多い公開済み投稿を最大6件のカードにする方法です。
週間・月間・年間の集計コードは掲載していません。
期間別ランキングの旧コードを設置した場合の注意点は、後半の「週間・月間・年間ランキングは別の集計が必要」で説明します。
人気記事ランキング（サンプル）
-
SWELL│スマホ画面下とサイドバーに固定追従バナーを設置する方法 -
SWELL│よく使うCSSのカスタマイズ│ヘッダー・フッター -
SWELLアイコン一覧｜100クラス名・80種類の文字コードとHTML・CSSの使い方 -
XServer VPS│手動更新を自動化する方法 -
WordPress│ブロックにふわっとフェードインアニメーションを追加する方法 -
SWELLのフック一覧と使い方｜アクション・フィルターの基本
SWELLで自作の人気記事ランキングカードを作る方法
やり方は自作のブログカードを生成する際に、SWELLで計測しているPV数を取得して並び替えるだけです。
functions.php
変更前をバックアップし、子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットに下記を追加してください。
親テーマは編集しません。
今回は上位6記事をカードにして並べてみました。
function motoki_swell_popular_posts_shortcode() {
if (!defined('SWELL_CT_KEY')) {
return '';
}
$previous_post = $GLOBALS['post'] ?? null;
ob_start();
$args = [
'posts_per_page' => 6,
'post_type' => 'post',
'post_status' => 'publish',
'no_found_rows' => true,
'ignore_sticky_posts' => 1,
'meta_key' => SWELL_CT_KEY,
'orderby' => 'meta_value_num',
'order' => 'DESC',
];
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
echo '<ul class="p-postList -type-card -w-ranking">';
while ($the_query->have_posts()) : $the_query->the_post();
?>
<li class="p-postList__item">
<a href="<?php the_permalink(); ?>" class="p-postList__link">
<div class="p-postList__thumb c-postThumb">
<figure class="c-postThumb__figure">
<?php if (has_post_thumbnail()) : ?>
<img class="c-postThumb__img u-obf-cover" src="<?php echo esc_url(get_the_post_thumbnail_url(get_the_ID(), 'medium')); ?>" alt="" sizes="(min-width: 600px) 320px, 50vw">
<?php endif; ?>
</figure>
</div>
<div class="p-postList__body">
<div class="p-postList__title"><?php the_title(); ?></div>
<div class="p-postList__meta">
</div>
</div>
</a>
</li>
<?php
endwhile;
echo '</ul>';
wp_reset_postdata();
endif;
$GLOBALS['post'] = $previous_post;
if ($previous_post instanceof WP_Post) setup_postdata($previous_post);
return ob_get_clean();
}
add_shortcode('motoki_swell_popular_posts', 'motoki_swell_popular_posts_shortcode');CSS
見た目を整えます。
PCでは3列、スマホでは2列にカードを並べています。
.-w-ranking .p-postList__item {
flex: 1 1 calc(33.33% - 20px);
}
@media (max-width: 960px) {
.-w-ranking .p-postList__item {
flex: 1 1 calc(50% - 20px);
}
}
/* サイドバー用 */
.l-sidebar .-w-ranking .p-postList__item {
flex: 1 1 100%;
}ショートコード
下記のショートコードを記事に挿入しましょう。
[motoki_swell_popular_posts]
出力結果は以下の通り。
人気記事ランキング（サンプル）
-
SWELL│スマホ画面下とサイドバーに固定追従バナーを設置する方法
-
SWELL│よく使うCSSのカスタマイズ│ヘッダー・フッター
-
SWELLアイコン一覧｜100クラス名・80種類の文字コードとHTML・CSSの使い方
-
XServer VPS│手動更新を自動化する方法
-
WordPress│ブロックにふわっとフェードインアニメーションを追加する方法
-
SWELLのフック一覧と使い方｜アクション・フィルターの基本
SWELL_CT_KEY（ct_post_views_byloos）を確認・編集する方法
投稿記事を開いて、右上のスリードットのメニューから設定を選びます。
編集画面の設定を開き、「一般」内の高度な設定などからカスタムフィールドを有効にします。WordPressの版により位置や名称が異なります。すでに欄が表示されている場合は、確認のために設定を変更する必要はありません。
記事下のカスタムフィールドという欄にct_post_views_byloosがあります。
保存値を変更するとランキングが変わります。
確認だけなら値を編集・保存しないでください。
以下は2026年10月11日に参照した編集画面です。WordPressとSWELLの版は未確認で、設定の位置が異なる場合があります。秘匿部分を隠しており、この画像だけで有効化操作の完了を示すものではありません。
週間・月間・年間ランキングは別の集計が必要
SWELLの累計値だけでは、直近7日間や今月の閲覧数は分かりません。
旧版はwp_headで累計値にも加算しており、テーマの計測との二重計上につながる設計でした。
また、30日・365日間隔のリセットは暦月・暦年と一致せず、ページキャッシュがあるとPHPの加算処理が動かないアクセスもあります。
このため、旧版の期間別カウント・リセットコードと期間別デモは取り下げました。
期間別の計測を導入する場合は、タイムゾーン、暦月か直近30日か、キャッシュ環境、ログイン中の閲覧・ボットを含むかを定義し、日付別の記録から集計する必要があります。
このページの累計ランキングを期間別PVと読み替えないでください。
旧版を設置済みの場合は、まず変更前のコードとデータを保存し、追加したtrack_periodic_post_viewsの登録と期間別のスケジュール登録・リセット関数を停止します。
登録済みCronのreset_periodic_weekly_views、reset_periodic_monthly_views、reset_periodic_yearly_viewsは残ることがあるため、イベント管理画面で対象名を確認してください。
SWELL本来の閲覧数や無関係なイベントは削除しません。
過去の二重計上分を自動で正確な値へ戻すことはできません。
確認方法と元に戻す方法
公開状態の投稿だけが最大6件並ぶこと、カードのリンク先、PC・スマホの列数を確認します。
閲覧数メタデータがない投稿はこのクエリに含まれません。
0件の場合は、テーマの計測設定と保存済みデータを確認してください。
同じ数値の場合の順序は未指定です。
PHPは子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットのどちらか一方に追加します。
既存の同名関数がある場合は追加ではなく置き換えます。
CSSは追加CSSか子テーマのstyle.cssへ、ショートコードはショートコードブロックへ貼り付けます。
戻すときは追加したPHP、CSS、ショートコードを取り除きます。
保存済みの閲覧数を削除する必要はありません。
検証範囲：テーマの定数と、公開・非公開の絞り込みおよび保存値を変更しない出力処理を検証しています。
PV計測自体の正確性や他のアクセス解析との一致は保証しません。
GitHubにある旧版の期間別コードは使わず、本文の累計表示用コードを使用してください。
別の投稿ループ内から呼ぶ場合の投稿情報を保持する
人気記事の取得後、呼び出す前に参照していた投稿を戻す処理を追加しました。
以前のwp_reset_postdata()だけでは、別のWP_Queryのループ内から呼んだときにメインクエリの投稿へ戻るため、後続の投稿名やリンクが別の記事を参照する場合があります。
同じテーマの通常記事に表示するだけでなく、別の投稿一覧ループの中にランキングを入れる場合も確認してください。
ランキングの後に表示するタイトルやリンクが、呼び出した側の投稿と一致することを確かめます。
変更前のPHPを保存し、同名関数を重複させず置き換え、問題があれば原本へ戻します。
2026年10月4日、独立したWordPress 7.1.2 / SWELL 2.19.0で、旧コードが参照中の投稿を変えることを再現し、修正後の復元と保存済みPV値を変更しないことを確認しました。
期間別カウントの旧コードは引き続き使用しません。
導入先ではPC・スマホ表示とカードのリンク先も確認してください。
関連する手順は、SWELLのカスタマイズまとめも参照してください。
よくある質問：SWELLで累計PVの人気記事ランキングカードを作るとき
このランキングは、何をもとにしていますか？
記事では、SWELLが保存した累計PVを読み、閲覧数の多い公開済み投稿を最大6件のカードにします。SWELL_CT_KEY（ct_post_views_byloos）というmeta_keyからPV数を取得しています。
週間・月間・年間のランキングも作れますか？
この記事のコードでは作れません。記事では、SWELLの累計値だけでは直近7日間や今月の閲覧数は分からず、旧版の期間別カウント・リセットコードと期間別デモは取り下げました。期間別を導入するなら、タイムゾーン、暦月か直近30日か、キャッシュ環境、ログイン中の閲覧・ボットを含むかを定義し、日付別の記録から集計する必要があります。
旧版の期間別コードを設置している場合は、どうしますか？
記事では、まず変更前のコードとデータを保存し、追加した期間別の計測処理とスケジュール登録・リセット関数を停止します。登録済みCronのリセット用イベントは残ることがあるため、イベント管理画面で対象名を確認します。SWELL本来の閲覧数や無関係なイベントは削除しません。過去の二重計上分を自動で正確な値へ戻すことはできません。
PVの値を、確認のために編集してもよいですか？
確認だけなら編集・保存しないでください。記事では、保存値を変更するとランキングが変わります。
PHPとCSS、ショートコードは、どこに入れますか？
記事では、PHPは子テーマのfunctions.phpのPHP内、またはCode SnippetsのPHPスニペットのどちらか一方に追加します。既存の同名関数がある場合は追加ではなく置き換えます。CSSは追加CSSか子テーマのstyle.cssへ、ショートコードはショートコードブロックへ貼り付けます。
カードが0件のときは、どうしますか？
記事では、閲覧数メタデータがない投稿はこのクエリに含まれません。0件の場合は、テーマの計測設定と保存済みデータを確認します。
別の投稿ループの中でランキングを使うときの注意点は？
記事では、人気記事の取得後、呼び出す前に参照していた投稿を戻す処理を追加しています。以前のwp_reset_postdata()だけでは、別のWP_Queryのループ内から呼んだときにメインクエリの投稿へ戻るため、後続の投稿名やリンクが別の記事を参照する場合があります。ランキングの後に表示するタイトルやリンクが、呼び出した側の投稿と一致することを確かめます。
PV計測の正確さは保証されますか？
保証されません。記事では、PV計測自体の正確性や他のアクセス解析との一致は保証しません。戻すときは、追加したPHP、CSS、ショートコードを取り除きます。保存済みの閲覧数を削除する必要はありません。
