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

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

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

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

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

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

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

メールアドレス [e-mail] とパスワード testを使用して、 http://localhost:8080 で 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コンテナコンソールでデプロイを確認します。

   STARTED com.acme.w9m6.web_1.0.0
   

4. テーマコントリビューターがサイトの背景色を変更したことを確認します。 ブラウザを開いてhttps://localhost:8080にアクセスし、Liferayホームページの背景が青色になっていることを確認します。

新しいテーマコントリビューターの構築とデプロイが完了しました。

次に、カスタムCSSの変更でテーマコントリビューターがどのように見えるかを学習します。

サンプルのテーマコントリビューターを調べる

テーマコントリビューターはOSGiモジュールであり、そのbnd.bndファイルにプロパティが必要です。 次に、カスタマイズが resourcesフォルダに追加されます。 サンプルのテーマコントリビューターは、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スタイルの変更を使用して、各ページの背景を青色にします。 これは、 src/main/resources/META-INF/resources/にある custom.css ファイルで行われます。

body, #wrapper {
   background: blue;
}

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

背景色を変更する

次に、テーマコントリビューターがページにどのように影響するかを確認するために、背景色を変更してみましょう。

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

2. backgroundの色プロパティをorangeなどの別の色に変更します。

   body, #wrapper {
      background: orange;
   }
   

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

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

4. Dockerコンテナコンソールでデプロイを確認します。

   STARTED com.acme.w9m6.web_1.0.0
   

5. テーマコントリビューターがサイトの背景を新しい色に変更したことを確認します。 ブラウザでhttps://localhost:8080を開き、変更を確認します。

さいごに

　 CSSスタイルを変更したテーマコントリビューターを作成しました。 スタイル ブックを使用して、サイトのページに特定のスタイルの変更を適用することもできます。

関連トピック

• テーマレットを介したリソースのバンドルとテーマへのインストール
• テーマ
• スタイルブックを使用してサイトの外観を標準化する