ブログ関係なく特定タグを持つ全記事の一覧を作る、その全記事をJavaScriptを使って時系列ソートする方法について紹介しました。ぜひ活用してみてください。
Shopifyは、ECサイト制作・運営者にとって強力なプラットフォームです。特にその魅力のひとつが「充実したブログ機能」です。
ブログを活用することで、販売商品の詳細を伝えたり、購入を迷っている人にインサイトを提供して購入を後押ししたり、ファンを増やしてブランドの信頼度を高めたり、Web上での存在感を強化することが期待できます。
しかし、商品の販売機能に比べると、ブログ機能のカスタマイズに関するアップデートは少なく、情報も限られている印象があります。
実際にカスタマイズを試みても、参考になる資料が少なく、思い通りのデザインや機能を実装するのに苦労することも少なくありません。
そのため、より自由度の高いブログ運営を目指すなら、Liquidやテーマのカスタマイズに関する知識が求められるでしょう。
この記事では、
・ブログ関係なく特定タグを持つ全記事の一覧を作る
・その全記事をJavaScriptを使って時系列ソートする
方法について紹介したいと思います。
ブログ関係なく特定タグを持つ全記事の一覧
Shopifyでは、記事カテゴリーの機能をする「ブログ」があります。例えば「News」「New Items」などです。
各ブログの一覧は、デフォルト機能を使えば簡単にテーマエディターで設定ができます。
もし、オリジナル記事一覧を作りたい方は、以下の記事をチェックしてみてください。
Shopify 自作で「ブログ記事一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定
Shopify 自作で「ブログ記事一覧」を作る！HTMLとLiquidの書き方を解説
こちらの記事で紹介する一覧は、前提として特定の「ブログ」を指定する必要があります。
すべて「ブログ」を時系列で一覧を作る･･これが、今回のゴールになります。
すべての「ブログ」記事の一覧を作るLiquidコード
まず、すべての「ブログ」の一覧を作るLiquidコードを紹介します。
<ul>
{% assign blog_handles = "information,member-only" | split: "," %}
{% for blog_handle in blog_handles %}
{% for article in blogs[blog_handle].articles %}
<li>
<a href="{{ article.url }}">
{{ article.title }}
</a>
</li>
{% endfor %}
{% endfor %}
</ul>まず{% assign blog_handles = "information,member-only" | split: "," %}と、サイトのすべてのブログを「,」と区切って配列を作ります。
[information,member-only]
{% for blog_handle in blog_handles %}でループを回すと、
1回目: blog_handle = “information”
2回目: blog_handle = “member-only”
という順でそれぞれに属する記事が表示するため、”information”に属する記事がまず表示され、その後”member-only”が続きます。
すべての「ブログ」記事を時系列で
では、この一覧を時系列で並び替えする方法を紹介します。
残念ながら、Liquidでブログ記事を並び替えできる方法はない(2025年2月現在)ようです。
そのため、JavaScriptコードを使って並び替えを行います。
<ul id="news-list">
{% assign blog_handles = "infomation,member-only" | split: "," %}
{% for blog_handle in blog_handles %}
{% for article in blogs[blog_handle].articles %}
<li data-published="{{ article.published_at | date: "%s" }}">
<a href="{{ article.url }}">
{{ article.title }}
</a>
</li>
{% endfor %}
{% endfor %}
</ul><script>
document.addEventListener("DOMContentLoaded", function() {
const list = document.getElementById("news-list");
const items = Array.from(list.children);
items.sort((a, b) => {
return b.dataset.published - a.dataset.published; // 降順ソート（新しい順）
});
items.forEach(item => list.appendChild(item)); // ソート後のリストを再配置
});
</script>JavaScriptコードについてシンプルに説明しますと、
①各li要素(記事)に、記事公開時間を「秒」にしたデータ({{ article.published_at | date: "%s" }})をdata-publishedで格納する
②data-published属性でソートする
③list.appendChild(item)で再配置(DOM操作)
という仕組みになります。
特定タグを持つ記事一覧
以下は、特定のタグを持ち、ブログを問わず一覧を作成するサンプルコードです。（時系列ソートのJsは省略）
タグごとにブログをまたいだ記事一覧を作成する際のヒントになると思います。
<ul id="news-list">
{% assign blog_handles = "information,member-only" | split: "," %}
{% for blog_handle in blog_handles %}
{% for article in blogs[blog_handle].articles %}
{% for tag in article.tags %} //タグをループ
{% if tag == "EVENT" %} //タグ名で条件分岐
<li data-published="{{ article.published_at | date: "%s" }}">
<a href="{{ article.url }}">
{{ article.title }}
</a>
</li>
{% endif %}
{% endfor %}
{% endfor %}
{% endfor %}
</ul>以上、ブログ関係なく特定タグを持つ全記事の一覧を作る、その全記事をJavaScriptを使って時系列ソートする方法について紹介しました。ぜひ活用してみてください。
