ドキュメントCommerceコンテンツとデザイン

レイアウトの更新

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：
  • CMS

作成対象：

  • 初心者
  • 中級
  • 管理者
  • ユーザー

カスタムレイアウトの更新に取り組む前に、ストアのページの作成方法と、レイアウト および レイアウトの更新 という用語の違いを理解しておくことが重要です。 レイアウトとは、ページの視覚的かつ構造的な構成を指します。 レイアウトの更新とは、ページの作成方法を上書きまたはカスタマイズできる、特定の XML 命令のセットを指します。

Commerce ストアの XML レイアウトは、コンテナとブロックの階層構造です。 すべてのページに表示される要素もあれば、特定のページにのみ表示される要素もあります。 レイアウト、コンテナ、ブロックについて詳しくは、 フロントエンド開発者ガイドの レイアウトの概要 を参照してください。

ウィジェットツールを使用すると、既存の コンテンツブロックをページのデフォルトレイアウトに簡単に追加できます。 より高度な更新を行うには、XML レイアウトの更新コードをサーバーに保存し、そのファイルを管理者からカスタムレイアウトの更新として参照する必要があります。 プロセスの概要については、 レイアウト更新を使用を参照してください。

次の図では、コンテナを参照する名前は黒で、ブロックの種類（ブロック クラス パス）は青です。

標準ブロックレイアウト図

ブロックタイプ
説明
page/html
このブロックの名前は root で、レイアウト内の数少ないルートブロックの 1 つです。 独自のブロックを作成して root という名前を付けることもできます。これは、このタイプのブロックの標準的な名前です。 このタイプのブロックは、ページごとに 1 つだけ存在できます。
page/html_head
ブロック名は head で、ルート ブロックの子です。 このタイプのブロックは、ページごとに 1 つのみ存在できるので、削除しないでください。
page/html_notices
ブロック名は global_notices で、ルート ブロックの子です。 このブロックがレイアウトから削除されると、グローバル通知はページに表示されません。 このタイプのブロックは、ページごとに 1 つだけ存在できます。
page/html_header
ブロック名は header で、ルート ブロックの子です。 このブロックは、ページの上部にあるビジュアルヘッダーに対応し、いくつかの標準ブロックが含まれています。 このタイプのブロックは、ページごとに 1 つのみ存在できるので、削除しないでください。
page/html_wrapper
デフォルトのレイアウトに含まれていますが、このブロックは非推奨であり、後方互換性を確保するためにのみ含まれています。 このタイプのブロックは使用しないでください。
page/html_breadcrumbs
このブロックの名前は breadcrumbs であり、ヘッダーブロックの子です。 このブロックには、現在のページのパンくずリストが表示されます。 このタイプのブロックは、ページごとに 1 つだけ存在できます。
page/html_footer
ブロック名は footer で、ルート ブロックの子です。 フッターブロックは、ページの下部にある視覚的なフッターに対応し、いくつかの標準ブロックが含まれています。 このタイプのブロックは、ページごとに 1 つのみ存在できるので、削除しないでください。
page/template_links
標準レイアウトには、このタイプのブロックが 2 つあります。 top.links ブロックはヘッダーブロックの子で、上部のナビゲーションメニューに対応します。 footer_links ブロックは footer ブロックの子で、下部のナビゲーションメニューに対応します。

メモ： ​例に示すように、テンプレートリンクを操作できます。
page/switch
標準レイアウトには、このタイプのブロックが 2 つあります。 store_language ブロックはヘッダーブロックの子で、最上位の言語スイッチャーに対応します。 store_switcher ブロックは footer ブロックの子で、下部のストア切り替えボタンに対応します。
コア/メッセージ
標準レイアウトには、このタイプのブロックが 2 つあります。 global_messages ブロックには、グローバル メッセージが表示されます。 messages ブロックは、他のすべてのメッセージを表示するために使用します。 これらのブロックを削除すると、メッセージは表示されません。
core/text_list
このタイプのブロックは、Commerce 全体で子ブロックをレンダリングするためのプレースホルダーとして広く使用されています。
core/profiler
このタイプのブロックのインスタンスは、ページごとに 1 つだけです。 内部 Commerce プロファイラーに使用されるので、他の目的には使用しないでください。

レイアウトの更新を使用してブロックを配置する

レイアウトの更新ページのレイアウトをカスタマイズできるようにします。 レイアウトの更新は ウィジェットよりも柔軟性がありますが、サーバーへのアクセスと XML の基本知識が必要です。

次の手順は、レイアウトの更新を使用してページにブロックを配置する方法を示しています。 具体的な例と構文のヘルプについては、『 フロントエンド開発者ガイド _の一般的なレイアウトのカスタマイズタスク_ を参照してください。

手順 1：ブロックの作成

  1. 配置する ブロックを作成します。

  2. block_id は、レイアウトの更新手順で使用されるので、メモに注意してください。

手順 2:XML でレイアウトの更新を作成する

  1. レイアウト手順を XML で作成して、CMS ブロックを参照します。

  2. テーマの XML ファイルが保存されるレイアウトフォルダーのサーバーに レイアウトの手順を保存します。

    例：

    <theme_dir>/<Namespace>_<Module>/layout

    レイアウトハンドルは、cms_page_view_selectable_ で始まり、その後に CMS ページの URL キー、レイアウト更新オプション、xml ファイルサフィックスが続くファイル名です。 次の例では、customer-service はページの URL キーで、ChatTool はレイアウトの更新をページに適用するために選択するオプションです。

    cms_page_view_selectable_<customer-service>_<ChatTool>.xml

    table 0-row-2 1-row-2 2-row-2 layout-auto
    要素 説明
    CMS ページ識別子 スラッシュ（/）をアンダースコア（_）に置換したページの URL キー。
    レイアウト更新名 カスタムレイアウトの更新 のために表示されるオプション。

手順 3：ページからレイアウトの更新を参照する

  1. 管理者 サイドバーで、Content/Elements/Pages ​に移動します。

  2. ブロックを配置するページを見つけて、編集モードで開きます。

  3. 下にスクロールして、「Design」セクションの 展開セレクター を展開します。

  4. ページに関連付けられている使用可能なすべてのレイアウト更新を表示するには、「Custom Layout Update」メニューをクリックします。

    カスタムレイアウトの更新リスト {width="400" modal="regular"}

  5. ページに適用するレイアウトの更新を選択します。

手順 4：キャッシュを保存して更新する

  1. 完了したら、「Save & Close」をクリックします。

  2. ワークスペースの上部にあるメッセージで「Cache Management」をクリックし、無効なキャッシュ項目をすべて更新します。

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de