カスタムテーマ

プロジェクト内の 1 つまたはすべてのストアとサイトに使用する 1 つまたは複数のテーマをインストールできます。 テーマには、ストアを完全にデザインするために、画像、フォント、CSS、JavaScript、PHP など、複数の静的ファイルが含まれます。 テーマを追加するには、コードをファイルシステムに抽出するか、Composer を使用します。

テーマを手動でインストール

テーマを手動でインストールするには、テーマのコードを圧縮されたアーカイブまたは次のようなディレクトリ構造にする必要があります。

<VendorName>
  ├── composer.json
      ├── etc
      │   └── view.xml
      ├── media
      ├── registration.php
      ├── theme.xml
      └── web
          ├── css
          │   └── source
          ├── fonts
          ├── images
          └── js

テーマを手動でインストール:

  1. の下にテーマのコードをコピーします。 <Project root dir>/app/design/frontend ストアフロントのテーマの場合はまたは <Project root dir>/app/design/adminhtml 管理テーマの場合。 最上位ディレクトリがであることを確認 <VendorName>。そうでない場合、テーマが正しくインストールされません。

    code language-bash
    cp -r ExampleTheme <project-root>/app/design/frontend
    
  2. 正しい場所にコピーされたテーマを確認します。

    • ストアフロントのテーマ: ls <project-root>/app/design/frontend
    • 管理テーマ: ls <project-root>/app/design/adminhtml

    次に例を示します。

    ExampleTheme Adobe Commerce

  3. ファイルの追加とコミット

    code language-bash
    git add -A && git commit -m "Add theme"
    
  4. ファイルをブランチにプッシュします。

    code language-bash
    git push origin <branch name>
    
  5. デプロイメントが完了するまで待ちます。

  6. 管理者にログインします。

  7. クリック コンテンツ > デザイン > テーマ.

    テーマが右側のパネルに表示されます。

Composer を使用したテーマのインストール

Composer を使用してテーマをインストールする方法は、Composer を使用して他の拡張機能をインストールする方法と同様です。 参照: モジュールのインストール、管理、アップグレード を参照してください。

Composer を使用してテーマをインストールするには:

  1. テーマをCommerce Marketplaceから購入します。

  2. テーマのコンポーザー名を取得します。

  3. Adobe Commerceのルートディレクトリに移動して、コマンドを入力します。

    code language-bash
    composer require <vendor>/<name>:<version>
    

    以下に例を挙げます。

    code language-bash
    composer require zero1/theme-fashionista-theme:1.0.0
    
  4. 依存関係が更新されるのを待ちます。

  5. 次のコマンドを入力します。

    code language-bash
    git add -A && git commit -m "Add theme"
    
    code language-bash
    git push origin <branch name>
    
  6. 管理者にログインします。

  7. クリック コンテンツ > デザイン > テーマ.

    テーマが右側のパネルに表示されます。

複数のテーマ

ロケールごとに異なるテーマを使用するなど、複数のテーマを使用する場合、 SCD_MATRIX テーマのデプロイメントをカスタマイズするための環境変数。 を参照してください。 ビルド または deploy のステージ 環境設定.

recommendation-more-help
05f2f56e-ac5d-4931-8cdb-764e60e16f26