MENU

【WordPress】プラグインなしでランキング機能を実装する方法

WEB制作
  • URLをコピーしました！

今回は、WordPressでプラグインを使わずにアクセス数によるランキング機能を実装する方法をご紹介します！
プラグインを利用すると自由度が制限され、デザインを細かく調整するのが難しい場合があります。
そのため、自作テーマやテーマをカスタマイズして、独自のランキング機能を作りたい方に特におすすめの手法です！

目次

ランキング機能の仕組み

WordPressでランキングを表示するには、主に以下の2つの機能が必要です。

  • 各投稿のアクセス数をカウントして保存する機能
  • アクセス数順に投稿を取得して表示する機能

これらをプラグインなしで実装するために、WordPressのカスタムフィールド（post_meta）を活用します。

functions.phpの設定（アクセスカウンター機能）

まずは投稿のアクセス数をカウントするコードをfunctions.phpに追加します。このコードでは以下の処理を行います。

  1. アクセス数の取得と更新
  2. 投稿表示時のカウント処理
  3. 管理画面への表示
// アクセス数を取得
function get_post_views($post_id)
{
  $views = get_post_meta($post_id, 'post_views_count', true);
  return $views ? intval($views) : 0;
}

この関数は指定された投稿IDのアクセス数を取得します。get_post_meta関数でカスタムフィールド「post_views_count」の値を取得し、値がない場合は0を返します。

// アクセス数を1増やす
function set_post_views($post_id)
{
  $views = get_post_meta($post_id, 'post_views_count', true);
  $views = $views ? intval($views) + 1 : 1;
  update_post_meta($post_id, 'post_views_count', $views);
}

この関数はアクセス数を1増やします。現在の値を取得し、1を加えてupdate_post_metaで更新します。

// 投稿表示時にアクセス数を加算
function count_post_views()
{
  if (is_singular('news')) {
    global $post;
    set_post_views($post->ID);
  }
}
add_action('wp_head', 'count_post_views');

wp_headアクションフックを使って、「news」という投稿タイプの個別ページが表示されるたびにアクセス数を加算します。is_singular('news')で投稿タイプを限定しているので、「news」タイプの投稿のみカウントされます。

// 「news」投稿一覧にアクセス数カラムを追加
function add_views_column_to_news($columns)
{
  $columns['views'] = 'アクセス数';
  return $columns;
}
add_filter('manage_news_posts_columns', 'add_views_column_to_news');

// アクセス数の表示内容を指定
function show_views_column_in_news($column_name, $post_id)
{
  if ($column_name === 'views') {
    $views = get_post_meta($post_id, 'post_views_count', true);
    echo $views ? esc_html($views) : '0';
  }
}
add_action('manage_news_posts_custom_column', 'show_views_column_in_news', 10, 2);

これらの関数は管理画面の「news」投稿一覧に「アクセス数」カラムを追加し、各投稿のアクセス数を表示するためのものです。これにより管理者はどの記事が人気かを簡単に確認できます。

archive-news.phpでのランキング表示

続いて、アクセス数の多い順に投稿を表示するコードをarchive-news.phpに実装します。

// アクセス数順に並べるクエリ（上位3件）
$query_ranking = new WP_Query([
    'post_type'      => 'news',
    'posts_per_page' => 3,
    'meta_key'       => 'post_views_count',  // アクセス数の保存キー
    'orderby'        => 'meta_value_num',    // 数値でソート
    'order'          => 'DESC',              // 降順（多い順）
]);
$rank = 1; // ランキング番号の初期値

このコードでは、WP_Queryを使って「news」タイプの投稿を「post_views_count」の値（アクセス数）の降順で取得しています。ポイントは以下の通りです：

  • meta_keyで「post_views_count」を指定
  • orderbyを「meta_value_num」に設定して数値としてソート
  • orderを「DESC」に設定して降順（多い順）にソート
  • posts_per_pageで上位3件のみ取得
<ul class="p-archive__list">
    <?php if ($query_ranking->have_posts()) : ?>
        <?php while ($query_ranking->have_posts()) : $query_ranking->the_post(); ?>
            <li class="p-archive__post">
                <a href="<?php the_permalink(); ?>" class="p-archive__postLink">
                    <span class="p-archive__postRankingNumber"><?php echo $rank; ?></span>
                    <?php if (has_post_thumbnail()) : ?>
                        <div class="p-archive__postImage">
                            <?php the_post_thumbnail('full', ['alt' => get_the_title(), 'loading' => 'lazy']); ?>
                        </div>
                    <?php endif; ?>
                    <div class="p-archive__postBody">
                        <h3 class="p-archive__postText"><?php the_title(); ?></h3>
                    </div>
                </a>
            </li>
            <?php $rank++; ?>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
    <?php endif; ?>
