訪問別PVアップ!サムネイル付き関連記事の表示を改修してもう1記事読んでもらう工夫を!

公開日: : 最終更新日:2015/08/10 WordPressテーマのカスタマイズ, ブログについて

このエントリーをはてなブックマークに追加

最近注力している「訪問別PV」アップのための施策として記事下にある関連記事の表示方法を変えました。PVを伸ばしたい方はぜひ導入してみましょう。

大切にしたいファーストビュー

何度も言いますが、ファーストビューはマジで大切です。ユーザーはホントにめんどくさがりです。よっぽどの事がなければ、わざわざフッターまでスクロールなんてしてくれません。

ですので、記事を読み終えた後のファーストビューに以下に記事リンクを集められるかが勝負なのです。

スポンサーリンク

これまでは長いことスクロールしなければならなかった

これまで表示させていた関連記事リンクには問題がありました。
というのも、関連記事を1行ごとに表示させていたため、ファーストビューで多くの記事リンクを目にできておらず、その他の記事を見るにはスクロールしなければならなかったのです。
ファーストビューに関連記事を集めてブログのアクセスアップを狙う

スポンサーリンク

1行に4つの関連記事を表示してファーストビューに収めた

そこで、gori.meさんのサムネイル付き関連記事を表示させる方法を参考にさせて頂き、このように記事一覧を変更しました。
ファーストビューに関連記事を集めてブログのアクセスアップを狙う
これでユーザーは一度に多くの記事リンクを目にすることができるので、以前よりもいい導線として働いてくれるはずです。

最適な関連記事リンクを表示する方法

上記のような記事のサムネイル表示にするには、以下のように実装する必要があります。

<div>
  <?php
    foreach((get_the_category()) as $cat) {
    $cat_id = $cat->cat_ID ;
    break ;
    }
    $query = 'cat=' . $cat_id. '&showposts=8'; 
    query_posts($query) ;
  ?>

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

  <div style="width:155px;margin:5px;height:300px;float:left;overflow:hidden;">
    <div style="width:145px;" class="post_thumbnai">
    <a style="text-decoration: none;" href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ): ?>
      <?php echo get_the_post_thumbnail(); ?>
    <?php else: ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="110px" />
    <?php endif; ?>
    </a>
    </div>
    <span style="width:145px;display:block;padding:5px; font-size:14px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
  </div>
  <?php endwhile; endif; ?>
  <?php wp_reset_query(); ?>
</div>

このままですと、サムネイル画像の表示が崩れてテキストリンクが表示されなくなってしまうので、以下のようにCSSを適用します。

.post_thumbnai img{
	width:180px;
	height:150px;
}

これでユーザーが次の記事を読みたくなるような関連記事リンクを作成することができます。

まとめ

・PVを伸ばすには訪問ユーザーにが閲覧するページ数を伸ばすことが対せる
・ユーザーが記事を読んだ後に見せる記事リンク数がカギになる
・記事リンクは画像付き(サムネイル)の方が効果がある

PVを伸ばすためにサイト設計を勉強しましょう

仕事で悩む人から人気の記事

筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!