ナビゲーションメニューの作成

クラリティのナビゲーションメニューは、デフォルトですべてのページが表示されるため、乱雑になっています。 メニュー表示フラグメントのデフォルト設定では、サイトのページ階層が表示されます。 「キャリア」、「サインイン」、「検索」をデフォルトのメニュー表示から除外したため、これらのページが表示されないことを覚えておいてください。

The default navigation menu displays the site's pages.

ヘッダーナビゲーションメニューをシンプルにするため、クラリティはナビゲーションメニューに表示する項目を3つだけにしたい:Shop(ページ)、Blog(ページ)、More(追加ページリンクのサブメニュー)です。

さらに、ナビゲーションメニューはフッターに動的な項目を追加できる。 クラリティのフッターには以下のメニューがあります:ショップ、クラリティ、リソースです。

The footer menus are defined by the Navigation Menus application.

ショップメニューは コマース・アーキテクト で設定されているため、今のところ空白です。

最初にナビゲーション・メニューを作る:

  1. サイトメニュー(サイトメニュー)を開き、 Site Builderナビゲーションメニュー に進みます。

  2. 追加(追加ボタン)をクリックします。

  3. 名前に Clarity Navigation と入力し、 Save をクリックします。

  4. New****Page をクリックする。

  5. Select PagesセレクタでClarity階層を展開し、 Shop をクリックし、 Blog をクリックします。

    Add the Shop and Blog pages to the navigation menu.

  6. 「選択」をクリックする。

主要なページは整った。 次に、残りのページへのリンクがある「More」というサブメニューが必要です。

  1. 追加サブメニュー をクリックする。

  2. More という名前を入力し、 Add をクリックする。

  3. Moreアイテムの Actions メニュー(Actions)を開きます。

  4. 子供の追加ページ をクリックする。

  5. サブメニューに「会社概要」と「お問い合わせ」を追加する。

    About Us and Contact Us are in the sub-menu.

    メニューはすぐに使える。

  6. 表示したいページは所定の位置にある。 ナビゲーション・メニューが意図的に更新されない限り、新しいページがメニューに追加されないようにするには、 設定(Cog)をクリックします。

    ページ作成時に新しいページをメニューに追加する設定を無効にし、 Save をクリックします。

    Don't let users add pages to the menu during page creation.

現在のナビゲーションを示すメニュー表示フラグメントがマスターページに追加される。 新しいナビゲーションメニューを使用するように設定します:

  1. サイトメニュー(商品メニュー)を開き、 デザインページテンプレート をクリックします。

  2. テキスト Clarity MP をクリックすると、ページエディターに移動します。

  3. 現在のナビゲーションが表示されているページ上のエリアをクリックします。 メニュー表示オプションの設定が右サイドバーに表示されます。

    Configure the menu display fragment's options.

  4. Source フィールドをクリックし、 Clarity Navigation メニューを選択します。

  5. このレベルを選択してください。

    階層構造の場合、ニーズに合えば、ウィジェットに表示する別のレベルを選択できる。 More_をクリックし、サブメニューが表示されていることを確認する。

    Navigation Menusアプリケーションで定義されたこれらのサイトメニューに加えて、Contextual Menusをクリックすると、追加のダイナミックメニューオプションを見ることができます。 メニュー表示を設定する を参照してください。

    この練習の前に、Clarityはメニュー表示フラグメントのページ階層メニューから3つのページを隠していました:採用情報」、「サインイン」、「検索」です。 そのメニューはもう使われていないが、それらのページは新しいヘッダーナビゲーションメニューに明確に追加されたわけではないので、ナビゲーションの外に残り続けている。

ヘッダーナビゲーションに加えて、Clarityにはフッター用のメニューが必要です: ShopClarityResources です。

  1. ヘッダーメニューの作成に使用したのと同じ基本的な手順に従って、 Clarity メニューを作成し、 About UsCareers ページを追加します。

  2. クラリティのメニューに外部URLを追加します:

    Name: Retail Customer Portal URL: http://clarityb2b.com:8080

    Navigation menus can link to external URLs.

    完了すると、クラリティのメニューにページとURLが表示されます:

    The Clarity menu links to pages and an external URL.

  3. Resources "メニューを作成し、"Blog "と "Search "ページを追加する。

    The Resources menu links to the Blog and Search pages.

ショップメニューには、商品カテゴリーへのリンクが表示されます。 コマースアーキテクト で作成されるので、今は空白のままにしておいてください。

メニューができたので、フッターに追加する。

  1. サイトメニュー(製品メニュー)を開き、 → ページテンプレート をクリックして、クラリティMPマスターページを開きます。

  2. ページエディターで、フッターの最初の3つのグリッド列、SHOP、CLARITY、RESOURCES見出しの下にメニュー表示ウィジェットを見つけてください。

    The first three grid columns have Menu display widgets.

  3. 各メニュー表示ウィジェットの設定を開き、表示する適切なメニューを選択します。

    Display each menu in a Menu Display widget in the footer.

現在、クラリティのヘッダーとフッターは、リストを表示するためにナビゲーションメニューを使用しています。 コマースアーキテクト コースでは、SHOP メニューが入力されます。

Clarity's master page uses navigation menus heavily.

次へクラリティのデザインチームは、新しいフラグメントとコンポジションで、ホームページ リデザインを依頼しました。

関連コンセプト

Capabilities

Product

Contact Us

Connect

Powered by Liferay
© 2024 Liferay Inc. All Rights Reserved • Privacy Policy