</ul>

このコードでは、取得した人気記事を順番に表示しています。

  1. $rank変数を使ってランキング番号（1, 2, 3…）を表示
  2. アイキャッチ画像がある場合は表示
  3. 記事タイトルを表示
  4. ループ内で$rank++でランキング番号をインクリメント
  5. ループ終了後にwp_reset_postdata()でWordPressのグローバル変数をリセット

コードのまとめ

functions.php

// アクセス数を取得
function get_post_views($post_id)
{
  $views = get_post_meta($post_id, 'post_views_count', true);
  return $views ? intval($views) : 0;
}

// アクセス数を1増やす
function set_post_views($post_id)
{
  $views = get_post_meta($post_id, 'post_views_count', true);
  $views = $views ? intval($views) + 1 : 1;
  update_post_meta($post_id, 'post_views_count', $views);
}

// 投稿表示時にアクセス数を加算
function count_post_views()
{
  if (is_singular('news')) {
    global $post;
    set_post_views($post->ID);
  }
}
add_action('wp_head', 'count_post_views');

// 「news」投稿一覧にアクセス数カラムを追加
function add_views_column_to_news($columns)
{
  $columns['views'] = 'アクセス数';
  return $columns;
}
add_filter('manage_news_posts_columns', 'add_views_column_to_news');

// アクセス数の表示内容を指定
function show_views_column_in_news($column_name, $post_id)
{
  if ($column_name === 'views') {
    $views = get_post_meta($post_id, 'post_views_count', true);
    echo $views ? esc_html($views) : '0';
  }
}
add_action('manage_news_posts_custom_column', 'show_views_column_in_news', 10, 2);

archive-news.php

<?php
// アクセス数順に並べるクエリ（上位3件）
$query_ranking = new WP_Query([
    'post_type'      => 'news',
    'posts_per_page' => 3,
    'meta_key'       => 'post_views_count',  // アクセス数の保存キー
    'orderby'        => 'meta_value_num',    // 数値でソート
    'order'          => 'DESC',              // 降順（多い順）
]);
$rank = 1; // ランキング番号の初期値
?>
<ul class="p-archive__list">
    <?php if ($query_ranking->have_posts()) : ?>
        <?php while ($query_ranking->have_posts()) : $query_ranking->the_post(); ?>
            <li class="p-archive__post">
                <a href="<?php the_permalink(); ?>" class="p-archive__postLink">
                    <span class="p-archive__postRankingNumber"><?php echo $rank; ?></span>
                    <?php if (has_post_thumbnail()) : ?>
                        <div class="p-archive__postImage">
                            <?php the_post_thumbnail('full', ['alt' => get_the_title(), 'loading' => 'lazy']); ?>
                        </div>
                    <?php endif; ?>
                    <div class="p-archive__postBody">
                        <h3 class="p-archive__postText"><?php the_title(); ?></h3>
                    </div>
                </a>
            </li>
            <?php $rank++; ?>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
    <?php endif; ?>
</ul>

追加のカスタマイズ

この基本的な実装をもとに、さらに機能を拡張できます。

集計期間の設定

// 過去30日間のアクセス数ランキング
$thirty_days_ago = date('Y-m-d H:i:s', strtotime('-30 days'));
$query_ranking = new WP_Query([
    'post_type'      => 'news',
    'posts_per_page' => 3,
    'meta_key'       => 'post_views_count',
    'orderby'        => 'meta_value_num',
    'order'          => 'DESC',
    'date_query'     => [
        'after' => $thirty_days_ago,
    ],
]);

カテゴリー別ランキング

// カテゴリーIDを指定してアクセス数ランキング
$query_ranking = new WP_Query([
    'post_type'      => 'news',
    'posts_per_page' => 3,
    'meta_key'       => 'post_views_count',
    'orderby'        => 'meta_value_num',
    'order'          => 'DESC',
    'tax_query'      => [
        [
            'taxonomy' => 'news_category',
            'field'    => 'id',
            'terms'    => 5, // カテゴリーIDを指定
        ],
    ],
]);

プラグインを使わずにWordPressでランキング機能を実装する方法をご紹介しました。この実装方法の利点は以下の通りです：

  1. プラグインの依存関係がなく、サイトの軽量化につながる
  2. 自由にカスタマイズできるため、デザインや機能を柔軟に調整できる
  3. WordPress標準機能を活用しているため、将来のバージョンアップでも互換性が保たれやすい

ぜひご自身のサイトに取り入れて、読者に人気コンテンツを効果的に提示してください！

※注意点：アクセス数のカウント方法は非常にシンプルなため、同じユーザーが何度も訪問した場合も毎回カウントされます。より精度の高いカウント方法が必要な場合は、セッションやクッキーを活用した実装を検討してください。

WEB制作
WordPress
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次