WordPressでNew!を表示するパターン別4つの方法


WordPressを、企業サイトの構築として使う場合や、ブログとして使う場合など、時系列に紐付いたカスタマイズをする際に、
トップページの一覧リストや、各記事のタイトルの横に、「New!」などと文字を付けたり、New!画像を表示させる要望があると思います。

その「New!」の付け方も、
(1)時間を基準で付けたいのか、
(2)各カテゴリーリストの最新件数で付けたいのか、
(3)サイト全体の最新件数で付けたいのか、
(4)それらを組み合わせたいのか、
など、「New!」を付けたい要望も様々です。

ここでは、私が、案件によって、今までに経験しました、WordPressでNew!を表示するパターンを、パターン別に大きく4つに分類しまして、その方法をご紹介します。

今までWordPressでサイトを数百サイト作ってきましたが、WordPressでNew!を表示する要望として、この4パターン以外は出てきませんでした。ですので、WordPressでNew!を表示する要望としてはその多くを網羅できているのではないかと思います。(もし他の要望などあればご指摘ください。)

以下、WordPressテーマで、表示させたい箇所に書けば、表示されると思います。

それでは、それぞれ見ていきましょう。
 

1.記事を公開してからn日間はNew!を表示させたい場合

「WordPress New 表示」などと検索すると出てくる情報の多くは、記事公開日からの時間による「New!」ではないでしょうか。

例:記事を公開してから7日間はNew!を表示させたい場合

<?php
$days = 7; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo 'New!';
}
?>

というのを、WordPressの「New!」を表示させたい場所に書きましょう。
上の例では、7日間「New!」を表示させる形ですが、
$days = 7;
の数字を変えれば、日数を変えられます。

date_i18n関数は、WordPressにおいて、日本時間を取得する関数です。
環境によっては、
$today = date(‘U’);
と書いても正常に動く環境もあるかもしれません。
しかしながら、date_i18n関数を使った方が、WordPressで日本時間を取得する際には正確です。

get_the_time関数は、記事の投稿日時を取得する関数です。

それらを変数で整えた後に、86400秒=60秒×60分×24時間=1日ということで、
今日の日時から投稿した日時を引いた秒数を1日で割って、それが$daysより小さい値の場合には「New!」が表示させる、というプログラムです。

上記が基本形になると思いますが、もちろん、これを前提として、以下のような応用も出来ます。

例:記事を公開してから10時間はNew!を表示させたい場合

時間で変えたければ、

<?php
$hours = 10; //Newを表示させたい期間の時間
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 3600 ;
if( $hours > $kiji ){
echo 'New!';
}
?>

とすれば、10時間の間は「New!」が表示されます。
行っていることは、そんなに変わらなくて、さきほどの例では、86400秒=60秒×60分×24時間=1日として日数を$kijiという変数にしていたのを、3600秒=60秒×60分=1時間としただけです。

例:記事の公開日時ではなく、記事の更新日時を基準としてNew!を表示させたい場合

さらに、少し特殊なケースかもしれませんが、公開日時ではなく、更新日時で「New!」を表示させたいこともあると思います。
具体的には、公開した日付は変わらないけど、過去の記事で文章を追加したり編集したりした場合などです。記事の加筆編集が特徴のサイトには、公開日時基準ではなく、更新日付基準の方が適している場合もあるかもしれません。

そのような場合には、WordPressでは、get_the_modified_date関数が用意されています。
get_the_modified_date関数は、記事の更新日時を取得する関数です。
したがって、記事の公開日時ではなく、記事の更新日時を基準としてNew!を表示させたい場合には、get_the_time関数の代わりに、get_the_modified_date関数を使いましょう。

<?php
$days = 7; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_modified_date('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo 'New!';
}
?>

例:New!に色を付けたい場合

echo 'New!';

とある箇所を

echo '<font color="#ff0000">New!</font>';

などとすれば解決です。

例:New!の画像を用意してNew!画像を表示させたい場合

WordPressの現在のテーマにimagesフォルダなどを作り、その中にnew.jpgという画像を作って入れた上で、

echo 'New!';

とある箇所を

echo '<img src="';
bloginfo('template_directory');
echo '/images/new.jpg" width="30" height="30" alt="new" />';

などとすれば解決です。
 

2.一覧を表示する場所に、最新記事n件にNew!を表示させたい場合

次に、日時に関係なく、最新記事n件には常にNew!を付けておきたい場合です。
各カテゴリーごとに、最新n件にはNew!を付けておきたい場合などに適しています。

