bitcoin変動中!初めての口座開設はビットフライヤーがおすすめです

記事クリック率が劇的に上がる!SANGOの関連記事カスタマイズ

だいたい 7 分で読めます。

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

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

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

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

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

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

 

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

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

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

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

ヨメ

よっしゃ!やったろ!!

マサオカ

WordPressPopularPostsにそのような機能はありません。

ヨメ

なんでや!!

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

この記事を読むべき人
  • 複数のジャンルの記事を書いている雑記ブロガー
  • 記事が増えてきたのにページセッションが上がらず困っている人
  • 読者が読みやすいサイトを作りたい人

 

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

 

WordpressPopularPostをカテゴリ別で表示させる

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

 

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

手順

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

ヨメ

カンタン3ステップ!

普通に週間・月間ランキングだけ使いたい場合は、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コード」を選んでサイドバーに追加しましょう。

PHP Code Widget

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

 

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

カテゴリ別表示ランキングの完成イメージ

まずはこの状態にします。順位アイコン無しのバージョン。

マサオカ

 

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

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

phpウィジェット
<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; ?>

参考記事

ちょっと解説

limit最大の記事表示数
range集計する期間 weekly…週間、monthly…月間、all…全期間
order_by集計方法 views…閲覧数で集計、comments…コメント数で集計、avg…1日の平均で集計
stats_views閲覧数表示(1で表示 ・ 0で非表示)
stats_commentsコメント数表示(1で表示 ・ 0で非表示)
post_html出力されるHTMLをカスタマイズする
catカテゴリIDを指定

 

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

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

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

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

設定WordPressPopularPostsパラメーター

WordPressPopularPostsに順位の数字を入れる

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

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

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

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

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

外観」→「テーマの編集」→「スタイルシート(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;
}

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

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

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

もちろん自分の好きな色にすることもできますよ。

マサオカ

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

ヨメ

色を薄くしていってもきれいだね。

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

 

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

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

MEMO
※「追尾サイドバー」のパーツはスマホで表示されません。

スマホでに表示をしたい場合は、同じ内容の「phpコード」パーツを通常のサイドバーにも入れておきましょう。

あなたが興味を持ったジャンルでは、こんな記事もありますよ!

マサオカ

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

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

 

ヨメ

読んでる人の興味カテゴリの「おすすめ」が知れるから、読者目線のランキング表示になったね。

アクセスアップの記事もおすすめです。

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

 

コメントを残す