カスタムテーマ
1つまたは複数のテーマをインストールして、プロジェクト内のストアやサイトの1つまたは全部に使用できます。 テーマには、画像、フォント、CSS、JavaScript、PHPなど、複数の静的ファイルが含まれており、ストアを完全にデザインできます。 テーマを追加するには、そのコードをファイルシステムに抽出するか、Composerを使用します。
テーマの手動インストール
テーマを手動でインストールするには、圧縮アーカイブまたは次のようなディレクトリ構造にテーマのコードが含まれている必要があります。
<VendorName>
├── composer.json
├── etc
│ └── view.xml
├── media
├── registration.php
├── theme.xml
└── web
├── css
│ └── source
├── fonts
├── images
└── js
テーマを手動でインストールするには:
-
ストアフロントテーマの
<Project root dir>/app/design/frontendの下のテーマのコード、または管理者テーマの<Project root dir>/app/design/adminhtmlをコピーします。 最上位のディレクトリが<VendorName>であることを確認してください。そうしないと、テーマが正しくインストールされません。code language-bash cp -r ExampleTheme <project-root>/app/design/frontend -
正しい場所にコピーしたテーマを確認します。
- ストアフロントのテーマ：
ls <project-root>/app/design/frontend - 管理者テーマ：
ls <project-root>/app/design/adminhtml
サンプルは次のとおりです。
ExampleTheme Adobe Commerce
- ストアフロントのテーマ：
-
ファイルを追加してコミットします。
code language-bash git add -A && git commit -m "Add theme" -
ファイルをブランチにプッシュします。
code language-bash git push origin <branch name> -
デプロイメントが完了するのを待ちます。
-
Adminにログインします。
-
コンテンツ/デザイン/テーマをクリックします。
テーマが右側のペインに表示されます。
Composerを使用したテーマのインストール
Composerを使用したテーマのインストールは、Composerを使用した他の拡張機能のインストールと同じです。 詳しくは、 モジュールのインストール、管理、アップグレード を参照してください。
Composerを使用してテーマをインストールするには：
-
Commerce Marketplaceから購入。
-
テーマのコンポーザー名を取得します。
-
Adobe Commerceのルートディレクトリに移動し、次のコマンドを入力します。
code language-bash composer require <vendor>/<name>:<version>以下に例を挙げます。
code language-bash composer require zero1/theme-fashionista-theme:1.0.0 -
依存関係が更新されるのを待ちます。
-
次のコマンドを入力します。
code language-bash git add -A && git commit -m "Add theme"code language-bash git push origin <branch name> -
Adminにログインします。
-
コンテンツ/デザイン/テーマをクリックします。
テーマが右側のペインに表示されます。
複数のテーマ
ロケールごとに異なるテーマなど、複数のテーマを使用する場合は、テーマのデプロイメントをカスタマイズするためにSCD_MATRIX環境変数を確認してください。 環境設定の ビルド または デプロイ のステージを参照してください。