カスタムテーマ
プロジェクト内の 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 -
正しい場所にコピーされたテーマを確認します。
- Storefront テーマ：
ls <project-root>/app/design/frontend - 管理テーマ：
ls <project-root>/app/design/adminhtml
次に例を示します。
ExampleTheme Adobe Commerce
- Storefront テーマ：
-
ファイルの追加とコミット
code language-bash git add -A && git commit -m "Add theme" -
ファイルをブランチにプッシュします。
code language-bash git push origin <branch name> -
デプロイメントが完了するまで待ちます。
-
管理者にログインします。
-
コンテンツ/デザイン/テーマ をクリックします。
テーマが右側のパネルに表示されます。
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> -
管理者にログインします。
-
コンテンツ/デザイン/テーマ をクリックします。
テーマが右側のパネルに表示されます。
複数のテーマ
ロケールごとに異なるテーマなど、複数のテーマを使用する場合は、テーマのデプロイメントをカスタマイズするための SCD_MATRIX 環境変数を確認します。 環境設定の ビルドまたは デプロイステージを参照してください。