アクセスの多い記事のランキングをサムネイル付きでメニュー表示してくれるプラグイン。

「このサイトで良く見られている人気の記事」というのはユーザが興味を示してくれることが多く、アクセ数を伸ばすのに役立ってくれます。

実際は検索エンジンで上位表示されている記事が上位に来てしまうことが多く、「Wordpress Popular Posts」により抽出されたその記事はまたたくさんの人に見られるという循環から、必ずしも良記事が上位に来るというわけではないところがネックですが…

デフォルトで日本語表示、「カスタムHTMLマークアップ」でデザインのカスタマイズもできます。

インストールと使い方

WordPressの管理画面から、「プラグイン」＞「新規追加」＞「検索」で【Wordpress Popular Posts】を検索してプラグインをインストールします。

「概観」＞「ウィジェット」に「Wordpress Popular Posts」が追加されているので任意の場所に設置。クリックすると出る設定バーから詳細設定を行います。

また、管理画面＞「設定」の「Wordpress Popular Posts」からアクセス数などのデータを参照することができます。

詳細設定

項目	説明
タイトル	ヘッダーのタイトルを指定
表示する数	表示するリストの数を指定
時間間隔	統計の間隔を「24時間」「1週間」「一ヶ月」「累計」から選択
並べ替え順	「コメント」「累積閲覧数」「1日の平均閲覧数」から選択
投稿設定	チェックするとタイトルの短縮が可能（下で文字数「語」「文字」も指定可能）
抜粋を表示する	チェックすると記事の抜粋を表示可能
フィルタ	「投稿タイプ」「表示しない投稿ID」「カテゴリID」「投稿者ID」で表示のフィルタ設定が可能
サムネール設定	チェックするとサムネイル表示（下でサイズ指定も可能）
統計タグ設定	任意の項目にチェックすると「コメント数」「閲覧数」「投稿者」「日付」「カテゴリ」を表示可能
HTMLマークアップの設定	チェックして保存するとHTMLマークアップの設定欄が出てくる

日本語化されているし、説明するまでもなくほとんどそのままです。

固定ページを表示させたくない時などは「フィルタ」を利用して「post」のみにしておくなど調整すれば良いと思います。

ちなみに、下で説明する「統計確認ページ」の統計の横にある「よくある質問」から詳しい使い方も載っています。

「HTMLマークアップの設定」にチェックを入れると自分でHTMLのカスタマイズができます。

閲覧数の確認

管理画面＞「設定」の「Wordpress Popular Posts」から「24時間」「1週間」「一ヶ月」「累計」のアクセス数ランキングが確認できます。

予想通りというか、アクセス解析のデータなんかと比べると数値が違うのですが、手っ取り早く確認できるので、あくまで記事ごとの相対的な比較や参考としてはまぁこれで良いのではないかと思います。

デザインのカスタマイズ

いざ導入してみたら、デザインがぐちゃぐちゃorz

ということでカスタマイズなんですが、ちょうど良いコードがあったので使わせて頂きました。

【Recent Post Plus】の表示と合わせています。
サイドバーウィジェットにサムネイル付きの「最新の投稿」を表示させるプラグイン【Recent Post Plus】

参考にさせて頂いたサイト様
「WordPress Popular Posts 」スタイルシート「style.css」設定

WordPress Popular Postsの設定項目にある「カスタムHTMLマークアップ」と「style.css」の2箇所の修正を行います。

カスタムHTMLマークアップ

<div class="wpp-container">
<div class="wpp-img">{thumb}</div>
<p>{title}</p>
</div>

「投稿用HTMLマークアップ」に上記のコードを入れます。

style.css

「style.css」に以下のコードを追加。

/* Popular Posts Plugin Style */
.wpp-container {
        margin: 0 auto;
        padding: 0.714285714rem 0 0.714285714rem;
        border-top-color: #EDEDED;
        border-top-style: solid;
        border-top-width: 1px;
        overflow: hidden;
}
.wpp-img {
        width: 15.625%;
        float: left;
}
.wpp-img img {
        max-width: 100%;
        width: auto;
        height: auto;
}
.widget-area .wpp-container p {
        width: 81.25%;
        margin-bottom: 0;
        font-size: 0.857142857rem;
        line-height: 1.6;
        float: right;
}

説明

画面幅に応じて変わるレスポンシブデザイン対応。固定の場合は「%」「rem」を「px」に変更。

中央揃えで、コンテンツの幅は以下のようになっているので好みの大きさに修正します。

• widthのベース幅：「320PX」
• サムネイルの幅：「50px」
• タイトルの幅：「260px」