ワードプレスの最新記事タイトルにNEWアイコンを付ける

シスアナコム社長の杉山です。

前回のひとことで、functions.phpに２つの日付型の経過日数を計算する関数を作りました。

これを活用して、比較的新しい記事のタイトルに、新しいことを示すアイコンを表示させようと思います。

修正すべきファイルについて

弊社のウェブサイトで採用しているテーマ「STINGER3」で修正すべきファイルは３つ。

トップ画面を表示する「home.php」と個別の記事を表示する「single.php」はこれまで通り修正を加えます。

今回はこれに加えて、アーカイブ一覧の画面やカテゴリ一覧の画面を表示する「archive.php」も修正します。

「archive.php」は、まだ親テーマから子テーマにコピーしてないはずなので、他のファイルと同様にコピーします。

これで、ワードプレスの管理画面から外観→テーマ編集で、「archive.php」も修正できるようになります。

追加するコード

追加すべきコードは、こんな感じで３行。

<?php if ( ddiff(date_i18n('U') , get_the_time('U')) < 7): ?>
<img src="newアイコンへのパス/newアイコンファイル名" style="position:absolute;" />
<?php endif; ?>

事前に表示させたい「newアイコン」ファイルを、ワードプレスの管理メニューからメディア→新規追加で登録しておきます。

「newアイコンへのパス/newアイコンファイル名」は、アップロードした「newアイコン」の「ファイルのURL」欄に表示されているものを、そのまま記述すればＯＫ。

例えば、こんな感じ。「http://sysana.com/wp-content/uploads/2014/04/new.gif」

このアニメーションgifアイコンは、「WEBデザイナーが作った超シンプル素材集」から拝借しました。（リンク集に追加しました。）

１行目で、前回のひとことで作成した関数を使っています。

「date_i18n(‘U’)」で、１９７０年１月１日からの現時点までの経過秒数を取得できます。

「get_the_time(‘U’)」で、１９７０年１月１日から投稿日時までの経過秒数を取得できます。

この２つの値を変数として、前回のひとことで作った「ddiff」という関数を呼び出しています。

また、１行目は「現在の日付と文書の作成日付を比較して７日以内だったら」という条件分岐です。

「< 7」という部分を修正すれば、○日以内という条件を好きなように変更できます。

サイトの修正頻度に応じて調整して下さい。

各ファイルへの挿入箇所

この３行を挿入する場所は、タイトルを表示している部分。

具体的にはこの行の直後になります。

<?php the_title(); ?>

「home.php」、「single.php」、「archive.php」それぞれにタイトルを表示している部分がありますので、その直後に例の３行を挿入して下さい。

これで、newアイコンが表示されます。

過去の文章に対する表示

応用として、ある程度の日数が経過した古い文章に対して注意書きを表示することもできるはず。

例えば、１年以上経過した文章を表示する際に、「古い文章なので、現状と異なる場合があるかも」のような注意書きを本文の前に表示するといった事です。

これは次回のひとことで。