Magento 2のテーマをゼロから作成する方法

こんにちは、Habrausers様！ この投稿では、Magento 2のテーマをゼロから作成するプロセスを説明します。 Magento 2には、最初のバージョンと比較してかなり多くの革新と改善があります。 ほとんどの場合、それらはクライアント側に関連しています。

それらのいくつかを次に示します。

1. HTML5およびCSS3の完全サポート。
2. 組み込みのLESSプリプロセッサ。
3. RequireJSを使用したモジュールの非同期読み込み（スクリプトをheadセクションに手動で追加することなく）;
4. Prototypeライブラリの代わりにjQuery / jQuery UI。
5. Magento UIライブラリ（シンプルで柔軟なユーザーインターフェイスのレンダリング用のコンポーネントセット）。

最も興味深いのはカットの下です！

テーマ開発に関して、Magento 2は新しいモジュラーコード構造を導入しました。 これで、すべての静的css、js、および画像ファイルがテーマwebフォルダーに配置され、スキンフォルダーがMagentoルートディレクトリから削除されました。 さらに、モジュールにビューフォルダーが導入されました。ビューフォルダーには、各モジュールのMVCプレゼンテーションレベルに属するテンプレートとファイルが保存されます。

新しいトピックを作成し、ディレクトリとファイルの構造をさらに詳しく調べる必要があります。 行こう！

テーマディレクトリを作成する

Magento 2のテーマは（M2_root）/ app / design / frontendディレクトリにあります。 まず、ベンダーフォルダー（Magento 1でパッケージと呼ばれる）を作成し、その中にテーマのフォルダーを作成する必要があります。

例：（M2_root）/ app / design / frontend / Singree / walkbeyond。 Singreeはベンダーで、walkbeyondはテーマコードです。 コードでは、文字と数字の任意の組み合わせを使用できます。

これらのディレクトリを作成した後、管理部分でアクティブにできるようにトピックを宣言する必要があります。

発表と登録

作成されたテーマをMagento 2で表示できるようにするには、次の内容のファイルを作成する必要があります：（M2_root）/ app / design / frontend /（vendor）/（theme codename）/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <title>walkbeyond</title> <parent>Magento/blank</parent> <media> <preview_image>media/walkbeyond.jpg</preview_image> </media> </theme> 

タイトルタグは、トピックの名前を示します。 親は、親として設定されているテーマを示します（検出されないすべての静的/テンプレートファイルは、親テーマから取得されます）。 この例は、M2に付属するブランクを示しています。 これは基本的なもので、親はありません。 ただし、Magento 2には、最初のバージョンとは異なり、制限がない限り多くの継承レベルがあります。



preview_imageタグは、adminセクションのトピックを表すサムネイルを指定します。

システムにトピックを登録するには、rootでregistration.phpファイルを作成する必要があります。

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Singree/walkbeyond', __DIR__ ); 

オプションですが、composer.jsonファイルを作成して、テーマを作曲家パッケージとして配布できます。 サンプルファイル：

 { "name": "Singree/walkbeyond", "description": "N/A", "require": { "php": "~5.5.0|~5.6.0|~7.0.0", "magento/theme-frontend-blank": "100.0.*", "magento/framework": "100.0.*" }, "type": "magento2-theme", "version": "100.0.1", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ] } } 

静的ファイル用のディレクトリの作成

スタイル、javascriptスクリプト、画像、フォントを保存するには、テーマのルートディレクトリにWebフォルダーを作成する必要があります。 フォルダ構造は次のとおりです。

 app/design/frontend/Singree/walkbeyond/ ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/ 

これらのフォルダーはすべてオプションです。

