ページのヘッダーとフッターを定義する
マスターページテンプレート では、ページのヘッダーとフッターに共通の要素を定義できます。 クラリティには現在、ホームページが1ページあるだけだ。 これはマスターページが利用可能になる前に作成されたため、空白のマスターページが自動的にページに関連づけられた。 ヘッダーにはLiferayのロゴとラベル、ページベースのナビゲーションメニュー、検索バーウィジェット、サインイン/パーソナルメニューがあります。
クラリティは独自のヘッダーとフッターのデザインを必要とするため、マスターページを作成してヘッダーとフッターを定義し、サイト全体のすべてのページで再利用します。
-
サイトメニュー( 商品メニュー )を開き、 デザイン → ページテンプレート をクリックします。
-
追加()をクリックし、ページ名を Clarity MP とします。
コンテンツページエディターが表示されます。 デフォルトでは、ページにはドロップゾーンという1つの要素しかない。 クラリティのヘッダーとフッターは、ドロップゾーンの上下に表示されます。
-
サイドバーの「フラグメントとウィジェット」() メニューで、 clarity-header-comp をドロップゾーンの上にドラッグし、次に clarity-footer-comp をドロップゾーンの下にドラッグします。
これらのフラグメントコンポジションは、前のステップ、 Fragments and Resources でインポートしました。
-
ヘッダーの画像断片をロゴにマッピングする。 ブラウザーを開き()、Header Container要素を展開し、真ん中のグリッドモジュールの画像フラグメントにたどり着くまで要素の展開を続けます。
-
画像断片をクリックして設定を開き、 image-square をクリックして画像のソースを設定します。
-
直接ソースを選択し、画像 clarity logo_を選択します。
-
同じ手順で、 clarity logo_画像をフッターの画像断片に追加します。
-
マスターを公開する」をクリックする。
ユーザーメニューはカスタムフラグメント
user-nav-fragment.zip
です。 HTMLとCSSを使用して、ログイン・ユーザー用のメニューを作成します。 ログアウトしているユーザーには、ユーザーアイコンとSIGN INの文字が表示され、これをクリックするとサインインページにアクセスできます。
マスターページが完成した。 現在、ヘッダーとフッターの両方に、サイトのページ階層を示すメニューがあります。 これは ナビゲーションメニューの作成 で改善される。 今は、既存のHomeページとすべてのウィジェットページ(例えば、既存のSearchページ)でマスターページを使用するようにLiferayを設定する時です。
-
マスターページの Actions メニュー()を開き、 Mark as Default をクリックします。 このマスターページをすべてのウィジェットページのデフォルトとして使用することを確認してください。
-
トップページに移動し、管理ヘッダーの 編集()をクリックする。
-
コンテンツ・ページ・エディターで、 ページ・デザイン・オプション サイドバー・メニュー( ページ・デザイン・オプション )を開き、 Clarity MP を選択します。
-
Publish_をクリックする。
-
同様の手順で、デフォルトのユーティリティページ(404と500エラーページ)をマスターページを使用するように設定します。 サイトメニュー()で、 サイトビルダー → ページ → ユーティリティページ をクリックします。
これでマスターページにヘッダーとフッターが定義されました。
ヘッダーとフッターがあっても、ルック&フィールはまだ洗練されていない。 リンクは現在すべて青色で、例えばクラリティのブランドカラーにはマッチしていません。 手作業で時間をかけて修正するよりも、今はそのままにしておこう。 後で導入するテーマCSSクライアントエクステンションが、これらの視覚的欠点を改善する。
次ページ: サイトの残りのページを作成する.