図解|人気記事ランキングを表示!WordPress popular postsプラグインの設定方法

  • このエントリーをはてなブックマークに追加

ウェブサイトのPVを伸ばすためには、いかに一度訪れて記事を読んだユーザーに他の記事を読んでもらえるのか?が重要になってきますが、カテゴリや関連記事も確かに効果はありますが記事のランキングがあるとより効果的です。

しかし、WordPressはデフォルトだと人気記事は表示されません。

手動でやれば更新が面倒になります。

そこで、ここでは簡単なインストールと設定で人気記事ランキングが表示できるWordpress populue postsのプラグインの導入と設定の仕方を解説していきます。

このプラグインはサイドバーにいれたり記事内にいれたりして人気順に記事のリンクを容易に表示することができるようになります。

これは記事で表示していますが、このブログでも右側にランキングがありますよね。

ここでは、サイドバーとコンテンツ内に簡単にWordpress populue postsのプラグインを導入して人気記事ランキングを挿入する方法を図解で解説をしていきます。

※プラグインをインストールした事がない方は、導入前にプラグインそのもののインストール方法を図解で解説しているWordPressプラグインの取扱説明書~インストール・有効化・停止・削除~を見てインストールの仕方をご覧になってください。

インストールが完了したら「wordpress popular posts」を設定していきます。

 

1.wordpress popular postsの設定

設定をクリックすると、wordpress popular postsが出てくるのでクリック

ACTION

①管理画面左側の「設定」をクリック
②wordpress popular postsをクリック

クリックをすると下記の画面が表示されます。

この画面が表示されたら画面中央に赤枠の「ツール」のリンクが表示されますのでツールをクリックしてください。

ACTION

①ツールのリンクをクリック

すると下記のツールの設定画面が表示されます。

ツールの画面では主に以下の3つの設定を行うことができます。

1:メイン画像を設定
2:データ
3:その他

順に簡単に説明していきますね。

1-1.アイキャッチ画像の設定

こちらでは、人気記事ランキングで画像を表示する場合の設定をしていきます。文字だけでいいのならばこの設定はする必要はありません。それではアイキャッチ画像の3つの設定をしていきましょう。

1-1-1. デフォルトアイキャッチ画像を設定

アイキャッチ画像は先程紹介したように小さい画像のことを言いますが、この設定をしていない場合はデフォルトの画像が表示されます。

もし、このデフォルトの画像が気に入らない場合は変更しておきましょう。

赤枠内にあるメイン画像を設定をアップロードのボタンをクリックしてください。

すると下記のようにデフォルトのメディアで画像のアップロードと設定をするのと同じ画面が出てきます。

ここで、自分のPCに入ってる画像から画像を選択してアップロードしてください。

ACTION

・ドラッグ&ドロップでアップロードをする
・ファイルから選択してアップロードする。

※ファイルをドラッグ&ドロップするのならば、必ずマウスの矢印がファイルを選択の上にくるようにしましょう。画像のアイコンだったり、点線の四角ないならどこでもいいと思ってドロップすると、うまく画像を追加できません。

 

画像がうまく追加できると、下記のような画面が表示されます。

きちんと、画像が入ったら、アップロードのボタンをクリックします。

アップロードをクリックするとデフォルト画像から設定した画像に変わりますので適応をクリックしてください。

これで、投稿時にアイキャッチの設定をしなかった場合に、先程設定した画像が自動的にアイキャッチに設定されます。

1-1-2. 画像の取得元

この設定は、記事をアップロードする際にアイキャッチ画像をどの画像を取得して表示をするのかを決めることができます。

項目は、以下の4つ選択することができます。

POINT

・メイン画像を設定
・本文内の最初の画像
・最初の添付ファイル
・カスタムフィールド

大体のテンプレートの場合は、アイキャッチ画像である「メイン画像」を選択しておけば大丈夫です。

上の設定と合わせて投稿時にアイキャッチの画像を設定していない場合は、1-1-1で設定した画像が表示され、投稿時にアイキャッチを設定した場合はその画像が自動的に表示される設定になります。

 

ちなみに、

POINT

・本文内の最初の画像:記事の中で最初に使った画像が設定されます
・最初の添付ファイルは:記事の中で最初に使われた添付ファイルです
・カスタムフィールド:まず使用する機会がないと思いますのでここでは説明を割愛します。

サムネイル画像を設定すると重たくなるから設定しない方が良いという意見もありますが
サムネイル画像がないと、見づらいし、文字だけなのでなんだか寂しい外観、無機質なブログになってしまいかねないので、ここではサムネイル画像を設定することを推奨します。

 

1-1-3. レスポンシブ対応

これは、あなたのワードプレスがスマホ対応をしているのならば、基本的にレスポンシブ対応でいいです。

自動的に画像の高さと幅の属性を変更してくれます。ただ、テンプレートによっては画像の割合が悪くなり画質も悪くなる可能性があるので、一度全部設定してから確認してみることをオススメします。

 

1-2.データ

ここは基本、今はそのまま触らなくても大丈夫です。それぞれの項目はあなたの目的や使っているプラグインによって変わってくることになるので説明を読んで必要ならば設定を変更してください。

一応、各項目について説明していきます。

1-2-1.閲覧を記録する対象者

ここでは、ブログ記事のランキングに数字を表示するときに、どれを対象者にするかを選ぶ事ができます。

POINT

・訪問者のみ
・ログイン中のユーザーのみ
・全員

この3つの中から選べるわけですが、まずは「全員」にしておいて大丈夫です。

ただ、ブログを運営していくうえで、「正確な数字を知りたいから自分のアクセスをカウントしたくない」や「会員制のブログにしたから」という場合はその状況や目的に応じて変更しましょう。

1-2-2.ログ上限

ここでは、アクセスを記録する期間を設定する事ができます。

基本はデフォルトの「無効」、つまり、期間などは設けず、すべての記録を保存する、で大丈夫です。「データ保存期間」を選択すると、

このように「○○日」という期間がでてきますので
自分で設定した期間内のデータを取りたい時はこちらを設定します。

 

1-2-3.ウィジェットを AJAX 化

キャッシュとは、履歴を残すようなものです。この履歴を残すことを無効にするのか、有効にするのかをここから選択できます。基本的には「無効」のままで大丈夫ですが、キャッシュ系のプラグインを使っている場合は有効にしたほうがいいでしょう。

 

2-4.WPP キャッシュ期限ポリシー

wordpress popular postsのキャッシュ切れの期間を指定して、人気記事のリストをキャッシュをして以前のデータをそのまま保存をします。基本的にランキングは能動的に表示をしたいものなのでここはキャッシュしないに設定したままで大丈夫です。

2-5.データサンプリング

1日数百から数万程度のアクセスならばここは無効にしておいてもいいですが、1日何十万アクセスがあつまるウェブサイトを運営しているのならば有効にしたほうがいいかもしれません。

3.その他

先程と同じようにここも基本的にはそのままで大丈夫なところです。一応この項目もそのまま使うのならばデフォルトのままで結構ですが、一応それぞれ解説していきましょう。

3-1.リンクの開き方

こちらは、記事内のリンクをクリックしたときに、今開いてるウィンドウで表示するか、新しいウィンドウで表示するかを選択する事ができます。

ここはデフォルトの「現在のウィンドウ」のままで大丈夫です。「新しいタブまたはウィンドウ」にすると、クリックしたときに新しいウィンドウでそのリンク先のページを表示することができます。

3-2.プラグインのスタイルシートを使う

文字色を変えたり、大きさを変えたり、または背景をなどを加えたりしてデザインを変えたい場合には有効です。

これといったデザインなどのカスタマイズをしなくても、キレイだと思うので「有効」のままで大丈夫です。自分自身でカスタマイズしCSSをイジりたい場合にはこちらを「無効」にします。

 

・・・以上でwordpress popular postsの基本的な設定は終了になります。では、続いて実際にサイドバーに人気ランキングを表示させる設定をしていきましょう。

 

2.サイドバーに人気記事ランキングを設置する

人気記事ランキングは、大体の場合は上の画像のようにサイドバーに設置をするのがベターですし、サイドバーに挿入するのが最も簡単な方法です。

それでは実際にサイドバーに設置をする方法をご紹介していきます。

管理画面の欄の外観をクリックしてウィジェットをクリックしていきましょう。

ACTION
①管理画面の欄の外観をクリック
②ウィジェットをクリック

するとウィジェットのカスタマイズができるページに移動をします。ここで・・

利用できるウィジェットの下のほうにWordPress Popular Postsというボタンみたいな項目があるので、これをドラッグ&ドロップをしサイドバーの表示したい位置に置きます。

ACTION

①利用できるウィジェットのWordPress Popular Postsをドラッグする
②サイドバーの表示したい位置にドロップする。

