ページ階層

Adobe Commerce機能 {width="20"} Adobe Commerceのみの専用機能( 詳細情報

ストアページ階層システムを使用すると、コンテンツページを整理し、ページネーション、ナビゲーションおよびメニューを追加できます。 サンプルデータのプライバシーポリシーページは、左側にメニューがあるページの例です。 大量のコンテンツを定期的に公開する場合は、ページ階層を使用してコンテンツを整理し、関心のある記事をユーザーが簡単に見つけられるようにすることができます。

ページ階層システムは、ノードを使用して、関連するコンテンツ部分を識別し、コンテンツページを親子関係に整理します。 親ノードは、子ノードおよびページを含む可能性のあるフォルダーに似ています。 階層内の各ノードとページの相対位置は、tree 構造として表示されます。 ノードには、他のノードやコンテンツページが含まれ、1 つのコンテンツページが、親/子または近隣の関係の複数のノードや他のコンテンツページに関連付けられる場合があります。

左側にナビゲーションがあるページ

ページ階層の設定

構成設定により、ページ階層システムおよびメタデータがアクティブ化され、デフォルトのメニューレイアウトが決定されます。

CMS ページ階層

  1. 管理者 サイドバーで、Stores/Settings/Configuration ​に移動します。

  2. General ​の下の左パネルで、「Content Management」を選択します。

  3. 展開セレクター CMS Page Hierarchy を展開し、必要な変更を加えます。

  4. 完了したら、「Save Config」をクリックします。

フィールド
説明
Enable Hierarchy Functionality
コンテンツページに対してページ階層の使用をアクティベートします。 オプション:Yes / No
Enable Hierarchy Metadata
このオプションを有効にすると、メタデータを階層内のページに関連付けることができます。 オプション:Yes / No
Default Layout for Hierarchy Menu
既定のメニュースタイルを決定します。 オプション:Content/Left Column/Right Column

階層ノードの追加

次の例では、関連するコンテンツページへの簡単なナビゲーションを使用してノードを作成する方法を示しています。 ノードにはコンテンツページが関連付けられていませんが、サイトの他の場所で参照できる URL キーがあります。

例えば、個々のプレスリリースに移動できる プレスリリース というノードを作成できます。 次に、「会社情報 ページのリンクをノードに含めるこ ができます。 または、ニュースレターのバックイシューのコレクション用のノードを作成することもできます。

ノードにリンクするには、 ウィジェットツールを使用して CMS 階層ノードリンクを作成し、ウィジェットをコンテンツブロックまたはページに配置します。

会社概要ページのナビゲーションメニューの例

手順 1:ノードを作成する

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

    CMS ページグリッド {width="600" modal="regular"}

  2. グリッドの上にある「Add Node…」をクリックします。

  3. Page Properties」に、ノードの​ Title ​と適切な​ URL Key ​を入力します。

    URL キーは、ノードの一意の web アドレスを提供します。 スペースではなくハイフンを使用して単語を区切り、すべて小文字にする必要があります。

    ページプロパティ {width="500" modal="regular"}

  4. Save」をクリックします。

    ノードは、ページの左側のツリーにフォルダーとして表示されます。

手順 2:ノードへのページの追加

  1. 階層ツリーで、ノードをクリックして選択します。

  2. Add Selected Pages(s) to Tree」をクリックします。

    上にスクロールすると、選択した各ページがノードフォルダーの下のツリーに表示されます。

手順 3:構造の定義

  1. 必要に応じて、ページをメニューに表示する順序を反映する位置にドラッグします。

    ページを適切な位置にドラッグ {width="500" modal="regular"}

  2. 階層の最上位にあるノードをクリックします。

    Page Properties ​セクションには、ノードに関する情報が表示されるようになりました。

  3. [Render Metadata in HTML Head] で、次の操作を行います。

    メタデータ設定のレンダリング {width="400" modal="regular"}

    • ノードを階層の最上位として識別するには、「First」を「Yes」に設定します。

    • ページネーションコントロールを表示するには、Next/PreviousYes に設定します。

    • 階層内のページをブックとして整理するには、「Enable Chapter/Section」を「Yes」に設定します。

      ノードをブックの一部として含めない場合は、デフォルトの No のままにします。

    • ノードをブックの特定の部分に割り当てるには、Chapter/Section を次のいずれかに設定します。

      • No - ノードをチャプター/セクションとして定義しません。
      • Chapter – 現在のノードをチャプターとして割り当てます。
      • Section – 現在のノードをセクションとして割り当てます。
      • Both – 現在のノードをチャプターとセクションの両方として割り当てます。

手順 4:ページネーションコントロールの追加

  1. ネストされたページのページネーションオプション」で、「Enable Pagination」を「Yes」に設定します。

  2. Frame:ページネーションコントロールに含めるページリンクの数を入力します。

    ページネーションコントロールに含めることができるページが階層内にまだある場合。

  3. Frame Skip:次のページネーションリンクのセットのために前にスキップ(または後ろにスキップ)するページ数を入力します。

手順 5:メニューレイアウトの選択

メニューにノードを表示する場合は、次の操作を行います。

  1. ページナビゲーションメニューオプション で、「Show in navigation menu」を「Yes」に設定します。

    この設定により、ページ階層にナビゲーションメニューを生成するかどうかが決まります。

    ページナビゲーションメニューオプション {width="300" modal="regular"}

  2. コンテンツに関連するメニューの場所を指定するには、Menu Layout のように設定します。

    • Content - メニューレイアウトがコンテンツ内にあります。
    • Use Default - configuration で指定されたメニュースタイルを使用します。
    • Left Column - メニューがコンテンツの左側に表示されます。
    • Right Column - メニューがコンテンツの右側に表示されます。
  3. メニューに含める詳細の量を指定するには、Menu Detalization を次のいずれかに設定します。

    • Only Children - メニューにサブページのみを含めます。
    • Neighbours and Children – 階層内の同じレベルにあるサブページとその他のページを含みます。
  4. メニューの深さを決定するには、含めるレベルの最大数の Maximal Depth を入力します。

  5. メニューを書式設定するには、List Type のいずれかを選択します。

    • Unordered - メニューオプションには番号が付けられておらず、箇条書きまたは箇条書きなしで書式設定できます。 順不同リストタイプのオプション:デフォルト/円/ディスク/正方形
    • Ordered - メニューオプションには番号が付けられ、大文字または小文字の数字、アルファベット、またはローマ数字の形式を設定できます。
  6. List Style を次のいずれかに設定します。

    • Circle
    • Disc
    • Square
  7. ノードをナビゲーションメニューにも表示する場合は、スクロールして メインナビゲーションメニューオプション を表示し、Show in Navigation menuYes に設定します。

    メインナビゲーションメニューオプション {width="250" modal="regular"}

  8. Save」をクリックします。

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