投稿日から一定期間「NEW」を表示する方法

Cocoonカスタマイズ集
この記事は約2分で読めます。
記事内に広告が含まれています。

記事に記載したコードは、スキンに追加されています。

はじめに

Cocoonには、投稿日から一定期間「NEW」を表示する機能が備わっていません。

そこで、投稿日から一定期間、タイトルの前に「NEW」を自動表示させるようにします。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

  • ラベル
    PHPを追加

    以下のコードをfunctions.phpに追加します。
    このコードは投稿後3日間、CSSクラスmy-new-postを追加します。

    add_filter('post_class', function ($classes, $class, $post_id) {
      // NEWマークを表示する日数(例: 3日以内)
      $days = 3;
    
      // 現在のタイムスタンプを取得
      $now = current_time('U');
    
      // 投稿の作成日時のタイムスタンプを取得
      $post_time = get_post_time('U', false, $post_id);
    
      // 期限内の投稿に独自のCSSクラスを追加
      if (($now - $post_time) < ($days * DAY_IN_SECONDS)) {
        $classes[] = 'post--new';
      }
    
      return $classes;
    }, 10, 3);
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。
    このコードは一例ですので、好みに応じてデザインを調整してください。

    .post--new {
      .card-title,      /* エントリーカードのタイトル */
      .entry-title {    /* 投稿のタイトル */
        &::before {
          background-color: #ff0000;
          color: #fff;
          content: 'NEW';
          font-size: 8px;
          font-weight: normal;
          margin-right: 5px;
          padding: 0 3px;
          vertical-align: middle;
        }
      }
    }

さいごに

今回紹介した方法を使えば、Cocoonで投稿日から一定期間、タイトルの前に「NEW」を表示することができます。
これにより、新しい投稿を目立たせることができ、読者にとっても便利な機能となります。

タイトルとURLをコピーしました