2019人気特価 花木 庭木の苗/[送料無料]バンクシア:バースデーキャンドル10号鉢植え 優先配送

WordPress カテゴリー別に人気記事ランキングを表示するプラグイン – WPP Plus Widget

当ブログでサイドバー(スマホの場合はページ下部)に表示しているアイキャッチ画像(サムネイル)付きの人気記事ランキングと新着記事を表示する方法を紹介していきます。

この記事の解説に従って設定すると、トップページではブログ全体の人気記事ランキングが表示され、個別の記事ページではその記事が所属しているカテゴリーの人気記事ランキングが表示されるようになります。

プラグインをインストールして、コードをコピペするだけで、このブログと同じランキングを利用することができます。

HTML や CSS の知識がある方は、自分でデザインをカスタマイズすることも可能です。この記事では、カスタマイズ方法についても解説していきますので、ぜひ参考にしながらチャレンジしてみてください。

必要なプラグインをインストールしよう


人気記事ランキングを表示するには、WordPress Popular Posts、WPP Plus Widget、Simple Custom CSS and JS という3つのプラグインが必要になります。

 

人気記事のアクセス数をカウントしてランキングにして表示します。ベースになるプラグインなので必須です。

WordPress Popular Posts の機能を利用して、カテゴリー別に人気記事ランキングを表示します。WPP Plus Widget 単独では動作しませんので、WordPress Popular Posts とセットになります。

人気記事ランキングと新着記事のスタイルシートを設定し、 No.1、No.2、No.3 と書かれた文字を Web フォントで表示するために必要になります。子テーマなどを利用して自分でデザインをカスタマイズする方は必須ではありません。

WordPressに自作のCSS・JavaScript・HTMLを追加するには? – Simple Custom CSS and JS

 

WordPress Popular Posts と Simple Custom CSS and JS は、ダッシュボード > プラグイン > 新規追加 ページでそれぞれの名前を検索してインストール&有効化してください。

WPP Plus Widget はプラグインをダウンロードしてから、ダッシュボード > プラグイン > 新規追加 ページでプラグインのアップロードを行って、インストール&有効化する必要があります。

/wpp-plus-widget

上記ページから、最新版(記事を書いてる時点では Ver. 0.4.4)をダウンロードしてインストールしてください。

プラグインのインストール方法について詳しく知りたい方は、こちらの記事を参考にしてください。

WordPress プラグインのインストール方法を詳しく解説

WordPress Popular Posts の設定


最初に WordPress Popular Posts の設定を行う必要があります。ダッシュボード > 設定 > WordPress Popular Posts > ツール を選んで、画像のページを表示させてください。

そして以下の設定を行いましょう。

設定 解説
デフォルトのアイキャッチ画像 画像をアップロードしてください。人気記事ランキングには記事ごとに設定しているアイキャッチ画像が表示されます。アイキャッチ画像が記事に設定されていない場合に表示されるデフォルト画像を設定します。
画像の取得元 アイキャッチ画像を選択してください。
閲覧を記録する対象者 訪問者のみを選択してください。これを選ばない場合、自分のアクセスも人気記事ランキングに反映されてしまいます。表示のテストをする場合は、全員を選んで自分でアクセスを行ってランキングを表示させるのもありです。アクセス数がゼロの場合はランキングが表示されません。
プラグインのスタイルシートを使う 無効を選択してください。今回はオリジナルのスタイルシートで人気記事ランキングのデザインを行いますので、プラグインに付属しているスタイルシートは利用しません。

それぞれ設定を行ったら、その場所にある適用ボタンを押すのを忘れないようにしてください。

アイキャッチ画像については以下の記事で解説しています。

WordPressのアイキャッチ画像とは?おすすめのサイズも紹介

人気記事ランキングを表示する


人気記事ランキングは ダッシュボード > 外観 > ウィジェット で表示の設定を行います。

WPP Plus Widget をサイドバーに表示する

左側に WPP Plus Widget と書かれた部分がありますので、それをドラッグ&ドロップで、右側のブログサイドバーに移動させてみましょう。

ブログサイドバーに表示されたら、WPP Plus Widget の欄をクリック(タップ)して開いてください。

 

WPP Plus Widget の設定

設定 解説
タイトル 今週の人気記事ランキングと入力してください。ブログトップページに表示されるランキングのタイトルです。なんでも構いませんので、好きなタイトルをご自分で考えてください。
タイトル(下層) 「{category}」今週の人気記事ランキングと入力してください。個別の記事ページや、カテゴリーページなど、トップページ以外で表示されるランキングのタイトルです。こちらも好きなタイトルを考えてください。{category} を入れると、表示しているランキングのカテゴリー名がタイトル部分に表示されます。
カテゴリの深さ を入力してください。開発者の方が解説してくれていますので、こちらの記事を参考にしてください。
パラメータ limit=10
range=last7days
order_by=views
thumbnail_width=200
thumbnail_height=105
excerpt_length=50
stats_comments=0
pid=
上記を入力してください。

 

