WordPressカスタマイズまとめ←クリック

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

人気記事プラグイン設定方法

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

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

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

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

WordPress Popular Postsインストール方法

管理画面

プラグイン

新規追加」をクリック

WordPress Popular Posts」で検索

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

有効化」をクリック

WordPress Popular Postsの設定

WordPress Popular Posts設定

管理画面

設定

WordPress Popular Postsをクリック

WordPress Popular Postsツール設定

ツール」をクリック

WordPress Popular Postsツール設定

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

WordPress Popular Postsアイキャッチ画像設定

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

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

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

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

画像の取得元

WordPress Popular Posts画像取得元

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

その他の選択肢

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

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

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

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

WordPress Popular Posts画像キャッシュ

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

画像キャッシュとは?

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

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

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

WordPress Popular Posts適用

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

WordPress Popular Postsデータの見方

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

WordPress Popular Postsデータ設定

閲覧を記録する対象者

WordPress Popular Posts閲覧を記録する対象者

訪問者のみ」を選択。

その他の選択肢

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

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

ログ上限

WordPress Popular Postsログ上限

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

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

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

ウィジェットを AJAX 化

WordPress Popular PostsウィジェットをAJAX化

無効」を選択。

キャッシュ系のプラグインを入れている場合は、ここを「有効」にすると、キャッシュ済みのデータしか表示されなくなります。

WPP キャッシュ期限ポリシー

WordPress Popular PostsWPPキャッシュ期限ポリシー

通常「キャッシュしない」を選択。

このプラグインが原因で読み込みが遅くなっている場合は>「キャッシュする」を選択

WordPress Popular Postsキャッシュ更新間隔

キャッシュの「更新間隔を指定できます。

データサンプリング

WordPress Popular Postsデータサンプリング

通常「無効」を選択

大規模サイトであれば「有効化」するとパフォーマンスが向上する可能性があると公式サイトの人が言っていますが、ブログであれば「無効」で問題ありません。

WordPress Popular Posts適用

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

WordPress Popular Postsその他の設定

WordPress Popular Postsその他の設定

リンクの開き方

記事ランキングをクリックした際、どのように開くかを指定します。

WordPress Popular Postsリンクの開き方

新しいタブまたはウィンドウ

新たに別のページを開き記事を表示します。

現在のウィンドウ

現在開いてるページ内で記事を開きます。

ウィンドウ設定について

人気記事へのクリック数が少ない場合(始めたばかりのサイトやサイト設計が悪いなど)は「新しいタブまたはウィンドウ」にしましょう。

逆に人気記事をバンバンクリックされてるようなサイトの場合は「現在のウィンドウ」にした方がユーザーに親切です。(じゃないと「タブ」があなたのサイトだらけになってしまうので)

プラグインのスタイルシートを使う

プラグインにデフォルトで備わっている「CSS」を使用するかの選択です。

WordPress Popular Postsプラグインのスタイルシートを使う

通常は「有効」を選択

自分でカスタマイズしたい人は「無効」を選択すると好きにデザインできます。

デフォルトでも十分デザインは整っているので、よっぽどこだわりがなければそのまま使えば良いと思います。

キャッシュを空にする

WordPress Popular Postsキャッシュを空にする

通常使いません。

「全期間データ」以外(24時間、週間、月間)のランキングデータを削除します。

すべてのデータを削除

WordPress Popular Postsすべてのデータを削除

通常使いません。

全期間データを含めたすべてのデータが削除されます。(今までのPV数などもすべてリセットされてしまうので要注意)

WordPress Popular Posts適用

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

WordPress Popular Postsサイドバーに実装する方法

WordPressウィジェット

管理画面

外観

ウィジェット」をクリック

WordPress Popular Postsウィジェット設定

WordPress Popular Postsを表示したい箇所にドラッグ&ドロップ

タイトル設定

WordPress Popular Postsウィジェットタイトル

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

WordPress Popular Postsランキングタイトル

最大表示数

WordPress Popular Postsウィジェット最大表示数

「任意」で選択(5〜10件程度がオススメ)

ソート順

ソートとは?

どの「データ」を基準に順位をつけるか?ということです。

WordPress Popular Postsウィジェットソート順

通常「総閲覧数」または1日の平均閲覧数」を選択。

読者に読んでもらいたい記事によって使い分けましょう。

コメント

コメント数が多い記事順に並びます。(通常使いません)

総閲覧数

全期間で表示回数が多い記事順に表示されます。

1日の平均閲覧数

1日あたりで割った閲覧数が多い記事が表示されます。

計測期間

表示したい記事によって各自調整。

WordPress Popular Postsウィジェット計測期間
WordPress Popular Postsウィジェット計測期間選択

選択期間内に公開された投稿のみを表示

通常は使いません。

毎日大量に記事をアップしてるサイトなどは、用途に合わせて使えるかもしれません。

メモ

上記で「カスタム」を選択した場合、一度「保存」をしてもう一度ウィジェットを開いてください。

WordPress Popular Posts計測期間選択

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

投稿タイプ

WordPress Popular Postsウィジェット投稿タイプ

デフォルトで「post」になっているので、そのままで構いません。

これで「投稿記事」を取得してくれることになっています。

