人気記事WordPress Popular Postsの設定とCSSカスタマイズ解説

→ サイトを見てみる

この記事では「人気記事ランキング」を手軽に実装できる「WordPress Popular Posts」の設定とCSSカスタマイズを解説します。

もしあなたが、人気記事をそのまま表示しているとしたら危険信号です。設定は問題ないけどそこだけ気になるという方は「こちらへ」

プラグインのまとめ記事はこちら

WordPressのおすすめプラグイン・新旧19個を紹介

WordPress Popular Postsのインストール方法

WordPress Popular Postsの設定

「管理画面」

↓

「設定」

↓

「WordPress Popular Posts」をクリック

「ツール」をクリック

WordPress Popular Postsツール設定

「記事の表示方法」を設定していきます。

デフォルトのアイキャッチ画像

ここは何も設定しなくてOK。

ここに画像を設定するとその画像が表示されてしまうので注意。

画像の取得元

通常「アイキャッチ画像」を選択。

画像キャッシュを空にする

通常は使わない項目です。

「適用」をクリックすると、設定が反映されます。

WordPress Popular Postsデータの見方

訪れたユーザーデータをどのように取得するかを設定します。

閲覧を記録する対象者

「訪問者のみ」を選択。

ログ上限

「データ保存期間」を選択。

その際に、保存期間の「日数」を入力。(当サイトはデフォルトの180日)

「無効」を選択すると、保存期間が無期限になるので無駄にデータが蓄積するので注意。

ウィジェットを 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」と指定した「カテゴリー」または「タグ」をランキングから除外できます。

WordPressカテゴリーID確認方法

• 「管理画面」
• ↓
• 「カテゴリー」
• ↓
• 「IDを見たいカテゴリーにマウスオーバー」
• ↓
• 「一番下に表示されるのがID」

タグのIDも同様の手順で確認できます。

記事IDも上記のように1つ1つの記事を確認すれば、良いのですがかなり面倒です。

そこで以下のように、記事一覧で「ID」が表示されるようにカスタマイズします。

こちらの記事にやり方を書いているので、良かったら参考にしてください。

WordPressのfunctions.phpで使える超カスタマイズコードまとめ

投稿者ID

通常使いません。

例えば「複数人で運営しているサイト」などで、特定の執筆者IDをここに入力すると、その執筆者の記事だけランキングから除外できます。

投稿指定

ランキングの表示形式を指定できます。

変更したい箇所にチェックを入れたら「保存」をクリック後もう一度ウィジェットを開くと設定項目が表示されます。

タイトルを短縮

通常はノーチェック。

「タイトル文字数」を指定できます。

「単語」は日本語では反応しません。

実際はこのように表示されます。

ただし、後ほど解説するCSSを使えば「フォントサイズ」や「字間」の調整もできるので余程長いタイトルでなければそちらでも対応できます。

抜粋を表示

通常はノーチェック。

「抜粋文字数」を指定できます。

「単語」は日本語には反応しません。

実際はこのように表示されます。

「抜粋」を含めると、ランキング内がかなりごちゃつくのでオススメはしません。

アイキャッチ画像を表示

アイキャッチ画像の表示形式を指定。

画像サイズは「既定」か「手動」のどちらかを選択できます。

通常は「既定」サイズの中から選べば問題ないと思いますが、ここはテーマによってサイドバーの幅などが若干違ったりするので、合わない場合は「手動」でサイズ調整をしてください。

読み込み速度だけを考えるなら「非表示」の方が早くなりますが、デザインとどちらを優先するかは自由です。

実際はこのように表示されます。

統計タグの設定

ランキング内に表示したい項目があればチェックを入れます。

コメント数を表示

閲覧数を表示

デフォルトでは「〇〇ビュー」とカタカナ表記ですが、以下のコードを「functions.php」に追記すると「〇〇views」と英語表記にできます。

functions.php
function remove_posted_on( $output ){
return str_replace("ビュー", " views", $output);
}
add_filter( 'wpp_post', 'remove_posted_on');

先ほどの「パクり防止対策」でいうと、基本views数は非表示にしておくことをオススメします。

すでに、サイトがそれなりの規模であればライバルも簡単に追いつけないので良いとは思いますが。

投稿者を表示

日付を表示」

「記事の公開日」が表示されます。(更新日ではありません)

チェックを入れたら、一度「保存」をクリックすると「フォーマットが表示されます」。

「表示形式」を選択

タクソノミーを表示

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

HTMLマークアップ設定

ここは少し難しいので、初心者の方は「ノーチェック」で構いません。

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

「HTML」と「CSS」の知識があれば、以下の専用コードを組み合わせれば自由にカスタマイズできます。

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;/* アイコンの右側に余白 */ 
} 

「アイコンの種類はこちらから」

Font Awesome 5 Icons

もう一つ、テーマによって見出しの下に余白を指定しているものがあります。当サイトで使用している「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.css
ul.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;
}

サンプルでは丸くしましたが 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まとめ

人気記事のパクられる危険性や調整方法まで解説してる記事はなかったので、気づきがあった方もいるのではないでしょうか？

どのジャンルでもそうですが、解説系の記事を作成する場合、普通に作る分には時間をかければ誰でもできます。なので、検索上位の記事に載ってないけど「超重要」な箇所はないか？を考えてみましょう。

そうすると結構あったりするので、それを記事にすると読者から感謝の声が届くようなオリジナル記事に仕上がります。参考までに。

プラグインのまとめ記事はこちら

WordPressのおすすめプラグイン・新旧19個を紹介

→ サイトを見てみる