【WP・ハミングバード】記事タイトル下にページランキングを表示させるカスタマイズ

The following two tabs change content below.
『人類は財産。友達は宝。出逢いは最高の贈り物』

人と人との出逢いは人生において最高の贈り物です。ぼくたちは誰と出逢うかで人生が大きく変わっていきます。ウェブもリアルもどちらも同じです。
ぼくは、起業家とお客さんの出逢いを最高の宝物にしたいと思っています。このブログでは、起業家とお客さんの出逢いを最高の宝物にする為の情報をコミPo!を使ってわかりやすく配信しています。
ぼくと友達になって下さい(^^)

こんにちわ。

IT部門のない会社の社外No.2、IT軍師のやまもとです。

ぼくのブログは、Wordpressにテーマはハミングバードを使って運用しています。このハミングバードは、痒いところに手が届いていて、基本的にカスタマイズする必要を感じません。

というか、カスタマイズするくらいなら、その時間をブログの記事を書く時間に回した方が良いくらいです。

しかし、今回どうしてもやりたいことができたので、ちょっとスタイルシートをいじってみました。

今回、どうしてもやりたかったこと・・・、それは記事タイトル下にページランキングを表示させること。

今日は、ハミングバードで記事タイトル下にページランキングを表示させる方法をシェアしていきます。

相棒はゴールデンウィークは寝て過ごした自称美人アンカーウーマンのカツヨです。

スポンサーリンク

記事タイトル下のページランキングは回遊率を上げる

カツヨ
いきなりだけど、最近、記事タイトル下にブログ記事のページランキングを表示しているブログを見かけるようになったけど、意味あるのかしら?
やまもと
さすがカツヨさん、細かいところに気がついたね~
カツヨ
そう?
やまもと
うん。ぼくもヨッセンスで記事タイトル下にランキングを入れていたから、ちょっと気になってたんだ。

 

カツヨ
そうなのね。
やまもと
他にも、はてなブログを使っている人は、ランキングや関連記事を記事タイトル下に入れてる人が多いみたい。
カツヨ
何でなのかしら?
やまもと
それは、回遊率が上がるからだよ。このブログでも本文の最後に関連記事をプラグインの「Related Posts」を使って入れているけど、本文最後よりも記事タイトル下の方が目につくからね。
カツヨ
確かに、記事を読む前に「へ~、こんな記事もあるんだ~」って気になるから、後で読んでみようって思うわよね。
やまもと
そうなんだ。ブログのサイドメニューにも記事ランキングをおいているけど、ココはあまりクリックされていないんだよね。ぼくのブログの場合はね
カツヨ
ふ~~ん。同じ、ページランキングでも設置する場所によってクリック数とか変わるのね。
やまもと
そういうものだよ。サイドメニューのページランキングは、スクロール領域には設置していないから、本文を読んでいる間は視界に入って来ない傾向がある。スクロール領域にページランキングを設置しておけば、回遊率は上がるかもしれないけど、検索で流入してきた人の興味を引く記事とは限らない。検索からの流入した人の回遊率を上げるには、本文最後の関連記事の方が効果があるよ。
カツヨ
位置関係は、下の図で確認してね
wphb_ranking_01

 

やまもと
ということで、今回は記事タイトル下にブログのページランキングを表示させる方法をシェアするよ

 

記事タイトル下にページランキングを表示する5分間カスタマイズ

では、先ず必要なプラグインを2つ紹介しておこう。1つ目は「jetpack」、2つ目は「WordPress Popular Posts」。jetpackのインストール方法は、「記事ごとにCTAを変えろ!!記事に最適なCTAやバナーを表示する方法」を参照して欲しい。

WordPress Popular Postsのインストール

既にインストールが完了している人は無視して次にすすもう。

カツヨ
まずは、管理画面でプラグイン→新規追加よ
wphb_ranking_03

 

カツヨ
次に検索窓に、「WordPress Popular Posts」と入力して、エンターをバシ!!!
wphb_ranking_04

 

カツヨ
今すぐインストールをクリック
wphb_ranking_05

 

