Як створити кастомну тему в Magento?

Керування Magento 2 Розробка під Magento 2

Bohdan Berezhniy - Квітень 20, 2023

Хоча на ринку доступно безліч тем для Magento 2, ви всеріно можете захотіти створити кастомну тему для свого магазину. Чому? Шаблони, макети, графіка та стилі, наявні в темі, не завжди задовольняють потреби вашого бізнесу. Крім того, стандартних тем Magento 2 Luma та Blank буде недостатньо, якщо ви створюєте онлайн магазин.

Отже, щоб створити кастомну тему для Magento 2, яка передає "відчуття" вашого бренду, вам потрібно вдатися до кастомної розробки.

У цій статті ми розповімо вам про всі кроки, які вам потрібно виконати, щоб створити тему для Magento, і розглянемо основи того, як переписувати макети теми.

Готові?

Якщо ви шукаєте готову до використання оптимізовану за швидкістю тему Magento 2, у нас уже є така — перегляньте Optimized Magento 2 Theme.

Зміст [приховати]

Перед розробкою кастомної теми в Magento
Кроки для створення кастомної теми Magento 2
Як розширити файли теми?
Як переписати макети теми в Magento?
Як створити дочірню тему Magento?
Поширені питання

Перед розробкою кастомної теми в Magento

Перша важлива річ, про яку слід пам’ятати перед початком розробки теми в Magento, це те, що ви не повинні змінювати або редагувати файли теми Luma та Blank за замовчуваням. Якщо ви кастомізуєте файли теми за замовчуванням, оновлення до останньої версії Magento може переписати ваші зміни.

Крім того, ви повинні дізнатися більше про структуру папок тем Magento. Коли ви встановлюєте тему Magento через composer, папки теми розташовані у 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 directory/app/design/frontend і створіть там папку нової теми.

напр. /app/design/frontend/Magefan

Потім створіть папку із назвою теми.

напр. /app/design/frontend/Magefan/custom_theme

2. Оголосіть свою тему

Оголошення (declaring) вашої кастомної теми означає повідомлення 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> використовується для визначення батьківської теми, якщо вона є (у нашому випадку це тема Blank)
<preview_image> оголошує зображення теми, яке з’являється на сторінці теми в адмін панелі для попереднього перегляду (розташування: /app/design/frontend/Magefan/custom_theme/media/custom-theme-image.jpg)

Примітка: якщо розташування зображення теми неправильне, ви отримаєте повідомлення про помилку під час спроби відвідати сторінку теми через адмін панель.

3. Додайте composer пакунки теми

Вам потрібно створити composer пакунок, щоб розповсюджувати свою кастомну тему Magento 2 як пакунок, і зареєструвати її на сервері пакунків (packaging server). Для цього створіть файл 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

Для реєстрації вашої теми в Magento потрібен файл registration.php. Створіть файл 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. Налаштуйте кастомну тему

Після того як ви додасте свою тему до файлової системи, ви зможете активувати її у своєму магазині. Перейдіть у Content > Design Configuration і натисніть Edit біля теми, до якої потрібно застосувати кастомну тему, і переконайтеся, що ви бачите її в списку.

Після цього перейдіть у Stores > Configuration > Design і виберіть свою тему для Design Theme. Не забудьте зберегти налаштування.

6. Налаштуйте властивості зображень продукту

Якщо розмір зображень продуктів у вашій кастомній темі Magento відрізняється від розміру зображень у батьківській темі, вам потрібно створити файл налаштувань view.xml. Цей файл налаштовує розмір усіх зображень продукту на вітрині. Він не є обов’язковим, якщо він вже існує у вашій батьківській темі.

Щоб додати файл view.xml, вам потрібно створити папку etc у папці вашої теми app/design/frontend/Magefan/custom_theme/etc. Потім скопіюйте файл view.xml з папки etc вашої батьківської теми у вашу кастомну тему та змініть властивості зображення наступним чином:

<image id="category_page_grid" type="small_image"> 
    <width>450</width> 
    <height>450</height> 
