ゲーム記事は「ゲーム女子」に移動しました

【STORKカスタマイズ】コピペで出来る★ブログの回遊率を上げよう大作戦!

どうも、あず(@yuuki_azusa)です

STORK(ストーク)、良いですよね。「簡単」で「見やすい」ブログが「誰でも」作れる。

完全にSTORK信者です(笑)

ただ、そんなSTORK(ストーク)にもやっぱり欠点はあります。それが、「関連記事の表示位置が下すぎる」という点。

せっかく関連記事を表示していても、こんなに下の方に表示されていたんじゃ、見てくれる人がガクッと減ってしまいます

ということで今回は、回遊率を上げるために記事下の表示の順番を変える方法をご説明します。

回遊率とは
1つの記事だけを読んでブログから離れられるのではなく、2つ以上の記事を読んでもらう割合を指します。回遊率が上がると直帰率が下がります。

私のブログ環境

  • 使用テーマ:STORK
  • WordPress ver.4.8.1-ja

今回STORKのカスタマイズをしたところ

まず、STORKをデフォルトのまま使っていると、記事本文の下は以下の順番で表示されているはずです。

  1. 記事コンテンツ下ウィジェット(広告)
  2. Facebookページへのいいねリンク
  3. SNSシェアボタン大
  4. コメント欄
  5. 前後記事へのリンク
  6. 関連記事

とにかく記事の終わりから関連記事まで遠いのが残念。

パソコンからの閲覧でも1ページ以内に表示出来ないので、当然スマホからの閲覧はもっと効率が悪いです

私のブログは、スマホからの閲覧が8割以上。

ブログを見に来てくれた人に他の記事も読んでもらうためには、少しでも色んな選択肢を表示する必要があります。

そのために関連記事を少しでも目に止めてもらえるように、表示位置を変更したいと思います。

ということで、今回カスタマイズしたのはこの3点。

  • コメント欄の位置を関連記事の下に変更する
  • 下部のSNSシェアボタンを上部と同じ小さいものにする
  • 記事の下の広告の位置を変える

コードをコピー&ペーストするだけで同じ状態にすることが出来ます。

コメント欄の位置を関連記事の下に変更

それでは、まずはコメント欄の位置を変更しましょう。

コメント欄を下まで持っていくのは、コメントをするつもりの人はコメント欄をちゃんと探してくれるからです。

編集するphpファイル

関連記事とコメント欄の位置を変更するには「個別投稿(single.php)」を編集する必要があります。

STORKの子テーマの中にはsingle.phpが無いので、利用サーバーのFTPファイルなどから親テーマのsingle.phpをダウンロードして、そのまま子テーマの中にアップロードしておきます。

実際に変更していくのは、子テーマにアップロードしたsingle.phpです。

まず、子テーマにアップロードしたsingle.phpを開いて、下から14行目に以下のコードがあることを確認します。

php
<?php comments_template(); ?>

次に、このコードをカットして下から10行目の以下のコードの下に貼り付けます。

php
<?php get_template_part( 'parts_singlefoot' ); ?>

そうすると、編集前と編集後ではこんな風に変わります。

編集前
php
<?php if ( is_active_sidebar( 'cta' ) ) : ?>
<div class="cta-wrap wow animated fadeIn" data-wow-delay="0.7s">
<?php dynamic_sidebar( 'cta' ); ?>
</div>
<?php endif; ?>

<?php comments_template(); ?>

</article>

<?php get_template_part( 'parts_singlefoot' ); ?>

<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php endif; wp_reset_query(); //ワンカラム条件分岐END ?>
<?php get_footer(); ?>
編集後
php
<?php if ( is_active_sidebar( 'cta' ) ) : ?>
<div class="cta-wrap wow animated fadeIn" data-wow-delay="0.7s">
<?php dynamic_sidebar( 'cta' ); ?>
</div>
<?php endif; ?>



</article>

<?php get_template_part( 'parts_singlefoot' ); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php endif; wp_reset_query(); //ワンカラム条件分岐END ?>
<?php get_footer(); ?>

これで、記事本文下の表示順番はこうなったはずです。

  1. 記事コンテンツ下ウィジェット(広告)
  2. Facebookページへのいいねリンク
  3. SNSシェアボタン大
  4. 前後記事へのリンク
  5. 関連記事
  6. コメント欄

コメント欄が、関連記事より下に表示されるようになりました。

STORKではphpで複数のブログパーツが用意されています。

ここで入れ替えたのは「parts_singlefoot.php」の内容と「コメント欄」です。

