訪問別PVアップ!ブログヘッダーにサムネイル付き記事をランダムに表示する方法

公開日: : 最終更新日:2014/07/25 アクセス・集客

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

訪問別PVを増加させるための連載企画です。
ユーザーのファーストビュー範囲内であるヘッダーに記事を表示してユーザーにもっと記事を呼んでもらおうと思います。

ヘッダーはブログの玄関としてユーザーに一番見られる


ユーザーがブログに来訪した時、一番始めに目にするのがヘッダーです。
そりゃそうです。
ブログの一番上にあるのですから、無意識に目に飛び込んできます。

そんな素晴らしいパーツを有効活用しないわけには行きません。
ということで、何かしらの情報を提示しておきましょう。

スポンサーリンク

ヘッダーにはどんな情報を表示しておくか

ここは目的によって変わってきます。
SNSファンページのフォロワー数を増やしたいなら、Like boxやtwitterフォローボタンを表示しておけば良いでしょう。

しかし、今回は訪問別PVアップを目的としていますからサムネイル付きの記事リンクを表示させます。サムネイル付きの方がユーザーの目に留まりやすいですし、興味を引くことができますので、絶対にサムネイルをつけましょう。

スポンサーリンク

サムネイル付き記事リンクを表示する方法

方法は簡単で、以下のコードをダッシュボードのheader.phpに貼付けるだけです。

<div>
  <?php query_posts('showposts=6&orderby=rand&year=2013&monthnum>2'); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

  <div style="width:90px; margin:5px; height:120px; float:left; overflow:hidden;">
    <div style="width:90px; height:70px;" class="post_thumbnail_header">
    <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="90px" />
    <?php endif; ?>
    </a>
    </div>
    <span style="width:90px; display:block; padding:5px; font-size:12px; line-height: 130%;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
  </div>
  <?php endwhile; endif; ?>
  <?php wp_reset_query(); ?>
</div>

なお、
「showposts=6&orderby=rand&year=2013&monthnum>2」
の中で
「showposts」にて表示させる記事数を指定し、
「orderby=rand」にてランダムに記事を取得し、
「year=2013&monthnum>2」にて2013年3月以降の記事を指定しています。

このままですと、サムネイル画像の表示が崩れるのでCSSを効かせます。(style.cssにて)

.post_thumbnail_header img{
	width: 80px;
	height: 70px;
	border-radius: 12px;
}

これらを反映させると、ヘッダーがこのように生まれ変わります。
ヘッダーにサムネイル付き記事リンクを表示してPVを増加させる方法
いいですね!
これで、今までよりもユーザーの目に記事リンクを露出する機会が増え、ユーザーが閲覧するページ数が増えていくはず。

まとめ

・ヘッダーはブログの玄関で、ユーザーが一番目にする部分
・ヘッダーに目的にあった情報を表示して有効活用しよう
・とにかくユーザーに露出する記事リンクを増やそう(導線の確保)

訪問別PVを増やしたいならサイト設計の勉強が必要だね

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

筆者Twitterアカウント

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

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

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

最新情報をお届けします

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

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

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

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

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