<?php
$my_query = new WP_Query(array(
'cat' => 1, //カテゴリーID
'posts_per_page' => 10, //表示件数
'orderby' => 'date',
'order' => 'DESC'
));
?>
<?php while($my_query->have_posts()) : $my_query->the_post(); ?>
<b><?php the_time("Y.n.j"); ?></b> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php
//New!を付ける件数
if ($my_query->current_post < 3) {
echo 'New!';
}
?>
<br />
<?php endwhile; ?>

なお、そもそも、カテゴリーIDではなく、全部の記事を一覧表示させた時の一覧リストに「New!」を付けたい場合などには、
上記のうち、WP_Query関数の配列の中の

'cat' => 1, //カテゴリーID

を削除しましょう。

また、そもそもとして、

<?php
//New!を付ける最新記事の件数
if ($my_query->current_post < 3) {
echo 'New!';
}
?>

を削除すれば、企業サイトなどでよく使う新着情報一覧リストが作れます。

さらに、

$my_query->current_post

は条件分岐として、応用がききまして、

<?php
if ($my_query->current_post==0) {
echo '1件目の項目に表示させたいモノ';
}
?>
<?php
if ($my_query->current_post==1) {
echo '2件目の項目に表示させたいモノ';
}
?>

といった形で、リスト内で出力させるモノを変えることができます。
なお、$my_query->current_post==nにおいて、nは0から始まりますので、1件目の項目には0、2件目の項目には1・・・といった形で、1つズレることに注意しましょう。
 

3.全ての記事の中から、最新記事n件にNew!を表示させたい場合

いやいや、そもそも、時間軸でNew!を付けたいわけでも、各カテゴリー項目リストに均一にNew!を付けたいわけでもない。サイト全体の中から、最新記事n件にNew!を表示させたいという場合もあると思います。
この情報は、この記事を書いている時点では、日本語でこの情報について触れている記事は、検索してもあまり出て来なかったのですが(私の検索の仕方の問題かもしれませんが)、比較的、需要があるのではないかと思いますので、以下に記載します。

なお、このサイト全体の全ての記事の中から最新記事n件にNew!を表示させる方法については、大曲さんと会って話す中で教えていただきました。大曲さん、ありがとうございます!

<?php
$last_post_ids = array();
//New!を付ける最新記事の件数
$lastposts = get_posts('posts_per_page=5');
foreach($lastposts as $lastpost) {
$last_post_ids[] = $lastpost->ID;
}
?>
<?php if ( in_array( $post->ID, $last_post_ids ) ) : ?>New!<?php endif; ?>

これで、サイト全体の全ての記事の中から最新記事n件にNew!を表示させることができます。
各記事(single.php)のタイトル横などにも表示できますし、アーカイブページ(archive.php)のタイトル横などに表示することもできます。

行なっていることは、最新記事n件の記事IDを取得して、それを一旦、配列に入れています。
その後に、PHPのin_array関数で、現在の記事IDと、さきほど配列に入れた記事IDが同一であれば「New!」を表示させるという条件分岐を行なっています。
 

4.1~3を組み合わせるパターン

以上を踏まえまして、
例えば、全てのブログ記事の中から最新5件のタイトルの横に「New!」を表示させるけど、最新5件の記事だったとしても公開日時が30日以上経過している時は「New!」を付けたくない、という場合もあると思います。
そのような時には、以下のように、if文の条件分岐を使って組み合わせましょう。

<?php
$last_post_ids = array();
//New!を付ける最新記事の件数
$lastposts = get_posts('posts_per_page=5');
foreach($lastposts as $lastpost) {
$last_post_ids[] = $lastpost->ID;
}
?>
<?php
$days = 30; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
?>
<?php if ( in_array( $post->ID, $last_post_ids ) ) : ?>New!<?php endif; ?>
<?php
}
?>

と書きます。

これを、例えば、各記事(single.php)のタイトル横やアーカイブページ(archive.php)のタイトル横に書いておけば、サイト全体の最新5件で、かつ、30日以内の投稿の横には、「New!」が付きます。
 

まとめ

以上のように、一概に、WordPressでNew!を表示するといっても、様々な要望があると思います。

自分のサイトであれば、自分の希望に応じて、
お客さんのサイトであれば、お客さんの希望に応じて、
柔軟に対応できるかと思います。

自分が今まで聞いた要望やニーズでは、上記の4パターンが全てでした。(もし他の要望などあればご指摘ください。)

