訪問別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;
}
これらを反映させると、ヘッダーがこのように生まれ変わります。
いいですね！
これで、今までよりもユーザーの目に記事リンクを露出する機会が増え、ユーザーが閲覧するページ数が増えていくはず。
まとめ
・ヘッダーはブログの玄関で、ユーザーが一番目にする部分
・ヘッダーに目的にあった情報を表示して有効活用しよう
・とにかくユーザーに露出する記事リンクを増やそう（導線の確保）
