フィードバックを送信
Bundling Resources
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

テーマコントリビューターによる独立したUIリソースのバンドル

テーマコントリビューターとは、CSSとJavaScriptのリソースを含み、それらをすべてのページに適用するモジュールのことです。 これらは特定のテーマとは独立しており、テーマの特定のスタイルを上書きしたり、あるいは互いのスタイルを上書きするように設定することもできます。 ページに個別の UI リソースを含め、それらを特定のテーマに含めたい場合は、代わりに テーマレット を使用してください。

Liferay Portal/DXP の多くのメニューは、 サイトメニュー のように、テーマコントリビューターとしてパッケージ化されています。

サイトメニューは、テーマコントリビューターモジュールとして実装されています。

サイトメニューなどの標準のUIコンポーネントを編集またはスタイル設定する場合は、テーマコントリビューターで変更をデプロイする必要があります。 テーマコントリビューターを使用して、新しいUIコンポーネントまたはスタイルを追加することもできます。

シンプルなテーマコントリビューターをデプロイする

Liferay DXP の新しいインスタンスを起動するには、以下を実行します。

docker run -it -m 8g -p 8080:8080 liferay/dxp:2026.q1.9-lts

http://localhost:8080 に、メールアドレス test@liferay.com とパスワード test を使用して Liferay にサインインします。 プロンプトが表示されたら、パスワードを learn に変更してください。

次に、以下の手順に従って、サンプルテーマコントリビューターをデプロイします。

  1. サンプルをダウンロードして解凍してください。

    curl https://resources.learn.liferay.com/examples/liferay-w9m6.zip -O

    unzip liferay-w9m6.zip

  2. サンプルをビルドしてデプロイします。

    cd liferay-w9m6

    ./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)
    注記

    このコマンドは、モジュール JAR を Docker コンテナ上の /opt/liferay/osgi/modules にコピーすることと同じです。

  3. Dockerコンテナコンソールでデプロイを確認してください。

    com.acme.w9m6.web_1.0.0 を開始しました

  4. テーマの作成者がサイトの背景色を変更したことを確認してください。 ブラウザで https://localhost:8080 を開き、Liferay ホームページの背景が青色になっていることを確認してください。

例として挙げたテーマの投稿者は、ページの背景を青色に変更します。

おめでとうございます。新しいテーマコントリビューターの構築とデプロイが正常に完了しました。

次に、テーマコントリビューターがカスタムCSS変更を行った場合、どのように表示されるかを学びます。

テーマ貢献者の例を調べる

テーマコントリビューターは OSGi モジュールであり、その bnd.bnd ファイルにプロパティが必要です。 カスタマイズは、 リソース フォルダーに追加されます。 サンプルテーマの貢献者は、 custom.css ファイルを使用して、各ページの背景色を変更します。

テーマ貢献者プロパティを確認する

テーマ貢献者のプロジェクトには、設定に必要なプロパティが bnd.bnd ファイルに追加されています。

Bundle-Name: Acme W9M6 Web
Bundle-SymbolicName: com.acme.w9m6.web
Bundle-Version: 1.0.0
Liferay-Theme-Contributor-Type: CSS
Liferay-Theme-Contributor-Weight: 1
Web-ContextPath: /w9m6-web

テーマ貢献者の bnd.bnd ファイルは、機能するために以下のプロパティを備えている必要があります。

Web-ContextPath: テーマコントリビューターのリソースのコンテキストを設定します。 例のモジュールでは、コンテキストパスは w9m6-web です。

Liferay-Theme-Contributor-Type: モジュールがテーマコントリビューターを追加することを示します。 このプロパティには任意の値を指定できます。 サンプルモジュールは、値 CSS を使用します。

Liferay-Theme-Contributor-Weight: テーマコントリビューターのスタイルの重みを他のコントリビューターと比較して設定します。 値が低いほど、他の貢献者によるスタイルを上書きする優先順位が高くなります。 サンプルモジュールは、 1 の重みを使用して、スタイルがどのテーマ貢献者よりも高い優先順位を持つことを保証します。

bnd.bnd ファイルに必要なプロパティが設定されたら、モジュールには必要なカスタマイズのみが必要になります。

スタイルのカスタマイズを確認する

必要なCSSファイルやJavaScriptファイルは、モジュール内のサブフォルダに追加する必要があります。 CSS ファイルは src/main/resources/META-INF/resources/css/ サブフォルダに、JavaScript ファイルは src/main/resources/META-INF/resources/js/ サブフォルダに配置します。

この例のテーマ提供者は、シンプルなCSSスタイルの変更によって各ページの背景を青色にしています。 これは、 custom.css ファイルを使用して、 src/main/resources/META-INF/resources/ で行われます。

body, #wrapper {
   background: blue;
}

必要なCSSファイルやJavaScriptファイルをすべて適切なサブフォルダに追加したら、モジュールをデプロイすることで、それらがすべてのページに適用されます。

背景色を変更する

テーマのコントリビューターがページにどのような影響を与えるかを確認するには、背景色を変更してみてください。

  1. プロジェクトで src/main/resources/META-INF/resources/css/custom.css を開きます。

  2. 背景 の色プロパティを、 オレンジ のような別の色に変更します。

    body, #wrapper {
   background: orange;
}

  3. 実行中のDockerコンテナに、サンプルを再度ビルドしてデプロイしてください。

    ./gradlew deploy -Ddeploy.docker.container.id=$(docker ps -lq)

  4. Dockerコンテナコンソールでデプロイを確認してください。

    com.acme.w9m6.web_1.0.0 を開始しました

  5. テーマの作成者がサイトの背景色を新しい色に変更したことを確認してください。 変更を確認するには、ブラウザで https://localhost:8080 を開いてください。

CSSファイルで背景色を変更すると、デプロイ時にすべてのページに影響します。

結論

　 CSSスタイルの変更により、テーマの貢献者が作成されました。 スタイルブック を使用して、サイトのページに特定のスタイル変更を適用することもできます。

Capability:
Sites
Resource Type:
Official Documentation
Feature:
Themes
Deployment Approach:
Liferay PaaS
Liferay Self-Hosted