【プラグインなし】WordPressで人気記事ランキングを作る方法【コピペOK】

WordPress（ワードプレス）で人気記事をプラグインなしで掲載する方法を作りました！

実際に掲載されるときのイメージが、こんな感じ。

こちらの実装を『コピペ』だけでできるように整えました！

WordPressに人気記事を実装する方法
よくありそうな質問
1. 表示件数は変更できる？
人気記事ランキングの設置でブログの回遊率が上がる

WordPressに人気記事を実装する方法

実装方法は、3つのコードを『コピペ』するだけなので簡単です。
コードを貼り付ける場所は、以下の通り。

functions.php
style.css
ランキングを表示させたい場所

「functions.php」と「style.css」には、すでに別のコードが記入されていると思います。
この場合、それらを残したうえで、紹介するコードを追記してください。

トラブルが起きても元に戻せるよう、バックアップを取っておきましょう！

「functions.php」にコードを貼り付ける

コードを貼り付ける場所

STEP 1
「外観」の「テーマファイルエディター」を選択する
STEP 2
「Theme Functions（functions.php）」を選択する
STEP 3
下記のコードを全て貼り付ける

// =======================================================
// 人気記事ランキング（functions.php）
// =======================================================
function shortcode_popular_posts() {
  ob_start(); ?>
  <section class="popular-posts">
    <div class="popular-heading">人気記事ランキング</div>
    <div class="popular-grid">
      <?php
        $popular_posts = new WP_Query([
          'posts_per_page' => 5, // 表示数
          'meta_key'       => 'wpb_post_views_count',
          'orderby'        => 'meta_value_num',
          'order'          => 'DESC',
        ]);
        if ($popular_posts->have_posts()) :
          $rank = 0;
          while ($popular_posts->have_posts()) : $popular_posts->the_post();
          $rank++;
          $rank_class = ($rank === 1) ? 'popular-card rank-1' : 'popular-card';
      ?>
      <article class="<?php echo esc_attr($rank_class); ?>">
        <a href="<?php the_permalink(); ?>" class="popular-link">
          <div class="popular-thumb">
            <?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail('medium'); ?>
            <?php else : ?>
            <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/no_image3.gif" alt="">
            <?php endif; ?>
            <span class="popular-rank">
              <?php echo ($rank === 1) ? '👑 1' : $rank; ?>
            </span>
          </div>
          <div class="popular-info">
            <div class="popular-title"><?php the_title(); ?></div>
            <div class="popular-meta">
              <span class="popular-views"><i class="far fa-eye"></i> <?php echo number_format(get_post_meta(get_the_ID(), 'wpb_post_views_count', true)); ?></span>
              <time datetime="<?php echo get_the_date('c'); ?>"><i class="far fa-calendar"></i> <?php echo get_the_date('Y.m.d'); ?></time>
            </div>
          </div>
        </a>
      </article>
      <?php endwhile; endif; wp_reset_postdata(); ?>
    </div>
  </section>
  <script>
    // JS：カードをふわっと表示（順次フェードイン）
    document.addEventListener("DOMContentLoaded", function() {
      const cards = document.querySelectorAll('.popular-card');
      cards.forEach((card, i) => {
        card.style.opacity = 0;
        card.style.transform = 'translateY(20px)';
        setTimeout(() => {
          card.style.transition = 'all 0.5s ease';
          card.style.opacity = 1;
          card.style.transform = 'translateY(0)';
        }, 100 * i);
      });
    });
  </script>
  <?php
  return ob_get_clean();
}
add_shortcode('popular_posts', 'shortcode_popular_posts');

「style.css」にコードを貼り付ける

コードを貼り付ける場所

STEP 1
「外観」の「テーマファイルエディター」を選択する
STEP 2
「Stylesheet（style.css）」を選択する
STEP 3
下記のコードを全て貼り付ける


/**************************************************
 * 人気記事ランキング
 **************************************************/

/* --- レイアウト --- */
.popular-posts {
  margin: 40px auto;
  max-width: 900px;
  font-family: "Noto Sans JP", sans-serif;
}

.popular-heading {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
  border-bottom: 3px solid #333;
  display: inline-block;
  padding-bottom: 4px;
}

.popular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* --- カード --- */
.popular-card {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.popular-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* --- 1位だけ特別デザイン --- */
.popular-card.rank-1 {
  border: 2px solid #FFD700; /* ゴールド枠 */
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
  background: linear-gradient(135deg, #fffbe6, #fff);
  position: relative;
}

.popular-card.rank-1 .popular-rank {
  background: #FFD700;
  color: #111;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
}

/* --- リンク全体 --- */
.popular-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* --- サムネイル --- */
.popular-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.popular-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* --- 全体にホバー反応 --- */
.popular-card:hover img {
  transform: scale(1.06);
}

/* --- ランクバッジ --- */
.popular-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #111;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 20px;
}

/* --- 情報部 --- */
.popular-info {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.popular-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: #333;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popular-meta {
  font-size: 0.85rem;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 600px) {
  .popular-grid {
    grid-template-columns: 1fr;
  }
  .popular-heading {
    font-size: 1.4rem;
  }
}