Как создать дочернюю тему WooCommerce Storefront

Последнее обновление — 5 марта 2021 г.

Дочерняя тема — это модификация существующей темы с сохранением ее основного стиля и функций. Исходная тема называется родительской темой, а новая модифицированная — дочерней темой. Создание собственной дочерней темы WooCommerce Storefront — хороший способ персонализировать свой магазин, не покупая новую тему.

Получите витрину магазина WooCommerce!

Дочерняя тема — обзор

Как упоминалось во введении, дочерняя тема будет использовать родительскую тему в качестве своей основы и будет предоставлять теме дополнительные функции. Часто это хороший вариант, когда вы хотите сделать вариации для одной темы. В каталоге дочерних тем Storefront вы можете найти большой выбор дочерних тем премиум-класса, подходящих для различных отраслей и типов продуктов. Таким образом, вы можете легко создать собственную дочернюю тему для Storefront.

Преимущества использования дочерней темы

Непосредственное изменение темы может привести к потере изменений во время обновления. Дочерняя тема гарантирует, что изменения останутся нетронутыми. В целом, разработка дочерней темы — более быстрый процесс, чем создание новой темы. Кроме того, для тех, кто интересуется разработкой темы WordPress , создание дочерней темы — отличный способ поэкспериментировать и учиться.

Вот некоторые из преимуществ создания дочерней темы:

• Помогает создавать разные варианты одной и той же темы для разных доменов.
• Можно сохранить настройки дизайна отдельно, не изменяя родительскую тему.
• Настройки могут быть сохранены даже после обновления родительской темы или основных файлов WordPress или WooCommerce.

Создание дочерней темы WooCommerce Storefront

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

Чтобы начать процесс, создайте файл style.css для дочерней темы со следующим примером кода, приведенным в Документах WooCommerce.

Затем измените поле шаблона, чтобы оно указывало на Storefront.

Одно отличие, которое вы, возможно, заметили здесь, заключается в том, что с Storefront вам не нужен шаг постановки в очередь, который выполнялся при создании дочерней темы для темы двадцать пятнадцать. При создании дочерней темы с помощью Storefront вам потребуется только пустой файл function.php и файл style.css, чтобы начать процесс.

Вы можете просто перенести файл в папку дочерней темы, создать zip-файл и загрузить. Как только это будет сделано, активируйте новую дочернюю тему в Appearance > Themes .

Вы также можете загрузить дочернюю тему через FTP, если у вас есть доступ к вашему хостингу. Вы можете использовать программу FTP, например FileZilla.

Лучшие FTP-клиенты для Mac и Windows.

Теперь вы можете настраивать, добавляя коды в таблицу стилей дочерней темы и файлы шаблонов. Например, вы можете скопировать любой файл шаблона из папки темы Storefront в папку дочерней темы. Этот файл в папке дочерней темы можно настроить, изменив код в соответствии с вашими требованиями.

Как настроить дизайн и функциональность дочерней темы?

С указанными выше настройками вы создали дочернюю тему для Storefront. Однако для вашей темы пока нет настраиваемых свойств. Вы можете добавлять функциональные возможности и настройки дизайна в свою дочернюю тему, не изменяя родительскую тему.

Изменения дизайна

Например, в приведенной выше таблице стилей, которую вы создали для дочерней темы, вы можете настроить цвет заголовка сайта с помощью следующего кода:
.site-branding h1 a {
color: red;
}

Модификации шаблона

Вы также можете изменить файлы шаблонов (*.php) в папке темы. Например, вы можете изменить определенный код, скопировав файл header.php из папки родительской темы wp-content/themes/storefront/header.php в папку дочерней темы wp-content/themes/storefront-child/header.php.

После того, как копирование будет выполнено, вы можете отредактировать header.php и настроить любой код в соответствии с потребностями. Header.php в дочерней теме будет использоваться вместо header.php родительской темы.

Вы также можете вносить изменения в шаблоны WooCommerce таким образом. Просто создайте новую папку в дочерней теме и назовите ее «WooCommerce». Здесь вы можете внести изменения в шаблоны WooCommerce, чтобы они соответствовали дизайну вашего сайта.

