Magento2でテーマを作成するためのガイド

公開: 2015-11-20

こんにちは！ 多くのアップデートや変更が加えられたMagento2.0に興味がありますか？ 本日は、Magento2でテーマを作成するためのガイドに関するブログ投稿を共有したいと思います。常に毎日練習して更新してください。

最新のアップデート： Claue Multipurpose Magento 2テーマのバージョン2.0をリリースしました。これには、多数のパフォーマンスの向上と独自の機能が含まれています。 このテーマを今すぐチェックしてください：Claue Magento Theme 2. 0

claue2_edited（1）

ライブデモ

Claue –クリーンで最小限のMagento 2＆1テーマは、40以上のホームページレイアウトと、ショップ、ブログ、ポートフォリオ、ストアロケーターレイアウト、およびその他の便利なページのオプションを備えた、モダンでクリーンなeコマースストアの優れたテンプレートです。 Claueバージョン2.0には、次のような多数の専用機能が付属しています。

  • ルマのテーマに基づいています。
  • Magentoテーマのすべての基準を満たす
  • 大幅なパフォーマンスの向上
  • ほとんどのサードパーティの拡張機能と互換性があります。
  • Magento2.4.xと完全に互換性があります

この2番目の高度なバージョンは、以前のバージョンとは完全に異なります。 したがって、Claueバージョン1を使用していて、Claueバージョン2に更新する場合は、古いバージョンから更新するのではなく、新しいWebサイトを再構築することしかできません。 それでは、メイントピックに戻りましょう。

Magento 2ではテーマシステムが少し変更されていますが、類似点があります。 このトピックでは、テーマを構成するファイルを作成する方法、テーマにロゴを追加する方法、および画像のサイズを設定する方法について説明します。

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

テーマのディレクトリを作成するには：

  1. <your Magento install dir>/app/design/frontendに移動します。
  2. ベンダー名に応じた名前の新しいディレクトリを作成します： /app/design/frontend/<Vendor> 。
  3. ベンダーディレクトリの下に、テーマに応じた名前のディレクトリを作成します。
 アプリ/デザイン/フロントエンド/
├──<ベンダー> /
││├──... <テーマ> /
│││├──..。
│││├──..。

フォルダ名は通常、テーマのコードで使用されている名前と一致します。ベンダーが適切と判断した場合、任意の英数字のセットを使用できます。 この規則は単なる推奨事項であるため、このディレクトリに別の方法で名前を付けることを妨げるものは何もありません。

テーマを宣言する

テーマのディレクトリを作成したら、少なくともテーマ名と親テーマ名（テーマが1つを継承している場合）を含むtheme.xmlを作成する必要があります。 オプションで、テーマプレビュー画像の保存場所を指定できます。

  1. 既存のtheme.xmlからテーマディレクトリapp/design/frontend/<Vendor>/<theme>に追加またはコピーします
  2. 次の例を使用して構成します。
 <theme xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:Config/etc/theme.xsd" > <title> New theme </title> <!-- your theme's name --> <parent> Magento/blank </parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image> media/preview.jpg </preview_image> <!-- the path to your theme's preview image --> </media> </theme>

テーマをComposerパッケージにする（オプション）

gentoのデフォルトのテーマはComposerパッケージとして配布されます。

テーマをパッケージとして配布するには、 composer.jsonファイルをテーマディレクトリに追加し、パッケージサーバーにパッケージを登録します。 デフォルトのパブリックパッケージサーバーはhttps://packagist.org/です。

composer.jsonは、テーマの依存関係情報を提供します。

テーマcomposer.jsonの例：

 { "name" : "magento/theme-frontend-luma" , "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" ] } }

Composer統合の詳細については、Composer統合のMagentoシステムを参照してください。

Registration.phpを追加します

