liquid

新着記事にNEWタグをつける

July 16, 2023公開

新着記事にのみ「」などのタグをつける方法についての解説です！

ちなみにショピクラでも実装していますのでみていただけると嬉しいです

ショピクラでの実装例新着タグの表示

NEWタグを表示するコード

Dawn（10.0.0）だとsnippetsフォルダのarticle-card.liquidに記述します。

{% comment %}NEWラベル用{% endcomment %}
{%- assign published_date = article.published_at | date: '%s' -%}
{%- assign current_date = 'today' | date: '%s' -%}
{%- assign passed_days_from_publish = current_date | minus: published_date | divided_by: 86400 -%}

{%- if passed_days_from_publish <= 7 -%}
    <span class="c_new_label">NEW</span>
{%- endif -%}

<!-- cssファイルに記述するコード↓↓ -->
<style>
/* 新着 */
.c_new_label {
    position: absolute;
    display: inline-block;
    line-height: 1.7;
    right: 5px;
    top: 5px;
    padding: 2px 16px;
    border-radius: 24px;
    background: #FA514B;
    color: #fff;
}
</style>

コードの解説

公開されたタイムスタンプを取得（article.published_at）

{%- assign published_date = article.published_at | date: '%s' -%}

published_date変数に article.published_at で記事の公開日（タイムスタンプ）を格納していますタイムスタンプとは、1970年1月1日0時0分0秒からの経過時間を秒数で表したものです。

dateフィルター（）で秒数をを取得しています。
（%sは 1970-01-01 00:00:00 UTC からの経過秒です）

dateフィルターはタイムスタンプを別の日付形式に変換できるので例えば下記のような使い方ができます↓↓

{{ article.published_at | date: '%Y.%-m.%d' }}
→ 2023.7.10

{{ article.published_at | date: '%Y.%m.%d' }}
→ 2023.07.10

%Yとか%mとかはRubyの記法になるのでRubyのドキュメントまたはで検索してみるといろんな表示が見れるのでぜひ、覗いてみてください！

現在のタイムスタンプを取得

{%- assign current_date = 'today' | date: '%s' -%}

current_date変数に現在の経過秒（1970-01-01 00:00:00 UTCからの）を格納しています。

"today”または "now"をdateフィルターにかけると現在時刻を取得できます！

何日前に公開されたか計算する

{%- assign passed_days_from_publish = current_date | minus: published_date | divided_by: 86400 -%}

コードだけだと分かりにくいと思うので実際に数値を入れて解説します

現在のタイムスタンプ（current_date） → 1688828400
公開日のタイムスタンプ（published_date） → 1688655600
24時間の秒数 → 86400

（1688828400 - 1688655600）/ 86400 = 2

この場合は２日前に公開されたことになります！

条件分岐で７日以内の記事にNEWを表示する

{%- if passed_days_from_publish &lt;= 7 -%}
<span class="c_new_label">NEW</span>
{%- endif -%}

if文を使って７日以内の記事のみNEWを表示させます
7の部分を変えればお好きな日数に変更可能です！

Dawn(10.0.0)だとどこに記述すればいい？

snippetsフォルダのarticle-card.liquidに記述します

①下記コードをファイルの上部に記述します

{% comment %}NEWラベル用{% endcomment %}
{%- assign published_date = article.published_at | date: '%s' -%}
{%- assign current_date = 'today' | date: '%s' -%}
{%- assign passed_days_from_publish = current_date | minus: published_date | divided_by: 86400 -%}

②79行目あたりに下記コードを記述（実際にNEWタグを表示するコード）

cssについては直接または別ファイルにて読み込ませてください。
直接だとループ分（表示する記事の数）cssを読み込んでしまうので別ファイルがおすすめです


{%- if passed_days_from_publish &lt;= 7 -%}
<span class="c_new_label">NEW</span>
{%- endif -%}

article-card.liquid

まとめ

記述するコードもそれほど多くなく簡単に設置でき他のではないでしょうか？
dateフィルターはよく使うのでぜひこの機会に覚えていただければ！！

あと、新着タグは商品一覧でも同じように表示できるので挑戦してみてくださーい！

Back to blog

ショピクラ