特に、一番最後に書きました「4.1~3を組み合わせるパターン」などは、「New!」の付け方として一番考え方が合っているのかなとも思いますので、もしそのような必要性がありました際には、ソースコードを参考にして、WordPressテーマの中で使っていただけますと嬉しいです。

また、それぞれのソースコードにつきまして、稼働チェックはしていますが、もしソースコードに間違いや、より良い書き方などもありましたら、ご指摘いただけましたら嬉しいです。

カテゴリー: WordPressのカスタマイズ パーマリンク

WordPressでNew!を表示するパターン別4つの方法 への30件のフィードバック

  1. khoshino のコメント:

    クリスマスの夜ではありますが、まったく関係の無い記事として、僕が今までに受けた要望やニーズ別で、WordPressで記事にNew!を付けるパターン別4つの方法を書きました。 「WordPressでNew!を表示するパターン別4つの方法」 http://t.co/k24cUO3y

  2. cubismer のコメント:

    クリスマスの夜ではありますが、まったく関係の無い記事として、僕が今までに受けた要望やニーズ別で、WordPressで記事にNew!を付けるパターン別4つの方法を書きました。 「WordPressでNew!を表示するパターン別4つの方法」 http://t.co/k24cUO3y

  3. planbeat のコメント:

    WordPressでNew!を表示するパターン別4つの方法 | WordPress(ワードプレス)コミュニティ – http://t.co/pibuYb8P

  4. mihokoshimoyamada のコメント:

    NEW表示を 日付でコントロール

  5. ピンバック: WordPressに新着NEWアイコンをつけてみる | colors7

  6. ピンバック: カテゴリーごとに最新投稿が含まれていれば「NEW」を表示するWordPressのショートコード | DEVLAB

  7. ピンバック: カテゴリーごとに最新投稿が含まれていれば「NEW」を表示するWordPressのショートコード | DEVLAB

  8. 細谷 崇 のコメント:

    date_i18nという関数を初めて知る・・・ふむふむ。 なるへそ。 http://wp3.jp/2011http://wp3.jp/2011

  9. tkc49 のコメント:

    date_i18nという関数を初めて知る・・・ふむふむ。
    なるへそ。
    http://t.co/v5K1tdR4 http://t.co/X7VeUiWI

  10. ピンバック: wordpressで最新記事にnewマークをつける方法 その2 « ホームページ制作 長野県 茅野市|スタジオハロー

  11. aqun00 のコメント:

    “WordPressでNew!を表示するパターン別4つの方法 | WordPress(ワードプレス)コミュニティ” http://t.co/GDBghqG7

  12. kamichiki のコメント:

    WordPressでNew!を表示するパターン別4つの方法 http://t.co/Ol8gKzIi @khoshinoさんから

  13. yaharitensai のコメント:

    WEB/wordpress/関数

  14. lifeyuji のコメント:

    日付周りってあんまりカスタマイズしたことない。
    WordPressでNew!を表示するパターン別4つの方法 http://t.co/Eysdcewz @khoshinoさんから

  15. ピンバック: Wordpressのindexページに更新情報を表示する+更新から一定時間「New!」と表示する | Y.A.S.

  16. ピンバック: WordPressでNew!を表示する | webdesignstore

  17. ピンバック: Wordpress 新着記事に「New!」表示をつけたい時 | Web雑記帳。

  18. show-tima のコメント:

    新着記事にNEWマークを一定期間だけつける方法

  19. ステープルレイト のコメント:

    [メモ]WordPressでNew!を表示するパターン別4つの方法 | WordPress(ワードプレス)コミュニティ | http://t.co/3OBFokmP

  20. コムテ のコメント:

    WordPress/時間を取得する関数/New!を表示するパターン別4つの方法 http://t.co/wLTrbAFuvr @khoshinoさんから

  21. ow_ukeguchi のコメント:

    NEWアイコン

  22. o_hiroyuki のコメント:

    newアイコン

  23. m-r-design のコメント:

    Wp Tips

  24. www-tmcc のコメント:

    [][Pocket]

  25. Takako Ohira のコメント:

    “WordPressでNew!を表示するパターン別4つの方法 | WordPress(ワードプレス)コミュニティ” http://wp3.jp/2011

  26. satoshiiiiii のコメント:

    “$hours = 10; //Newを表示させたい期間の時間$today = date_i18n('U');$entry = get_the_time('U');$kiji = date('U',($today – $entry)) / 3600 ;”

コメントを残す

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

CAPTCHA