imagesフォルダーにはすべての静的テーマファイルが含まれています。ここで、logo.svg（デフォルト名）を追加してテーマロゴをオーバーライドできます。 css / sourceフォルダーでは、親テーマのブランクに従って、Magento UIベース変数をオーバーライドした_theme.lessファイルを作成できます。 ソースファイル内のフォルダー（M2_root）/ lib / web / css / source / lib / variables /で、オーバーライドできる変数のデフォルト値を見つけることができます。 css / sourceでは、_module.lessファイルのモジュールと_widgets.lessファイルのウィジェットのスタイルを設定できます。 マイナーな編集の場合、_extend.lessファイルを作成できます。

イメージ構成

テーマに必須なのはetc / view.xmlファイル（親テーマで定義されていない場合）です。このファイルには、高さ、幅、透明度、背景色などの製品画像のプロパティ値が含まれています。 このファイルは、ベーステーマから完全にコピーする必要があります（値は継承されません）画像プロパティは、要素内の識別子とタイプの属性に従って設定されます。

 <images module="Magento_Catalog"> ... <images/> 

たとえば、カタログ製品のテーブルビューで画像のサイズを変更できます。



Etc / view.xmlファイル：

 <?xml version="1.0"?> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <media> <images module="Magento_Catalog"> <image id="category_page_grid" type="small_image"> <width>200</width> <height>200</height> </image> ... </media> ... </view> 

category_page_grid識別子は、テーマ内で一意です。 small_imageタイプは、管理部分のSmall Image Roleに対応しています。 画像タイプの有効な値は、image、small_image、swatch_image、swatch_thumb、およびthumbnailです。



製品を保存すると、すべての画像がキャッシュされます。 サイズ変更後、php（M2_root）/ bin / magento catalog：images：resizeコマンドを実行して、イメージを再生成できます。

その結果、次の構造が得られました。

管理部分でのトピックの適用

ファイルシステムで作成した後、ストア設定でトピックをアクティブ化できます。 これを行うには、コンテンツ-デザイン-テーマセクションに移動し、作成されたテーマがリストされていることを確認します。



リストに作成されたトピックが表示されたら、コンテンツ→デザイン→構成に移動し、特定のWebサイトまたは選択したストアの編集をクリックします。



テーマ（適用されたテーマ）を選択し、[構成の保存]をクリックします。



キャッシュを有効にしている場合は、テーマを適用した後にキャッシュをクリアする必要があります。 これを行うには、システム-キャッシュ管理セクションに移動して、すべての無効なキャッシュタイプを更新します。



その結果、同じmagento / blankテーマを取得しますが、ロゴと画像サイズが異なります。

LESSを使用してスタイルを変更する

テーマを作成したら、ページの外観の変更を開始できます。 プロジェクトスタイルを編集するには、Magento 2のいくつかのタイプのLESS前処理のいずれかを使用する必要があります。

• サーバーコンパイルLESS;
• less.jsを使用したLESSのクライアントコンパイル。

クライアントのコンパイルは、すべての変更がすぐに表示されるため、開発モードでよく使用されます。スタイルファイルにアクセスするたびにブラウザーがコンパイルされます。 サーバーのコンパイル中に、pub / staticおよびvar / view_preprocessedフォルダーの内容を毎回手動で削除する必要があります。 これらのアクションは、Grunt taskrunnerを使用して最適化できます。 ファイルの変更を追跡し、指定されたフォルダーをクリアし、あまり自動的にコンパイルしません。

次のパスに沿って、admin部分でコンパイルタイプを変更できます：ストア→構成→詳細設定→開発者→フロントエンド開発ワークフロー→ワークフロー：



単純な例では、デフォルトでインストールされるサーバーコンパイルが使用されます。 サイトの背景色と、作成された_theme.lessファイルのフォントを設定します。

 @page__background-color: #484848; @text__color: #fff; @font-family__base: 'Arial', sans-serif; 

ディレクトリ/ pub / static / frontend / Singree / walkbeyond / en_USおよびvar / view_preprocessedのコンテンツを削除すると、サイトの外観に変化が見られます。

Magento 2：テーマでレイアウトを使用する

