vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

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

      2017/02/02

LINEで送る
Pocket

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

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

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

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

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

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

スポンサーリンク

WordPress Popular Postsの導入

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

wp-plugin-install

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

wp-popular-posts

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

wp-popular-posts2

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

WordPress Popular Postsの初期設定

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

wp-popular-posts3

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

wp-popular-posts4

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

基本設定

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

wp-popular-posts5

  • 1. Title
  • サイドバーに表示するタイトル。人気記事だと分かるようなタイトルにしておくと良い。

  • 2. Show up to
  • 表示する人気記事の数。5~20ぐらいが適切。

  • 3. Sort posts by
  • 「Total views」はアクセス数、「Comments」はコメント数、「Avg. daily views」は一日平均でそれぞれ並べ替えてくれる。基本的に「Total views」でOK。

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

Filters設定

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

wp-popular-posts6

  • 4. Time Range
  • 「Last 24 hours」で一日、「Last 7 days」で一週間、「Last 30 days」で一ヶ月、「All-time」で全ての期間を対象に集計をおこなう。vdeepでは一週間にしている。その下のチェック項目は、プラグイン設定で指定した期間を対象から外すというもの。使わないのでチェックしなくてOK。

  • 5. Post type
  • 人気記事で扱う投稿タイプを選択できる。デフォルトでは「post(投稿ページ), page(固定ページ)」になっているが、postのみで良い。

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

wp-popular-posts7

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

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

wp-popular-posts8

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

Posts settings設定

次にPosts settingsの設定。

wp-popular-posts9

  • Shorten title
  • タイトルをプラグイン設定で指定した長さまでにする。

  • Display post excerpt
  • 投稿記事の要約を表示する。

  • 6. Display post thumbnail
  • サムネイルを表示。サムネイルのサイズは下の値を変えることで設定可能。今回は140×140pxぐらいに設定。

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

Stats Tag settings設定

次のとおり。

wp-popular-posts10

  • Display comment count
  • コメント数を表示。

  • 7. Display views
  • アクセス数を表示。今回はチェックを外した。

  • Display author
  • 投稿者を表示。

  • Display date
  • 投稿日時を表示。

  • Display category
  • 記事のカテゴリーを表示。

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

HTML Markup settings設定

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

wp-popular-posts11

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

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

設置確認

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

wp-popular-posts12

デフォルトだと見た目があまり良くないので、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で見た目を整えると、このようになります。

wp-popular-posts13

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

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

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

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

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

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

PV数 12,067
直帰率 88.72%
ページ/セッション 1.20
平均セッション時間 00:00:48

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

PV数 12,626
直帰率 87.96%
ページ/セッション 1.23
平均セッション時間 00:00:56

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

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

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

まとめ

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

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
ランキングのCSSは書いてて勉強になりました。まぁ、いまだにpositionの使い方とかあやふやですが。CSSもっとこうした方がいいよ、ってのがあれば教えてくださーい。

 - WordPressプラグイン

スポンサーリンク

PC用AdSense

PC用AdSense

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

  こちらの関連記事もどうぞ

WordPressに「AddQuicktag」を導入してタグ入力を楽チンに!

こんにちは、okutani(@okutani_t)です。WordPressで記事 …

DISQUSでWordPressのコメント欄をパワーアップしよう!

こんにちは、okutani(@okutani_t)です。WordPressサイト …

All in One SEO PackでSNSのシェア設定をおこなう

vdeep管理人okutani(@okutani_t)です。WordPressで …

「Preserve Editor Scroll Position」プラグインでエディタのスクロール位置を固定する

こんにちは、okutani(@okutani_t)です。WordPressでは書 …

WordPress全バックアップを「BackWPup+Dropbox」で行う

こんにちは、okutani(@okutani_t)です。みなさんはWordPre …

[WordPress] ソースコードを綺麗に表示!SyntaxHighlighter Evolvedプラグイン導入

こんにちは、okutani(@okutani_t)です。WordPressにソー …

[WordPress] 画像をあとから読み込んで表示速度アップ!「Lazy Load」プラグイン

こんにちは、okutani(@okutani_t)です。皆さんはブログ記事を書く …

All in One SEO PackのXML Sitemapで最低限行うべき設定項目

こんにちは、okutani(@okutani_t)です。WordPressでサイ …

SEO対策に!PubSubHubbubを使ってGoogleに素早くインデックス

こんにちは、okutani(@okutani_t)です。WordPressプラグ …

WordPressのサイトマップを「PS Auto Sitemap」で作成してみよう

こんにちは、okutani(@okutani_t)です。サイトマップとは、サイト …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。