Xwriteで人気記事を表示する方法｜WordPress Popular Postsの導入からCSSカスタマイズまで完全解説

2026-03-042026-03-20

WordPress

ブログのトップページに「人気記事」を表示すると、読者がよく読まれている記事にすぐアクセスできるようになり、サイト内回遊率の向上やSEOにも良い効果が期待できます。

特にWordPressテーマ「Xwrite」を使用している場合、人気記事を表示する方法として WordPress Popular Postsというプラグインを使う方法が一般的です。

この記事では、

Xwriteに人気記事ランキングを表示する方法
WordPress Popular Postsの導入手順
人気記事をトップページに表示する設定
ランキング番号やデザインを整えるCSSカスタマイズ

までを初心者でも分かるように詳しく解説します。

目次 [ close ]

WordPress Popular Postsとは

WordPress Popular Postsは、記事のPV（閲覧数）を計測し、「よく読まれている記事」をランキング形式で表示できる人気プラグインです。

WP Popular Posts

WordPress.org 日本語

主な特徴は次の通りです。

記事の閲覧数を自動でカウント
人気記事ランキングを表示できる
期間別ランキング（24時間・1週間・1ヶ月など）
サムネイル付き表示
ショートコードで簡単設置

多くのWordPressサイトで使われており、XWRITEでも問題なく利用できます。

WordPress Popular Postsのインストール

まずはプラグインをインストールします。

WordPress管理画面を開く
「プラグイン」→「新規追加」をクリック
検索欄に「WordPress Popular Posts」と入力
インストール → 有効化

これでPV計測機能が有効になります。

Xwriteのトップページに人気記事を表示する

Xwriteではトップページを固定ページに設定しているケースが多いです。

その場合は次の手順で表示できます。

トップページ用の固定ページを開く
WordPress Popular Postsブロックを追加
人気記事ランキングを設定
ページを更新

これだけでトップページに人気記事を表示できます。

人気記事を横並びにするCSS

WordPress Popular Postsはデフォルトだと縦並び表示です。

そこでCSSを追加してカード型レイアウトにします。

外観 → カスタマイズ → 追加CSSに次のコードを追加してください。

.wpp-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 0;
    counter-reset: wpp-ranking;
}

.wpp-list li {
    flex: 1 1 calc(33.333% - 14px);
    list-style: none;
    box-sizing: border-box;
    position: relative;
}

.wpp-list li::before{
    counter-increment: wpp-ranking;
    content: counter(wpp-ranking);
    position: absolute;
    top: 0px;
    left: 0px;
    background: #4c4c4c;
    color: #f1f1f2;
    font-weight: bold;
    font-size: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.wpp-list li img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border: solid 2px #4c4c4c;
    transition: filter .3s ease;
    position: relative;
    z-index: 1;
    margin-bottom:1em;
}

.wpp-list li:hover img{
    filter: brightness(0.9);
}

.wpp-post-title{
    font-weight:700;
    letter-spacing:0.03em;
    color:#4c4c4c;
    text-decoration:none;
}

.wpp-post-title:hover{
    color:#2355a5;
}

@media (max-width: 600px){
    .wpp-list li{
        flex: 1 1 100%;
    }
}