[Shopify]Liquidで日付出力する際のフォーマット まとめ一覧

[Shopify]Liquidで日付出力する際のフォーマット まとめ一覧

 

 

 

今回ご紹介するのは、Shopifyストア上のLiquidで日付出力する際のフォーマット一覧まとめです。

主に使用する記事の公開日時などで日付の出力をすることができるのですが、その際に"2021-09-01"と出力するのか"2021年09年01日"と出力するのか、そのLiquidのフォーマットと出力方法について紹介してみます。

Shopifyストアで日付を出力する際は、どこでも使えるのでぜひ参考にしていただければ嬉しいです!

 

Shopifyで日付出力をするフォーマット基本

まず最初に日付を出力する基本的な方法について紹介していきます。例えば、ブログ記事の公開日を表示するには下記のようにLiquidで記載します。

{% article.published_date | date: "%Y-%m-%d" %}

すると

%Y = 年(4桁数字)
%m = 月(2桁数字)
%d = 日(2桁数字)

なので"2021-09-01"のような形式で出力されます。

ちなみに現在の時間を出力する時は

{% "now" | date: "%Y-%m-%d" %}

のようにLiquidを書いてあげると本日の日付が出力されます。

 

Liquidで使える日付フォーマット一覧(日付)

基本的な日付の出力がわかったところで、早速Liquidで使用できるフォーマット一覧をまとめてみます。

 

曜日(Weekday)

%a 英語の曜日(Mon~Sun形式) 
%A 英語の曜日(Monday~Sunday形式)
%w 数字の曜日(0~6)0は日曜日

 

日にち(Day)

%d 数字の日にち(01~31形式) 
%e 数字の日にち(1~31形式)先頭の0はなし
%j 年間を通して何日目か(001~366)

 

月(Month)

%b 英語の月(Jan~Dec形式) 
%B 英語の月(January~December形式)
%m 数字の月(01~12 形式)
%e 数字の月(1~12形式)先頭の0はなし

 

年(Year)

%Y 数字の年(2021など4桁) 
%y 数字の年(21など2桁)

 

 

 

Liquidで使える日付フォーマット一覧(時間)

次にたまに使うかも知れない時間のフォーマットについても追記しておきます。

 

時(Hour)

%H 24時間での表記(00~23) 
%I 12時間での表記(00~12)英語の大文字Iアイ
%l 12時間での表記(1~12)英語の小文字lエル ゼロなし

 

分(Minute)

%M 分(00~59) 

 

秒(Second)

%S 秒(00~60)
%s 秒(無限?)日付等全て秒に換算して直す。
日付の比較に便利。

 

[Shopify] Liquidで日付を取得して比較する方法

 

その他

%P 午前か午後("am"か"pm")
%p 午前か午後("AM"か"PM")
%Z 該当のタイムゾーン(UTCなど)

 

 

おまけ Liquidで曜日を日本語に変換する方法

おまけで英語の日付を日本の曜日に直す方法についてもLiquidでちゃちゃっとやっちゃいましょう。

こんな感じになります。

{% assign japaneseDate = article.published_date | date: %Y-%m-%d(%a)%}
{% assign japaneseDate = japaneseDate | replace: "Sun", "日" | replace: "Mon", "月" | replace: "Tue", "火" | replace: "Wed", "水" | replace: "Thu", "木" | replace: "Fri", "金" | replace: "Sat", "土" %}

とした上で

{{japaneseDate}}

と出力すると()かっこ内の中身が"日,月,火,水,木,金,土"のどれかになっているはずです。

 

[Shopify]Liquidで日付出力する際のフォーマット一覧 まとめ

以上、Shopifyストア上でLiquidを使用して日付フォーマットを操作する方法でした。

2つの日付を比較する方法も他記事にて書いてありますので、もしよろしければそちらもご参照ください。

[Shopify] Liquidで日付を取得して比較する方法

 

Liquidの日付フォーマットってまとまっている場所がなかったので、これを機にまとめてみました。参考になれば嬉しいです。

それでは本日も最後までお読みいただき、ありがとうございました!本日も良い一日を!

 

Contact form

新規ストア構築、開発などのお仕事の依頼・無料相談はこちら