【SANGOカスタマイズ】記事クリック率が劇的に上がる！同じカテゴリの人気記事を表示する

なぜ私のブログの関連記事のクリック率は低いのだろう？

クリック率を上げる方法はないのだろうか？

そんな悩みを持っているときに、興味をそそる記事をみつけました。

• 「同じカテゴリの記事」という見出しで
• 「同じカテゴリの記事」のリストを出す

とクリック率が破壊的に高まりました。

意外すぎる！「同じカテゴリの記事」のクリック率が破壊的に高かった件｜NaeNote

今読まれている記事ページに「同じカテゴリの記事」というタイトルの関連記事をサイドバーに出すと、クリック率が破壊的に上がるらしい。

実際にこのカスタマイズを行った翌日から、ページ/セッションが0.1上がった。

サイドバーの追尾エリアに、同じカテゴリの記事を置くだけでクリック率が上がる…！

ページ/セッション数が停滞気味のマサオカブログには朗報ですね。

なければ作ればいい。カテゴリ別の人気記事を表示させるために、WordPressPopulerPostsをカスタマイズしましょう。

今回は、WordPressPopulerPosts(wpp)の人気記事ランキングをカテゴリ別に表示させて、SANGOに馴染むデザインにするための方法を解説しています。

このように、今読んでいる記事と「同じカテゴリ」のランキングが作れます。

カスタマイズしやすさを考えて、phpに直に書くのは止めてウィジェットにコピペすることにしました。

1. プラグイン「PHP Code Widget」をインストール
2. コードをコピペしてサイドバーウィジェットに設置
3. CSSでランキングの順位を作成する

普通に週間・月間ランキングだけ使いたい場合は、wppのデザインをSANGO風にするカスタマイズを「SANGOに週間人気記事のランキングをスマートに表示する方法」で解説していますのであわせて御覧ください。

WordPressPopularPostsを入れるウィジェットを準備する

WordPressPopulerPostsをインストールしている前提でのお話になります。SANGOでwppを使う場合は、「SANGOに週間人気記事のランキングをスマートに表示する方法」を参考にしてもらうと、SANGOデザインによく馴染むのでおすすめです。

今回はphpを使います。でも、ウィジェットにはphpを書けるパーツがありませんね。

ウィジェットにphpコードを入れる箱を準備しないと。

プラグイン「PHP Code Widget」をインストールしておきましょう。

PHP Code Widgetインストール

プラグインの新規追加から、「PHP Code Widget」と検索を行います。

これが、PHP Code Widgetです。これをインストールして有効化しておきましょう。

PHPコードウィジェットをサイドバーに追加

有効化ができたら、ウィジェット画面に移動します。

ウィジェットのパーツから、「phpコード」を選んでサイドバーに追加しましょう。

サイドバーの一番下、記事を読んでいる人が常に目に触れる場所に設置したいので「追尾サイドバー（PCのみ）」にいれます。

WordPressPopularPostsをカテゴリ別のランキングに変える

箱ができたら中身を準備します。「PHPコード」のパーツに、以下のphpをコピペして保存をしてください。

タイトルは空欄でOKです。

<h4 class="widgettitle dfont"><i class="fa fa-line-chart"></i> 「<?php the_category(', ') ?>」</br>同じカテゴリの人気記事</h4>
<?php $cat = get_the_category(); ?>
<?php $cat_id = isset( $cat[0] ) ? $cat[0]->term_id : ''; ?>
<?php if ( function_exists( 'wpp_get_mostpopular' ) ) : ?>
<?php $args = array( 
  'limit' => 5,//表示数
  'range' => 'all',//集計する期間（weekly,monthly,allasam）
  'order_by' => 'views',//閲覧数で集計、comments（コメント数で集計）、avg（1日の平均で集計））
  'thumbnail_width' => 81,
  'thumbnail_height' => 81,
  'cat' => $cat_id,
  'wpp_start' => '<ul class="my-widget show_num">',
  'wpp_end' => '</ul>',
  'stats_views' => 1,//閲覧数表示（1 or 0）
  'stats_comments' => 0,//コメント数表示（1 or 0）
  'post_html' => '<li><a href="{url}"> <figure class="my-widget__img">{thumb_img}</figure><div class="my-widget__text">{text_title} <span class="dfont views"> {stats}</span></div></a></li>' ); ?>
<?php wpp_get_mostpopular( $args ); ?>
<?php endif; ?>

参考記事

ちょっと解説

これはwppで用意されているパラメーターのリストです。PHPの中と見比べてみてください。

文字や数字を変更してあげると表示が変わります。

パラメーターは他にもありますが、今回は使うものだけ抜き出しました。

自分なりに変更してみたいと思った方は、WordPressのWordPressPopulerPostsの設定画面から確認することができるのでどうぞ。

設定→WordPressPopularPosts→パラメーター

WordPressPopularPostsに順位の数字を入れる

ランキングの数字入れて、SANGOのデザインに合わせていきましょう。

この修正は、style.cssを修正します。子テーマでの利用をお勧めします。

子テーマの導入方法は、「WordPressで子テーマを活用して安全にカスタマイズを行う方法｜サルワカ」をご覧ください。

style.cssにコピペするコード

ランキングの数字は、スタイルシートで順番を振ります。

「外観」→「テーマの編集」→「スタイルシート(style.css)」を選んで一番下にコピペしてください。

/*--------------------------------------
wppでランキング順位を表示する
--------------------------------------*/
/* カウンタをリセット */
.my-widget.show_num {
    counter-reset: wpp-ranking;
}
/* 一覧の表示 */
.my-widget.show_num li {
    position: relative;
}
/* 順位を表示 */
.my-widget.show_num li:before {
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
 	display: inline-block;
 	position: absolute;
 	z-index: 1;
 	top: 0;
 	left: 0;
 	width: 25px;
 	height: 25px;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
}
/* 1位 */
.my-widget.show_num li:nth-child(1):before {
	background: #FCE36b;
	color: #fff;
}
/* 2位 */
.my-widget.show_num li:nth-child(2):before {
	background: #FCE36b;
	color: #fff;
}
/* 3位 */
.my-widget.show_num li:nth-child(3):before {
	background: #FCE36b;
	color: #fff;
}
/* 4位以降の色 */
.my-widget.show_num li:nth-child(n + 4):before{
	background: #f3f3f3;
	color: #9a9a9a;
}

順位アイコンの色を変えるには

１位~３位の色はそれぞれ別に指定しています。上のコードの黄色のマーカーbackground:に入っているカラーコードを変更することアイコンの色が変わります。

SANGOのランキング順位のアイコンカラーは、テーマで決めたアクセントカラーと同じ色です。カスタマイザーから色をコピーしましょう。

「外観」→「色」→「アクセントカラー」

４位以降は全部同じなので、一括で指定しています。好みに合わせて変更してみてください。

カテゴリ別のランキング表示完成

これで、設定は完了です。追尾サイドバーに関連記事ランキングが表示されるようになります。

と、こんなかんじで紹介してくれるようになりました。

記事に飽きてしまった人や、読み終わった人に「同じカテゴリの人気記事」をアピールできますね。興味を持ちやすいしかけを作って、たくさんページを周って貰いましょう。

アクセスアップのカテゴリ一覧へ