記事上に同カテゴリの記事をサムネイルリスト表示させてPVアップだ!

最終更新日: 2014年12月24日

どうも、@NewsBank7です。

先日ブログデザインをちょこっとだけ変更してみました。いくつか変更した箇所はあるのですが、その1つに記事上にサムネイルリストで関連記事を表示させてみました。

こんな感じで関連記事は表示している記事と同じカテゴリからランダムで表示させています。関連記事は記事下にも表示しているのですが、デザイン面も含めた変更になっています。

スクリーンショット (75)

人気ブロガーでも記事上にサムネイルリストで関連記事を表示させている方が多く、デザイン的にも機能的にもGoodなので今日はその方法をご紹介したいと思います。

カスタマイズは以下のブログを参考とさせていただきました。合わせてご覧になることをおすすめ致します(‘ω’)

【参考】WordPressで記事上に最新記事などの記事リストを並べる方法

まずsingle.phpに以下のコードを追加します。

<div id="thumbnailheader">
<p><?php $cat = get_the_category(); $cat = $cat[0]; ?><br />
<?php $bk_wp_query = clone $wp_query; ?><br />
<?php query_posts( array('cat' => $cat->cat_ID, 'showposts' => 4,<br />
'orderby' => 'rand', 'post__not_in' => array($post->ID)) ); ?><br />
<?php if (have_posts()) : ?><br />
    <?php while (have_posts()) : the_post(); ?></p>
<div class="thumbnailtopimg">
<a href="<?php the_permalink(); ?>"><br />
<?php the_post_thumbnail(array(227,200), array('class' => 'left')); ?></a><br />
<span class="thumbnailtop">
<p><?php echo get_the_date(); ?></p>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br />
</span></div>
<p><?php endwhile; wp_reset_query();?><br />
<?php endif; wp_reset_query();?></div>
<p>

レスポンシブデザインの場合このままsingle.phpにはりつけるとスマホサイトにも表示されてしまうので、〇〇〇で上のコードを挟んでください。(Wordpressのみ)

次にCSSにこちらを追加します。

<br />
.thumbnailtop {<br />
	position: absolute;<br />
	bottom: 7px;<br />
	left: 4px;<br />
	width: 220px;<br />
	text-align: left;<br />
	background: #FF5800;<br />
	opacity: 0;<br />
	color: white;<br />
	font-weight: bold;<br />
	border: 4px solid #FF5800;<br />
}</p>
<p>.thumbnailtop a {<br />
	color: white;<br />
	font-weight: bold;<br />
}</p>
<p>.thumbnailtop p {<br />
	font-weight: normal;<br />
}</p>
<p>.thumbnailtopimg:hover .thumbnailtop {<br />
	position: absolute;<br />
	bottom: 6px;<br />
	left: 4px;<br />
	width: 221px;<br />
	text-align: left;<br />
	background: #FF5800;<br />
	opacity: 1;<br />
	color: white;<br />
	font-weight: bold;<br />
	border: 4px solid #FF5800;<br />
}</p>
<p>.thumbnailtopimg:hover img {<br />
	border: 4px solid #FF5800;<br />
}</p>
<p>.thumbnailtopimg {<br />
	position: relative;<br />
	float: left;<br />
	display: block;<br />
}</p>
<p>.thumbnailtopimg img {<br />
	border: 4px solid white;<br />
	height: 150px;<br />
	width: 221px;<br />
	margin: .5px;<br />
}</p>
<p>#thumbnailheader {<br />
	width: 1100px;<br />
	height: 158px;<br />
	margin: 10px 0 20px;<br />
}<br />

サムネイルの大きさを変更したい場合など、テーマによってはみ出るなどする場合はCSSを変更してお使いください。

以上の方法で記事上にサムネイルリストで同カテゴリ記事が表示されているはずです。

管理人ミズホとラムネのぼやき

質問者の写真
関連記事でブログ滞在も伸ばせるし、デザイン的にもなかなかかっこいいでしょ!

解答者の写真
人気ブロガーさんの中でも、記事上に関連記事を表示させている方も多いもんね。

質問者の写真
サムネイルリストで表示される記事はカテゴリごとの”新着順”ではなく、過去記事も読んでもらえるようにあえてランダムで表示させているよ。

解答者の写真
ちょっとしたカスタマイズにぜひ参考にしてみてね!

最後までお読みいただきありがとうございます。SNSでシェアしてくれるととんで喜びます( ゚Д゚)

スポンサードリンク

スポンサードリンク

また名刺管理で消耗してるの?

最近使い始めたけどめっちゃ便利なアプリです!詳しくはこちらの「名刺管理アプリの「Eight」を使ってみたら便利すぎて名刺ホルダー使ってた昔の自分を殴りたい件」を読んで見てください!

Eight - 100万人が使う名刺アプリ
Eight - 100万人が使う名刺アプリ
開発元:Sansan, Inc.
無料
posted with アプリーチ

コメントを残す

メールアドレスが公開されることはありません。