【Shopify】日付の表示形式（フォーマット）を変更する方法

Shopifyのテーマは全世界向け（英語）で開発されている

Shopifyのテーマは全世界向けに開発されているため、基本の表示言語は英語です。そのため、ブログ記事の日付の表示形式が海外仕様（日付から始まるなど）になっていることがあります。

その場合、このブログのように、日本語に合わせた表示（2021年5月25日 など）にするには、日付の出力形式を変更する必要があります。

Shopifyで日付のフォーマットを変更する方法

ブログの投稿日は以下のようなコードで出力しています。

{{ article.published_at | date: '%Y.%m.%d' }}
//2021.5.25 と出力

article.published_at というのがブログ記事の投稿日を出力するためのコードで、そこに対してdate:というフィルターをかけて出力の形式を指定しています。

よく使うものを一覧にしてみるとこんな感じです。

%Y	年4桁（2021）
%m	月を表す数字（01-12)
%d	0を含む日(01-31)
%A	曜日(Sunday, Monday … )
%a	省略した曜日(Sun, Mon … )
%B	月(January, February … )
%b	省略した月(Jan, Feb … )

基本は最初にあげた例のように「%Y」「%m」「%d」の3つを覚えておけばOKです！

2021年5月25日 と出力したい場合

{{ article.published_at | date: '%Y年%m月%d日' }}
//2021年5月25日 と出力

2021/5/25 と出力したい場合

{{ article.published_at | date: '%Y/%m/%d' }}
//2021年5月25日 と出力

このように「%Y」や「%m」の間に「月」や「日」という文字列、「.」や「/」などの区切りを追加してあげればOKです。

time_tagフィルターでtimeタグを自動生成

{{ article.published_at | time_tag: '%Y年%m月%d日' }}
//2021年5月25日 と出力

ちなみに「date」の代わりに「time_tag」というフィルターを使うと、timeタグのHTMLを自動生成してくれます。