While there is a multitude of Magento 2 themes available on the market, you might still want to create custom theme for your store. Why? Templates, layouts, graphics and styles offered in a theme don't always satisfy your business requirements. Besides, the default Magento 2 themes Luma and Blank won't suffice if you're запуск веб-сайту електронної комерції.
Отже, щоб створити власну тему Magento 2, яка передає «відчуття» вашого бренду, вам потрібно вдатися до індивідуальної розробки.
У цьому посібнику ми проведемо вас через усі кроки, які потрібно зробити для створення теми для Magento, та розглянемо основи перевизначення базових макетів та макетів теми.
Готові почати?
Якщо ви шукаєте готову до використання тему Magento 2 з оптимізованою швидкістю, у нас вже є така — Оптимізована тема Magento 2.
Перед розробкою власної теми в Magento
Перше, що слід пам’ятати перед початком розробки теми в Magento, це те, що вам не слід змінювати або редагувати файли тем Luma та Blank за замовчуванням. Якщо ви налаштовуєте файли тем за замовчуванням, оновлення до останньої версії Magento може перевизначити ваші зміни.
Additionally, you should learn more about the Magento theme directory. When you встановити тему Magento 2 via composer, theme directories are located under vendor/vendorName/themeName.
Теми з пакетами, розширені каталоги тем за замовчуванням або користувацькі теми, реалізовані розробниками фронтенду, розташовані в розділі app/design/frontend/vendorName.
А ось структура папок, якої вам слід дотримуватися:
app/design/frontend/vendorName/ ├── themeName/ │ ├── etc/ │ │ ├── view.xml │ ├── web/ │ │ ├── images │ │ │ ├── logo.svg │ ├── registration.php │ ├── theme.xml │ ├── composer.json
Кроки для створення користувацької теми Magento 2
У цьому посібнику ми використовуватимемо Magefan як назву постачальника теми та custom_themeяк назву теми.
1. Створення каталогу теми
Щоб створити каталог теми, перейдіть до кореневого каталогу Magento 2 /app/design/frontend та створіть там новий каталог теми.
наприклад /app/design/frontend/Magefan
Потім створіть каталог з назвою теми.
наприклад /app/design/frontend/Magefan/custom_theme
2. Оголосіть свою тему
Оголошення вашої власної теми означає повідомлення Magento про її існування. Вона містить основну інформацію про вашу тему.
Вам потрібно створити файл theme.xml у каталозі вашої теми /app/design/frontend/Magefan/custom_theme/theme.xml та використати наступний код:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Magefan custom_theme</title>
<parent>Magento/Blank</parent>
<media>
<preview_image>media/custom-theme-image.jpg</preview_image>
</media>
</theme>
тут:
- <title> використовується для визначення назви вашої теми
- <parent> використовується для визначення батьківської теми, якщо така є (у нашому випадку це пуста тема)
- <preview_image> оголошує зображення теми, яке відображається на сторінці теми в адміністративній панелі для попереднього перегляду. (розташування: /app/design/frontend/Magefan/custom_theme/media/custom-theme-image.jpg)
Примітка: якщо розташування зображення теми неправильне, ви отримаєте помилку під час спроби відвідати сторінку теми через адміністратора.
3. Додайте пакети композитора тем
Вам потрібно створити пакет композитора, щоб розповсюджувати вашу власну тему Magento 2 як пакет та зареєструвати його на сервері упаковки. Для цього створіть файл composer.json у каталозі вашої теми app/design/frontend/Magefan/custom_theme/composer.json.
Використайте наступний код:
{
"name": "magefan/custom-theme",
"description": "Magefan custom_theme",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0",
"magefan/custom-theme": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
4. Додайте файл registration.php
Файл registration.php потрібен для реєстрації вашої теми в Magento. Створіть registration.php у каталозі вашої теми app/design/frontend/Magefan/custom_theme/registration.phpта додайте наступний код:
<<?php /** * Copyright © Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Magefan/custom_theme', __DIR__ );
5. Налаштуйте власну тему
Після додавання теми до файлової системи ви зможете активувати її у своєму магазині. Перейдіть до Контент > Конфігурація дизайну та Відредагуйте поруч із темою, до якої ви хочете застосувати власну тему, та переконайтеся, що ви бачите свою власну тему у списку.
Після цього перейдіть до Магазини > Конфігурація > Дизайн та виберіть свою тему для Теми дизайну. Не забудьте Зберегти налаштування.
6. Налаштуйте властивості зображення продукту
Якщо розмір зображень продукту у вашій власній темі Magento відрізняється від Щоб змінити розмір зображень у батьківській темі, вам потрібно створити файл конфігурації view.xml . Цей файл налаштовує розмір усіх зображень товарів на фронтенді. Він необов'язковий, якщо він вже існує у вашій батьківській темі.
Щоб додати файл view.xml , вам потрібно створити каталог тощо у каталозі вашої теми app/design/frontend/Magefan/custom_theme/тощо. Потім скопіюйте файл view.xml з каталогу тощо вашої батьківської теми до вашої власної теми та змініть властивості зображення наступним чином:
<image id="category_page_grid" type="small_image">
<width>450</width>
<height>450</height>
</image>
Тут ми визначаємо, що хочемо, щоб зображення сітки каталогу були 450x450.
7. Створіть каталоги для статичних файлів теми
Ваша власна тема Magento 2, найімовірніше, міститиме різні типи статичних файлів, такі як шрифти, стилі, зображення, JS тощо. Кожен тип статичного файлу слід зберігати у веб-каталозі Каталог у папці вашої теми з такою структурою:
app/design//Magefan/custom_theme/ ├── web/ │ ├── css/ │ │ ├── source/ │ ├── fonts/ │ ├── images/ │ ├── js/
Вам потрібно зберігати загальні статичні файли, пов'язані з темою, такі як логотип теми, у app/design/frontend/Magefan/custom_theme/web/images. Якщо ваша тема містить файли, специфічні для модулів, вони зберігаються в підкаталогах app/design/frontend/Magefan/custom_theme/module/web/css.
Порада професіонала: якщо ви хочете оновити будь-які файли в папці web теми, вам потрібно очистити каталоги pub/static та var/view_preprocessed та перезавантажити сторінки. В іншому випадку стара версія файлів відображатиметься на фронтенді.
8. Оголосіть логотип теми
Формат теми та назва зображення логотипу за замовчуванням - logo.svg. Відповідно, коли ви поміщаєте цей файл у app/design/frontend/Magefan/custom_theme/web/images він буде автоматично розпізнаний як логотип теми та відображатиметься в заголовку магазину після застосування теми.
Щоб використовувати власний логотип, спочатку його потрібно оголосити. Однак це залежить від того, чи має ваша тема батьківську тему та чи використовує її зображення логотипу.
З огляду на це, вам не потрібно оголошувати логотип теми , якщо у вас є батьківська тема чи ні, але використовуйте стандартну угоду про іменування — logo.svg.
Потім, якщо ви не використовуєте стандартну угоду про іменування (незалежно від того, чи використовуєте ви батьківську тему чи ні), вам потрібно оголосити його в макеті. Для цього вам потрібно створити каталог Magento_Theme/layout та створити файл default.xml у папці вашої теми /app/design/frontend/Magefan/custom_theme/. Magento_Theme/layout/default.xml.
<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/m2-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">300</argument>
<argument name="logo_img_height" xsi:type="number">300</argument>
<argument name="logo_alt" xsi:type="string">Logo name</argument>
</arguments>
</referenceBlock>
</body>
</page>
Як розширити файли теми?
Якщо ви хочете внести зміни до файлів вашої теми, вам не потрібно копіювати макет сторінки або код конфігурації сторінки, щоб додати модифікації. Magento дозволяє вам просто створити розширюваний файл макета з усіма змінами, які вам потрібно додати. Щоб додати розширюваний файл:
<theme_dir>
|__/<Namespace>_<Module>
|__/layout
|--<layout1>.xml
|--<layout2>.xml
Як перезаписати макети теми в Magento?
Якщо ви хочете перезаписати будь-який макет теми, вам потрібно створити файл макета з тим самим ім'ям і помістити його в /app/design/frontend/Magefan/custom_theme/Magento_Theme/layout/default.xml.
Це перезапише такі макети:
app/design/frontend/Magefan/custom_theme/Magento_Theme/layout/default.xml
Примітка: якщо ви хочете перезаписати файли макета сторінки, не забудьте використовувати page_layout замість layout.
Як створити дочірню тему Magento?
Створення дочірньої теми дозволяє вам додати нову логіку та дизайн без втрати будь-яких змін після оновлення або переривання батьківської теми. Отже, по суті, дочірня тема – це копія оригінальної батьківської теми, яка успадковує її властивості. Це дозволяє вам мінімізувати завдання розробки, якщо ви хочете налаштувати тему.
Після того, як ви навчитеся створювати власну тему в Magento 2, вам також може знадобитися навчитися створювати дочірню тему.
1. Створіть папку дочірньої теми з назвою parent-theme-name_child та додайте її до наступного каталогу:
app/design/frontend/Magefan/custom_theme_child
2. Створіть файл theme.xml у папці дочірньої теми Magento — app/design/frontend/Magefan/custom_theme_child/theme.xml , щоб визначити батьківську тему, та додайте до нього наступний код:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Magefan Child</title>
<parent>Magefan/custom_theme</parent>
<media>
<preview_image>media/preview.png</preview_image>
</media>
</theme>
3. Створіть файл registration.php у папці дочірньої теми app/design/frontend/Magefan/custom_theme_child/registration.php , щоб зареєструвати дочірню тему. Додайте наступний код:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/Magefan/custom_theme_child',
__DIR__
);
4. Створіть файл composer.json з наступним кодом у app/design/frontend/Magefan/custom_theme_child/composer.json:
{
"name": "magefan/theme-frontend-custom-theme-child",
"description": "N/A",
"require": {
"php": "~5.5.0|~5.6.0|~7.0.0|~7.1.0|~7.2.0|~7.3.0|~7.4.0|~8.1.0",
"magento/luma": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
]
}
}
5. Створіть каталог Каталог у файлах дочірньої теми та додайте до нього порожні каталоги та файли. Структура каталогів має бути такою:
app/design/frontend/Magefan/ ├── custom_theme_child/ │ ├── media/
│ ├── web/ │ │ ├── css/ │ │ │ ├── source/ │ ├── fonts/
│ ├── image/ │ ├── js/
Після цього ви зможете ввімкнути та налаштувати свою тему в Magento 2.
Отже, це короткий посібник з основ створення власної теми в Magento 2. Тепер ви можете розширювати та налаштовувати її, щоб створити найкращу привабливість для вашого магазину, оптимізувати завантаження певних елементів та покращити SEO. Дотримуючись найкращих практик Magento, ви зможете оновлювати та розширювати тему Magento без виникнення проблем.
Ви можете переглянути приклад структури файлів та каталогів теми на сторінці Github нашого розділу поширених запитань Оптимізована тема Magento 2.