</image>

Тут ми визначаємо, що хочемо, щоб зображення у сітці каталогу були розміром 450x450.

7. Створіть папки для статичних файлів теми

Ваша кастомна тема для Magento 2, швидше за все, міститиме різні типи статичних файлів, такі як шрифти, стилі, зображення, JS тощо. Кожен тип статичного файлу має зберігатися у папці web у папці вашої теми з такою структурою:

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 і перезавантажити сторінки. Інакше на вітрині відображатиметься стара версія файлів.

7. Оголосіть логотип теми

Типовим форматом та назвою зображення логотипу теми є logo.svg. Відповідно, коли ви додаєте цей файл у app/design/frontend/Magefan/custom_theme/web/images, він автоматично розпізнається як логотип теми та відображається в заголовку магазину після застосування теми.

Щоб використовувати кастомний логотип, спершу його потрібно оголосити (declare). Однак це залежить від того, чи ваша тема має батьківську тему та використовує її логотип.

З огляду на це, вам не потрібно оголошувати логотип вашої теми, якщо у вас є або немає батьківської теми, але ви використовуйте найменування за замовчуванням — 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>

(2)

Magento 2 Theme Optimized

Оптимізована тема Magefan — це першокласна тема для Magento 2, яка пропонує вам приголомшливу швидкість веб-сайту, гнучкий дизайн веб-сайту та повну оптимізацію для SEO. Це допоможе вам потрапити в зелену зону Google...

Спеціальна ціна 0,00 ₴ Regular Price 37 758,00 ₴

одноразовий платіж

Завантажити Онлайн демо

Як розширити файли теми?

Якщо ви хочете внести зміни у файли своєї теми, вам не потрібно копіювати макет сторінки або код налаштувань сторінки, щоб додати зміни. 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?

Створення дочірньої теми (child theme) дозволяє додати нову логіку та дизайн, не втрачаючи жодних змін після оновлення або перериваючи батьківської теми. Отже, по суті, дочірня тема — це копія оригінальної батьківської теми, яка успадковує її властивості. Це дозволяє мінімізувати розробку, якщо ви хочете кастомізувати тему.

Коли ви навчитеся створювати кастомну тему для 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. Створіть папку web у файлах дочірньої теми та додайте до неї порожні папки та файли. Структура папки має бути такою:

app/design/frontend/Magefan/
├── custom_theme_child/
│ ├── media/
│ ├── web/
│ │ ├── css/ 
│ │ │ ├── source/
│ ├── fonts/
│ ├── image/
│ ├── js/

Зробивши це, ви зможете ввімкнути та кастомізувати свою тему в Magento 2.

Отже, це короткий посібник про те, як створити кастомну тему в Magento 2. Тепер ви можете розширити та кастомізувати її, щоб створити найкращий вигляд для свого магазину, оптимізувати завантаження певних елементів і покращити SEO. Доки ви дотримуєтесь найкращих практик Magento, ви зможете оновлювати та розширювати теми Magento, не стикаючись із проблемами.

Ви можете перевірити приклад структури файлів і папок теми на сторінці Github нашої оптимізованої теми Optimized Magento 2 Theme.

Поширені питання

Чи була стаття корисною для вас чи ні? Дайте нам знати в коментарях унизу.

Bohdan Berezhniy

Certified Magento 2 Developer

Bohdan is a certified Magento 2 developer with 6+ years of experience working on custom development, speed optimization, and maintenance of Magento 2 stores of different scales. He is an avid learner and athlete who favors spending quality time with his friends and loved ones...

Previous Як додати Facebook pixel у Magento 2?

Наступний Як встановити тему Magento 2?

Коментарі ()

Відвідувачі також шукають

magento 2 створити кастомну тему
кастомна тема magento 2
розробка кастомної теми для magento 2
створити кастомну тему в magento 2
як створити кастомну тему в magento 2
як налаштувати тему luma в magento 2
кастомна тема magento
розробка теми для magento 2
magento змінити тему