「parts_singlefoot.php」には、関連記事の他にも前後の記事へのリンクも含まれているので、この順番を変更するには「parts_singlefoot.php」を編集する必要があります。

SNSシェアボタンを上部と同じ小さいものにする

次に、SNSシェアボタンのサイズを変更します。

本文下部のSNSボタンは上部のものに比べて大きいから、これを上部のボタンと統一して小さいものに変更します。

編集するphpファイル

さっきと同じく、single.phpファイルを編集します。

下から25行目くらいにある以下のコードを書き換えます。

編集前
php
<?php get_template_part( 'parts_sns' ); ?>
編集後
php
<?php get_template_part( 'parts_sns_short' ); ?>

これで下部のSNSシェアボタンが、上部のものと同じ小さいサイズのものに変わりました。

スマホから見るとこんな感じです↓

パソコンからの閲覧だとたった一行の違いですが、スマホから見ると大きな差がありますね。

ここまでで、表示はこの順番になっています。

  1. 記事コンテンツ下ウィジェット(広告)
  2. Facebookページへのいいねリンク
  3. SNSシェアボタン小
  4. 前後記事へのリンク
  5. 関連記事
  6. コメント欄

STORKではブログパーツとして、2種類のSNSボタンが用意されています。

「parts_sns.php」と「parts_sns_short.php」があり、標準では上部に「parts_sns_short.php」、下部に「parts_sns.php」の内容が表示されるようになっています。

この項目では、その表示を変更しただけです。

デザインそのものを変更するには「parts_sns.php」と「parts_sns_short.php」を編集する必要があります。

記事下の広告の位置を変える

次は、本文の下の広告の位置の変更を行います。

STORKは記事の終わりに広告を貼るためのウィジェットスペースも用意されているので凄く便利なんですが、その位置に広告があると、関連記事に目を通す前に離れられてしまうかも知れません。

まとめ文章のあとに、広告が表示されたら「そこで記事は終わりだ」と判断する人、多いんじゃないでしょうか?

この位置に広告を貼ってしまうと、まだスマホからの閲覧時に関連記事まで1ページで表示されないんです。

収益のことを考えると、その位置はベストかも知れませんが、ブログは何よりも読者ファーストでないといけません

人気ブロガーのかん吉さんも、ゼロから学べるブログ運営×集客×マネタイズ 人気ブロガー養成講座の中で収益よりも、読者さんのことを考えたブログを作るべきだって言っていましたね。

ということで、広告は関連記事の下でコメント欄の上にあたる部分に挿入するように設定します。

編集するphpファイル

またまたsingle.phpを編集していきます。

先に紹介した2項目の編集を行っていると、下から10行目あたりからこんな風になっているはずです。

編集前
php
<?php get_template_part( 'parts_singlefoot' ); ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php endif; wp_reset_query(); //ワンカラム条件分岐END ?>
<?php get_footer(); ?>

これを以下のように編集します。

編集後
php
<?php get_template_part( 'parts_singlefoot' ); ?>
<?php if(wp_is_mobile()): ?>
// スマホ用アドセンスコード //
<?php else: ?>
// PC用アドセンスコード //
<?php endif; ?>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php endif; wp_reset_query(); //ワンカラム条件分岐END ?>
<?php get_footer(); ?>

スマホとPCで、それぞれ別の広告が表示出来るようにしてあります。

「// スマホ用アドセンスコード //」に、スマホで表示させたい広告コードを入力して、「// PC用アドセンスコード //」にPCで表示させたい広告コードを入力すればOKです。

元々ウィジェットで広告表示していた場合は、ウィジェットを削除しておきましょう。

これで表示順番はこうなりました。

  1. Facebookページへのいいねリンク
  2. SNSシェアボタン小
  3. 前後記事へのリンク
  4. 関連記事
  5. アドセンス広告
  6. コメント欄

記事本文から関連記事まで1ページで表示

これで、記事本文の終わりから関連記事まで1ページで表示出来るようになったはずです。

スマホからの閲覧でも、ちゃんと1ページで表示出来るようになりましたね!

これからも少しずつ勉強して、なるべく直帰率を下げられるように頑張ってみたいと思います。

MEMO
このブログは2017年9月25日にWordPressテーマを「SANGO」に変更しています。

WPテーマをSANGOに変えてからやったカスタマイズまとめ

2017.10.01

最後まで読んでくれてありがとうございました。あず(@yuuki_azusa)でした

1 Comment

コメントを残す