これで設置自体は完了ですが、ここから細かい設定をしていきましょう。

詳細を設定するためには、赤丸のの部分をクリックしてください。

クリックすると下記の画面が出てきて設定をすることができます。

それぞれ1つずつの項目の意味と設定の仕方をご紹介していきましょう。

 

POINT

①タイトル
これはサイドバーのタイトルで、人気記事ランキング・Ranking・人気記事Rankingというように入力するのがベターです。

②最大表示数
ランキング何位までを表示するのかを設定することができます。あなたのWEBサイトで同表示するのかを確認して設定をしてください。(例では10と設定しています。)

③ソート順
総閲覧数を表示をするか?1日の平均閲覧数を表示をするのかを選択することができます。基本としては「総閲覧数」で間違いないかなと思います。

④計測期間
人気記事のランキングの計測する期間を選択できます。よくネットショップで売れ行き商品のランキングのように、過去24時間・7日・30日・全期間を選択する事ができます。ある程度のアクセスが集まるまでは「全期間」ある程度安定的にアクセスが集まるようになってからは「30日間」がベストです。

⑤投稿タイプ
デフォルトでは投稿(post)か固定ページ(page)の両方をランキングに表示するのかを設定します。基本的には固定ページはランキングにいれたくないので「post」だけで設定をするのがいいです。

⑥投稿設定
ここではどのように表示をするのかを設定することができます。

□タイトルを短縮 ・・・・・・タイトルを自動的に短縮してくれます。
□抜粋を表示  ・・・・・・・チェックをするとdiscriptionを表示。
□メイン画像を設定を表示 ・・チェックをするとアイキャッチ画像を表示。

抜粋を表示をするとランキングがどうしても長くなってしまうのでオススメはしませんが、それ以外はチェックをいれたほうがいいかなと思います。上の設定事例ではメイン画像を設定を表示にチェックをいれた場合の設定です。

⑦統計タグの設定
ここでは、ランキング時の下に何のデータを表示するのかどうか?を設定することができます。必要だと思った項目にチェックをいれるといいでしょう。基本的には□閲覧数を表示にチェックをいれるのがいいかなと思います。

ここでは、デフォルト以外で特に設定したほうがいい項目を紹介しました。HTMLマークアップの設定はHTML上でフォント色や改行をしたい時などに使えます。

 

・・以上の設定をしておけば特に問題なく使えると思いますので設定が完了したら保存のボタンをクリックして設定を完了させてページを確認してください。

 

3.記事内にランキングを表示させる。

では、実際に投稿や個別ページに人気記事ランキングを表示させる方法をご紹介していきたいと思います。

投稿や個別ページにランキングをいれることで、グローバルメニューなどで人気記事ランキングをいれてPVを伸ばすキッカケにもなります。

もし、挿入をしたいのならば下記のステップで実践してください。

基本的に人気記事ランキングは、投稿よりも固定ページのほうが向いているかなと思いますので、ここでは固定ページを例にやっていこうと思います。

ACTION

①管理画面の左側の固定ページをクリック
②新規追加をクリック

すると、普段の固定ページの新規追加と同じように

 

普段通りの投稿や固定ページに投稿をするのと同じように、タイトルやパーマリンクやアイキャッチの設定をしていきます。

ランキングのコードを挿入する場合は、ビジュアルモードではなくテキストモードで挿入をするので「テキスト」ボタンをクリックして下記のコードを挿入したいところに以下のコードをコピーして貼り付けてください。

[wpp range="monthly" order_by="views" limit=100 thumbnail_width=200 thumbnail_height=120 excerpt_format=0 excerpt_length=120 wpp_start=' <ol class="wpp-list2">' wpp_end="</ol> " post_html=' <ul><li style="list-style: none; border-bottom: 1px gray dotted;"> <p style="margin-right: 1em; float: left;">{thumb}</p> <b><a href="{url}">{text_title}</a></b> {summary}<p style="clear: both;"></p></li></ul> ']

あとランキング表示前と後に文章や画像などをいれて完成させてください。すごく簡単ですが、これで記事内にランキングを表示させることができます。

 

さいごに

さて、いかがでしたでしょうか?人気記事を設置する方法は以上です。ただ、当然ですがこのランキングは実際にアクセスが集まらない限りカウントされません。

それに、実際に良質なコンテンツを提供してこそランキングに意味があるので、ランキングを設置したらその分だけコンテンツに磨きをかけましょう。

 

  • このエントリーをはてなブックマークに追加
Comment form

*