← inaro.devShopify学習ツール
08-07

コンテンツ系オブジェクト:page / blog / article / linklists

固定ページ・ブログ・メニューのデータを使い、コンテンツ表示とナビゲーションを実装できる

最終確認: 2026-09

解説

受託の現場でなぜ必要か: この回では、固定ページ・ブログ・メニューのデータを使って、コンテンツの表示とナビゲーションを書けるようになります。
受託では「最新記事をトップに出したい」「フッターにメニューを2段で出したい」という依頼を、この3つのオブジェクトで作ります。

pageblogarticleとは

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で囲んで、子があるときだけ出します。

ステップ1 / 2

ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。