[み]WordPressで新しい記事に「New」アイコンを表示する方法

WordPressについてのメモです。

個人的には好きじゃないんですが、ご年配の方によく頼まれる「New」っていうアイコンをつける方法を紹介します。

記事を公開してから○日間「New」アイコンを表示させる方法

「New」アイコンを表示させたいところに、次のコードを書きます。

<?php
    $days =; //「New」を表示させたい日数
    $today = date_i18n('U');
    $entry = get_the_time('U');
    $elapsed = date('U',($today - $entry)) / 86400;
    if( $days > $elapsed ){
        echo 'New';
    }
?>

$daysのところに、「New」アイコンを表示させたい日数を入れてください。3日間なら $days = 3; 、7日間なら $days = 7; です。

これがベースになります。

12時間だけ「New」アイコンを表示させたいとき

1日に何本も記事を更新する人で、12時間だけ「New」アイコンを表示させたい、なんていうときはこちらのコードを追加してください。

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

記事の更新から○日間「New」アイコンを表示させる方法

さっき紹介したのは、記事を公開してから○日間「New」アイコンを表示させる方法でした。こちらで紹介するのは、記事を更新してから○日間「New」アイコンを表示させる方法です。

やり方は、さっきと一緒で、「New」アイコンを表示させたいところに次のコードを追加してください。

<?php
    $days =; //「New」を表示させたい日数
    $today = date_i18n('U');
    $entry = get_the_modified_date('U');
    $elapsed = date('U',($today - $entry)) / 86400;
    if( $days > $elapsed ){
        echo 'New';
    }
?>

get_the_time関数の代わりに、get_the_modified_date関数を使っています。そこだけの違いです。

「New」アイコンを装飾したい場合

これまで紹介したコードは、単純に「New」アイコンを表示させるだけでした。せっかくなので、装飾する方法も紹介します。ちょっとだけコードをいじります。

echo '<span class="new">New</span>';

echo で吐き出されるコードにclassを持たせます。こうすることで、CSSでいかようにも「New」アイコンを装飾することができます。

「New」アイコンに画像を使いたい場合

さっきの echo のところで表示させる画像のURLを吐き出させます。

echo '<img src="' .get_bloginfo('template_url'). '/images/new.png" alt="New" />';

URLはそれぞれの環境に合わせて修正してください。

複数の箇所に「New」アイコンを使う時

もちろん、それぞれのところにコードを追加してもOKです。が、同じものを何度も何度も書くのも面倒だし、後々のメンテナンスも考えると、1か所にまとめておく方がいいかと思います。

で、やり方としては、functions.phpに次のコードを追加します。

function add_new($date,$days){
    $today = date_i18n('U');
    $elapsed = date('U',($today - $date)) / 86400;
    if( $days > $elapsed ){
        echo 'New';
    }
}

そして、表示させたいところに次のコードを追加します。

<?php add_new(get_the_time('U'),); ?>

このコードの○を3にすれば、記事を公開してから3日間「New」アイコンが表示されます。

この場合も、echo で吐き出されるところを修正することで、「New」アイコンを装飾したり、画像にしたりすることができます。もちろん、get_the_time を get_the_modified_date にすれば、記事を更新してから○日間に変更することができます。

時間に関係なく、最新の記事○件に「New」アイコンをつける方法

頻繁に更新しないのであれば、こっちの方が需要があるのかもしれませんね。記事を公開(更新)してから○日間とか○時間とか、時間を基準にして「New」アイコンをつけるのでなく、単純に新しい記事○件に「New」アイコンをつけるには、次のコードを追加してください。

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

このコードを表示したいところに追加すればOKです。

single.php のタイトルの後ろにいれてもいいですし、 archive.php のタイトル横でも使えます。ただ、全部のカテゴリの記事の最新○件に「New」アイコンをつけるというコードなので、カテゴリによっては、archive.php に追加しても、1つも「New」アイコンがつかないこともあります。

参考サイト
WordPressでNew!を表示するパターン別4つの方法 | WordPress(ワードプレス)コミュニティ

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

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

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup