Руководство по созданию темы в Magento 2

Привет! Вас интересует Magento 2.0 с множеством обновлений и изменений? Сегодня мы хотели бы поделиться с вами сообщением в блоге о руководстве по созданию темы в Magento 2. Всегда будьте в курсе, практикуясь каждый день.

Последнее обновление: мы только что выпустили версию 2.0 многоцелевой темы Claue Magento 2 с множеством улучшений производительности и эксклюзивных функций. Проверьте эту тему сейчас: Claue Magento Theme 2. 0

Живая демонстрация

Claue — Clean, Minimal Magento 2&1 Theme — отличный шаблон для современного и чистого магазина электронной коммерции с более чем 40 макетами домашней страницы и множеством вариантов для магазина, блога, портфолио, макетов локатора магазинов и других полезных страниц. Claue версии 2.0 поставляется с множеством эксклюзивных функций, включая:

• На основе темы Luma.
• Соответствует всем стандартам темы Magento
• Значительное улучшение производительности
• Совместим с большинством сторонних расширений.
• Полностью совместим с Magento 2.4.x

Эта вторая расширенная версия полностью отличается от предыдущей. Таким образом, если вы используете Claue версии 1 и хотите обновиться до Claue версии 2, вы можете только пересобрать новый веб-сайт, а не обновлять старую версию. Теперь вернемся к основной теме.

Система тем немного изменилась в Magento 2, но есть сходства. В этом разделе обсуждается, как создать файлы, из которых состоит тема, как добавить логотип в тему и как изменить размер изображений.

Создайте каталог темы

Чтобы создать каталог для вашей темы:

1. Перейдите в <your Magento install dir>/app/design/frontend .
2. Создайте новый каталог с именем в соответствии с именем вашего поставщика: /app/design/frontend/<Vendor> .
3. В каталоге поставщика создайте каталог с именем в соответствии с вашей темой.

 приложение/дизайн/интерфейс/
├── <Продавец>/
│ │ ├──...<тема>/
│ │ │ ├── ...
│ │ │ ├── ...

Имя папки условно соответствует именованию, используемому в коде темы: допустим любой буквенно-цифровой набор символов, какой сочтет нужным вендор. Это соглашение является просто рекомендацией, поэтому ничто не мешает назвать этот каталог по-другому.

Объявите свою тему

После создания каталога для вашей темы вы должны создать 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 в систему Magento можно найти в разделе Интеграция с Composer.

Добавить регистрацию.php

Чтобы 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> — код темы.

Для иллюстрации см. файл Registration.php темы Magento Luma.

Настроить изображения

Размеры изображений товаров и другие свойства, используемые на витрине, настраиваются в файле конфигурации view.xml . Он обязателен для темы, но необязателен, если существует в родительской теме.

Если размеры изображений продукта в вашей теме отличаются от размеров родительской темы или если ваша тема не наследуется ни от какой темы, добавьте view.xml , выполнив следующие действия:

1. Войдите на свой сервер Magento как пользователь с разрешениями на создание каталогов и файлов в каталоге установки Magento. (Как правило, это владелец файловой системы Magento.)
2. Создайте каталог etc в папке вашей темы
3. Скопируйте view.xml из каталога etc существующей темы (например, из пустой темы) в каталог 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/<область>/<поставщик>/<тема>/
├── веб/
│ ├── css/
│ │ ├── источник/ 
│ ├── шрифты/
│ ├── изображения/
│ ├── js/

Структура каталогов вашей темы сейчас

На данный момент файловая структура вашей темы выглядит следующим образом:

 приложение/дизайн/интерфейс/<Поставщик>/
├── <тема>/
│ ├── и т. д./
│ │ ├── view.xml
│ ├── веб/
│ │ ├── изображения
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── composer.json

Логотип темы

В приложении Magento формат и имя изображения логотипа по умолчанию — logo.svg . Когда вы помещаете изображение logo.svg в обычное место, которым является <theme_dir>/web/images , оно автоматически распознается как логотип темы. Он отображается в заголовке страницы вашего магазина после применения темы.

В своей пользовательской теме вы можете использовать файл логотипа с другим именем и форматом, но вам может потребоваться объявить его.

Необходимость объявления зависит от того, есть ли у вашей темы родительская тема и ее логотип. Возможны следующие случаи:

• У вашей темы нет родительской темы:
  • если имя и формат вашего изображения логотипа по умолчанию, logo.svg , нет необходимости объявлять его;
  • если имя или формат изображения вашего логотипа не установлены по умолчанию, вам необходимо объявить их в макете.
• У вашей темы есть родительская тема:
  • если изображение логотипа вашей темы имеет то же имя и формат, что и логотип родительской темы, объявлять его не нужно;
  • если ваше изображение логотипа имеет другое имя или формат, объявите его в макете.

Объявление логотипа темы

Чтобы объявить логотип темы, добавьте расширяющий <theme_dir>/Magento_Theme/layout/default.xml .

Например, если ваш файл логотипа имеет размер my_logo.png 300x300px, вам нужно объявить его следующим образом:

 <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 и обновить последние руководства по Magento 2.

Источник: magento.com