Wordpress Tips

2016.08.19

記事にNEWアイコンを表示させる方法

カテゴリー:


WordPressの投稿日時の新しい記事にNEWアイコンを表示させることがあると思います。
今回はカスタムフィールドを使用し日数を設定する方法をご紹介します。
とっても簡単です!

①NEWアイコンを表示させる為の記述を理解する。

まずはテンプレート側の記述をみていきましょう。
下記はテンプレート側で数字を設定する記述です。

<br />
<?php
$days  = 2; // ← NEWを表示させる期間の日数を入力
$today = date_i18n('U'); //日本時間を取得する関数
$entry = get_the_time('U'); //記事の投稿日時を取得する関数
$total = date('U',($today - $entry)) / 86400 ; //86400とは0秒 × 60分 × 24時間 = 86400秒 = 1日
?><br />
<?php if ($days > $total): ?> //$totalの値が$daysより小さい値の場合にはNEWを表示<br />
NEW<br />
<?php endif; ?><br />

②カスタムフィールドを用意

テンプレート側の記述を理解したら、下記画像のように日数を入力できるカスタムフィールドを作成します。
今回はAdvanced Custom Fieldsオプションページ機能を使用します。

new_ico

★Advanced Custom Fieldsについては下記の記事をご覧ください。
Advanced Custom Fieldsの取得・出力方法まとめ
Advanced Custom Fields オプションページの使い方

③NEWを表示させる期間を設定し出力させる

入力したフィールドの値を取得してテンプレート側に記述します。
①でのNEWを表示させる期間の日数を入力する部分をカスタムフィールドの値を取得する記述に書き換えます。
$daysという変数に今回設定した「new_icon」というフィールドの値を代入します。
$daysにNEWを表示させたい期間の数字が入ります。

<br />
<?php
$days  = get_field('new_icon','option'); //← NEWを表示させる期間の日数を入力したフィールド
$today = date_i18n('U');
$entry = get_the_time('U');
$total = date('U',($today - $entry)) / 86400 ;
?><br />
<?php if ($days > $total): ?><br />
new<br />
<?php endif; ?><br />

これで、表示させる期間をカスタムフィールドで入力した数字に設定できます。
以上、記事にNEWアイコンを表示させる方法でした!

Advanced Custom Fieldsを使用して制作したサイト

ジオクリエート株式会社様

新規Webサイト開設のご依頼を承り、更新の利便さや作業時間の軽減を目指しWordPressを導入いたしました。

 

株式会社キュレーションジャパン様  PREMIUM JAPAN(プレミアムジャパン)

「日本のプレミアムを世界へ、日本へ。そして未来へ。」
Webサイトのキャッチコピー通り、日本の技術や文化、食などのプレミアムな情報を発信するメディアサイトです。

制作に携わらさせていただきましたが、面白く、参考になる情報など満載で、
私...

主婦と生活社様 暮らしとおしゃれの編集室

主婦と生活社様の「ナチュリラ」「大人になったら着たい服」「暮らしのおへそ」のWebサイトになります。
「ナチュリラ」「大人になったら着たい服」「暮らしのおへそ」の雑誌と同様にデザインはシンプルにしております。
ぜひ、ご覧ください!!

ご相談・ご依頼に関して、まずは

ください。お気軽にどうぞ