この記事では「人気記事ランキング」を手軽に実装できる「WordPress Popular Posts」の設定とCSSカスタマイズを解説します。
もしあなたが、人気記事をそのまま表示しているとしたら危険信号です。設定は問題ないけどそこだけ気になるという方は「こちらへ」
プラグインのまとめ記事はこちら

目次・読みたい所へタップできます
WordPress Popular Postsのインストール方法
「管理画面」
↓
「プラグイン」
↓
「新規追加」をクリック
↓
「WordPress Popular Posts」で検索
↓
「インストール」をクリック
↓
「有効化」をクリック
WordPress Popular Postsの設定
WordPress Popular Postsツール設定
「記事の表示方法」を設定していきます。
デフォルトのアイキャッチ画像
画像の取得元
「本文内の最初の画像」記事内にある最初の画像が設定されます。
「最初の添付ファイル」記事内に添付ファイルがあれば一番最初にあるものが表示されます(通常使わない)
「カスタムフィールド」カスタムフィールド内の画像を指定する(通常は使わない)
画像キャッシュを空にする
一度あなたのサイトに訪問してくれたユーザーに「キャッシュ」という機能により、初回に読み込んだ画像を次回から読み込まなくて済むようにしてくれるものです。
その代わりこちらで画像を変更しても、ユーザー側が「リロード」しない限り初回に読み込まれた画像が表示されます。
例えば「アイキャッチ画像」を大幅に変更した時などに使うと、新たに設定した画像をもう一度ユーザーに読み込ませることができます。
「適用」をクリックすると、設定が反映されます。
WordPress Popular Postsデータの見方
訪れたユーザーデータをどのように取得するかを設定します。
閲覧を記録する対象者
「ログイン中のユーザーのみ」WordPressのIDを保持しているユーザーのみを対象にデータを取得します。
「全員」
自分も含めたデータを取得します。
ログ上限
「無効」を選択すると、保存期間が無期限になるので無駄にデータが蓄積するので注意。
ウィジェットを AJAX 化
キャッシュ系のプラグインを入れている場合は、ここを「有効」にすると、キャッシュ済みのデータしか表示されなくなります。
WPP キャッシュ期限ポリシー
このプラグインが原因で読み込みが遅くなっている場合は>「キャッシュする」を選択

キャッシュの「更新間隔」を指定できます。
データサンプリング

通常「無効」を選択
大規模サイトであれば「有効化」するとパフォーマンスが向上する可能性があると公式サイトの人が言っていますが、ブログであれば「無効」で問題ありません。
「適用」をクリックすると、設定が反映されます。
WordPress Popular Postsその他の設定
リンクの開き方
記事ランキングをクリックした際、どのように開くかを指定します。
新しいタブまたはウィンドウ
新たに別のページを開き記事を表示します。
現在のウィンドウ
現在開いてるページ内で記事を開きます。
人気記事へのクリック数が少ない場合(始めたばかりのサイトやサイト設計が悪いなど)は「新しいタブまたはウィンドウ」にしましょう。
逆に人気記事をバンバンクリックされてるようなサイトの場合は「現在のウィンドウ」にした方がユーザーに親切です。(じゃないと「タブ」があなたのサイトだらけになってしまうので)
プラグインのスタイルシートを使う
プラグインにデフォルトで備わっている「CSS」を使用するかの選択です。

通常は「有効」を選択
自分でカスタマイズしたい人は「無効」を選択すると好きにデザインできます。
デフォルトでも十分デザインは整っているので、よっぽどこだわりがなければそのまま使えば良いと思います。
キャッシュを空にする

通常使いません。
「全期間データ」以外(24時間、週間、月間)のランキングデータを削除します。
すべてのデータを削除

通常使いません。
全期間データを含めたすべてのデータが削除されます。(今までのPV数などもすべてリセットされてしまうので要注意)
「適用」をクリックすると、設定が反映されます。
WordPress Popular Postsサイドバーに実装する方法

「管理画面」
↓
「外観」
↓
「ウィジェット」をクリック

「WordPress Popular Posts」を表示したい箇所にドラッグ&ドロップ
タイトル設定

ここで指定したものがランキング上部に表示されます。
最大表示数

「任意」で選択(5〜10件程度がオススメ)
ソート順
どの「データ」を基準に順位をつけるか?ということです。

通常「総閲覧数」または「1日の平均閲覧数」を選択。
読者に読んでもらいたい記事によって使い分けましょう。
コメント
コメント数が多い記事順に並びます。(通常使いません)
総閲覧数
全期間で表示回数が多い記事順に表示されます。
1日の平均閲覧数
1日あたりで割った閲覧数が多い記事が表示されます。
計測期間
表示したい記事によって各自調整。


選択期間内に公開された投稿のみを表示
通常は使いません。
毎日大量に記事をアップしてるサイトなどは、用途に合わせて使えるかもしれません。
上記で「カスタム」を選択した場合、一度「保存」をしてもう一度ウィジェットを開いてください。

計測したい期間を選択できる項目が追加されています。
投稿タイプ

デフォルトで「post」になっているので、そのままで構いません。
これで「投稿記事」を取得してくれることになっています。
例えば「post,page」とすれば、固定ページもランキングに含めることができます。
除外する投稿ID

超重要項目
例えば、アクセスは多くても「炎上する記事」などで、新規読者の目に触れさせたくない記事などがあれば、その「記事ID」を入力することでランキングから除外できます。
タクソノミー

超重要項目
例えば「カテゴリー単位」または「タグ単位」でランキング表示を調整する場合に使用します。
その場合、表示させたい「カテゴリーID」または「タグID」をここに入力します。IDの前に「-」を付ける「例:-99」と指定した「カテゴリー」または「タグ」をランキングから除外できます。
人気記事一覧は、何も設定しなければサイト内で「本当に読まれている記事=稼いでる可能性がある記事」が表示されます。
実はこれ問題でして、ネットには狡い連中が少なからずいるんですね。そういった連中が使う手として、人のサイトの人気記事(稼いでそうな記事)を確認して、独自リライトしてアップするということをします。
例えば、あなたがSEO初心者〜中級者だったり、まだドメインが育っていないサイトだった場合、トップアフィリエイターや鬼強サイトなどがリライトすれば簡単に主力記事をかっさらわれます。
実際、それが嫌で人気記事を非表示にしてる方もいるくらいです。
でもある程度PVが増えてくると、人気記事のクリック数もバカにならないですし、何より読者は興味があるからクリックしてるので捨てがたいですよね。
そういった場合は、自分が読んで欲しい記事の「記事ID」や「カテゴリーID」を指定して実際に稼いでる記事を隠してしまうのです。
こうすることで、実際のランキングとは関係なく自由にカモフラージュできます。

WordPressカテゴリーID確認方法
- 「管理画面」
- ↓
- 「カテゴリー」
- ↓
- 「IDを見たいカテゴリーにマウスオーバー」
- ↓
- 「一番下に表示されるのがID」
タグのIDも同様の手順で確認できます。
記事IDも上記のように1つ1つの記事を確認すれば、良いのですがかなり面倒です。
そこで以下のように、記事一覧で「ID」が表示されるようにカスタマイズします。
こちらの記事にやり方を書いているので、良かったら参考にしてください。

投稿者ID

通常使いません。
例えば「複数人で運営しているサイト」などで、特定の執筆者IDをここに入力すると、その執筆者の記事だけランキングから除外できます。
投稿指定
ランキングの表示形式を指定できます。
変更したい箇所にチェックを入れたら「保存」をクリック後もう一度ウィジェットを開くと設定項目が表示されます。
タイトルを短縮

通常はノーチェック。
「タイトル文字数」を指定できます。
「単語」は日本語では反応しません。
実際はこのように表示されます。
ただし、後ほど解説するCSSを使えば「フォントサイズ」や「字間」の調整もできるので余程長いタイトルでなければそちらでも対応できます。
抜粋を表示

通常はノーチェック。
「抜粋文字数」を指定できます。
「単語」は日本語には反応しません。
例えば「抜粋内」に「太字」や「リンク」などがある場合にそのまま表示してくれます。
実際はこのように表示されます。
「抜粋」を含めると、ランキング内がかなりごちゃつくのでオススメはしません。
アイキャッチ画像を表示