Magento 2では、特定のトピックのレイアウトを展開または再定義できます。 ベーステーマからページまたは一般レイアウトを完全にコピーしないようにするには、次の方法でテーマフォルダーに拡張レイアウトのみを指定する必要があります。

 <theme_dir> |__/<Namespace>_<Module> |__/layout |--<layout1>.xml |--<layout2>.xml 

たとえば、パス（atalog_module_dir）/view/frontend/layout/catalog_category_view.xmlにあるCatalogモジュールのcatalog_category_viewレイアウトを展開するには、パスにファイルを作成する必要があります：（theme_dir）/Magento_Catalog/layout/catalog_category_view.xml

次のようなブロック（たとえば、カテゴリの説明）を削除できます。

 <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="category.description" remove="true"/> </body> </page> 

レイアウトを拡張してすべてのカスタマイズタスクを実行できるわけではありません。 変更の数が非常に多い場合は、レイアウトを再定義することをお勧めします。 つまり、親テーマ（またはメインレイアウト）のファイルの代わりに、この新しいファイルが使用されます。

レイアウトの再定義を伴うレイアウトのカスタマイズの例：

• 親レイアウトの別のメソッドを抑制するメソッドを呼び出す（特に親レイアウトのメソッドのアクションをキャンセルするメソッドがある場合は、それを呼び出して、レイアウト全体をオーバーライドしないでください）。
• メソッドの引数の数を変更します。
• remove属性を使用してブロック/コンテナの削除をキャンセルします。
• ブロック/コンテナのXML属性の設定（htmlClass、htmlId、labelなどの一部の属性は、拡張レイアウトで変更できます）;
• ブロック引数の削除。
• モックファイルを空の記述子でオーバーライドして、すべての記述子を削除します。
• 記述子の包含の変更。

テーマモジュールフォルダーにオーバーライド/ベースフォルダーを作成することにより、基本的なベースレイアウトをオーバーライドできます。

 <theme_dir> |__/<Namespace_Module> |__/layout |__/override |__/base |--<layout1>.xml |--<layout2>.xml 

これらのファイルはレイアウトをオーバーライドします。

 <module_dir>/view/frontend/layout/<layout1>.xml 

 <module_dir>/view/frontend/layout/<layout2>.xml 

テーマモジュールフォルダーにオーバーライド/テーマフォルダーを作成して、親テーマのレイアウトをオーバーライドすることもできます。

 <theme_dir> |__/<Namespace_Module> |__/layout |__/override |__/theme |__/<Parent_Vendor> |__/<parent_theme> |--<layout1>.xml |--<layout2>.xml 

これらのファイルは、次の方法で配置されたレイアウトをオーバーライドします。

 <parent_theme_dir>/<Namespace>_<Module>/layout/<layout1>.xml <parent_theme_dir>/<Namespace>_<Module>/layout/<layout2>.xml 

テーマテンプレート

Magento 2テーマでは、レイアウトの場合のように、モジュールテンプレートを完全に再定義できます。 モジュールテンプレート（module_dir）/ view / frontend / templates /（path_to_templates）をオーバーライドするには、テーマモジュールフォルダー（theme_dir）/（Namespace）_（Module）/ templates /（path_to_templates）にテンプレートフォルダーを作成する必要があります。

