人気記事でブログ閲覧者の滞在時間をさらに高める「WordPress Popular Posts」プラグインとは

一定期間オウンドメディア（個人ブログも含む）を運営していると「離脱率」と呼ばれる、サイト閲覧者がページを訪れた後に去ってしまう率を出せます。離脱率が低ければ閲覧者がページをしっかりと閲覧してくれている証拠になります。

離脱率が低い要因として考えられる主な原因は、検索エンジンから着地したあなたのページを見た後に別ページを見ず去ってしまっている可能性が高いです。つまり、次に閲覧して欲しいコンテンツ候補の導線がなかった場合などに閲覧者は自分の求めているコンテンツは現在のページには存在しないと勘違いしてページを立ち去ってしまう行動へ繋がっています。

そこで一般的には「新着記事」や「人気の高い記事」または読んだページの「関連記事」を出す工夫が必要となってきます。Aというページを見るために訪れたはずなのにいつしかB、Cページと見てしまったご経験はありませんでしょうか？

本日は離脱率を少しでも改善できるように「人気の高い記事」を出す方法をご紹介させていただきます。参考までに本サイト内にも同じプラグインを導入しておりますのでぜひ併せてご確認くださいませ。

では早速インストールを進めていきましょう。まずは「プラグイン > 新規追加」をクリック。

次に検索ボックスへ「WordPress Popular Posts」と入力しましょう。そして「今すぐインストール」をクリック。

無事、インストールが完了すると、「外観 > ウィジェット」に専用のウィジェットが追加されています。それでは早速、サイドバーに設置していきましょう。挿入する箇所を選択して「ウィジェットを追加」をクリックしてください。

次に追加されたウィジェットから設定を行います。まずは「タイトル・表示数・計測期間」の３つを選択しましょう。人気の記事とします。分かりやすく「人気記事ベスト５」というタイトルも良いかもしれませんね。最大表示数は５。そして計測期間は念のため「全期間」としておきましょう。期間は色々選択ができますのでお好みによって変更してみてください。

そして細かな設定をチェックボックスで行います。とりあえず一旦は下記で設定しました。入力後に「保存」をクリック。

以上で設定が完了です。ページ側のサイドバーを確認してみましょう。

無事、「人気の記事」エリアが追加されました。現段階ではまだ設置したばかりで対象のアクセス期間がないので「まだデータがありません」と表示されています。設置以降のアクセスデータを蓄積していきますのでこの状態で問題ありません。

数分間待ってから右クリックでページを更新すると記事の一覧が表示されました。もし公開したばかりのアクセスが少ないページであれば数時間待ったり、自身で特定の投稿ページを開いたりすればアクセスデータからキャッシュしてくれます。

では少しだけウィジェットの設定を変更してみましょう。タイトルを短縮にチェックを入れて、HTMLマークアップ設定にもチェックマークを入れてみました。設定の変更が完了したら忘れずにウィジェットの「保存」ボタンをクリックします。

そしてページ側で再度右クリックで更新して設定変更が反映されるか確認してみましょう。

タイトルが短縮されて表示されていますね。ちなみに「抜粋を表示」にチェックを入れたままにしましたが、HTMLマークアップ設定を有効にしている状態では抜粋文字が表示されないようです。抜粋文字はない方がスッキリしていますね。

しかし、個人的に「サムネイル画像の下が詰まっている点」と「全体が少し右に寄っている点」が気になります。もっと言えば「サムネイル画像の右側とタイトルの隙間が少し詰まりすぎている」のでこれらを解消して仕上げたいところです。

では、CSSを追記していきましょう。「外観 > カスタマイズ > 追加CSS」から直接CSSを書き込み「公開」をクリック。

とりあえず、さきにサムネイルの下側の詰まりと、全体の右寄り現象を解消いたしました。あとタイトルのリンク文字カラーが青色になっているのを先に直していきます。ページの文字リンクは黒色（#000000）なのでさらに追記しておきます。

以下のCSSを追加しました。

ページ側で更新をかけると文字リンクが無事黒色に変更されました。

CSS追記でレイアウトがすっきりしてきたら「タイトルの短縮は不要」に感じたのでウィジェットから短縮を解除します。

チェックマークを外したら忘れずに「保存」ボタンをクリック。そしてページ側をチェックしていきます。

見た目のバランスも少しずつ仕上がってきましたね。あと一歩という感じです。サムネイル画像の右側とタイトルの詰まりが気になるので気持ち余白に余裕をもたせていきましょう。サムネイル画像の下側とタイトルの詰まりも狭い印象です。

最終的にすべての微調整を加えたCSSは以下となります。コピペで使えるように念のため掲載させていただきます。

.wpp-list {
	margin:0px;
}

.wpp-list li {
	margin-bottom: 16px;
	line-height:23px;
}

.wpp-list li a {
	color: #000000;
	text-decoration: none;
}

.wpp-list li a:hover {
	text-decoration: underline;
}

.wpp-list li img {
	margin-bottom: 5px!important;
	margin-right: 11px!important;
	padding-top:6px;
}

上記CSSを適用後の表示が以下です。

元々はアンダーラインを消して、マウスを重ねた際にアンダーラインが表示されるようにも調整を加えました。CSSで視覚的にリンク文字だと理解できますので直感的に操作ができますし、周りのコンテンツにも良い意味で馴染んでいます。

もしサイト内の離脱率が高くて悩んでいる場合はぜひ「WordPress Popular Posts」プラグインをお試しくださいませ。