【WordPress初級者】WordPressでモバイルだけのトップページの上の方に人気記事ランキングを表示する方法

検索エンジン
  • ふトップページの離脱率に頭を悩ませていた

Googleアドセンスアフィリエイトで、月に7万円9万円15万ほど稼いでくれている、私のメインブログのお話なのですが、google Analytics(グーグルアナリティクス)の行動フローを見ると、トップページの離脱率がものすごくて、頭を抱えていました。

【参考】google Analytics>行動>行動フロー

始めはデフォルトの新着記事一覧の状態で放置していたのですが、さすがにこれではアカンやろ…と、プラグインで、スライダー(Meta Slider)と、目次を自動生成してくれるPS Auto Sitemapを表示させましたが、トップページの離脱率は相変わらずでした。

確かに探しにくいだろうな…と思えるページでしたので、もう少し手を加えたいと思いながらも、週1回の記事の更新だけで手いっぱいで…

しかし、最近になって、狙っていたキーワードが、検索エンジンで10位以内に入るようになり喜んでいたのですが、そこに表示されているページがトップページなものですから、ほとんどの人が離脱してしまうのです…

私のブログは、googleやYahoo!などの検索エンジンから訪問する人が9割を占めていますので、このままだとせっかく上がった順位も、また下がってしまいます。

何とか2ページ目、3ページ目と読み進めてもらうようにするために、GW中に軽くテコ入れをすることにしました。

スポンサーリンク

特にスマホのモバイルユーザーを意識してテコ入れ

私のメインブログは、このブログで使っているものと同じで、Simplicityという無料テーマを使わせてもらっています。

このブログと同じで、左サイドバーとメイン本文の2カラムなのですが、サイドバーには、プラグイン「WordPress Popular Posts」の人気記事ランキングを表示して、よく読まれている記事がアイキャッチ付きで表示されるようになってます。

この人気記事ランキングを表示するようにしてから、サイト内の回遊性が高まってPV数が上昇したように感じていました。

しかし、スマホで見ると、人気ランキングが表示されているサイドバーはメイン本文の下に表示されてしまい、スクロールして人気記事ランキングにたどり着く前に、離脱してしまうようなのです。

スマホの時だけ、トップページのファーストビューに人気ランキングを表示されたい!

なので、できればモバイルで、人気記事ランキングを「トップページだけ」ファーストビューに表示する方法考えた結果、私のような初級者でも簡単にできる方法を見つけたので、備忘録を兼ねてここに残したいと思います。

※プラグインを使った方法です。自在にコードを操れる人にはつまらない記事だと思います

簡単に方法を説明すると、

「新たに、mobileのトップページにだけ表示される人気記事ランキングを設定し、従来から表示されているサイドバーの人気記事ランキングをトップページだけ非表示にする」

というものです。

プラグインを1つ追加して、ウィジェットに簡単なコードを2カ所追加するだけなので、phpを編集しなくてもよいし、初級者にも簡単にできますよ。

修正前のスマホのトップページの表示順

現在のモバイルのトップページは、

1)ブログタイトル

2)スライダー

3)目次(テキストのみ)

4)人気記事ランキングトップ10を含むサイドバーのメニュー

の順で表示されていました。

修正後のスマホのトップページの表示順

下で説明する方法を行ったところ、モバイルのトップページは、

1)ブログタイトル

2)スライダー

3)人気記事ランキング トップ20

4)目次(テキストのみ)

5)サイドバーのメニューの中の人気ランキングトップ10以外のもの

の順で表示されるようになりました。

モバイルだけのトップページのファーストビューに人気記事ランキングを表示される方法【Simplicity】

私の使っているWordPressテーマはSimplicityなので、テーマによっては表示が異なることがあるかも知れません。何卒ご了承ください。

①プラグイン Widget logic をインストール

まずは「Widget logic」というプラグインをインストールします。

プラグイン>新規追加>「Widget logic」で検索し、インストールして有効化します。

②ウィジェットの「固定ページ本文上」に人気記事のウィジェットを追加

WordPress>外観>ウィジェット を開き、

「固定ページ本文」(※注意1・2)のウィジェットの▼を展開し、

この中に画面左側にある「人気記事」のウィジェットをドラッグして追加します。(または、「人気記事)をクリックすると移動先が選べます)

※注意1 私の場合、「固定ページ本文上」にスライダーが入っているため、「固定ページ本文中」にいれますが、ブログタイトルのすぐ下にランキングを表示されたいときは、「固定ページ本文上」に「人気記事」のウィジェットを入れてください。

※注意2 私のメインブログのTOPページは、固定ページで作成したページがTOPページになるようにカスタマイズしています。WordPressのデフォルトのままの”投稿が新着順に表示されている状態”の場合は、「インデックスリストトップ」に入れてください

しかしこの状態ですと、全ての固定ページの本文上に、人気記事ランキングが表示されてしまいますので、③で除外設定をします。

③モバイルのトップページ以外のページにはランキングを表示させない為の除外コードを登録

スマホのトップページだけに人気記事表示

この設定画面の一番下に、①で追加したプラグインの項目が追加されているはずなので、ここに下記のコードを入力します。

wp_is_mobile()&& is_front_page()

コードの意味は、

wp_is_mobile() ⇒ モバイルのみに表示させる

is_front_page() ⇒ フロントページ(トップページ)のみに表示させる

となり、ここで設定した人気記事ランキングは「モバイルページのトップページのみに表示させる」という設定になりました。

しかし、このままですとモバイルのトップページには、人気記事ランキングが2つ表示されて重複してしまいますので、さらに④で除外設定をします。

④人気記事の重複を非表示にする除外設定

次は、WordPress>外観>ウィジェット の、「サイドバーウィジェット」を開き、人気記事ランキングのウィジェットの一番下に、下のコードを追加します。

!wp_is_mobile()&& is_front_page() && !is_paged()

コードの意味は、

!wp_is_mobile() ⇒ モバイルには表示させない

is_front_page()  ⇒ フロントページ(トップページ)のみ

!is_paged() ⇒ 表示させない

となり、サイドバーで設定している人気記事ランキングは、「モバイルのトップページでは表示させない」という設定になります。

まとめ

プラグイン「Widget logic」のインストールと、ウィジェットに簡単なコードを2カ所追加しただけですが、何とかこれでモバイルだけのトップページのファーストビューを変更することができました。

スマホユーザーが、トップページをクリックしたときに、最初に目に入るのが人気記事ランキングになった訳です。

これでトップページの離脱率が改善すると嬉しいのですが…

しばらくは様子を見てみたいと思います。

◆参考

スマホのモバイル画面にサイドバーの一部を表示させない方法【WordPress初級者向け】
以前、「Widget logic」というプラグインを使って、条件分岐タグで、スマホのTOPページだけのファーストビューに、プラグイン「Wor...
スポンサーリンク