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

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

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

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

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

目次・読みたい所へタップできます

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

↓クリックすると画像拡大↓

「管理画面」

↓

「プラグイン」

↓

「新規追加」をクリック

↓

「WordPress Popular Posts」で検索

↓

「インストール」をクリック

↓

「有効化」をクリック

タップで目次に戻る

WordPress Popular Postsの設定

「管理画面」

↓

「設定」

↓

「WordPress Popular Posts」をクリック

「ツール」をクリック

WordPress Popular Postsツール設定

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

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

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

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

画像の取得元

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

その他の選択肢

「本文内の最初の画像」記事内にある最初の画像が設定されます。

「最初の添付ファイル」記事内に添付ファイルがあれば一番最初にあるものが表示されます(通常使わない)

「カスタムフィールド」カスタムフィールド内の画像を指定する(通常は使わない)

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

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

画像キャッシュとは？

一度あなたのサイトに訪問してくれたユーザーに「キャッシュ」という機能により、初回に読み込んだ画像を次回から読み込まなくて済むようにしてくれるものです。

その代わりこちらで画像を変更しても、ユーザー側が「リロード」しない限り初回に読み込まれた画像が表示されます。

例えば「アイキャッチ画像」を大幅に変更した時などに使うと、新たに設定した画像をもう一度ユーザーに読み込ませることができます。

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

タップで目次に戻る

WordPress Popular Postsデータの見方

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

閲覧を記録する対象者

「訪問者のみ」を選択。

その他の選択肢

「ログイン中のユーザーのみ」WordPressのIDを保持しているユーザーのみを対象にデータを取得します。

「全員」
自分も含めたデータを取得します。

ログ上限

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

その際に、保存期間の「日数」を入力。(当サイトはデフォルトの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」と指定した「カテゴリー」または「タグ」をランキングから除外できます。

上記2つが超重要な理由

人気記事一覧は、何も設定しなければサイト内で「本当に読まれている記事＝稼いでる可能性がある記事」が表示されます。

実はこれ問題でして、ネットには狡(こす)い連中が少なからずいるんですね。そういった連中が使う手として、人のサイトの人気記事(稼いでそうな記事)を確認して、独自リライトしてアップするということをします。

例えば、あなたがSEO初心者〜中級者だったり、まだドメインが育っていないサイトだった場合、トップアフィリエイターや鬼強サイトなどがリライトすれば簡単に主力記事をかっさらわれます。

実際、それが嫌で人気記事を非表示にしてる方もいるくらいです。

でもある程度PVが増えてくると、人気記事のクリック数もバカにならないですし、何より読者は興味があるからクリックしてるので捨てがたいですよね。

そういった場合は、自分が読んで欲しい記事の「記事ID」や「カテゴリーID」を指定して実際に稼いでる記事を隠してしまうのです。

こうすることで、実際のランキングとは関係なく自由にカモフラージュできます。

カテゴリーID確認方法

WordPressカテゴリーID確認方法

「管理画面」
↓
「カテゴリー」
↓
「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」の知識があれば、以下の専用コードを組み合わせれば自由にカスタマイズできます。

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

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

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)の部分は調整してください。

その他の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:◯
}

タップで目次に戻る