今回はプラグインを使用しないでランダムな記事を表示する方法について。

サイドバーのこの部分のことです。

blog026

 

これは以下サイトを参照して実装しました(ランダム以外にもいろいろと参考になります)。

プラグインを使わずWordPressに9の機能をつける

 

ただしサンプルコードのままだとサムネイルがなくて少し寂しいので本ブログでは以下のようにしました。

<div class="random">
	<?php if (have_posts()) : query_posts('posts_per_page=5&orderby=rand'); ?>
	<ul>
		<?php while (have_posts()) : the_post(); ?>
		<li>
			<?php if ( has_post_thumbnail() ):?>
				<a href="<?php the_permalink() ?>" class="random-thumbnail" title="<?php the_title_attribute(); ?>">
					<?php the_post_thumbnail( array(80,80)); ?>
				</a>
			<?php else: ?>
				<a href="<?php the_permalink() ?>" class="random-thumbnail" title="<?php the_title_attribute(); ?>">
					<img src="<?php echo get_template_directory_uri(); ?>/img/no_thumb.jpg" class="random-thumbnail" width="80" height="80" alt="">
				</a>
			<?php endif; ?>
 
			<a href="<?php the_permalink() ?>" class="random-post-title" title="<?php the_title(); ?>">
			<?php the_title(); ?></a> 
 
		</li>
		<?php endwhile; endif; ?>
	</ul>
	<?php wp_reset_query(); ?>
</div>

 

css

.random {
	overflow:hidden;
	margin:0px 5px 5px 5px;
}
	.random ul{
		margin:0px;
		padding:0px;	
	}
	.random li{
		margin:0px 0px 5px 0px;
		padding:5px;
		min-height:80px;
		border-bottom:#42acff 1px solid;
	}
	.random a{
		color: #00f;
		text-decoration: none;
	}
	.random a:hover {
		color: #0f0;
		text-decoration: none;
	}
 
.random-thumbnail{
	float:left;
	width:80px;
}
 
.random-post-title{
	float:right;
	padding:0px 0px 0px 10px;
	width:188px;
	color:#00f;
	font-size:90%;
	overflow:hidden;
}

トラックバック

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です