皆さんの中には、Magento 1のテーマに関する最初からテーマに関するトピックを読んでいる人もいるかもしれません。テーマ-最初から始める
Magento 2のテーマをゼロから開発するためのベストプラクティスは何でしょうか?
- ネイティブ
luma
またはblank
テーマを使用してビルドしますか?または他に何か? - テーマの開発に役立つ拡張機能を使用していますか?
- テーマをゼロから開発する場合、どの手順に従いますか?
皆さんの中には、Magento 1のテーマに関する最初からテーマに関するトピックを読んでいる人もいるかもしれません。テーマ-最初から始める
Magento 2のテーマをゼロから開発するためのベストプラクティスは何でしょうか?
luma
またはblank
テーマを使用してビルドしますか?または他に何か?回答:
ネイティブのルマまたは空白のテーマを使用してビルドしていますか?または他に何か?
これはあなた次第です。親テーマの宣言はオプションです。親を宣言しない場合でも、XMLおよびテンプレートファイルは提供するがスタイルは提供しないモジュール(Magento_Catalogなど)にフォールバックします。
テーマの開発に役立つ拡張機能を使用していますか?
私はSCSSとGULPでの作業を好むので、FrontoolsとSCSS blankテーマを使用します。デフォルトのGrunt / LESS worflowを扱う際の多くのストレスを取り除きます。
テーマをゼロから開発する場合、どの手順に従いますか?
私の個人的な意見では、自分の「空白のテーマ」を最初から作成するのが最善だと思います。これは、これを必要なものにぴったり合わせることができるからです。
これは、最初からテーマを作成する方法です。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>
空白または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.css
、styles-l.css
そしてprint.css
空白のテーマが追加しました。また、styles.cssを独自のCSSのベースとして追加します。
親を指定しなかった場合<remove />
は、上記のコードの3つのタグを削除できます。
これでテーマをスタイル設定できます。私はLESSではなくSassのファンなので、このファイルを追加しました- app/design/frontend/NewStore/default/web/css/styles.scss
これが機能することを証明するために、ここで背景色を変更しました。理想的には、このファイルは他のSass / Lessファイルのインポートにのみ使用します。
私が今やったことの結果は、スタイリングのないテーマです(私の美しい緑の背景は別として)。Magentoの(ときどき扱いが難しい)スタイリングを使わずにテーマをスタイルできます。
SCSSでの作業を希望し、テーマを最初から作成する時間がない場合は、Snowdog AppsのFrontoolsとSCSS空白テーマの両方を使用することをお勧めします。
Magentoのフロントエンドコードを操作する上で最もイライラする点は、それらのスタイルがどの程度具体的であるかということです。これを避けるために、独自のスタイルを記述するときにBEM命名規則を使用することをお勧めします。
また、有用なコメントも重要です。Luma/ Blankを使用していた開発者がゼロから構築されたテーマに取り組んだ場合、予想とはまったく異なる動作をする可能性があります。
theme.xml
。ただし、フロントエンドにはあらゆる種類のスタイルが表示されます。Magentoのインストールはdeveloper
モードであり、すべてのキャッシュがクリアされました。これらすべてのスタイルがどこから来たのかわかりません-アイデアはありますか?
?=123
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
私は空白から継承しますが、CSS構造がはるかに複雑ではない、より軽量なベーステーマを作成しようとする方向に迅速に移行しています。
2015年にMagentoが出てきて、独自のマーケティングおよびデモの目的で未発表の変更を行う権利を留保しているため、lumaからの継承を推奨していないことは注目に値します。彼らは後に、継承を許可することが彼らの目標だと言って、その声明を修正しました。
テーマの開発を開始する最良の方法は、luma
またはから継承することから始めますblank
。その理由は、それらがレスポンシブになるように構築されているためです(つまり、マルチ解像度に対応しています)。また、さまざまなテンプレートファイルとJS / CSS定義の作成に必要な作業量も削減されます。必要なのは、自分でカスタマイズしたい部分だけをオーバーライドすることだけです。テーマの開発方法に関するさまざまな手順については、以下のリンクをご覧ください。
Magentoのドキュメントリンク: