WordPress Popular Postsで人気記事一覧を設置＆CSS装飾

こんにちは、okutani(@okutani_t)です。 ブログのサイドバーに「人気の記事」とか「よく読まれてる記事5つ」みたいなのをよく見ます。あれいいですよね。

うちのサイトでも導入してみたいと思い、WordPressサイトで人気記事一覧を載せる方法を調べてみました。すると、どうやら「WordPress Popular Posts」というプラグインを導入することで、ブログに人気記事一覧を設置することができるとのこと。

人気記事一覧をサイトの見やすい場所に載せることで、ユーザーの目に止まり「ついでにクリック」を狙うことで、内部アクセスを増やすことができます。

「PV数」「直帰率」「ページ/セッション」「平均セッション時間」それぞれの値の向上が期待できるので、アクセスアップしたいサイトはぜひ導入するべきプラグインですね。

今回は「WordPress Popular Postsの設置方法」「CSS装飾」「導入後のアクセスデータの変化」について説明していきます。

ではWordpress Popular Postsプラグインの導入方法からみていきましょう。

スポンサーリンク

WordPress Popular Postsの導入

WordPressのダッシュボードにアクセスして「プラグイン」→「新規追加」をクリックします。

検索バーに「WordPress Popular Posts」と入力して検索。「いますぐインストール」を選択します。

「プラグインを有効化」をクリックしておきましょう。

これでWordPress Popular Postsのインストールと有効化が完了しました。

WordPress Popular Postsの初期設定

初期設定を行っていきましょう。ダッシュボードから「外観」→「ウィジェット」を選択。

利用できるウィジェットから「WordPress Popular Posts」をドラッグ＆ドロップでサイドバーウイジェットへ追加。

サイドバーウイジェットにWordPress Popular Postsを追加することで、ドロップダウンメニューから設定を行うことができます。

基本設定

最初の項目は次のように入力してみましょう。

私は上記の通り設定しましたが、あなたの好きなように設定してみましょう。

Filters設定

次の設定項目は以下のとおりです。

その下にある項目は指定した記事、カテゴリー、投稿者の除外機能です。

使うことはあまりないです。今回は設定しませんでした。一応Post ID to excludeの設定方法を載せておきます。

投稿IDはダッシュボードから「投稿」→「投稿一覧」「記事タイトルにマウスを乗せる」で、画面下に表示されます。

この投稿IDをPost ID to excludeに入れればOKです。それ以外はカテゴリー、ユーザー設定ページから確認できます(説明は省略)。

Posts settings設定

次にPosts settingsの設定。

Display post thumbnailだけONにしました。各自お好みでどうぞ。

Stats Tag settings設定

次のとおり。

ここのチェックをあまりし過ぎるとレイアウトがぐちゃぐちゃになるので、もしチェックするなら、ほどほどにしておきましょう。

HTML Markup settings設定

ここではHTMLの設定を行うことができます。説明は省略。

保存ボタンを忘れずに押しましょう。

では、ちゃんと設置されたか確認してみます。

設置確認

このように、サイドバーに人気記事一覧が表示されました。

デフォルトだと見た目があまり良くないので、CSSでちょっとオシャレに装飾してみます。

CSSでオシャレに装飾

CSSが分かる方はレイアウトの変更も行ってみましょう。

今回はWordPressテーマのStinger5上でCSSを書いていますが、下記のCSSコードはどのテーマでも同じように反映されるはずです。Stinger5以外のテーマを使っている方もぜひチャレンジしてみてください。

お使いのテーマのCSSファイルに下記コードを記述しましょう。子テーマを使っている方は、子テーマのCSSファイルに記述してください。

/* サイドバーの人気記事一覧レイアウト */
ul.wpp-list li {
  border-bottom: 1px dashed #bbb;
  counter-increment: wpp-count;
  position: relative;
}
ul.wpp-list li:before {
  display: block;
  padding: 1px 11px;
  color: #fff;
  background-color: #333;
  content: counter(wpp-count);
  position: absolute;
  opacity: 1;
  z-index: 10000;
  border-radius: 6px;
  top: 6px;
  left: 6px;
}
ul.wpp-list li:last-child {
  border-bottom: none;
}
ul.wpp-list li:nth-child(1):before{
  background-color: #FBCC54;
}
ul.wpp-list li:nth-child(2):before{
  background-color: #B7BFC1;
}
ul.wpp-list li:nth-child(3):before{
  background-color: #D47B16;
}
ul.wpp-list li img {
  margin: 5px 10px 5px 5px;
  padding: 3px;
  border: 1px solid #ddd;
}
ul.wpp-list li a.wpp-post-title {
  display: block;
  font-size: 15px;
  padding: 12px;
  text-decoration: none;
  color: #333;
}

コードの解説

かんたんにコードの解説をします。

WordPress Popular Postsに設定されているul.wpp-list等に対して、見た目をborderやpaddingで整えています。

counterでランキングで使う数字を生成し、beforeを使ってliの前に挿入しています。背景色はnth-childで上から金、銀、銅と設定してみました。

position: abusoluteとすることで、サムネイルの上にランキングをかぶせるようにしています。

CSSを設定し終わったので、レイアウトを確認してみます。

設置確認

CSSで見た目を整えると、このようになります。

シンプルで見やすくなったかと思います。CSSの知識があまりなくても、文字の大きさや色はかんたんに変えられるかと思いますので、サイトの見た目に合わせて変更してみてください。

最後にWordPress Popular Postsを配置することで、どうのようにアクセスデータが変化したのか検証してみました。参考にしてみてください。

WordPress Popular Posts配置後のアクセス解析

WordPress Popular Postsを導入した1週間後にアクセス解析を行い、どのように値が変化しているか検証してみました。

ちなみに検証のため、WordPress Popular Posts導入後は新しい記事を書かずに待ちました。

まずは導入前、「8/11 ~ 8/11」1週間分のデータを見てみましょう。

次は導入後、「8/12 ~ 8/18」1週間分のデータ。

なんと、「PV数」「直帰率」「ページ/セッション」「平均セッション時間」全ての値が向上しました。

設置後に記事をひとつも書いていないのに関わらず、全ての値が向上しているのは、かなりすごいですね。

とりわけ、平均セッション時間は、設置してたった1週間で8秒も向上しています。設置して、すぐに効果が現れるのは良いですね。WordPressサイト運営者の方の参考になれば幸いです。

まとめ

WordPress Popular Postsを使ってサイドバーに人気記事一覧を表示しました。少しでもサイトのアクセス数をUPさせたいのであれば、積極的に配置したいプラグインですね。

また、人気の記事を容易に確認できるため、勢いはあるけれども修正を加えるべき記事などのチェックなんかにも役立ちそうです。

CSSは基本コピペのまま使えるかと思いますが、もしうまく反映されないようなら周りの詳しい人に聞いてみてください。お疲れ様でした。