2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(WordPress)の記事

WordPress で 7日以内に投稿した記事に「NEW」アイコンをつけてみた



最近の投稿に New アイコンが自動で表示されるようにしてみました。指定した範囲内の日付の記事であれば自動的に New アイコンがつき、指定した日数が経過したら自動的に New アイコンは表示されなくなります。

今回は、WordPress Noteさんの「新着記事にNewマークを表示させる」という記事を参考にさせてもらいました。というか、ほとんどそのままです。Thanx!

ただ元記事では、 WordPress 本体のファイルを修正しているようですが、なるべくなら本体のファイルは修正しない方がよいので、functions.php に the_date や the_time のフィルターフックを利用して実装しています。

関連エントリ:functions.php に記述して 勝手に<p>タグを入れないようにしてみた

また、WordPress 本体を修正すると、New アイコンを表示させたい部分全てを修正する必要があります。エントリーのヘッダ部分だったり、サイドバーのウィジェットだったり。。

って、ことでフィルターフックを利用すれば、the_date() や the_time() で日付を表示している全ての部分に New アイコンが表示/非表示されます。

<追記>

一応、フィルターフックを使って、任意の場所に New アイコンを表示されるバージョンも作ってみましたので、よろしかったらご覧くださいませ。

関連記事:続:WordPress で 7日以内に投稿した記事に「NEW」アイコンをつけてみた

New アイコン表示/非表示の実装

New アイコンをつけるためには、functions.php に以下のソースを追加するだけ。

function add_new_icon( $val ) {
  $days  = 7;
  $today  = date('U');
  $entry  = get_the_time('U');
  $diff  = date('U',( $today - $entry ) ) / 86400;

  if( $days > $diff ) {
    $icon_tag = 'New';
  }
    return $val.$icon_tag;
}

add_filter('the_date', 'add_new_icon');
add_filter('the_time', 'add_new_icon');

これで、日付の後ろに New アイコンがつきます。New アイコンの画像ファイルのパスは適時修正しちゃってください。また、このままだと直近7日以内に投稿された記事に New アイコンが付きますが、

$days = 7;

を、3 にすれば 3日以内に、10 にすれば 10日以内の記事に New アイコンが付きます。(指定日数が過ぎれば自動的に表示されなくなります。)

一応、日付を、the_date() で表示しても、the_time() で表示しても New アイコンがつくように、the_date と the_time 両方のフィルターを追加してます。

add_filter('the_date', 'add_new_icon');
add_filter('the_time', 'add_new_icon');

関連エントリ:WordPress の the_date() で同日の記事の日付が表示されないのは WordPress の仕様

ちなみに、最後の行の下に、

add_filter('the_title', 'add_new_icon');

を付けると、記事タイトル( the_title() の出力 )の後ろに、New アイコンをつけることができますよ。

じゃんじゃん New アイコンつけちゃってください。

でわでわ。





「WordPress で 7日以内に投稿した記事に「NEW」アイコンをつけてみた」に頂いたコメント

  1. spybee より:

    是非実装させていただきたいんですが、「New アイコンをつけるためには、functions.php に以下のソースを追加するだけ。」とありますが、具体的にはどこからどこの位置に貼り付けたら良いのでしょうか?

    • (ひ) より:

      spybee さん、こんにちわ。

      特にどこでも良いんですけど、すでに functions.php にある関数の中とかじゃもちろんダメです。そのあたりが良くわからなければ、functions.php の一番最後の「?>」の直前に追加しておけば大丈夫です。

      ただ、functions.php が壊れちゃうと WordPress 自体が動かなくなっちゃうので、くれぐれも修正前の functions.php のバックアップをとってからチャレンジしてみてくださいね。

  2. sky_y より:

    上記コードをVimに貼り付けると、
    「”」と「’」と「-」がUTF-8の変なコードになってしまう上に
    スペースが全角になってしまうので、
    iso-2022-jpで保存するとエラーになりました。
    修正すると動きましたが、一応報告まで。

    • (ひ) より:

      sky_y さん、こんにちわ。

      ほんとですね。CotEditor にそのままコピペすると、
      Vim と現象はちょっと違うけど、「’」や「”」がおかしいですね。
      なんでだろ?

  3. […] こちらの記事を参考に http://dev.ontheroad.jp/archives/3493 functions.phpの記述を変えてみたのですが、 エラーとなり管理画面に入れなくなってしまいました。 ※修正し、今は入れますが。 […]

この記事にコメントする





Copyright © 2012 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.