ブログのサイドバーに同じカテゴリの記事をランダムで表示する方法

WordPress Pumpkin

@_tenbi です。
ブログテーマをリニューアルしてからブログカスタマイズに余念がありません。

最近デザインが好きでRSSではなくブラウザで見ているNANOKAMO BLOGが個別記事に「同じカテゴリのオススメ記事」を表示するようにしていたので、僕も自力で実装してみました!

同カテゴリのオススメ記事を表示する!

まずコード本体。

[html 1=”同カテゴリランダム記事” 2=”–>” 3=”<div” 4=”class="side-category-list">” 5=”<h3″ 6=”class="side-category-title-1st">同じカテゴリのオススメ記事</h3>” 7=”<?php” 8=”$cat” 9=”=” 10=”get_the_category();” 11=”$cat” 12=”=” 13=”$cat[0″ language=”<!–“]; ?>
<?php $bk_wp_query = clone $wp_query; ?>
<?php query_posts( array(‘cat’ => $cat->cat_ID, ‘showposts’ => 1,
‘orderby’ => ‘rand’, ‘post__not_in’ => array($post->ID)) ); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<span class="category-in">
<span class="category-item">
<span class="category-item-photo">
<?php the_post_thumbnail(); ?>
</span>
<span class="category-item-meta"><?php echo get_the_date(); ?></span>
<li class="side-category-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; wp_reset_query();?>
<?php endif; wp_reset_query();?>
</span>
</span>
</div>
<!– 同カテゴリランダム記事 ここまで –>
[/html]

カテゴリと記事の取得に関しては上の記事のPHPを参考にしました。
記事を何件取得するかは上のコードの
[html]
‘showposts’ => 1,
[/html]
で編集可能です。

次にCSS。

[css]
/* 同カテゴリ人気記事 */

.side-category-list {width:300px;}
.side-category-list a {color: #333333;}
.side-category-list a:hover {color: #8b0000;}

.side-category-title {margin-top: 0; margin-bottom: 10px; font-size: 15.4px; border-top: 4px solid #1e90ff; border-bottom: 1px solid #1e90ff;}
.category-item-meta {display: block; color: #999; font-size: 10px; margin-top: 5px;}
.category-item-meta a {color: #999;}
.category-item-meta a:hover {text-decoration: underline;}

.side-category-title {margin: 0 auto}
.side-category-title a {font-size: 18px; font-weight: bold; display: block; color: #333333}
.side-category-title a hover {text-decoration: none; color:#8b0000;}
[/css]

CSSはNANOKAMO BLOGの見出しを参考に、カラーを自分のブログスタイルに変更しました。CSS分かる人なら楽に編集できるんじゃないでしょうか。

追尾させると便利

スクリーンショット 2013 02 03 20 25 33 1

同じNANOKANO BLOGに紹介されていた、コンテンツを追尾させる方法を使えばより記事が見てもらえやすくなります。

この方法を使う時は、先ほどのコードの前に
[html]
<div id="sidebar-scroll">
[/html]
とか付けておけばちゃんと動作するはずです。

まとめ

先週後半からこの機能を使っていますが、以前よりPVは上がってる気がします。ランダムに表示されるので、同じ記事を2回、3回と見た方でも何度か記事を循環してもらえそうです。

スポンサーリンク

この記事を書いた人