Створення власної теми Magento [Повний посібник]

Новини, аналітика та ресурси зі світу електронної комерції

Останнє оновлення: Тра. 11, 2026 - 8 хв читання

Створення власної теми Magento [Повний посібник]

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

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

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

Готові почати?

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

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

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

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

наприклад /app/design/frontend / Magefan

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

наприклад /app/design/frontend/ Magefan /custom_theme

2. Оголошення вашої теми

Оголошення вашої власної теми означає повідомлення Magento про її існування. Вона містить Basic інформацію про вашу тему.

Вам потрібно створити файл 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. Додайте пакети composer тем

Вам потрібно створити пакет composer , щоб розповсюджувати вашу власну тему 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 тощо. Кожен тип статичного файлу повинен зберігатися в каталозі 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 та перезавантажити сторінки. В іншому випадку стара версія файлів відображатиметься на фронтенді.

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>

(3)

Magento 2 Theme Optimized

Magento 2 Theme Optimized – це першокласна тема для Magento 2, яка пропонує вам приголомшливу швидкість завантаження веб-сайту, гнучкий дизайн веб-сайту та всебічну SEO-оптимізацію. Вона допоможе вам потрапити в...

Звичайна ціна 38 657,00 ₴ Спеціальна ціна 0,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 замість макета .

Як створити дочірню тему Magento?

Створення дочірньої теми дозволяє вам додати нову логіку та дизайн без втрати будь-яких змін після оновлення або переривання батьківської теми. Отже, по суті, дочірня тема – це копія оригінальної батьківської теми, яка успадковує її властивості. Це дозволяє вам мінімізувати завдання розробки, якщо ви хочете налаштувати тему.

Після того, як ви навчитеся створювати власну тему в Magento 2, вам також може знадобитися навчитися створювати дочірню тему.

1. Створіть папку дочірньої теми з назвою назва-батьківської-теми_діти та додайте її до наступного каталогу:

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 нашого розділу Оптимізована тема Magento 2.

FAQ

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.

Як додати піксель Facebook до Magento 2?

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

Коментарі ()

Клієнти також шукають

створення власної теми в Magento 2

власна тема в Magento 2

розробка власної теми в Magento 2

створення власної теми в Magento 2

як створити власну тему в Magento 2

як налаштувати тему Luma в Magento 2

власна тема в Magento 2

розробка теми в Magento 2

зміна теми в Magento