WordPressサイトで人気記事を表示する機能は、ユーザーの回遊率を高め、滞在時間を伸ばす上で非常に有効です。
この記事では、以下の方法を実装コード付きで丁寧に解説します。
- プラグインを使わずに、閲覧数に基づいた人気記事を表示する
- 月5万PV〜10万PV以上になっても、負荷が少ないようにする(Ajax化・キャッシュ対応)
なぜプラグインを使わない方法を選ぶのか?
WordPressには「WordPress Popular Posts」など人気記事表示の定番プラグインがありますが、
以下のような理由でfunctions.phpを使った独自実装をおすすめするケースもあります。
1. 複雑なカスタマイズに対応しやすい
プラグインでは対応が難しい「カスタムタクソノミー」を含んだ条件で人気記事を表示したい場合、functions.phpで閲覧数を制御する方が柔軟です。
特に独自のデザインや構成を必要とするメディアサイト・企業サイトでは、プラグインの制約が足かせになることもあります。
2. 自作テンプレートや独自の出力形式に統合しやすい
PHPやWP_Query
を使って自作テーマを構築している場合、ショートコードや独自ウィジェットに頼らず直接閲覧数を取得・表示できるのが大きな利点です。
コードの一貫性を保てるため、保守性やパフォーマンス面でも優れています。
⸻
実装方法:閲覧数の記録と取得
以下の2ステップで、閲覧数の記録と表示が可能になります。
1. functions.phpに記述するコード(閲覧数カウント処理)
まずはfunctions.phpに以下のコードを追加してください。
このコードでは、1時間ごとに更新するようになっています。
<?php
/**
* 記事閲覧数をカウントする
*/
define('POST_VIEWS_CACHE_KEY', 'post_views_cache');
// 記事閲覧数を取得する関数を定義
function set_post_views($postID)
{
$count_key = 'post_views_count';
$count = get_post_meta($postID, $count_key, true);
if ($count == '') {
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '1');
} else {
$count++;
update_post_meta($postID, $count_key, $count);
}
}
// functions.php にAjaxハンドラを追加
add_action('wp_ajax_nopriv_update_post_views', 'ajax_update_post_views');
function ajax_update_post_views()
{
$post_id = isset($_GET['post_id']) ? absint($_GET['post_id']) : 0;
if (!$post_id || is_bot()) wp_die();
$key = POST_VIEWS_CACHE_KEY; // キャッシュ用
$count = get_option($key, []);
if (!isset($count[$post_id])) {
$count[$post_id] = 1;
} else {
$count[$post_id]++;
}
update_option($key, $count); // オプションにまとめて保存(高速)
wp_die();
}
// クローラーのアクセスを判別
function is_bot()
{
$ua = $_SERVER['HTTP_USER_AGENT'];
$bot = array(
'Googlebot',
'Yahoo! Slurp',
'Mediapartners-Google',
'msnbot',
'bingbot',
'MJ12bot',
'Ezooms',
'pirst; MSIE 8.0;',
'Google Web Preview',
'ia_archiver',
'Sogou web spider',
'Googlebot-Mobile',
'AhrefsBot',
'YandexBot',
'Purebot',
'Baiduspider',
'UnwindFetchor',
'TweetmemeBot',
'MetaURI',
'PaperLiBot',
'Showyoubot',
'JS-Kit',
'PostRank',
'Crowsnest',
'PycURL',
'bitlybot',
'Hatena',
'facebookexternalhit',
'NINJA bot',
'YahooCacheSystem',
'NHN Corp.',
'Steeler',
'DoCoMo',
);
foreach ($bot as $bot) {
if (stripos($ua, $bot) !== false) {
return true;
}
}
return false;
}
// functions.php に反映処理を追加(5〜10分ごと)
function flush_post_view_cache_to_meta()
{
$key = POST_VIEWS_CACHE_KEY;
$count = get_option($key, []);
if (!$count || !is_array($count)) return;
foreach ($count as $post_id => $views) {
$current = (int) get_post_meta($post_id, 'post_views_count', true);
update_post_meta($post_id, 'post_views_count', $current + $views);
}
delete_option($key); // キャッシュクリア
}
// WP-Cron で定期実行(functions.php)
add_action('after_setup_theme', function () {
if (!wp_next_scheduled('flush_post_view_cache')) {
wp_schedule_event(time(), 'hourly', 'flush_post_view_cache'); // 1時間ごとに実行
}
});
add_action('flush_post_view_cache', 'flush_post_view_cache_to_meta');
もし、ランキングの更新タイミングを1時間ごとから変えたい場合は、wp_schedule_event(time(), 'hourly', 'flush_post_view_cache');
のhourly
の部分を変更してください。
例えば、2時間ごとならtwice_hourly
になります。
2. 閲覧数をカウントする場所(footer.php)
閲覧数を記録したいページに読み込みように、条件分岐を設定します。(今回は、記事の詳細ページをカウントしたいので、single.php)
以下のコードをfooter.phpに追加します。
他のJavaScriptの影響を受けないようにするために、なるべくbodyタグの閉じタグ近くに設置してください。
これで、記事を表示するたびに閲覧数が1カウントされます。
<?php //記事数のカウント(できるだけbodyの閉じタグ近くに設定)
if (is_single()) :
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
const postId = <?php echo get_the_ID(); ?>;
if (!sessionStorage.getItem("viewed_" + postId)) {
fetch("/wp-admin/admin-ajax.php?action=update_post_views&post_id=" + postId);
sessionStorage.setItem("viewed_" + postId, true);
}
});
</script>
<?php endif; ?>
⸻
3. 人気記事を表示する(任意のテンプレートphp)
以下のように、閲覧数に基づいて人気記事を取得できます。
<?php
/*WordPressオブジェクトの作成*/
$argsSinglePopular01 = array(
'post_type' => ['post', 'events', 'news'], // 対象の投稿タイプ(必要に応じて変更)
'posts_per_page' => 3, //表示する記事数
'meta_key' => 'post_popularity', // 人気記事のカスタムフィールドキー
'order' => 'DESC', // 'ASC' - 最低から最高に昇順 values (1, 2, 3; a, b, c).
'orderby' => 'meta_value_num', // 人気記事順
'ignore_sticky_posts' => 1, // WordPressの固定表示設定を無視
);
$my_querySinglePopular01 = new WP_Query($argsSinglePopular01);
?>
<?php if ($my_querySinglePopular01->have_posts()) : ?>
<?php
while ($my_querySinglePopular01->have_posts()) :
$my_querySinglePopular01->the_post();
?>
<!--ここに記事を出力するコードを記入-->
<?php endwhile; ?>
<p>ただいま準備中です。</p>
<?php endif; ?>
<?php wp_reset_postdata(); // ループの条件をリセット.
?>
⸻
注意点と補足
- キャッシュ系プラグイン(例:LiteSpeed Cache、WP Super Cache)を利用している場合、閲覧数が正しくカウントされないことがあります。Ajaxを使うことで解決する可能性があります。
- ボットやクローラーによるアクセスもカウントされるため、より精密な制御をしたい場合はIP判定などを追加してください。
⸻
参考サイト
WordPressオブジェクトのコードについて、以下のサイトが参考になります。
まとめ
プラグインを使わずに、シンプルかつ拡張性の高い人気記事表示を実現する方法をご紹介しました。
自作テーマやカスタマイズ性を重視する開発者には特におすすめの手法です。SEO対策の一環としても、人気記事の表示は有効なので、ぜひ導入してみてください。