Эта документация по WooCommerce поможет вам больше узнать о структуре шаблонов WooCommerce.

Настройка функциональности

Когда вы создаете дочернюю тему, вы хотели бы, чтобы она также имела пользовательские функции. Для этого вам нужно сначала убедиться, что ваш файл functions.php пуст и не содержит никакой информации из родительского файла functions.php. Теперь, если конкретная функция в родительской теме является подключаемой (обернутой в условный оператор if), вы сможете скопировать ее в дочернюю тему functions.php. После того, как вы скопировали подключаемую функцию, вы можете внести необходимые изменения. Ниже приведен пример подключаемой функции:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Создание общей дочерней темы

Процесс создания дочерней темы в Storefront отличается и проще по сравнению с другими темами. В этой статье мы также рассмотрим основные детали общего метода.

Первым шагом является создание каталога темы. Затем создайте таблицу стилей (файл style.css) для дочерней темы. WooCommerce рекомендует создать файл functions.php, который полезен для правильной постановки стилей в очередь.

Создание общей дочерней темы

Процесс создания дочерней темы отличается и проще в магазине по сравнению с другими темами. В этой статье мы также рассмотрим основные детали общего метода.

Первым шагом является создание каталога темы. Затем создайте таблицу стилей (файл style.css) для дочерней темы. WooCommerce рекомендует создать файл functions.php, который полезен для правильной постановки стилей в очередь.

Создание каталога дочерней темы

Создайте и поместите каталог дочерней темы в wp-content/themes. Рекомендуется добавлять к имени каталога дочерней темы «-child», хотя и не обязательно. Следует соблюдать осторожность, чтобы не оставлять пробелы в имени каталога дочерней темы, чтобы избежать каких-либо проблем.

Создание таблицы стилей дочерней темы

Создайте заголовок таблицы стилей, чтобы начать процесс. Ниже приведен пример заголовка таблицы стилей WordPress Codex, созданный для дочерней темы на основе темы Twenty Fifteen.

При создании дочерней темы вы можете использовать этот текст примера в качестве ориентира и заменить его деталями, относящимися к вашей теме. В строке Template указывается имя каталога родительской темы. Вы должны настроить его в соответствии с темой, с которой вы работаете.

Ставим в очередь родительскую и дочернюю темы

Создайте файл functions.php в каталоге дочерних тем, чтобы поставить в очередь родительскую и дочернюю темы. Поставьте в очередь таблицу стилей родительской темы, добавив действие wp_enqueue_scripts и используя wp_enqueue_style() в файле function.php дочерней темы. Откройте файл function.php вашей дочерней темы с тегом PHP (<?php). Затем поставьте в очередь таблицы стилей родительской и дочерней темы. На приведенном ниже снимке экрана показан пример, который будет работать, только если ваша родительская тема использует один файл .css для хранения CSS. Если имеется более одного файла .css, например style.css, main.css, ie.css, убедитесь, что все зависимости родительской темы сохранены. Хороший уровень знаний в области кодирования, безусловно, является важным фактором для того, чтобы сделать это правильно с первого раза.

Вы также должны поставить фактический код CSS в свою дочернюю тему style.css. Чтобы убедиться, что таблица стилей дочерней темы загружается после родительской таблицы стилей, вы можете установить родительский стиль в качестве зависимости. Кроме того, укажите номер версии дочерней темы, чтобы убедиться, что вы можете очистить кеш и для дочерней темы. Рекомендуемый пример в Кодексе приведен ниже:

Активация дочерней темы

Создайте zip-файл папки вашей дочерней темы и загрузите его, выбрав « Внешний вид» → «Темы» → «Добавить новую тему» .

Теперь новая дочерняя тема будет отображаться в списке тем.

Теперь вы можете активировать новую дочернюю тему, нажав кнопку « Активировать ».

• Загрузите тему Storefront прямо сейчас.
• Узнайте больше о дочерних темах из WordPress Codex.

Вы также можете скачать образец дочерней темы по этой ссылке WooCommerce, чтобы узнать больше. Или прочитайте некоторые из наших статей по теме:

1. Как выбрать правильную тему для вашего магазина WooCommerce?
2. Как установить и настроить витрину?
3. Последние тенденции в темах WooCommerce.