カツヨ
インストールが完了したら、早速、有効化をクリックね
wphb_ranking_06

 

カツヨ
これでプラグインの準備は完了よ。さっさと次に行っちゃってね。

 

ウィジェットの追加

カツヨ
「外観」→「ウィジェット」をクリック
wphb_ranking_07

 

カツヨ
数あるウィジェットの中から「WordPress Popular Posts」をクリック(1)し、「【広告】記事タイトル下(PC)」をクリック(2)、ウィジェットを追加をクリック(3)よ
wphb_ranking_08

 

カツヨ
ウィジェットの設定をするわよ。

  1. Titleは、目を引きやすいタイトルが良いわね。例)よく読まれている記事、人気の記事
  2. Show up toは、少なからず多からずということで5
  3. Sort posts byは、Total viewsね
  4. Time rangeは、Last 24 hours。他にもWPPを使ってランキングを表示させているなら、他とは違うフィルターを選んでね

設定ができたら、保存をクリックね

wphb_ranking_09

 

スタイルシートの設定

カツヨ
後は、スタイルシートを書くだけよ。説明は面倒だから、コピペして頂戴。では、外観→CSS編集をクリックね。
wphb_ranking_10
Jetpackをインストールしていないと、このCSS編集が出てこない

 

カツヨ
じゃぁ~、これをそのままペタッとはってね
 

カツヨ
最後に保存よ。
wphb_ranking_11

 

カツヨ
記事タイトル下のページランキングはこんな感じで表示されているはずよ
wphb_ranking_12

 

スタイルシートの修正

カツヨ
とか言ったりなんかして、実はまだ表示されないはずなのよ。実は、上でコピペしたスタイルシートの一部を修正する必要があるからなのよ。

じゃぁ~、早速、修正の方法を説明するわ

カツヨ
ブラウザはGoogle Chromeで説明するわね。適当にページを開いて記事タイトル下のランキングのタイトルを右クリックして、検証をクリック
wphb_ranking_13

 

カツヨ
表示されたソースで少し上に書かれている<div id=“wpp-○” class=”widget popular-posts”>を探して、wpp-○の部分を覚えるの
wphb_ranking_14

 

カツヨ
後は、CSS編集でwpp-10と書いてある部分をwpp-○に変更すればOKよ

 

やまもとの視点

ブログのカスタマイズは、はっきりってしまえば読者にはあまり関係ないことだ。ブロガーの自己満足に過ぎない。その中に、読者を引き付けるきらりと光る要素があったりする。

ぼくはブログのカスタマイズやデザインに時間をかけるくらいなら、読者の読みたい記事をたくさん書いた方が良いと考えている。過去の自分の経験から見ても、カスタマイズに時間を費やすのは時間の無駄だ。

今回のカスタマイズも、Google Chromeを使って2時間位スタイルシートをいじり倒して作った。しかし、スマホ用には対応できなかった。

是非、次回のハミングバードのバージョンアップで記事タイトル下にWPPを使ってページランキングを作れるようにスタイルシートを書いてほしいと切に願っている・・・。

 

 

スポンサーリンク

面白いって思ったらシェアをお願いします

Web集客&収益化の仕組み作りをマンガ(コミPo!)で解説した小冊子を作成しました


簡単で、楽しく、わかりやすいと既に好評を頂いている小冊子、全部で6冊です。

是非、あなたのWeb集客&収益化にお役立て下さい。

また、何やらココでは言えない『超豪華特典』が付いています。

詳しくは、各小冊子の最後で。

ABOUTこの記事をかいた人

『人類は財産。友達は宝。出逢いは最高の贈り物』

人と人との出逢いは人生において最高の贈り物です。ぼくたちは誰と出逢うかで人生が大きく変わっていきます。ウェブもリアルもどちらも同じです。
ぼくは、起業家とお客さんの出逢いを最高の宝物にしたいと思っています。このブログでは、起業家とお客さんの出逢いを最高の宝物にする為の情報をコミPo!を使ってわかりやすく配信しています。
ぼくと友達になって下さい(^^)