【WordPress】プラグインなしで人気記事ランキングを表示する方法｜Ajaxでキャッシュ環境でも正確にカウント

function enqueue_post_views_script() {
    if ( ! is_single() ) {
        return;
    }

    wp_enqueue_script( 'post-views-counter', get_theme_file_uri( '/js/post-views.js' ), array(), '1.0', true );
    wp_localize_script( 'post-views-counter', 'postViewsData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'post_id'  => get_the_ID(),
        'nonce'    => wp_create_nonce( 'post_views_nonce' ),
    ) );
}
add_action( 'wp_enqueue_scripts', 'enqueue_post_views_script' );

(function () {
    if ( typeof postViewsData === 'undefined' ) {
        return;
    }

    var cookieName = 'post_viewed_' + postViewsData.post_id;

    // 既にこの投稿をカウント済みなら何もしない
    if ( document.cookie.indexOf( cookieName + '=' ) !== -1 ) {
        return;
    }

    fetch( postViewsData.ajax_url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'action=increment_post_views&post_id=' + encodeURIComponent( postViewsData.post_id )
            + '&nonce=' + encodeURIComponent( postViewsData.nonce ),
    } ).then( function () {
        document.cookie = cookieName + '=1; path=/; max-age=' + ( 60 * 60 * 24 ); // 1日は再カウントしない
    } );
} )();

function handle_increment_post_views() {
    check_ajax_referer( 'post_views_nonce', 'nonce' );

    $post_id = isset( $_POST['post_id'] ) ? absint( $_POST['post_id'] ) : 0;

    if ( ! $post_id || 'publish' !== get_post_status( $post_id ) ) {
        wp_send_json_error();
    }

    global $wpdb;
    $count_key = '_post_views_count';

    $updated = $wpdb->query( $wpdb->prepare(
        "UPDATE {$wpdb->postmeta} SET meta_value = meta_value + 1
         WHERE post_id = %d AND meta_key = %s",
        $post_id,
        $count_key
    ) );

    if ( ! $updated ) {
        add_post_meta( $post_id, $count_key, 1, true );
    }

    wp_send_json_success();
}
add_action( 'wp_ajax_increment_post_views', 'handle_increment_post_views' );
add_action( 'wp_ajax_nopriv_increment_post_views', 'handle_increment_post_views' );

function get_popular_posts( $limit = 5 ) {
    $args = array(
        'post_type'           => 'post',
        'posts_per_page'      => $limit,
        'meta_key'            => '_post_views_count',
        'orderby'             => 'meta_value_num',
        'order'               => 'DESC',
        'ignore_sticky_posts' => true,
    );
    return new WP_Query( $args );
}

<?php
$popular_posts = get_popular_posts( 5 );
if ( $popular_posts->have_posts() ) {
    echo '<ul class="popular-posts">';
    while ( $popular_posts->have_posts() ) {
        $popular_posts->the_post();
        $views = get_post_meta( get_the_ID(), '_post_views_count', true );
        echo '<li><a href="' . esc_url( get_permalink() ) . '">'
            . esc_html( get_the_title() ) . '</a>（' . intval( $views ) . ' views）</li>';
    }
    echo '</ul>';
    wp_reset_postdata();
} else {
    echo '<p>人気記事が見つかりませんでした。</p>';
}
?>