このセクションでは実用的でコンテンツを辿りやすいサイト構築に欠かせない、サイトナビゲーションについて紹介します。Liferay DXPではサイトナビゲーションの様々なカスタマイズ方法があります。主な方法は以下です。
-
サイトのテーマ：これはサイトナビゲーションを管理するのに主要かつ強力な方法です。例えばLiferay DXPのテーマは、サイトのあらゆる面をカスタマイズできます。テーマ内でナビゲーションを設定することで、サイト全体に統一された外観を保つことができます。
-
アプリケーション：ナビゲーションアプリケーションはナビゲーションをページ単位で設定します。例えば、ナビゲーションメニューアプリケーションにはサイトのナビゲート可能なページ階層が表示されるので、どのページを親ページとして使用するかを選択できます。パンくずリストアプリケーションでは、今いるページの階層をたどることができます。このアプリでは、ページ階層内で今いる場所が常に表示されるので便利です。
この２つのサイト・ナビゲーションは合わせて使用することも可能です。ページテンプレートと同様、テーマはサイトに表示されるアプリケーションを定義できます。
Liferayリゾートサイトでは、Liferay DXPのデフォルトテーマ、Classicを使用しています。このテーマは既にナビゲーションメニューアプリケーションがサイト・ナビゲーションバーに組み込まれていますので、サイトのナビゲーションバーはサイト全体のページ階層を表示するように設定されています。
次のステップではLiferayリゾートが用いるテーマは変更せずに、ナビゲーションアプリケーションとパンくずリストアプリケーションを使いナビゲーションを調節します。
ナビゲーションメニューアプリケーションの追加
今使用しているナビゲーションアプリでLiferayリゾートのナビゲーションがページのトップにされていますが、サイトを使いやすくするためにナビゲーションをページのフッターにも追加します。下記の手順で行います。
-
Liferayリゾートのトップページに行きます。
-
画面右上の[追加]をクリックしメニューからアプリケーション→コンテンツ管理を選択します。
-
ナビゲーションメニューアプリケーションを既存のコンテンツの下にドラッグ＆ドロップします。
-
ナビゲーションメニューアプリケーションにマウスを置き、ポートレットの右側にあるアプリケーションのオプション→ルック＆フィール設定を選択します。
-
アプリケーション・デコレータで［Barebone］を選択、［保存］をクリックします。
-
ナビゲーションのオプションボタンを再びクリックし、［設定］選択します。
-
［テンプレートを表示する］で、［最小限のスタイルのバー］を選択します。
-
その他のオプションは変更せずに、［保存］をクリックして、ウィンドウをクローズします。
ナビゲーションバーは下記のように表示されます。
次はパンくずリストアプリケーションを追加します。
パンくずリストアプリケーションアプリの追加
パンくずリストのアプリケーションを追加することで、ページテンプレートをより効率的に使用できます。Liferayガイドページを右側にブログアプリケーションが付いたテンプレートを使って作成したので、
Liferay DXPではテンプレートの変更をページに反映させるので、ここでは、テンプレートに［パンくずリスト］プリケーションを追加する手順を紹介します。
-
メインメニュー→コントロールパネル→サイト→ページテンプレートに順に展開します。
-
ページテンプレートのリストから、「ガイドページ」を選択します。
-
画面右上の追加ボタン→アプリケーション→コンテンツ管理から［パンくずリスト］をページテンプレートの左側のカラム（ブログアプリケーションの横）に追加します。
-
画面左に追加したパンくずリストアプリケーションのオプションから、ルック＆フィール設定を選択します。
-
アプリケーション・デコレータを［Barebone］に変更し、［保存］クリックしてウィンドウをクローズします。
-
ページテンプレート編集のタブ／ウィンドウをクローズします。
-
Liferayガイドのページにアクセスし、パンくずリストアプリケーションが追加されていることを確認します。
ご覧の通り、ナビゲーションメニューとパンくずリストアプリケーションはサイトのページ階層間を移動するのにとても便利なツールです。
ここまでのセクションでページをナビゲーションを含むフレームワークを構築したので、次にコンテンツを追加するステップを紹介します。