テーマをシステムに登録するには、テーマディレクトリに次の内容のregistration.phpファイルを追加します。

 <?php /** * Copyright 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar :: register ( \Magento\Framework\Component\ComponentRegistrar :: THEME , 'frontend/<Vendor>/<theme>' , __DIR__ );

<Vendor>はベンダー名ですが、 <theme>はテーマコードです。

説明については、MagentoLumaテーマのregistration.phpファイルを参照してください。

イメージを構成する

ストアフロントで使用される製品の画像サイズおよびその他のプロパティは、 view.xml構成ファイルで構成されます。 テーマには必須ですが、親テーマに存在する場合はオプションです。

テーマの製品画像サイズが親テーマのサイズと異なる場合、またはテーマがどのテーマからも継承されていない場合は、次の手順を使用してview.xmlを追加します。

  1. Magentoインストールディレクトリにディレクトリとファイルを作成する権限を持つユーザーとしてMagentoサーバーにログインします。 （通常、これはMagentoファイルシステムの所有者です。）
  2. テーマフォルダにetcディレクトリを作成します
  3. view.xmlを既存のテーマのetcディレクトリから（たとえば、Blankテーマから）テーマのetcディレクトリにコピーします。
  4. view.xmlですべてのストアフロント商品の画像サイズを構成します。 たとえば、250 x 250ピクセルのサイズを指定することで、カテゴリグリッドビューの製品画像を正方形にすることができます。対応する構成は次のようになります。
 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

view.xmlでの画像構成の詳細については、テーマトピックの画像プロパティの構成を参照してください。

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

テーマには、スタイル、フォント、JavaScript、画像など、いくつかの種類の静的ファイルが含まれている可能性があります。 各タイプは、テーマフォルダ内のwebの個別のサブディレクトリに保存する必要があります。

 app / design / <area> / <Vendor> / <theme> /
├──web/
│├──css/
││├──ソース/ 
│├──fonts/
│├──画像/
│├──js/

.../<theme>/web/imagesに、一般的なテーマ関連の静的ファイルを保存します。 たとえば、テーマのロゴは...<theme>/web/imagesに保存されます。 テーマには、 .../<theme>/<Namespace_Module>/web/cssなどの対応するサブディレクトリに保存されているモジュール固有のファイルも含まれている可能性があります。 モジュール固有のテーマファイルの管理については、このガイドの次のセクションで説明します。

今あなたのテーマディレクトリ構造

この時点で、テーマファイルの構造は次のようになります。

 app / design / frontend / <Vendor> /
├──<テーマ> /
│├──etc/
││├──view.xml
│├──web/
││├──画像
│││├──logo.svg
│├──theme.xml
│├──composer.json

テーマのロゴ

Magentoアプリケーションでは、ロゴ画像のデフォルトの形式と名前はlogo.svgです。 <theme_dir>/web/imagesディレクトリである従来の場所にlogo.svg画像を配置すると、テーマロゴとして自動的に認識されます。 テーマが適用されると、ストアページのヘッダーに表示されます。

カスタムテーマでは、異なる名前と形式のロゴファイルを使用できますが、宣言する必要がある場合があります。

宣言の必要性は、テーマに親テーマとそのロゴ画像があるかどうかによって異なります。 次の場合が考えられます。

  • テーマに親テーマがありません：
    • ロゴ画像の名前と形式がデフォルトのlogo.svgの場合、それを宣言する必要はありません。
    • ロゴ画像の名前または形式がデフォルトでない場合は、レイアウトで宣言する必要があります。
  • テーマには親テーマがあります。
    • テーマのロゴ画像が親のテーマのロゴと同じ名前と形式である場合、それを宣言する必要はありません。
    • ロゴ画像の名前や形式が異なる場合は、レイアウトで宣言してください。

テーマロゴの宣言

テーマのロゴを宣言するには、拡張<theme_dir>/Magento_Theme/layout/default.xmlレイアウトを追加します。

たとえば、ロゴファイルのサイズがmy_logo.pngのmy_logo.pngの場合、次のように宣言する必要があります。

 <page xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:View/Layout/etc/page_configuration.xsd" > <body> <referenceBlock name= "logo" > <arguments> <argument name= "logo_file" xsi:type= "string" > images/my_logo.png </argument> <argument name= "logo_img_width" xsi:type= "number" > 300 </argument> <argument name= "logo_img_height" xsi:type= "number" > 300 </argument> </arguments> </referenceBlock> </body> </page>

ロゴサイズの宣言はオプションです。

Magesolutionブログにアクセスして、Magento 2の完全なチュートリアルを読み、Magento2に関する最新のチュートリアルを更新してください。

ソース：magento.com