Pocket

アーカイブページなどの記事一覧リストで、一定期間だけ新着記事にNEWアイコンをつけたい!というケースは多いのではないでしょうか?
NEWアイコンを付ける方法はJavaScriptやPHPなどいくつかの方法がありますが、PHPを使ってWordPressの記事一覧リストにNEWアイコンを付ける方法をご紹介したいと思います。

WordPressの記事一覧リストでNEWアイコンを付ける場合、以下のコードをアーカイブテンプレートに埋め込むことで一定期間NEWアイコンを表示させることができます。

NEWアイコンを表示させておきたい期間は、2行目の数字を変えることで調整ができます。
3と数字を変えれば、記事を投稿した日付から3日間NEWアイコンが表示されることになります。
上のサンプルコードでは、記事を投稿した日付から7日間NEWアイコンが表示されるように設定がされています。

上記コードだけでは、アーカイブテンプレートのどの箇所に埋め込んだらいいかわかりにくいと思いますので、
アーカイブテンプレート( archive.php )を参考にしながら、コードを埋め込む箇所の確認をしてみたいと思います。

下のコードはWordPress 3.8.1のデフォルトテーマになっているTwentyFourteenで使われているarchive.phpの一部です。

NEWアイコンの説明から少し外れますが、
上のコードの8行目から13行目で行われている処理について少しご説明をしておくと、この箇所はWordPressのループ構文と言われていて投稿した記事を1件ずつ表示させる際によく使われています。

ループ構文の中にある11行目では、別のテンプレートの読み込みが行われていており、テーマフォルダ内のcontent.phpが記事を形成しているファイルになります。

content.phpが投稿記事の本体となっておりますので、NEWアイコンを表示させるには、このファイルの中に冒頭でご紹介したNEWアイコン表示用のコードを埋め込むことになります。

下のコードは、content.phpにNEWアイコン表示用のコードを追記した例です。
記事のタイトルの前にNEWアイコンを付ける場合は、下のように、タイトルエリアの前にNEWアイコン表示用のコードを挿入します。

これで、1記事ずつ現在の時間と投稿日時を比較し、もし投稿日時がNEWアイコン表示用コードで設定をした期間内であれば、記事の先頭に自動でNEWアイコンが表示されるようになります。

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。