たとえば、Singree / walkbeyond / Magento_Checkout / templates / cart / minicart.htmlミニバスケットファイルに「商品の数量」を出力するテキストメッセージを追加できます。

 <div data-block="minicart" class="minicart-wrapper"> <a class="action showcart" href="<?php /* @escapeNotVerified */ echo $block->getShoppingCartUrl(); ?>" data-bind="scope: 'minicart_content'"> <span class="cart-title hidden-xs"><?php /* @escapeNotVerified */ echo __('Shopping cart'); ?></span> <span class="counter total-qty empty" data-bind="css: { empty: cart().summary_count == 0 }, blockLoader: isLoading"> <?php /* @escapeNotVerified */ echo __('Products count:'); ?> <span class="counter-number"><!-- ko text: cart().summary_count --><!-- /ko --></span> <span class="counter-label"> <!-- ko if: cart().summary_count --> <!-- ko text: cart().summary_count --><!-- /ko --> <!-- ko i18n: 'items' --><!-- /ko --> <!-- /ko --> </span> </span> </a> <?php if ($block->getIsNeedToDisplaySideBar()): ?> <div class="block block-minicart empty" data-role="dropdownDialog" data-mage-init='{"dropdownDialog":{ "appendTo":"[data-block=minicart]", "triggerTarget":".showcart", "timeout": "2000", "closeOnMouseLeave": false, "closeOnEscape": true, "triggerClass":"active", "parentClass":"active", "buttons":[]}}'> <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'"> <!-- ko template: getTemplate() --><!-- /ko --> </div> </div> <?php endif ?> <script> window.checkout = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>; </script> <script type="text/x-magento-init"> { "[data-block='minicart']": { "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?> }, "*": { "Magento_Ui/js/block-loader": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" } } </script> </div> 

トピックのローカリゼーション

トピックの翻訳は、翻訳辞書を使用して実行されます。 翻訳された辞書は、次の場所で検索されます。

• <parent_theme_dir> / i18n /（すべての親テーマで視聴されています）
• <current_theme_dir> / i18n /

i18nフォルダーは、各モジュールに配置することも、アプリフォルダーにグローバルに配置することもできます。 テーマフォルダーを含む辞書は、翻訳された文字列を見つける際に優先順位が高くなります。

テーマフォルダー内の翻訳を含むファイルを生成するには、 i18nツールを使用できます 。

このコマンドは、magento 2のルートディレクトリで実行できます。

 php bin/magento i18n:collect-phrases --output="app/design/frontend/Singree/walkbeyond/i18n/en_US.csv" app/design/frontend/Singree/walkbeyond 

彼女は辞書のすべての行を収集します。 次に、辞書ファイル：app / design / frontend / Singree / walkbeyond / i18n / en_US.csv。 任意のテーブルエディタで開き、右側の列の行の翻訳を変更できます。 トピックを適用すると、メインの行ではなく翻訳された行が表示されます。

トピックを削除

テーマがComposerパッケージの場合、次のコマンドを使用して（ルートディレクトリから）削除できます。

 php bin/magento theme:uninstall [-c|--clear-static-content] {theme path} ... {theme path} 

{theme path}-名前領域（フロントエンド）から始まるテーマへの相対パス。 私たちの場合：フロントエンド/シングリー/ウォークビヨンド。

--clear-static-content-静的ファイル（自動生成を必要としない：css、js、images）を削除します。

テーマがomposerパッケージではない場合、削除するには次の手順を実行する必要があります。

• テーマフォルダーアプリ/デザイン/フロントエンド/（ベンダー）を削除します。
• var / view_preprocessedの内容を削除します。
• pub / static / frontend /の内容を削除します;
• Magento 2データベースを開き、テーマテーブルを見つけて、テーマ名の行を削除します。
• php bin / magento cache：flushコマンドでキャッシュを削除します。

おわりに

この記事では、トピックの主要コンポーネントであるディレクトリとテーマファイルの構造、プレビューイメージをゼロから作成する方法について検討しました。 スタイル、レイアウト、テーマテンプレートを再定義するプロセスも考慮されました。サイトは翻訳辞書を使用して翻訳されました。 次に、トピックのコンポーネントの表を検討する必要があります。



この構造の大部分については、記事で説明しました。 また、Javascriptクライアントライブラリ（require.jsなど）を操作するためのルールを説明するか、ブロックおよびレイアウトコンテナーを操作することを詳細に説明する価値がありますが、記事のサイズが大きくなりすぎて、読むのが完全に不便になります。

ご清聴ありがとうございました！