Webシステム開発 雑記帳 /

新着記事に一定期間NEWアイコンを表示する方法[WP小ネタ]

アーカイブページなどの記事一覧リストで、一定期間だけ新着記事に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アイコンが表示されるようになります。

この記事を書いた人

PAGE TOP