アイキャッチ画像の表示形式を指定。
画像サイズは「既定」か「手動」のどちらかを選択できます。
通常は「既定」サイズの中から選べば問題ないと思いますが、ここはテーマによってサイドバーの幅などが若干違ったりするので、合わない場合は「手動」でサイズ調整をしてください。
読み込み速度だけを考えるなら「非表示」の方が早くなりますが、デザインとどちらを優先するかは自由です。
実際はこのように表示されます。
統計タグの設定

ランキング内に表示したい項目があればチェックを入れます。
コメント数を表示
閲覧数を表示
デフォルトでは「〇〇ビュー」とカタカナ表記ですが、以下のコードを「functions.php」に追記すると「〇〇views」と英語表記にできます。
functions.phpfunction remove_posted_on( $output ){ return str_replace("ビュー", " views", $output); } add_filter( 'wpp_post', 'remove_posted_on');

先ほどの「パクり防止対策」でいうと、基本views数は非表示にしておくことをオススメします。
すでに、サイトがそれなりの規模であればライバルも簡単に追いつけないので良いとは思いますが。
投稿者を表示
ここで表示されるのは「ブログ上の表示名」です。
日付を表示」
「記事の公開日」が表示されます。(更新日ではありません)
チェックを入れたら、一度「保存」をクリックすると「フォーマットが表示されます」。

「表示形式」を選択
タクソノミーを表示

「カテゴリー」または「タグ(全部)」を表示できます。


上記の場合「保育園」「買い物」は「タグ」なんですが、ブラウザ上は「カテゴリー」と表示されてます。
HTMLマークアップ設定
ここは少し難しいので、初心者の方は「ノーチェック」で構いません。

チェックを入れたら「保存」をクリック

「HTML」と「CSS」の知識があれば、以下の専用コードを組み合わせれば自由にカスタマイズできます。
コード | 意味 |
---|---|
{thumb} | リンク付きのサムネイル画像 |
{thumb_img} | リンクなしのサムネイル画像 |
{thumb_url} | サムネイル画像のURLを表示(通常使わない) |
{title} | リンク付きの記事タイトルの表示 |
{text_title} | リンクなしの記事タイトルを表示 |
{summary} | 記事の抜粋を表示 |
{rating} | 「WP-PostRatings」プラグインを有効化している場合「記事順位」を表示 |
{score} | 「WP-PostRatings」プラグインを有効化している場合「記事評価」を表示 |
{url} | 記事のURLを出力します。(通常使わない) |
{author} | リンク付きの著作者名を表示 |
{category} | リンク付きカテゴリー名を表示 |
{taxonomy} | リンク付きタクソノミーを表示(通常使わない) |
{views} | 閲覧数を表示 |
{comments} | コメント数を表示 |
{date} | 投稿日を表示 |
WordPress Popular Postsウィジェット用CSSカスタマイズ
ここから上記で解説した「人気記事」のCSSを書いていきます。
見出しデザイン
style.css/* 見出しCSS */ .widgettitle{ background:#ffbf7f;/* 背景カラー */ color:#fff;/* テキストカラー */ font-weight:bold;/* テキスト太字 */ text-align:center;/* テキスト真ん中寄せ */ padding:1px;/* 内側の余白 */ margin-bottom:10px;/* 外側の下に余白 */ } /* 見出しにアイコン挿入 */ .popular-posts .widgettitle :before{ content: "\f201";/* アイコン種類 */ font-family: "FontAwesome";/* アイコン挿入 */ font-weight:normal;/* アイコンだけ細く */ padding-right: 6px;/* アイコンの右側に余白 */ }
「アイコンの種類はこちらから」
もう一つ、テーマによって見出しの下に余白を指定しているものがあります。当サイトで使用している「WordPressテーマ「ストーク」」はそんな感じです。
それを消すには以下のコードを使用します。
style.css.popular-posts .widgettitle { margin-bottom:0; }
ウィジェットリンク関連のCSS
リンクカラー、外部アイコン、フォントサイズなどを調整します。

style.css/* ウィジェット内のリンク全て */ .widget a{ text-decoration:none;/* リンクの下線消す */ color:#222;/* リンクカラー */ } /* ウィジェット内外部リンクアイコン削除 */ .widget a[target="_blank"]:after { content:none; } /* テキストと背景指定 */ .popular-posts .wpp-list{ background:#fdfdfd;/* 背景カラー */ font-weight: bold;/* テキスト太字 */ letter-spacing: 1.3px;/* テキスト字間 */ font-size:11px;/* テキストサイズ */ }
投稿下に下線CSS
必須ではないですが、あるとオシャレに見えます。
style.cssul.wpp-list li { border-bottom: 1px solid #ddd;/* 投稿下に下線 */ position:relative;/* 位置の指定 */ }
リスト内の余白調整
少し複雑になりますが、以下のように指定すると余白が均等になります。
style.css/* リスト1段目の余白 */ ul.wpp-list li:nth-child(1){ padding: 10px 5px!important; } /* リスト2段目〜10段目の余白 */ ul.wpp-list li:nth-child(n+2):nth-child(-n+10){ padding:2px 5px 10px 5px!important; }
上記では、人気記事を「10」表示してる指定の為、それ以外の場合は(-n+10)
の部分は調整してください。
ランキングカウンターを消す場合
テーマに標準でランキングカウンターが実装されている場合にカウンターを消す為のコードです。
/* ランキング表示を消す場合 */
ul.wpp-list li a:before{
display:none;
}
ul.wpp-list li:before{ display:none; }
どちらかのコードで消えるはずです。
ランキングを実装する場合
style.css/* ランキングカウンター実装 */ ul.wpp-list li:before{ content:counter(wpp-count); display:block; position:absolute; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.2); font-size:13px; font-weight:bold; background:#555; padding:3px 8px; border-radius:50%; z-index:1; } /* カウント数を実装 */ ul.wpp-list li { counter-increment: wpp-count; } /* 上位3位の背景色変更 */ ul.wpp-list li:nth-child(1):before{ background: #fdd35c; } ul.wpp-list li:nth-child(2):before{ background: #a0a0a0; } ul.wpp-list li:nth-child(3):before{ background: #bf783e; } ul.wpp-list li:nth-child(10):before{ padding:3px 10px; }
一番下のul.wpp-list li:nth-child(10)
は、ランキングを10位以上(二桁)にする場合、余白が狭くなるので、各自調整してください。
サンプルでは丸くしましたが border-radius:10%
あたりにすれば四角く変更できます。
position: absolute;
で位置を固定しているのでright:0;
bottom:0;
を指定すれば右下に移動できたりと位置は自由に調整できます。
その他のCSS
基本的なカスタマイズは上記で十分かと思いますが、以下で紹介するコードは用途に合わせて使ってください。
/* アイキャッチ画像 */ ul.wpp-list li img{ width:◯; height:◯; } /* ビュー数 */ .wpp-views{ color:◯; } /*コメント*/ .wpp-comments { font-size:◯ color:◯ } /*投稿者*/ .wpp-author { font-size:◯ color:◯ } /*日付*/ .wpp-date { font-size:◯ color:◯ } /*カテゴリー*/ .wpp-category { font-size:◯ color:◯ }
WordPress Popular Posts統計情報の見方
today
確認時点の本日分の「ビュー数」と「コメント数」を見れます。
24h
確認時点から遡った1日分の「ビュー数」と「コメント数」を見れます。
7d
確認時点から遡った1週間分の「ビュー数」と「コメント数」を見れます。
30d
確認時点から遡った30日分の「ビュー数」と「コメント数」を見れます。
カスタム
確認したい「時間」と「期間」を自由に設定できます。


Most viewed
上記で指定した期間内の「上位10件のビュー数」が表示されます。
Most commented
上記で指定した期間内の「コメント数(最大10件)」が表示されます。
Trending now
指定した期間に関係なく現在見られている記事の「ビュー数」と「コメント数」が表示されます。
Hall of Fame
プラグインを設定してから取得した上位10件の累計「ビュー数」と「コメント数」が表示されます。
WordPress Popular Postsまとめ
人気記事のパクられる危険性や調整方法まで解説してる記事はなかったので、気づきがあった方もいるのではないでしょうか?
どのジャンルでもそうですが、解説系の記事を作成する場合、普通に作る分には時間をかければ誰でもできます。なので、検索上位の記事に載ってないけど「超重要」な箇所はないか?を考えてみましょう。
そうすると結構あったりするので、それを記事にすると読者から感謝の声が届くようなオリジナル記事に仕上がります。参考までに。
プラグインのまとめ記事はこちら

※日本語が含まれていないコメントは投稿できません。(スパム対策)