PR

Cocoonの記事カードにNEWマークをつけるカスタマイズ

Cocoonの記事カードにNEWマークをつけるカスタマイズについてです。

下記を子テーマのfunctionsに追記すればOKです。

// エントリーカードにNEWマークを追加
add_action('entry_card_snippet_after', 'add_new_mark_to_entry_card');
function add_new_mark_to_entry_card() {
  // 新着とみなす期間(日)
  $days = 3;
  // 投稿日
  $entry_date = get_the_time('U');
  // 現在時刻
  $current_time = date_i18n('U');
  // 経過秒数を計算
  $elapsed_seconds = $current_time - $entry_date;
  // 指定日数以内であればマークを出力
  if ($elapsed_seconds < 60 * 60 * 24 * $days) {
    echo '<span class="custom-new-mark">NEW</span>';
  }
}

entry_card_snippet_afterというフックを利用しただけですが、entry_card_snippet_afterを利用すればいろんな情報を追加できそうですね。

CSSは一般的なものですが、これです。

/* NEWマークのスタイル */
.custom-new-mark {
  display: inline-block;
  background-color: #ff5252; /* 背景色(赤系) */
  color: #fff;               /* 文字色 */
  font-size: 10px;           /* サイズ */
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;        /* 角丸 */
  margin-left: 5px;
  vertical-align: middle;
}

よろしくお願いします。