No fun, No business. 楽しくなければ、ビジネスじゃない。

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

    
\ この記事を共有 /
【WP・ハミングバード】記事タイトル下にページランキングを表示させるカス...

こんにちわ。

IT部門のない会社の社外No.2、Web集客先生のやまもとです。

ぼくのブログは、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を使ってページランキングを作れるようにスタイルシートを書いてほしいと切に願っている・・・。

 

 

Copyright©マーケティング・ヒーロー ケンタ,2024All Rights Reserved.