【WordPress Popular Posts】人気記事の設置からCSSでのカスタマイズ方法まで:順位表示

人気記事一覧を表示させるにはどうしたらいいの?

多くのサイトでよく見掛けるであろう人気記事一覧。サイト運営において、記事のランキング表示は欠かせないものです。

サイトに訪問した方が上位の記事に興味を持ち、サイト内を巡回することでPV数を上げる効果にもなるでしょう。

WordPressではプラグインを使用すれば、その人気記事一覧を簡単に設置することができます。
今回は「人気記事一覧の設置からCSSでのカスタマイズ方法まで」を解説していきます。

ぶろぐ先生
サイト運営において欠かせない人気記事一覧を設置しよう!

WordPress Popular Postsのインストール&基本設定

まずはWordPress管理画面(ダッシュボード)から「WordPress Popular Posts」をインストールしましょう。

プラグインのインストール

ダッシュボードの左のメニューにある「プラグイン」→「新規追加」を選択します。

 

プラグインを追加する画面が表示されたら、キーワードに「WordPress Popular Posts」を入力して検索しましょう。

今すぐインストール」をクリックしてしばらく待つと、インストールは完了です。そのままプラグインを有効化しましょう。

WordPress Popular Postsの基本設定

WordPress Popular Postsの基本設定を見てみましょう。

ダッシュボードの左のメニューにある「設定」→「WordPress Popular Posts」を選択します。

 

WordPress Popular Postsの管理画面では、指定期間の記事ランキングの統計を見ることができます。導入直後なのでまだデータはありませんが、記事が閲覧されると、ここにランキングの統計が表示されます。

 

続いて、統計情報の隣にある「ツール」を選択しましょう。

 

ここでは、デフォルトのアイキャッチ画像の設定や閲覧数をカウントする対象者を設定することができます。基本的には何も触らなくても大丈夫です。

記事にアイキャッチ画像を設定していない方は、ここで設定をしておくと良いでしょう。また自分自身が閲覧した回数が含まれるのが嫌な方は、閲覧を記録する対象者を「全員」→「訪問者のみ」に変更しておきましょう。

人気記事一覧をサイドバーに設置&表示設定

続いて、実際に人気記事一覧をサイドバーに設置していきます。

人気記事一覧をサイドバーに設置

ダッシュボードの左のメニューにある「外観」→「ウィジェット」を選択します。

 

利用できるウィジェットにWordPress Popular Postsが追加されているので、それをサイドバーに当たる部分にドラッグ&ドロップして移動させましょう。

人気記事一覧の表示設定

ウィジェットをサイドバーに追加することができたら、人気記事一覧の表示設定をしていきます。
上から順に見ていきましょう。

  1. タイトル:人気記事一覧だということがわかりやすいタイトル名を入力しましょう。
  2. 最大表示数:人気記事を表示する数を設定します。5~10を目安に設定しておくと良いでしょう。
  3. ソート順:並び順を設定します。総閲覧数順の他にコメントの数が多い順、1日の平均閲覧数が多い順が設定できます。
  4. 計測期間:ランキングの計測期間を設定します。
  5. 投稿タイプ:人気記事に含める投稿タイプを設定します。基本的に個別記事のランキングなので「post」を入力しましょう。

 

続いて、投稿設定です。ここではどのように記事を表示するかの設定をします。
チェックを入れ保存をするとそれぞれの設定が行えるようになります。

  • タイトル文字数の設定
  • 抜粋(説明文)の表示設定
  • アイキャッチ画像のサイズ設定

タイトルが長くて見づらくなる場合はタイトル文字数を短縮しておくと良いでしょう。基本的に人気記事一覧はシンプルで見やすくしたいため、抜粋は非表示にすることをオススメします。

アイキャッチ画像は「サイズを手動で指定」にチェックを入れ、自分好みの大きさに設定しましょう。

 

 

統計タグの設定では、人気記事に表示させたい項目がある場合はチェックを入れます。
閲覧数を表示させているサイトをよく見かけますね。

 

最後に、HTMLマークアップ設定の「カスタム HTML マークアップを使う」にチェックを入れて保存をしましょう。

 

以上で人気記事一覧の設置は完了です!

人気記事一覧のカスタマイズ方法

WordPress Popular Postsは使用されている方が非常に多いため、どうしても見た目が被ることがあります。しかしカスタマイズをしてあげることにより、他のサイトと差をつけることができるので是非試してみてください。

ぶろぐ先生
CSSを編集するときは子テーマを使用してね!

アイキャッチ画像に丸みを付ける

デフォルトではアイキャッチ画像が単なる四角形なので、角に丸みを付けるために以下のCSSを記述します。

ul.wpp-list li img {
border-radius: 4px 4px 4px 4px ;
}

こんな感じ

ぶろぐ先生
角に少し丸みが付いたね。

px数を大きくするほど角の丸みが大きくなります。
画像を丸にしたい方は、ウィジェット画面から画像サイズを正方形にするよう設定した上で、px数を「50」に変えてみてください。

こんな感じ

ぶろぐ先生
綺麗な真ん丸が完成!

アイキャッチ画像に影を付ける

アイキャッチ画像に影を付けたい方は以下のCSSを記述します。

ul.wpp-list li img {
box-shadow: 2px 2px 4px gray;
margin-bottom:0.5em;
}

こんな感じ

ぶろぐ先生
立体感が出て目立つね!

影を付けると、その分幅をとるので「margin-bottom」を使用して下に余白を空けています。

記事を区切る

記事ごとに区切りがなくて見にくい!」って方は区切り線を付けるために以下のCSSを記述します。

ul.wpp-list li{
list-style:none;
position:relative;
border-bottom:1px solid #ddd;
padding-bottom:0.5em;
}

こんな感じ

ぶろぐ先生
見やすくなったね!

線の太さをもっと太くしたい場合は「border-bottom」の後ろのpx数を変更してください。

ランキング順位を表示する

人気記事一覧に最も欲しいものと言えばランキング順位ですよね。
ランキング順位を表示させるために以下のCSSを記述します。

ul.wpp-list li {
counter-increment: ranking-number;
}
ul.wpp-list li:before {
content: counter(ranking-number);
display: block;
background: #1e73be;
margin-right:3px;
color:#fff;
width:1.5em;
height:1.5em;
font-size:0.75em;
font-weight:bold;
font-family: ‘Lato’, sans-serif;
text-align:center;
line-height:1.5em;
position:absolute;
left:0;
top:0;
}

こんな感じ

ぶろぐ先生
ランキングを付けると、わかりやすい!

ランキングの背景色や文字色を変更する場合は「background」や「color」の後ろに続く値を変えてみてくださいね。

まとめ

WordPress Popular Postsを導入して人気記事一覧を表示させるやり方を解説しました。
人気記事一覧を表示させたことにより、より本格的なサイトが出来上がったのではないでしょうか。

今回紹介したWordPress Popular Postsは使用している方がとても多いプラグインですので、CSSを編集できる方は自分好みにカスタマイズしてあげることをオススメします。