人気記事ランキングを表示する方法

この記事では、WordPressサイトで閲覧数やコメント数を自動で集計し、人気記事ランキングを表示する方法を解説します。

サイト内で人気の記事を自動でランキング表示して読者の注目記事の傾向を把握できるようになります。

実装のポイント

• functions.php に人気記事集計用の関数を追加
• ショートコードで任意の場所にランキングを表示
• 閲覧数またはコメント数で自動ソート
• Lightning・Cocoon両方でデザイン調整可能

functions.php にコードを追加

// 閲覧数取得関数（1回だけ定義）
if (!function_exists('get_post_views')) {
    function get_post_views($postID){
        $count_key = 'post_views_count';
        $count = get_post_meta($postID, $count_key, true);
        if($count == ''){
            delete_post_meta($postID, $count_key);
            add_post_meta($postID, $count_key, '0');
            return "0";
        }
        return $count;
    }
}

// 閲覧数更新関数（管理者や特定ユーザーを除外）
if (!function_exists('set_post_views')) {
    function set_post_views($postID){
        // 管理者はカウントしない
        if(current_user_can('manage_options')) return;

        $count_key = 'post_views_count';
        $count = get_post_meta($postID, $count_key, true);

        if($count == ''){
            $count = 1;
            add_post_meta($postID, $count_key, $count);
        } else {
            $count++;
            update_post_meta($postID, $count_key, $count);
        }
    }
}

// シングル記事閲覧時にカウント
if (!function_exists('track_post_views')) {
    function track_post_views(){
        if(!is_single()) return;
        global $post;
        if(empty($post->ID)) return;
        set_post_views($post->ID);
    }
    add_action('wp', 'track_post_views'); // wp_head より安全
}

// 閲覧数取得関数（1回だけ定義）
if (!function_exists('get_post_views')) {
    function get_post_views($postID){
        $count_key = 'post_views_count';
        $count = get_post_meta($postID, $count_key, true);
        if($count == ''){
            delete_post_meta($postID, $count_key);
            add_post_meta($postID, $count_key, '0');
            return "0";
        }
        return $count;
    }
}

// 閲覧数更新関数（管理者や特定ユーザーを除外）
if (!function_exists('set_post_views')) {
    function set_post_views($postID){
        // 管理者はカウントしない
        if(current_user_can('manage_options')) return;

        $count_key = 'post_views_count';
        $count = get_post_meta($postID, $count_key, true);

        if($count == ''){
            $count = 1;
            add_post_meta($postID, $count_key, $count);
        } else {
            $count++;
            update_post_meta($postID, $count_key, $count);
        }
    }
}

// シングル記事閲覧時にカウント
if (!function_exists('track_post_views')) {
    function track_post_views(){
        if(!is_single()) return;
        global $post;
        if(empty($post->ID)) return;
        set_post_views($post->ID);
    }
    add_action('wp', 'track_post_views'); // wp_head より安全
}

// 人気記事ショートコード [popular_posts count="5" type="views"]
if (!function_exists('popular_posts_shortcode')) {
function popular_posts_shortcode($atts){
    $atts = shortcode_atts(array(
        'count' => 5,
        'type'  => 'views' // views または comments
    ), $atts, 'popular_posts');

    $args = array(
        'posts_per_page' => $atts['count'],
        'post_status'    => 'publish'
    );

    if($atts['type'] == 'views'){
        $args['meta_key'] = 'post_views_count';
        $args['orderby']  = 'meta_value_num';
    } else {
        $args['orderby'] = 'comment_count';
    }
    $args['order'] = 'DESC';

    $query = new WP_Query($args);

    $output = '<ol class="popular-posts">';
    while($query->have_posts()) : $query->the_post();
        $views = get_post_views(get_the_ID());
        $comments = get_comments_number();
        $output .= '<li>';
        $output .= '<a href="'.get_permalink().'">'.get_the_title().'</a>';
      //$output .= ' <span class="views-comments">(閲覧:'.$views.', コメント:'.$comments.')</span>';
        $output .= '</li>';
        endwhile;
    wp_reset_postdata();
    $output .= '</ol>';
    return $output;
}
add_shortcode('popular_posts', 'popular_posts_shortcode');

}
    

汎用CSS

/* -----------------------------
   人気記事リスト
----------------------------- */
.popular-posts {
    list-style: none;  /* デフォルトの数字を消す */
    counter-reset: popular-counter; /* カウンター初期化 */
    padding-left: 0;
    margin: 0 0 20px 0;
    font-size:14px;
}

.popular-posts li {
    counter-increment: popular-counter; /* 順位を増やす */
    position: relative;
    margin-bottom: 12px;
    line-height: 1.4;
    padding-left: 2em; /* 数字の分だけ余白 */
}

/* 数字をタイトル左に表示（色は黒） */
.popular-posts li::before {
    content: counter(popular-counter) "."; /* 1., 2., 3. ... */
    position: absolute;
    left: 0;
    top: 0; /* 常に上に固定 */
    font-weight: bold;
    color: #000; /* 黒に変更 */
}

/* タイトルリンクに下線 */
.popular-posts li a {
    text-decoration: none;
    color: #0073aa;
    display: inline-block;           
    border-bottom: 1px dotted #666; 
    padding-bottom: 2px;
}

.popular-posts li a:hover {
    border-bottom-style: solid;     
    color: #005177;
}

/* 閲覧・コメントは非表示 */
.popular-posts li .views-comments {
    display: none;
}
    

使い方

ウィジェット内や投稿記事内、固定ページ内でショートコードを使います。
count="5"の場合は5位まで表示されます。

    [popular_posts count="5" type="views"]   <!-- 閲覧数で人気記事5件 -->
    [popular_posts count="5" type="comments"] <!-- コメント数で人気記事5件 -->
    

（例 左Lightning 右Cocoon）

補足・カスタマイズ

• ショートコードの type で「views（閲覧数）」か「comments（コメント数）」を選択可能
• 表示件数は count で指定（例: count="5"）
• テーマに合わせてCSSで色や文字サイズを調整可能

まとめ

• functions.php に追加するだけで自動的に閲覧数やコメント数で人気記事を集計可能
• ショートコードで好きな場所にランキング表示