ページのヘッダーとフッターを定義する

マスターページテンプレート では、ページのヘッダーとフッターに共通の要素を定義できます。 クラリティには現在、ホームページが1ページあるだけだ。 これはマスターページが利用可能になる前に作成されたため、空白のマスターページが自動的にページに関連づけられた。 ヘッダーにはLiferayのロゴとラベル、ページベースのナビゲーションメニュー、検索バーウィジェット、サインイン/パーソナルメニューがあります。

The default header and footer are useful, but replaceable.

クラリティは独自のヘッダーとフッターのデザインを必要とするため、マスターページを作成してヘッダーとフッターを定義し、サイト全体のすべてのページで再利用します。

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

  2. 追加(追加)をクリックし、ページ名を Clarity MP とします。

    コンテンツページエディターが表示されます。 デフォルトでは、ページにはドロップゾーンという1つの要素しかない。 クラリティのヘッダーとフッターは、ドロップゾーンの上下に表示されます。

  3. サイドバーの「フラグメントとウィジェット」(Fragments and Widgets) メニューで、 clarity-header-comp をドロップゾーンの上にドラッグし、次に clarity-footer-comp をドロップゾーンの下にドラッグします。

    これらのフラグメントコンポジションは、前のステップ、 Fragments and Resources でインポートしました。

  4. ヘッダーの画像断片をロゴにマッピングする。 ブラウザーを開き(Browser)、Header Container要素を展開し、真ん中のグリッドモジュールの画像フラグメントにたどり着くまで要素の展開を続けます。

    Click the image fragment's inner element to set the source of the image.

  5. 画像断片をクリックして設定を開き、 image-square をクリックして画像のソースを設定します。

  6. 直接ソースを選択し、画像 clarity logo_を選択します。

    Set the image to use in the header.

  7. 同じ手順で、 clarity logo_画像をフッターの画像断片に追加します。

    Set the image to use in the footer.

  8. マスターを公開する」をクリックする。

    ユーザーメニューはカスタムフラグメント user-nav-fragment.zip です。 HTMLとCSSを使用して、ログイン・ユーザー用のメニューを作成します。 ログアウトしているユーザーには、ユーザーアイコンとSIGN INの文字が表示され、これをクリックするとサインインページにアクセスできます。

    Logged in users see a menu with links to important pages.

マスターページが完成した。 現在、ヘッダーとフッターの両方に、サイトのページ階層を示すメニューがあります。 これは ナビゲーションメニューの作成 で改善される。 今は、既存のHomeページとすべてのウィジェットページ(例えば、既存のSearchページ)でマスターページを使用するようにLiferayを設定する時です。

  1. マスターページの Actions メニュー(Actions)を開き、 Mark as Default をクリックします。 このマスターページをすべてのウィジェットページのデフォルトとして使用することを確認してください。

  2. トップページに移動し、管理ヘッダーの 編集(編集)をクリックする。

  3. コンテンツ・ページ・エディターで、 ページ・デザイン・オプション サイドバー・メニュー( ページ・デザイン・オプション )を開き、 Clarity MP を選択します。

  4. Publish_をクリックする。

  5. 同様の手順で、デフォルトのユーティリティページ(404と500エラーページ)をマスターページを使用するように設定します。 サイトメニュー(商品メニュー)で、 サイトビルダーページユーティリティページ をクリックします。

これでマスターページにヘッダーとフッターが定義されました。

The header and footer is in place.

ヘッダーとフッターがあっても、ルック&フィールはまだ洗練されていない。 リンクは現在すべて青色で、例えばクラリティのブランドカラーにはマッチしていません。 手作業で時間をかけて修正するよりも、今はそのままにしておこう。 後で導入するテーマCSSクライアントエクステンションが、これらの視覚的欠点を改善する。

次ページ: サイトの残りのページを作成する.

関連コンセプト

Capabilities

Product

Contact Us

Connect

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