コンテンツ系オブジェクト:page / blog / article / linklists
固定ページ・ブログ・メニューのデータを使い、コンテンツ表示とナビゲーションを実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か: この回では、固定ページ・ブログ・メニューのデータを使って、コンテンツの表示とナビゲーションを書けるようになります。
受託では「最新記事をトップに出したい」「フッターにメニューを2段で出したい」という依頼を、この3つのオブジェクトで作ります。
page・blog・articleとは
pageは固定ページ1枚で、title / content(HTML)/ handle / url / published_at / template_suffix / metafieldsを持ちます。blogはブログ1つで、blog.articles(paginateの対象)とblog.all_tagsがあります。articleは記事1本で、title / content / excerpt / excerpt_or_content / author / published_at / image / tags / urlを持ちます。
任意のページやブログは、pages['about']やblogs['journal']で参照できます。
linklistsとは、管理画面のメニューの一覧
linklists['main-menu'].linksを回して、メニューを描きます。
キーは、管理画面で作ったメニューのハンドルです。
各linkにはtitle / url / active / child_active / current / links(子)があり、3階層まで持てます。
運用者が管理画面でメニューを編集すれば、テーマを変えずに反映されます。
現在地はどう強調するか
link.currentは現在のページそのもの、link.activeは現在のページかその配下、child_activeは子に現在地があるときに真になります。
親メニューも含めて強調したいならactive、そのページだけならcurrentを使います。
空のサブリストを出さないには
子メニューが無い項目で<ul></ul>を出すと、CSSの余白が崩れます。link.links.size > 0で囲んで、子があるときだけ出します。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。