Webの記録

WordPress 新着記事に「New!」表示をつけたい時

投稿日:

この記事は約 6 分で読めます。

以前、「WordPress 新着記事のタイトルを表示する方法。」を試してみましたが、記事タイトルの横に「NEW!」などの文字やアイコンを表示していませんでした。

表示させる条件によっていろいろと記述が変わりますが、今回は一定期間「NEW!」というマークを付ける方法を試したので追記という意味でもメモします。

調べていたら、本当に記述の仕方は様々で勉強になりました!

記述方法

新着記事5件に、公開後7日間「NEW!」という文字を表示する。
よく見かけるパターンの記述方法です。

				<ul>
				   <?php query_posts('posts_per_page=5'); ?>
				   <?php if( have_posts() ) : while( have_posts() ):the_post(); ?>
				   <li>

					  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					<span class="date">

					<?php
					  $days=7; //Newをつけたい日数
					  $today=date('U'); $entry=get_the_time('U');
					  $diff1=date('U',($today - $entry))/86400;
					  if ($days > $diff1){
						echo'New!';
					     }
					?>
					</span>
              			   </li>
				   <?php endwhile; endif; ?>
				   <?php wp_reset_query(); ?>
				</ul>

同じ新着記事5件に、公開後7日間「NEW!」という文字を表示する方法ですが、Wordpressで日本時間を正確に表示するのは以下の記述良いそうです。
11行目に「date_i18n」関数を使ってます。

				<ul>
				   <?php query_posts('posts_per_page=5'); ?>
				   <?php if( have_posts() ) : while( have_posts() ):the_post(); ?>
				   <li>

					  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					<span class="date">

					<?php
					  $days=7; //Newをつけたい日数
					  $today=date_i18n('U'); $entry=get_the_time('U');
					  $diff1=date('U',($today - $entry))/86400;
					  if ($days > $diff1){
						echo'New!';
					     }
					?>
					</span>
              			   </li>
				   <?php endwhile; endif; ?>
				   <?php wp_reset_query(); ?>
				</ul>

2番目の記述で「NEW!」を文字ではなく、画像にする場合。
単純に14行目のechoのあとにimgタグを入れるだけ実現出来るようです。

				<ul>
				   <?php query_posts('posts_per_page=5'); ?>
				   <?php if( have_posts() ) : while( have_posts() ):the_post(); ?>
				   <li>

					  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
					<span class="date">

					<?php
					  $days=7; //Newをつけたい日数
					  $today=date_i18n('U'); $entry=get_the_time('U');
					  $diff1=date('U',($today - $entry))/86400;
					  if ($days > $diff1){
						echo'<img src="画像のパス" alt="NEW!">';
					     }
					?>
					</span>
              			   </li>
				   <?php endwhile; endif; ?>
				   <?php wp_reset_query(); ?>
				</ul>

記事タイトルと「NEW!」以外に、更新日付を入れたい場合は以下を追加します。


                                          <?php the_time('Y年n月j日'); ?>

ちなみに86400という数字は、60秒×60分×24時間=1日(86400秒)です。

今回は公開後7日としていますが、ココの設定を変えればコピペで使えそうですね。

参考サイト

今回の記事を書くにあたって、参考にさせて頂いたブログです。
ありがとうございました!

-Webの記録
-

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Facebook向けに最適なOGP設定の仕方をメモ。

この記事は約 1 分で読めます。 何かのサイトで「いいね!」をした時に、友達のニュースフィードに確実に出したいなら・・・OGPの設定が必要! ・・・と、いうワケで最近はサイトを作ったら「OGP設定」を …

no image

レスポンシブに便利!様々な端末サイズでの見え方を確認できる「Viewport Resizer」

この記事は約 1 分で読めます。 レスポンシブサイトを制作途中、いろんな端末サイズでちょっと見え方を確認をします。 最終的にはやっぱり実機での確認なんですが・・・コーディング途中ではやっぱり手軽に確認 …

no image

WordPressプラグイン「NIVO slider light」でリッチなスライドショー簡単設置

この記事は約 1 分で読めます。 以前「jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪」で、「jquery.nivo.slider.js」というjQueryライ …

no image

jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も数枚の画像を使ったスライドショーを作りたいと思います。 見た目がキレイで、ユーザーが自由に前後の画像へ移動する事も出来て、ちょっとしたテキストも入れられるという・ …

no image

WordPress ナゾのスマイルマーク

この記事は約 1 分で読めます。 あんまり気にしてなかったんだけれど、フッターの下にとても小さなナゾのスマイルマークがありました。 今回、オリジナルテーマを作成していて・・・何となくフッターの下にのぞ …