新着に「NEW」アイコンをつける方法:WordPress

2014年12月19日


TOPページに掲載する新着一覧に、「投稿から30日はNEWアイコンをつけたい」「最新1件だけNEWアイコンをつけたい」といったご要望をお客様からいただくことがございます。今回は、「NEW」表示についてご案内いたします。


新着情報の出力


おなじみですが、新着情報の一覧を出力します。

<ul>
<?php query_posts('cat=3&showposts=5');?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
	<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_time('Y年n月j日'); ?>
	<?php the_title(); ?></a>
</li>
<?php endwhile; else: ?>
<?php _e('記事がありません。'); ?>
<?php endif; ?>
<?php wp_reset_query();?>
</ul>

出力すると、こうなりますね。



新着から●日間NEWを表示する

一番良く使うパターンがこちらですね。

今回は、取り急ぎCSSで「NEW」を装飾しておきます。

span.newIcon {
	padding: 2px 3px;
	border: solid 2px #000;
	background: #fff00d;
	color: #000;
	font-weight: bold;
}
<ul>
<?php query_posts('cat=3&showposts=5');?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
	<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_time('Y年n月j日'); ?>
	<?php the_title(); ?></a>
	//NEWここから
	<?php
		$days=30; //NEWをつける日数
		$today=date_i18n('U');
		$entry=get_the_time('U');
		$sa=date('U',($today - $entry))/86400;
			if( $days > $sa ){
		 	echo '<span class="newIcon">' . 'NEW' . '</span>';
			}
	?>
</li>
<?php endwhile; else: ?>
<?php _e('記事がありません。'); ?>
<?php endif; ?>
<?php wp_reset_query();?>
</ul>

3日に設定して実行すると、こうなります。
設定した日数を超えた投稿についてはNEWが表示されなくなります。



新着から●件NEWを表示する

あまり更新が頻繁でない場合などはこちらのパターンが良いかもしれません。

<?php $my_query = new WP_Query(array(
'cat' => 4, //カテゴリーID
'posts_per_page' => 5, //表示件数
'orderby' => 'date',
'order' => 'DESC'
));
?>
<ul>
<?php while($my_query->have_posts()) : $my_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>">
<?php the_time('Y年n月j日'); ?> <?php the_title(); ?>
</a>
<?php
if ($my_query->current_post < 1) { //New!を付ける件数
echo '<span class="newIcon">NEW</span>';
}
?></li>
<?php endwhile; ?>
</ul>
<?php wp_reset_query();?>

こちらを実行すると以下の通り。
最新の1件に「NEW」マークがつきますが、何日経ってもそのままで、新しい投稿があれば新しい投稿にだけNEWがつくようになります。

以上で対応完了となります。ご対応が難しい場合にはご相談いただけますようお願いいたします。

カテゴリー: WordPress, 対応事例   パーマリンク

コメントは受け付けていません。

Home >  対応事例 > WordPress > 新着に「NEW」アイコンをつける方法:WordPress