パラメータ 解説
limit 人気記事ランキングに表示される記事の数です。10 を入力すると 1 位~10 位まで表示されます。
range ランキングを計測する期間です。指定した期間内で人気ランキングの順位が決まります。以下の値を入力することができます。
last24hours: 1日
last7days
: 1週間
last30days
: 1ヶ月
all
: 全期間
order_by ランキングを並び替える基準です。以下の値を入力することができます。
comments: コメント数が多いと上位
views
: 訪問者数(アクセス数)が多いと上位
avg
: 1日あたりの平均ビューが多いと上位
thumbnail_width サムネイルの横幅です。半角数字を入力してください。解説では 200 の入力を推奨していますが、サイドバーの横幅が狭いテーマの場合は小さくしてください。
thumbnail_height サムネイルの縦幅です。半角数字を入力してください。解説では 105 の入力を推奨していますが、上記で設定したサムネイルの横幅に合わせて適切な値を入力してください。
excerpt_length 人気記事ランキングに記事の抜粋文を表示させる場合、表示させる抜粋文の文字数を指定します。
stats_comments 1 / 0
1 を入力するとランキングにコメント数を表示します。0 の場合は表示しません。
pid 1,2,3,4,5
人気記事ランキングに表示しない記事を指定します。ページ ID を入力してください。例えば同じタイプの記事が上位に並んでいる場合に内容のかぶっている記事を除外することで、ランキングに多彩さが生まれます。ページ ID の取得方法

 

フォーマット設定

記事一覧の前後:最初のフォーム(左側)に以下のコードをコピーして貼り付けてください。

記事フォーマット:以下のコードをコピーして貼り付けてください。

 

オプション

表示記事を除外するをチェックしてください。現在、ブラウザに表示されている記事はランキング内に表示されなくなります。

 

保存する

すべて設定しおわったら保存ボタンを押しましょう。これで人気記事ランキングのウィジェットの設定は終わりです。

スタイルシートを適用する


このままでもランキングは表示されますが、まだスタイルシートが適用されていませんのでデザインは整っていません。

この段階ではこんな表示になります

 

1. スタイルシートを追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom CSS をクリック(タップ)してください。スタイルシートを追加するページに移動します。

 

2. スタイルシートを入力して保存する

タイトルを入力するフォームに WPP Category Popular List と入力しましょう。そしてその下の /* */ に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。人気記事ランキングにスタイルシートが適用されます。

Web フォントを適用する


人気記事ランキングのランキングの数字に Web フォントを適用します。絶対に必要な設定ではないのですが、普通のフォントよりもずっと見た目が良くなるので、設定することをおすすめします。

 

1. HTML を追加するページに移動する

ダッシュボード > Custom CSS & JS > Add Custom HTML をクリック(タップ)してください。HTML を追加するページに移動します。

 

2. Web フォントを読み込むコードを入力して保存する

タイトルを入力するフォームに Web Fonts と入力しましょう。そしてその下の <!– –> に囲まれた赤文字の英文をすべて削除して、以下のコードをコピーして貼り付けてください。

そして公開ボタンを押しましょう。人気記事ランキングに Web フォントが適用されます。

WordPress での Web フォントの利用について詳しく知りたい方はこちらの記事を参考にしてください。

WordPress – Webフォントの使い方

人気記事ランキングの完成!


解説どおりに設定を行い、アイキャッチ画像が各記事に設定されていると、人気記事ランキングはこのように表示されます。

ただしこれはテーマ Twenty Seventeen を使っている場合の表示です。他のテーマではサイドバーの横幅が狭かったりしますので、このままの設定では表示がおかしくなることがあります。

 

テーマ Twenty Sixteen の場合

サイドバーの横幅が狭いので、ランキングの数字が重なって表示されてしまっています。

この場合はさきほど編集した ダッシュボード > 外観 > ウィジェット > WPP Plus Widget に戻り、サムネイルのサイズを調整します。

パラメータの欄の thumbnail_width を 200 → 150 に変更、thumbnail_height を 105 → 79 に変更して保存してください。これで人気記事ランキングに表示されるアイキャッチ画像のサイズが小さくなります。

そしてスタイルシートも編集します。ダッシュボード > Custom CSS & JS > All Custom Code にアクセスし、さきほど入力したスタイルシートを編集します。

content: 'No. ' counter(wpp-count);
        ↓↓↓
content: '' counter(wpp-count);

この No. と書かれている部分を削除して更新してください。これで人気記事ランキングのランキングの数字部分から、No. という表示が消えます。

 

完成!

アイキャッチ画像のサイズが調整され、No. の表示が消えたことで、ランキングのデザインが綺麗に整いました。

 

それ以外にデザインに影響を与える主な変更ポイントは、スタイルシートのフォントの欄です。

赤枠部分のフォントサイズを変更すると、ランキングの数字の大きさが変わります。また ‘Limelight’ と書かれている部分のフォント名を変更すると、ランキングの数字のフォントが変わります。フォントを変更する場合は、Web フォントを読み込む HTML コードも同時に変えてください。

上記の解説部分を編集しながら、お使いのテーマに合ったデザインを完成させてください。

HTML やスタイルシートの知識がある方は、ウィジェットの HTML コードや、追加したスタイルシートをまるごと置き換えることで、完全にオリジナルのデザインに変更することも可能です。

最後に


人気記事ランキングを表示しておくと、読者が他の記事も読んでくれるようになりますので、ブログのアクセスアップに繋がることは間違いありません。頑張って設置してみましょう!

記事が長くなりましたので、現在表示しているページと同じカテゴリーの新着記事を表示する方法は、他の記事に分けて解説させていただきます。

WordPress カテゴリー別に新着記事を表示するプラグイン – WPP Plus Widget

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)