サイトマップページを実装するチュートリアル

CSSファイルを作成 アセットを追加 「新しいassetを追加する」より「page-sitemap.css」を作成します。このファイル名は何でも構いません。 CSSを追加 以下のCSSをコピペし保存してください。 .sitemap-section { margin-bottom: 5rem; } .sitemap-section .sitemap-block { margin-bottom: 3rem; } .sitemap-section .sitemap-title { border-bottom: 2px solid #000; } .sitemap-section .link-list { list-style: none; padding: 0 0 0 1rem; margin: 0 0 .5rem; } .sitemap-section .link-list li::before { content: ""; display: inline-block; margin-left: -1rem; border: 5px solid transparent; border-left-color: #000; } .sitemap-section .link-list a { color: #000; text-decoration: none; } .sitemap-section .link-list a:hover { text-decoration: underline; } @media (min-width: 750px) { .sitemap-section .link-list { column-count: 2; column-gap: 2rem; } } このCSSはサムネイル通りのシンプルな四角形のデザインで、Dawn用のものになります。 ご利用のテーマデザインに合わせて編集してください。 セクションファイルを作成 セクションを追加 コード編集画面に移動して「新しいsectionを追加する」より「page-sitemap.liquid」を作成します。 名称は何でも構いませんが、管理しやすいものがおすすめです。 ソースをコピペ 以下のソースをコピペして下さい。 {{ 'page-sitemap.css' | asset_url | stylesheet_tag }} {%- for block in section.blocks -%} {%- assign ng_list = block.settings.ng_list -%} {{ block.settings.title }} {%- case block.type -%} {%- when 'collections' -%} {%- for collection in collections -%} {%- unless ng_list contains collection.handle -%} {{ collection.title | link_to: collection.url }} {%- endunless -%} {%- endfor -%} {%- when 'products' -%} {%- for product in collections.all.products -%} {%- unless ng_list contains product.handle -%} {{ product.title | link_to: product.url }} {%- endunless -%} {%- endfor -%} {%- when 'pages' -%} {%- for page in pages %} {%- unless ng_list contains page.handle -%} {{ page.title | link_to: page.url }} {%- endunless -%} {%- endfor -%} {%- when 'articles' -%} {%- for article in blogs[block.settings.blog].articles -%} {{ article.title | link_to: article.url }} {%- endfor -%} {%- when 'policys' -%} {%- for policy in shop.policies -%} {{ policy.title | link_to: policy.url }} {%- endfor -%} {%- when 'links' -%} {%- for link in linklists[block.settings.link_list].links -%} {{ link.title }} {%- endfor- %} {%- endcase -%} {%- endfor -%} {% schema %} { "name": "サイトマップ", "class": "sitemap-section", "settings": [], "blocks": [ { "type": "collections", "name": "コレクション", "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "Collections" }, { "type": "textarea", "id": "ng_list", "label": "除外リスト", "info": "ハンドルを入力。複数ある場合は改行。" } ] }, { "type": "products", "name": "商品", "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "Products" }, { "type": "textarea", "id": "ng_list", "label": "除外リスト", "info": "ハンドルを入力。複数ある場合は改行。" } ] }, { "type": "pages", "name": "ページ", "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "Pages" }, { "type": "textarea", "id": "ng_list", "label": "除外リスト", "info": "ハンドルを入力。複数ある場合は改行。" } ] }, { "type": "articles", "name": "ブログ記事", "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "Articles" }, { "type": "blog", "id": "blog", "label": "ブログを選択" } ] }, { "type": "policys", "name": "法的ページ", "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "Policys" }, ] }, { "type": "links", "name": "メニュー", "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "Menu" }, { "type": "link_list", "id": "link_list", "label": "メニュー", "info": "メニュー機能を使って独自のリンクリストを作成。" } ] } ], "presets": [ { "name": "サイトマップ", "blocks": [ { "type": "collections" }, { "type": "products" }, { "type": "pages" }, { "type": "articles" }, { "type": "policys" } ] } ] } {% endschema %} 順番に説明していきます。 1行目では、1で作成したCSSファイルを読み込んでいます。別のCSSファイルを使う場合は必要ありません。 3〜52行目はHTML部分です。 各項目ごとにブロックを読み込む仕様となっており、上から「コレクション」「商品」「ページ」「ブログ記事」「法的ページ」「メニュー」となっています。 HTML構造はシンプルにしてありますので、管理しやすいように編集して下さい。 54行目〜はセクション設定です。 「コレクション」「商品」「ページ」は「タイトル」と「除外リスト」が入力でき、「除外リスト」にハンドルを入れると、そのページが出力されない設計となっております。 「ブログ記事」は「タイトル」と「ブログ選択」があり、選択したブログの記事一覧が出力されます。 「法的ページ」は「タイトル」のみ設定できます。 「メニュー」は「タイトル」と「メニュー選択」があり、Shopifyのメニュー機能で作成したリンク一覧が出力されます。自動出力されないページはこちらをご利用ください。 上記のコードをペーストしたらファイルを保存します。 出力リンク数が多い場合 Shopifyの仕様上、forループ内の出力が50件に制限されているため、50件を超える場合は以下の様に各{% for %}を{% paginate %}で囲み、制限を解除する必要があります。 {%- when 'products' -%} {%- paginate collections.all.products by shop.products_count -%} {%- for product in collections.all.products -%} {%- unless ng_list contains product.handle -%} {{ product.title | link_to: product.url }} {%- endunless -%} {%- endfor -%} {%- endpaginate -%} 2行目の「shop.products_count」はショップ内の商品点数を出力するコードです。従来通り数値に置き換えても構いませんし、ページネーションを出力するのもありかもしれません。 paginate ページテンプレートを追加 JSONテンプレートを作成 「新しいtemplateを追加する」より「page.sitemap.json」を作成します。 基本的には「page.json」の内容をコピペして、2で作成したセクションファイルを読み込むように編集するだけの作業です。 Dawnの場合は、以下が見本ソースとなります。 { "name": "Sitemap", "sections": { "main": { "type": "main-page", "settings": { } }, "sitemap": { "type": "page-sitemap", "settings": { } } }, "order": [ "main", "sitemap" ] } これを保存すれば、テーマ編集は完了です。 ページを作成 サイトマップページを作成 「オンラインストア→ページ」の「ページを追加」ボタンより、新規ページを作成しタイトルをつけて下さい。 次にテーマテンプレートのドロップダウンで「sitemap」を選択します。本来はテンプレートの「name」が反映されるのだと思いますが、現時点ではファイル名から出力されているようです。 必要に応じて本文を入力、ハンドルを設定し「公開」にして「保存」してください。 セクション設定を編集 サイトマップページを設定 「オンラインストア→テーマ」の「カスタマイズ」ボタンより、テーマの設定画面に移動します。 上部のプルダウンを操作して、先程作成したサイトマップページを表示させます。 セクション設定の「サイトマップ」を選択し、「ブロックを追加」で必要なブロックを追加していきます。 必要に応じて、タイトルの編集や除外リストの設定を行って下さい。 設定が一通り完了したら保存して、サイトマップページの実装完了です。 実装サンプル 実際のサイトマップページ見本はこちら。 ※CSSは若干編集しております。

カートにアイテムが追加されました

サイトマップページを実装するチュートリアル

メンテナンス不要のHTMLサイトマップページを実装

2024年10月

2024年11月