Magento 2のテーマ-最初から始める


27

皆さんの中には、Magento 1のテーマに関する最初からテーマに関するトピックを読んでいる人もいるかもしれません。テーマ-最初から始める

Magento 2のテーマをゼロから開発するためのベストプラクティスは何でしょうか?

  • ネイティブlumaまたはblankテーマを使用してビルドしますか?または他に何か?
  • テーマの開発に役立つ拡張機能を使用していますか?
  • テーマをゼロから開発する場合、どの手順に従いますか?

私は私の答えにいくつかのリンクを提供していますので、それを読んでください。Magento2.0のフロントエンドアーキテクチャと開発について知っているでしょう。
アシームパトロ

Magento docsdevdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/…の手順に従って、フロントエンドのテーマを作成します。
リシャブRkライ

回答:


45

TL:DR

ネイティブのルマまたは空白のテーマを使用してビルドしていますか?または他に何か?

これはあなた次第です。親テーマの宣言はオプションです。親を宣言しない場合でも、XMLおよびテンプレートファイルは提供するがスタイルは提供しないモジュール(Magento_Catalogなど)にフォールバックします。

テーマの開発に役立つ拡張機能を使用していますか?

私はSCSSとGULPでの作業を好むのでFrontoolsSCSS blankテーマを使用します。デフォルトのGrunt / LESS worflowを扱う際の多くのストレスを取り除きます。

テーマをゼロから開発する場合、どの手順に従いますか?

  1. テーマを宣言する
  2. 親テーマCSSを削除します(必要な場合)
  3. 独自のCSS / LESS / SCSSを追加します

私の個人的な意見では、自分の「空白のテーマ」を最初から作成するのが最善だと思います。これは、これを必要なものにぴったり合わせることができるからです。

これは、最初からテーマを作成する方法です。NewStore/ defaultをベンダーとテーマ名として使用しました。

さらに詳細な答えを...

テーマを作成します(公式ドキュメントに従って)

公式ドキュメントに従ってテーマを作成します

オプションで親を宣言する

中でapp/design/frontend/NewStore/default/theme.xmlあなたが親のテーマを宣言するかどうかの選択肢があり、この例のために私は(ライン3を省いている<parent>Vendor/theme</parent>)ので、親のテーマはありません。つまり、すべてのテンプレート/レイアウトファイルは、BlankやLumaではなく、モジュール自体から取得され、空のテーマに追加されるため、テーマのスタイリングはありません。

私のtheme.xmlは次のようになります。

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

スタイリングを削除し(親テーマを設定している場合)、独自のCSSを追加します

空白またはLumaを親として設定した場合、CSSファイルが読み込まれないようにする必要があります。これを行うにはapp/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xml、次の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">
    <head>

        <!-- Remove blank/luma theme styling if you declared a parent -->
        <remove src="css/styles-m.css" />
        <remove src="css/styles-l.css" />
        <remove src="css/print.css" />

        <!-- Add your own CSS files -->
        <css src="css/styles.css" />
    </head>
</page>

これを削除しstyles-m.cssstyles-l.cssそしてprint.css空白のテーマが追加しました。また、styles.cssを独自のCSSのベースとして追加します。

親を指定しなかった場合<remove />は、上記のコードの3つのタグを削除できます。

独自のCSSを追加する

これでテーマをスタイル設定できます。私はLESSではなくSassのファンなので、このファイルを追加しました- app/design/frontend/NewStore/default/web/css/styles.scss

これが機能することを証明するために、ここで背景色を変更しました。理想的には、このファイルは他のSass / Lessファイルのインポートにのみ使用します。

結果

私が今やったことの結果は、スタイリングのないテーマです(私の美しい緑の背景は別として)。Magentoの(ときどき扱いが難しい)スタイリングを使わずにテーマをスタイルできます。

ここに画像の説明を入力してください

ヒント

  • SCSSでの作業を希望し、テーマを最初から作成する時間がない場合は、Snowdog AppsのFrontoolsSCSS空白テーマの両方を使用することをお勧めします。

  • Magentoのフロントエンドコードを操作する上で最もイライラする点は、それらのスタイルがどの程度具体的であるかということです。これを避けるために、独自のスタイルを記述するときにBEM命名規則を使用することをお勧めします。

  • また、有用なコメントも重要です。Luma/ Blankを使用していた開発者がゼロから構築されたテーマに取り組んだ場合、予想とはまったく異なる動作をする可能性があります。


で定義された親テーマなしで、あなたの指示を使用して、独自の空のテーマを作成しましたtheme.xml。ただし、フロントエンドにはあらゆる種類のスタイルが表示されます。Magentoのインストールはdeveloperモードであり、すべてのキャッシュがクリアされました。これらすべてのスタイルがどこから来たのかわかりません-アイデアはありますか?
fritzmg

拡張機能/プラグインがインストールされていますか?それがインストールされています場合にも、このようなとして、アウトURLの後に疑問符とランダムな文字列を追加することを支配する、ワニスかもしれない?=123
ベン・クルック

うん、ワニス(または同様の)を除外しました。拡張機能やプラグインはインストールされていません。
fritzmg

完全なテーマスタイリングですか、それとも一部ですか?サイトとコードベースを見ずに言うのは難しいです。おそらく新しい質問をして、そこに詳細を投稿してください。あなたが私にタグを付けると、私はそれを解決できるかどうかを確認します。
ベン・クルック

私が見る限り、それは完全なテーマです。さらに、自分のテーマから含まれているCSSファイル。ええ、おそらくこのための新しい質問を作成する方が良いでしょう:)
fritzmg

8

Magento 2.0でテーマを開始するためのチュートリアルがたくさんあります。magento 2.0でのテーマ開発について十分な知識を得ることができるビデオリンクと通常のリンクを提供しています。 ビデオはここをクリック

このリンクからも参照してください

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

http://blog.magestore.com/how-to-create-custom-theme-on-magento-2-part-1/

このリンクから、magento 2.0のフロントエンドアーキテクチャについて学習します。

http://inchoo.net/magento-2/frontend-theme-architecture/

また、これらの2つのリンクを確認してください

http://www.webmull.com/magento-2-create-new-custom-theme/

http://www.slideshare.net/Magestorecom/how-to-create-theme-in-magento-2-part-1


5

私は空白から継承しますが、CSS構造がはるかに複雑ではない、より軽量なベーステーマを作成しようとする方向に迅速に移行しています。

2015年にMagentoが出てきて、独自のマーケティングおよびデモの目的で未発表の変更を行う権利を留保しているため、lumaからの継承を推奨ていないことは注目に値します。彼らは後に、継承を許可することが彼らの目標だと言っ、その声明を修正しました。


3

テーマの開発を開始する最良の方法は、lumaまたはから継承することから始めますblank。その理由は、それらがレスポンシブになるように構築されているためです(つまり、マルチ解像度に対応しています)。また、さまざまなテンプレートファイルとJS / CSS定義の作成に必要な作業量も削減されます。必要なのは、自分でカスタマイズしたい部分だけをオーバーライドすることだけです。テーマの開発方法に関するさまざまな手順については、以下のリンクをご覧ください。

Magentoのドキュメントリンク:


テンプレートファイルは空白/ルミナではなくモジュールから取得されるようになったため、スタイリング/変更が必要ない場合は、効果的にバイパスできます。たとえば、app / design / frontend / Magento / blank / Magento_Catalogを見ると、1つの要素を移動してスタイルを追加するだけで、テンプレートはapp / code / Magento / Catalog / view / frontend / templatesから取得され、 app / code / Magento / Catalog / view / base / templates
Ben Crook
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.