『WordPress Popular Posts』ランキング順に番号を振る設定

2025年8月17日

WordPress Popular Posts（WPP）では、デフォルトでランキングに順位が表示されません。

ですが、コードをちょこっと編集し、CSSを追加することで以下のような順位をつけることができます。

WordPress Popular Postsでランキング順に番号を振った例。 — ランキングに順位を付けた例。

今回は、WPPのランキングに順位をつける設定をご紹介します！

『WordPress Popular Posts』ランキング順に番号を振る設定

ウィジェットでテキストブロックを作成

まずはWordPressの「外観」→「ウィジェット」を開き、「テキスト」ブロックに下記のショートコードを追加して保存します。

[wpp post_type='post' limit=7 range='weekly' order_by='views' thumbnail_width=110 thumbnail_height=60 stats_views=0 post_html='
 	<li>
<div class="wpp-thumbnail-wrapper">{thumb_img}</div>
<a href="{url}">{text_title}</a></li>
']

変更できる箇所の説明

limit=7　…表示する記事数が7つ

range='weekly'　…集計期間、日別なら「daily」月別なら「monthly」

thumbnail_width=110　…サムネイル（アイキャッチ）の横幅を110pxに

thumbnail_height=60　…サムネイル（アイキャッチ）の横幅を60pxに

WordPressのウィジェットでWordPress Popular Postsのショートコードを貼り付けた例。 — 「テキスト」ブロックにショートコードを貼り付けた例。

当サイトの別記事で紹介した、以下のコードを使用している方へ。

[wpp post_type='post' limit=7 range='weekly' order_by='views' thumbnail_width=110 thumbnail_height=60 stats_views=0]

最後のstats_views=0以降で］を消し、半角スペースを入れたあとに、下記のコードをつけ足してください。

post_html='
 	<li>
<div class="wpp-thumbnail-wrapper">{thumb_img}</div>
<a href="{url}">{text_title}</a></li>
']

かきばナ

WPPのコードを貼り付けたテキストブロックが完成したら、次に進むよ！

CSSを追加する

WordPressの「外観」→「カスタマイズ」→「追加CSS」を開き、以下のコードを貼り付けます。

/* WordPress Popular Posts のランキング表示用CSS */

/* 1. ランキングのカウンターを初期化する親要素 */
.wpp-list,
.widget_wpp_widget ul {
  counter-reset: wpp-rank-counter;
  list-style-type: none;
  padding-left: 0;
}

/* 2. 各リストアイテム内のサムネイルラッパーの設定 */
.wpp-list li .wpp-thumbnail-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* 3. ランキング番号のスタイルと表示 */
.wpp-list li .wpp-thumbnail-wrapper::before {
  counter-increment: wpp-rank-counter;
  content: counter(wpp-rank-counter);
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 135, 170, 0.95);
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 6px;
  line-height: 1;
  z-index: 10;
  border-bottom-right-radius: 8px;
}
/* WordPress Popular Postsのタイトルずれを修正 */
.wpp-list li {
  display: flex;
  align-items: center; /* 画像とタイトルを垂直方向の中央で揃える */
  margin-bottom: 1em;  /* 記事ごとの下の余白（お好みで調整してください） */
}

/* 画像とタイトルの間に余白を設ける */
.wpp-list li .wpp-thumbnail-wrapper {
  margin-right: 0px; /* 画像の右側の余白（お好みで調整してください） */
  flex-shrink: 0;     /* コンテンツ幅が狭い時に画像が縮むのを防ぐ */
}