例えば「post,page」とすれば、固定ページもランキングに含めることができます。

除外する投稿ID

WordPress Popular Postsウィジェット除外する投稿ID

超重要項目

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

タクソノミー

WordPress Popular Postsウィジェットタクソノミー

超重要項目

例えば「カテゴリー単位」または「タグ単位」でランキング表示を調整する場合に使用します。

その場合、表示させたい「カテゴリーID」または「タグID」をここに入力します。IDの前に「-」を付ける「例:-99」と指定した「カテゴリー」または「タグ」をランキングから除外できます。

上記2つが超重要な理由

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

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

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

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

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

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

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

カテゴリーID確認方法

WordPressカテゴリーID確認方法

WordPressカテゴリーID確認方法

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

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

記事ID確認方法

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

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

WordPress投稿ID確認

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

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

投稿者ID

WordPress Popular Postsウィジェット投稿者ID

通常使いません。

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

投稿指定

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

WordPress Popular Postsウィジェット投稿設定ウィジェット保存ボタン

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

タイトルを短縮

WordPress Popular Postsウィジェットタイトルを短縮

通常はノーチェック。

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

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

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

WordPress Popular Postsタイトル短縮

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

抜粋を表示

WordPress Popular Postsウィジェット抜粋を表示

通常はノーチェック。

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

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

書式とリンクを保持とは?

例えば「抜粋内」に「太字」や「リンク」などがある場合にそのまま表示してくれます。

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

WordPress Popular Posts抜粋表示

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

アイキャッチ画像を表示

WordPress Popular Postsウィジェットアイキャッチ画像を表示

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

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

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

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

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

WordPress Popular Postsアイキャッチ画像

統計タグの設定

WordPress Popular Postsウィジェット統計タグの設定

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

コメント数を表示

WordPress Popular Postsコメント数表示

閲覧数を表示

WordPress Popular Posts閲覧数を表示

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

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

functions.php編集

ーカゲオー

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

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

投稿者を表示

WordPress Popular Posts投稿者表示

メモ

ここで表示されるのは「ブログ上の表示名」です。

WordPressブログ上の表示名

日付を表示」

WordPress Popular Posts日付を表示

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

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

ウィジェット保存ボタン

WordPress Popular Posts日付フォーマット

表示形式」を選択

タクソノミーを表示

WordPress Popular Postsタクソノミーを表示

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

WordPress Popular Postsカテゴリー表示
WordPress Popular Postsタグ表示
メモ

上記の場合「保育園」「買い物」は「タグ」なんですが、ブラウザ上は「カテゴリー」と表示されてます。

HTMLマークアップ設定

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

WordPress Popular Posts HTML マークアップ設定

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

WordPress Popular Posts 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を書いていきます。

見出しデザイン

WordPress Popular Postsランキングタイトル

メモ

※見出しカスタマイズはサイドバーの見出し全体の指定なので、他のサイドバー見出しもここで指定したデザインになります。

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

リンクカラー、外部アイコン、フォントサイズなどを調整します。

WordPress Popular Postsタイトル短縮
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

必須ではないですが、あるとオシャレに見えます。

WordPress Popular Posts下線
style.css
ul.wpp-list li {
 border-bottom: 1px solid #ddd;/* 投稿下に下線 */
 position:relative;/* 位置の指定 */
}

リスト内の余白調整

少し複雑になりますが、以下のように指定すると余白が均等になります。

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

ランキングカウンターを消す場合

テーマに標準でランキングカウンターが実装されている場合にカウンターを消す為のコードです。

WordPress Popular Postsランキング削除

/* ランキング表示を消す場合 */ 
ul.wpp-list li a:before{
display:none;		
}
ul.wpp-list li:before{
display:none;		
}

どちらかのコードで消えるはずです。

ランキングを実装する場合

WordPress Popular Postsランキング表示
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位以上(二桁)にする場合、余白が狭くなるので、各自調整してください。

WordPress Popular Postsランキング表示

サンプルでは丸くしましたが 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統計情報の見方

WordPress Popular Posts統計情報

today

確認時点の本日分の「ビュー数」と「コメント数」を見れます。

24h

確認時点から遡った1日分の「ビュー数」と「コメント数」を見れます。

7d

確認時点から遡った1週間分の「ビュー数」と「コメント数」を見れます。

30d

確認時点から遡った30日分の「ビュー数」と「コメント数」を見れます。

カスタム

確認したい「時間」と「期間」を自由に設定できます。

WordPress Popular Posts時間範囲のカスタム
WordPress Popular Posts期間の設定

Most viewed

上記で指定した期間内の「上位10件のビュー数」が表示されます。

WordPress Popular Posts Most viewed 

Most commented

上記で指定した期間内の「コメント数(最大10件)」が表示されます。

WordPress Popular Posts Most commented

Trending now

指定した期間に関係なく現在見られている記事の「ビュー数」と「コメント数」が表示されます。

WordPress Popular Posts Trending-now

Hall of Fame

プラグインを設定してから取得した上位10件の累計「ビュー数」と「コメント数」が表示されます。

WordPress Popular Posts Hall of Fame

まとめ

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

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

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

プロが選ぶWordPress優良プラグイン事典
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。