Содержание
Как создать дочернюю тему Вордпресс
Вордпресс — очень гибкая система, в которой можно изменить что угодно: цвет, шрифт, ссылку на кнопке WooCommerce и так далее.
Проблема в том, что если вы измените файлы темы, то при следующем обновлении темы файлы с вашими изменениями будут заменены новыми файлами.
Дочерняя тема позволяет решить эту проблему, то есть вы сможете добавлять собственный функционал и обновлять родительскую тему.
В этой статье вы узнаете, как создать дочернюю тему вручную без использования плагинов.
Содержание:
Что такое дочерняя тема
Дочерняя тема — это отдельная тема, которая зависит и основывается на функционале родительской темы. Дочерняя тема заимствует функционал и внешний вид у родительской темы, и может добавлять новый функционал без редактирования родительской темы.
Платные и бесплатные темы имеют большее или меньшее количество настроек, но если вы хотите добавить собственные изменения в используемую тему, то правильнее добавлять их в дочернюю тему.
Если вы добавите код напрямую в файлы родительской темы, то при следующем обновлении темы ваши изменения будут заменены новыми файлами темы.
Дочерняя тема решает эту проблему, позволяя добавлять изменения в отдельные файлы, которые остаются нетронутыми при обновлении родительской темы.
Когда вы используете дочернюю тему, Вордпресс сначала проверяет дочернюю тему на наличие нужного функционала, и если в дочерней теме этого функционала нет, Вордпресс использует функционал из родительской темы.
Два аргумента для использования дочерней темы: Обновления темы и Порядок в файлах.
Используйте дочернюю тему, даже если вы собираетесь делать небольшие изменения на сайте.
Обновления
Если вы будете делать изменения в главной теме, то в одном из следующих обновлений ваши изменения будут заменены новой версией файлов. Вы можете:
- Перестать обновлять тему, чтобы не потерять изменения при обновлениях,
- Обновлять тему, но рано или поздно файлы с изменениями будут заменены новыми файлами
Если вы перестанете обновлять тему, то это увеличивает шансы хакеров взломать сайт, так как устаревший софт — одна из основных причин взлома сайтов. Всегда обновляйте Вордпресс, темы и плагины.
Во втором случае вы можете копировать добавленные изменения перед обновлением и вставлять их в новые файлы после обновления, но лучше потратить столько же времени один раз на создание дочерней темы, чем тратить его каждый раз на копирование изменений перед обновлениями.
Порядок
Когда вы добавляете код в файлы темы, вы добавляете его в файлы, которые содержат сотни или тысячи строк кода. Техподдержка темы, фрилансеры или вы будете тратить время, чтобы найти изменения, которые вы делали в файлах темы.
Так как дочерние темы основываются на родительских темах, то дочерняя тема будет являться набором изменений родительской темы, собранных компактно в одном месте.
Создание дочерней темы
Многие разработчики тем предлагают уже готовую дочернюю тему на своем сайте. Зайдите на сайт своей темы и попробуйте найти дочернюю тему.
Дочерняя тема Astra и GeneratePress.
Если темы нет, то создайте собственную дочернюю тему по этой инструкции:
- Создайте папку темы в
.../wp-content/themes/
- Создайте файл
style.css
с информацией о дочерней теме. - Создайте файл
functions.php
и добавьте в него код для использования стилей родительской темы. - По желанию — добавьте картинку темы для отображения во Внешний вид — Темы.
После этого активируйте новую дочернюю тему, — сайт должен выглядеть так же, как с родительской темой, но будет использовать дочернюю тему.
1. Создайте папку дочерней темы в папке родительской темы
Через ftp или хостинг-панель создайте папку в .../wp-content/themes/
с названием дочерней темы. В этом примере дочерняя тема будет называться twentyseventeen-child
, и будет работать на базе родительской темы Twenty Seventeen.
2. Создайте файл style.css в папке дочерней темы
Внутри папки .../wp-content/themes/twentyseventeen-child
создайте файл, назовите его style.css
и добавьте в него информацию о дочерней теме:
Строки Theme Name и Template являются обязательными, Theme name сообщает Вордпрессу название темы, и это название отображается во Внешний вид — Темы. Template говорит Вордпрессу, какая тема является родительской для этой темы.
Остальные строки понятны сами по себе, кроме Tags
и Text Domain
. В Tags содержатся теги, которые используются репозитарием Вордпресс для описания темы. Я скопировал теги темы Twenty Seventeen. Text domain используется для перевода темы и должен быть уникален, вы можете использовать название новой дочерней темы.
3. Добавьте файл functions.php в дочернюю тему
Сейчас дочерняя тема уже может работать. Активируйте новую тему и перезагрузите страницу, вы увидите, что вся информация находится на сайте, но отсутствуют некоторые стили. Вордпресс сначала ищет функционал в дочерней теме, но если он отсутствует, берет этот функционал из родительской темы.
В этом примере Вордпресс использует файл стилей дочерней темы, поэтому некоторые стили родительской темы не загрузились. Чтобы загружать стили родительской темы, нужно добавить код в файл functions.php
. Создайте его в .../wp-content/themes/twentyseventeen-child
, и добавьте этот код:
Теперь ваш сайт должен выглядеть точно так же, как с родительской темой. Вы можете добавлять свои изменения в файлы style.css (или Внешний вид — Настроить — Дополнительные стили) и functions.php.
4. Добавьте картинку
Вы можете добавить картинку темы, которая отображается в меню Внешний вид — Темы. Например, сделайте скриншот сайта, сохраните файл с именем screenshot.png и положите в папку дочерней темы.
Как работает дочерняя тема
Дочерняя тема работает на уровне файлов. Когда требуется какой-то файл для загрузки темы, Вордпресс проверяет, есть ли нужный файл в дочерней теме. Если есть, используется содержание этого файла, если нет, то используется файл родительской темы.
Это правило работает для всех файлов, кроме functions.php. Загружаются оба файла, из родительской и дочерней тем.
Если бы использовался только файл дочерней темы, то сайт бы работал неправильно или вообще бы не работал. Тогда вам было бы нужно скопировать все содержание файла из родительской темы, но после обновлений функционал родительского functions.php может перестать работать.
Как изменять другие файлы
Процесс изменения других файлов родительской темы такой: если вы хотите сделать изменения в футере, скопируйте файл footer.php
из родительской темы в дочернюю, сделайте изменения и сохраните файл. После этого сделанные изменения должны появиться на сайте.
Заключение
Дочернюю тему можно создать за несколько минут, это даст вам инструмент для увеличения функционала темы без проблем с обновлениями.
Для усиления безопасности функцию редактирования файлов в разделе Внешний вид — Редактор, и Плагины — Редактор можно отключить. Как это сделать.
Надеюсь, статья была полезна. Оставляйте комментарии.
Дочерние темы WordPress
В этом уроке подробно поговорим про создание дочерних тем в WordPress – разберёмся, для чего они нужны и как с ними работать.
Также, если вы хотите научиться создавать темы для WordPress с нуля на основе готовой HTML-вёрстки, то рекомендую посмотреть мой видеокурс.
Зачем нужна дочерняя тема?
Прежде всего – для чего?
Две причины:
- Если вам когда-нибудь приходилось редактировать темы сторонних разработчиков, то вы наверняка в курсе, что после обновления темы все сделанные изменения в файлах исчезают. Конечно, вы можете просто отключить возможность обновления тем, но использование дочерних шаблонов — более правильный вариант.
- Также родительскую тему можно использовать как общий шаблон для нескольких сайтов, а дочернюю – для определённых.
Как создать дочернюю тему?
В качестве примера давайте возьмём стандартную тему WordPress Twenty Twenty One — для неё и создадим дочернюю тему.
Шаг 1. Создание директории под дочернюю тему
Заходим в директорию /themes
и создаём там ещё одну папку
Назвать новую папку можете как угодно, ведь любая тема WordPress может иметь неограниченное количество дочерних тем! Но я решил назвать максимально по красоте – twentytwentyone-child.
Шаг 2. Создаём файл style.css
В директории, которую вы только что добавили, создайте файл style.css
. В него закидываем примерно те же самые метаданные, что и при создании обычной темы. Но у вас добавится ещё один параметр, а именно – template
. Параметр содержит название директории родительской темы.
Например я добавил в свой файл это:
/* Theme Name: Twenty Twenty-One Child Author: Миша Рудрастых Author URI: https://misha.agency Template: twentytwentyone */
На этом этапе тема появляется во Внешний вид > Темы и её можно активировать.
После активации дочерней темы на этом этапе ничего не произойдёт – по сути на сайте у вас так же будет отображаться родительская тема.
Подробнее про структуру файлов
Сама структура файлов будет выглядеть на данном этапе так:
wp-content └── themes ├── twentytwentyone (родительская тема) └── twentytwentyone-child (дочерняя тема, кстати может иметь любое название) └── style.css
Дочерние темы могут содержать и другие файлы, давайте вкратце расскажу про них:
style.css
— обязательный файл, который содержит информацию о дочерней теме. Сам по себе не будет подключаться автоматически, о том, как его правильно подключить, рассказываю чуть ниже.functions.php
— если вы создадите в дочерней теме этот файл, то он будет задействовать передfunctions.php
родительской темы, что например позволит вам перезаписать «pluggable-функции», подробнее об этом.- Различные файлы шаблона, как например
index.php
,archive.php
и так далее. Если файл есть в дочерней теме, то этот файл будет использоваться вместо соответствующего файл в в родительской теме. Например, создавfooter.php
и скопировав в него содержимоеfooter.php
из родительской темы, мы можем изменять спокойно код файла внутри дочерней темы, не меняя файл родительской темы, подробнее тут. - Также подтема может использовать новые изображения, новые CSS и JS-файлы.
Дочерняя тема готова и теперь мы можем использовать её для кастомизации сайта! 🎉
Как работать с дочерней темой?
Подключение стилей дочерней темы
Подключить стили дочерней темы – проще простого:
add_action( 'wp_enqueue_scripts', 'true_child_styles' ); function true_child_styles() { wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array(), null ); }
Вставляем этот код в файл functions.php
вашей дочерней темы. Да, сначала создайте его.
Однако в такой ситуации стили дочерней темы могут подключиться до стилей родительской и возможно нам это не нужно, тогда есть несколько вариантов решениея:
- Можете уменьшить приоритет хука
wp_enqueue_scripts
, поставить например 25 или 9999. - В массив зависимостей функции wp_enqueue_style(), это третий параметр функции, укажите ID
style.css
родительской темы, его можно подсмотреть прямо в исходном коде сайта, либо сделать поиск по файлам родительской темы.
А вообще про подключение CSS и JavaScript у меня на сайте есть супер-подробный текстовый и видеоурок.
Замена файлов шаблона
В двух словах, файл шаблона дочерней темы, при наличии, заменяет соответствующий файл шаблона родительской темы.
Например вам нужно сделать изменения в файле single.php
:
- Открываем родительскую тему и копируем файл
single.php
. - Вставляем его в дочернюю тему.
- Делаем в нём нужные нам изменения.
В дочерних темах поддерживаются все файлы из иерархии шаблонов WordPress и шаблоны страниц тоже.
Работа с functions.php
functions.php
дочерней темы всегда подключается непосредственно перед functions.php
родительской темы. Что делать, если нужно задействовать функцию после инициализации functions.php
родительской? Используйте хук after_setup_theme
с приоритетом больше 10.
Это также значит, что вы можете переписать некоторые функции из родительского functions.php, которые записаны вместе с условием if( ! functions_exists() ) {
. Например вот такая функция из template-tags.php
темы Twenty Twenty One.
if ( ! function_exists( 'twenty_twenty_one_posted_on' ) ) { /** * Prints HTML with meta information for the current post-date/time. * * @since Twenty Twenty-One 1.0 * * @return void */ function twenty_twenty_one_posted_on() { ...
И мы в итоге в наш functions.php
дочерней темы вставляем заново эту функцию, переписав под себя:
function twenty_twenty_one_posted_on() { // тут перезаписываем эту функцию спокойно! }
Локализация
Процесс перевода дочерних тем по сути ничем не отличается от локализации недочерних тем. Единственный момент – используем функцию load_child_theme_textdomain()
для подключения файлов перевода вместо load_theme_textdomain()
. Про локализацию читайте подробнее здесь.
Функции
Когда я только начинал работать с WordPress, я не мог понять, почему некоторые авторы для получения URL темы используют get_template_directory_uri(), а некоторые – get_stylesheet_directory_uri(). Теперь-то я понимаю, что они на тот момент, так же, как и я, не понимали никакой разницы между этими функциями.
А в чём отличие этих и некоторых других функций, расскажу в этой таблице:
Родительская тема | Текущая (родительская или дочерняя) |
---|---|
get_template_directory_uri() – получает URL папки родительской темы вне зависимости того, задействована ли она в родительской или в дочерней теме | get_stylesheet_directory_uri() – всегда получает URL папки текущей темы, если используется в родительской – то родительской, если используется в дочерней – то дочерней. |
get_template_directory() – путь к директории родительской темы | get_stylesheet_directory() – путь к директории текущей темы |
get_template() – название папки родительской темы | get_stylesheet() – название папки текущей темы |
get_stylesheet_uri() – URL файлы style.css текущей темы. |
Видеоурок
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!
Дочерняя тема WordPress для чайника и не только
Вступление: Привет. Я не считаю вопрос создания дочерней темы актуальной для начинающего пользователя WordPress. По умолчанию, «чайники» не правят коды сайта и его шаблона, а значит им нечего боятся обновлений, которые могут обнулить их правки. Однако, дочерняя тема WordPress для чайника хороший повод расширить свои представления возможности системы. Ничего сложного. Здесь самый простой способ создать дочернюю тему WordPress.
Что такое дочерняя тема WordPress
Официальная терминология WordPress не оставляет нам выбора и все подчиняемые элементы системы мы вынуждены называть «дочерние». Относится это к дочерним страницам, дочерним пунктам меню и к дочерним темам.
Дочерняя тема (Child Theme) — это особая функция WordPress, которая позволяет переопределять определённые стили и функции другой родительской темы (Parent Theme). Используя дочернюю тему, как рабочую, вы можете обновить родительскую тему WordPress без потери своих изменений.
Например, понравилась вам тема, но совсем не нравится её шрифт, фон и заголовки. Выход в трёх шагах:
- Создаёте дочернюю тему;
- В файле
style.css
дочерней темы меняете стили на свои; - Работаете на Child Theme не думая об очередном обновлении родительской темы.
Здесь вы можете резонно, задать вопрос: у меня на рабочем шаблоне есть customizer и я там могу делать любые неизменяемые правки стилей. Читать про Customizer WordPress.
Отвечаю. В том то и прелесть дочерней темы, что вы можете поместить в неё любой файл из родительской темы, а не только файл стилей и так же править их без потери своих изменений при очередном обновлении.
Например, не нравится вам, что в футере вашего сайта висит активная ссылка автора темы. Решение в двух шагах:
- Копируете файл
footer.php
из родительской темы в дочернюю; - В дочерней теме правите файл
footer.php
и убираете эту ссылку.
Ссылка больше не появится после следующего обновления родительской темы.
Самый простой способ создать дочернюю тему WordPress
Здесь, я не буду показывать вам, как создать дочернюю тему «руками». Почему? Потому, что создание дочерней темы через @import url("../TEMPLATE/style.css")
, покажет принцип создания, но не будет до конца правильным.
А вот правильное создание дочерней темы с использованием хука, подключающего файлы стилей параллельно, а не последовательно, это не по теме этого раздела.
Чтобы не создавать рабочую тему руками, есть более простой вариант, из серии «всё придумали за нас». Он не просто проще, он на этом этапе освоения системы, в сто крат эффективнее.
Рекомендую для создания дочерней темы использовать плагин: WPS Child Theme Generator. Или более насыщенный по возможностям, но так же несложный, плагин: Child Theme Configurator.
Плагины очень хорошо обновляются и эта информация будет актуальная ещё очень долго. Автор первого плагина английский хостинг для WordPress. Автор второго, компания разработчик WordPress c 20-ти летней историей.
Найти плагины вы можете и должны только на официальном сайте ru.wordpress.org/ страница plugins/, по названию. Или сразу установить плагин из административной панели своего сайта на вкладке Плагины>>>Добавить. Читать Как установить плагин WordPress.
Заключение
Дочерняя тема WordPress инструмент отличный инструмент системы, однако на начальном этапе освоения WordPress не нужный. Однако не знать его — не комильфо.
©wpkupi.ru
Еще статьи
Похожие посты:
Как создать дочернюю тему WordPress
В этом посте я покажу вам, как создать дочернюю тему в WordPress? Создание дочерней (детской) темы WordPress займёт у вас всего пару минут. Всё делается автоматически, без необходимости создания в ручном режиме папок, файлов и т. д.. Всю работу за вас выполнит специальный плагин для создания дочерней темы WordPress.
Если вам нравится ваша текущая тема WP, но вы хотите изменить ее функции и внешний вид, правильный способ сделать это — создать и настроить дочернюю тему (Child Theme) ВордПресс.
Как создать дочернюю тему WordPress
Дочерняя тема WordPress
Дочерняя тема — это тема, которая наследует функциональность и стиль другой темы, называемой родительской темой. Дочерние темы — рекомендуемый способ изменения существующей темы.
Кодекс WordPress
Детская (дочерняя) тема наследует внешний вид родительской темы и всех её функций, но может использоваться для внесения изменений в любую часть темы. Таким образом, настройки хранятся отдельно от файлов родительской темы.
Например, вы сделали в своей теме какие-либо изменения, отредактировали файлы шаблона, изменили стили и тому подобное. Красиво получилось, вы довольны.
А тут, происходит обновление темы и все ваши сделанные изменения утеряны. Это означает, что ваш сайт не только возвращается на прежний уровень, но и вся ваша работа летит к чертям. А было бы всё иначе, если бы использовалась дочерняя тема ВордПресс (WP).
Дочерняя тема WP работает в тандеме с родительской
Использование дочерней темы позволяет обновить родительскую тему, не затрагивая настройки, которые вы сделали для своего любимого сайта.
Родительская тема — это полная тема, которая включает в себя все необходимые файлы шаблонов WordPress и ресурсы для работы темы. Все темы, кроме дочерних, считаются родительскими.
Тематический справочник wordpress.org
Как сказано выше, дочерняя тема хранится в отдельном каталоге от родительской темы. Каждая из которых имеет свои собственные файлы style.css и functions.php. Вы можете добавлять другие файлы по мере необходимости, но эти два — необходимый минимум для правильной работы дочерней темы.
Плагин дочерней темы WordPress
Плагины позволяют сделать/создать дочернюю тему автоматически из любой темы ВордПресс, установленной на вашем сайте или блоге.
Внимание: Чтобы сделать простые изменения CSS на своем веб-сайте, вы можете использовать поле «Дополнительные CSS», вместо создания дочерней темы. Эти изменения, сделанные с помощью поля «Дополнительный CSS», останутся там даже после обновления темы. Но, если вы ищете другие дополнительные изменения, такие как редактирование файлов PHP и другие, необходимо создать дочернюю тему.
Существуют различные плагины, которые помогут вам быстро, легко и безопасно создать дочернюю тему. Наиболее популярными среди них это — Child theme configurator, Child Theme Generator, WP Child Theme Generator, Child Theme Creator by Orbisius, Child Theme Wizard, Generate Child Theme.
Если вдруг, вы захотите попробовать создать дочернею тему вручную, то смотрите официальную пошаговую инструкцию -developer.wordpress.org.
Плагин Child Theme Generator — Генератор дочерних тем
Child Theme Generator — это бесплатный, простой плагин WordPress для создания дочерних тем. Когда дочерняя тема будет создана, просто удалите плагин.
Генератор детской темы ВордПресс
Генератор дочерних тем — это плагин WordPress, полезный для создания дочерних тем.
Дочерняя тема — это шаблон WordPress, который наследует все функции и характеристики другой темы, называемой родительской темой.
Создавая дочернюю тему, она позволяет вам редактировать или добавлять функциональные возможности к вашему шаблону без необходимости перезаписывать какие-либо файлы родительской темы, рискуя ошибиться или потерять работу сайта при внесении обновлений.
Этот плагин создаст дочернюю тему за несколько шагов, быстро и безопасно. Он не будет замедлять работу вашего сайта. Установите плагин стандартным способом, из админки. Введите его название. На странице с результатами поиска, выберите Child Theme Generator:
Установка плагина WordPress
Дождитесь полной установки плагина, а затем активируйте его. Затем перейдите в Настройки, новый пункт: Child-Theme Gen. Русского языка нет, но всё и так понятно. Из выпадающего списка выберите родительскую тему (обязательно):
Создать новую дочернюю тему
Заполните остальные поля (не обязательно). Нажмите кнопку Create new child theme и плагин создаст для вас дочернюю тему. Можете сразу поставить галочку для активации Child темы. А после нажать Finished:
Дочерняя тема была успешно создана!
Всё, готово. Смотрим Внешний вид — Темы. Дочерняя тема активна:
Это дочерняя тема для Kava
В итоге, на сайте или в блоге никаких отличий вы не увидите. Детская тема использует файлы от своего родителя. А так, будут выглядеть папки на хостинге. Родительская тема и созданная детская с дополнением child. Она находится в wp-content / themes вашей установки WordPress:
Новая детская тема
Да, вы можете поменять скриншот от плагина на свой. Если ваша тема не будет сильно отличаться от родительской, просто скопируйте файл screenshot.png из родительской темы в свою дочернюю:
Скриншот для детской темы
Если нужно сделать изменение на сайте, вы меняете не родительскую тему WordPress, а дочернюю. Теперь все работы производите только в Child theme. Обратите внимание, если вам необходимо редактировать файлы например, single.php, header.php, footer.php или другие, то вам надо скопировать их из папки родительской темы в папку child-theme.
Если файл шаблона (или часть шаблона, такая как header.php) с одинаковым именем существует в родительской и дочерней темах, WordPress будет использовать файл из дочерней темы.
Например, вы захотите удалить из футера (подвала) надпись «Сайт работает на WordPress» и вставить туда свою информацию об авторском праве. Для этого: скопируйте в дочернюю тему файл footer.php, откройте его уже в детской теме.
Найдите строку, которую вы хотите удалить и замените её. Вот, у меня есть инструкция — Как удалить Сайт работает на WordPress.
Как уже написано выше, есть и другие плагины. Например, самый популярный плагин Child Theme Configurator. Более 2 808 184 установок.
Плагин Child Theme Configurator
Когда использования Настройщика недостаточно — Создайте дочернюю тему из установленных.
Конфигуратор детской темы
Конфигуратор дочерней темы — это быстрая и простая в использовании утилита, которая позволяет анализировать любую тему на наличие общих проблем. Создавать дочернюю тему и настраивать ее.
Вы можете создать любое количество дочерних тем из существующих родительских тем. Конфигуратор дочерних тем позволяет выбирать из установленных тем (даже существующих дочерних тем) и сохранять результаты в каталоге тем ВордПресс.
У плагина больше функций, есть версия PRO, но вполне хватит и бесплатных. Вы можете создать любое количество дочерних тем из существующих родительских тем:
Создание детской темы WP
Анализатор сканирует визуализированную тему и автоматически настраивает вашу дочернюю тему.
Если что, под вкладкой «Справка» в правом верхнем углу страницы есть учебное видео. И также текстовые инструкции:
Помощь по плагину Child Theme Configurator
Детская тема создана, даже скриншот от родительской установлен:
Созданная дочерняя (детская) тема
Данный модуль чуть посложней, но с очень большими возможностями. Когда вы будете готовы, просто активируйте дочернюю тему и ваш сайт WordPress автоматически примет пользовательские стили.
Бинго! Уже перевели на русский язык. Если что, перевод любых плагинов и тем с помощью этого плагина.
Если родительская тема изменяется (например, обновляется), нужно ли мне обновлять дочернюю тему?
Нет. В этом и есть смысл использования дочерних тем. Изменения в родительской теме автоматически наследуются дочерней темой.
Дочерняя тема не является копией родительской темы. Это особая функция WordPress, которая позволяет вам переопределять определенные стили и функции, оставляя остальную часть темы нетронутой.
Плагины Child Theme для WP
Если что, ищите дополнительно плагины в каталоге, по ключевому слову Child Theme. Это очень простые и удобные плагины для создания дочерней темы CMS WordPress:
Показаны результаты для: Child Theme
В заключение
Создание дочерней темы WordPress — безусловно, один из самых безопасных способов изменить шаблон вашего веб-сайта WordPress. Дочерние темы — это простой способ изменить все, что душе угодно, не беспокоясь о потере сделанных изменений при обновлении темы.
Если у вас есть дополнительные вопросы или вам нужна помощь в этом процессе, пожалуйста, оставьте свои комментарии ниже.
Я надеюсь, что вы нашли этот пост полезным. Удачи и до новых встреч.
Дочерняя тема WordPress: создание и установка
Автор Олег На чтение 8 мин. Просмотров 144 Опубликовано
Дочерняя тема — это тема, которая наследует функционал и дизайн другой темы, называемой «родительской». Дочерняя тема — рекомендуемый разработчиками WP способ модифицировать «под себя» существующую тему.
Зачем использовать дочернюю тему?
Есть несколько причин, почему вам бы хотелось использовать дочернюю тему:
- Если вы измените тему напрямую, и она обновится, то ваши изменения просто пропадут. Используя дочернюю тему, вы будете уверены, что ваши изменения сохранятся.
- Использование дочерней темы может ускорить время разработки.
- Использование дочерней темы — хороший способ изучить сам процесс разработки темы для Вордпресс.
Как сделать дочернюю тему WordPress
Дочерняя тема состоит, как минимум, из одной папки (директории дочерней темы) и двух файлов (style.css
и functions.php
), которые вам нужно будет создать. Итак, вам потребуется:
- Директория дочерней темы
- style.css
- functions.php
Создаем директорию для дочерней темы
Первый шаг — это создание директории для дочерней темы, которая будет размещаться в папке wp-content/themes
. Рекомендуется, чтобы название директории дочерней темы оканчивалось суффиксом “-child
” (хотя и не обязательно, особенно, если вы создаете тему для публичного использования).
Вам также нужно удостовериться, чтобы в названии директории для дочерней темы не было пробелов, в против случае это вызовет ошибку. На скриншоте выше название нашей дочерней темы “twentyfifteen-child
”, означающее, что родительской темой является Twenty Fifteen.
Следующий шаг — создание файла стилей для дочерней темы (style.css
). Файл стилей должен начинаться со следующей мета-информации:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ |
Важная информация, о которой вы должны знать:
- Вам надо будет заменить текст этого примера, исходя из вашей ситуации.
- Строка “
Template
” соответствует названию директории родительской темы. В нашем примере родительской темой является Twenty Fifteen, поэтому строка “Template
” содержит “twentyfifteen
”. В вашем случае может быть другая тема, поэтому скорректируйте ее соответствующим образом. - В принципе, файла стилей (
style.css
) уже достаточно для создания дочерней темы. Однако для грамотной постановки в очередь на загрузку файлов стилей потребуется файлfunctions.php
(см. ниже).
Третий и последний шаг — постановка в очередь родительских и дочерних файлов стилей.
Заметьте, что предыдущий метод предполагал импорт родительских стилей, используя директиву @import
. Сейчас это уже устаревшая практика.
Как правильно и корректно загружать стили
Корректный метод постановки в очередь родительского файла стилей заключается в добавлении хука (или, по-английски, action) в виде функции wp_enqueue_scripts
.
Данный метод также предполагает использование функции wp_enqueue_style()
в дочернем файле functions.php
. Поэтому вам нужно создать этот файл в директории с дочерней темой.
Первая строка дочернего файла functions.php
начинается с открытия тега PHP (<?php
), после которого вы сможете поставить в очередь ваши родительские и дочерние файлы стилей.
Следующий пример функции будет работать, если родительская тема использует только один главный файл style.css
, содержащий все CSS правила. Если ваша тема имеет больше одного .css файла (в т.ч. ie.css
, style.css
, main.css
), тогда вам потребуется удовлетворить все необходимые зависимости родительской темы.
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ ); function theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
} |
Как правило, файл стилей дочерней темы загружается автоматически. Если это не так, вам также надо будет его поставить в очередь. Настроив “parent-style
” как зависимость, убедитесь, что стили дочерней темы загружаются после нее.
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ ); function theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’) ); } |
Теперь ваша дочерняя тема готова для активации. Войдите в административную панель, далее на страницу Внешний вид > Темы. Вы должны увидеть вашу дочернюю тему в списке тем и готовую к активации. (Если в текущей инсталяции включена мультисайтовость, тогда вам надо переключиться на соответствующую панель, чтобы включить тему. После этого переключитесь обратно и активируйте тему).
Важно: После активации вам потребуется пересохранить ваше меню (Внешний вид > Меню или Внешний вид > Настроить> Меню) и опции темы, включая фоновое изображение, а также изображение в шапке, если таковые предусмотрены родительской темой.
Файлы шаблонов
Если вы желаете изменить больше, чем стили, существует способ переопределить любые файлы родительской темы. Для этого просто включите файл с таким же названием в папку с дочерней темой. Таким образом, он “перекроет” соответствующий файл в директории родительской темы в процессе загрузки сайта.
К примеру, если вы хотите изменить код PHP для шапки сайта, вы можете включить файл header.php
в вашу директорию с дочерней темой, и этот файл будет использован вместо header.php
родительской темы.
Вы можете также включить файлы в дочернюю тему, которых изначально не было в родительской. Например, вы можете создать более функциональный шаблон, чем родительский, для какой-то конкретной страницы или категории.
Использование functions.php
В отличии от style.css
, файл functions.php
дочерней темы не переопределяет родительскую копию. Напротив, он является как бы дополнением к ней (точнее, он загружается перед родительской копией).
Таким образом, functions.php
дочерней темы обеспечивает “умный”, беспроблемный способ изменения функциональности родительской темы. Скажем, вы хотите добавить функцию PHP к вашей теме. Самый быстрый способ — открыть файл functions.php
темы и поместить функцию туда. Но это не очень умно: когда в следующий раз тема обновится, ваша функция просто исчезнет.
Существует альтернативный путь, который будет более разумным: вы можете создать дочернюю тему, добавить в нее файл functions.php
и поместить свою функцию вновь созданный файл. Функция будет делать ту же самую работу и оттуда, с тем преимуществом, что она не будет страдать от будущих обновлений родительской темы. Отсюда важное замечание: не копируйте полностью контент родительского файла functions.php
в такой же дочерний файл.
Структура functions.php
проста: открывающий тег PHP в начале, а ниже него размещаете свой код PHP. В этот файл вы можете разместить столько кода, сколько необходимо. Пример ниже иллюстрирует элементарный файл functions.php
, который делает одну простую вещь: добавляет ссылку на фавиконку в тег <head>
HTML странички.
<?php // Открывающий PHP тег — ничего не должно быть перед ним, даже пробела
// Включаемая Пользовательская функция function favicon_link() { echo ‘<link rel=»shortcut icon» type=»image/x-icon» href=»/favicon.ico» />’ . «\n»; } add_action( ‘wp_head’, ‘favicon_link’ ); |
Подсказка для разработчиков тем: тот факт, что functions.php
дочерней темы загружается первым означает, что вы можете сделать функции пользователя заменяющими функции разработчика, т.е. если пользователь создал такую же функцию, как и ваша, то она станет основной. Просто добавьте условие:
if ( ! function_exists( ‘theme_special_nav’ ) ) { function theme_special_nav() { // Сделать что-то. } } |
В этом случае, дочерняя тема может заменить PHP-функцию родителя, просто объявив ее заранее.
Включение файлов в вашу дочернюю тему
Когда вам нужно включить файл, который должен являться частью структуры дочерней темы, используйте функцию get_stylesheet_directory()
. Так как родительский файл стилей style.css
заменяется дочерним style.css
, и этот дочерний style.css
располагается в корневой папке поддиректории дочерней темы, get_stylesheet_directory()
будет указывать именно на директорию с дочерней темой, а не родительскую.
Ниже пример использования конструкции require_once
, который иллюстрирует, как вы можете использовать get_stylesheet_directory
, когда нужно дать ссылку на файл, хранящийся в структуре дочерней темы.
require_once( get_stylesheet_directory() . ‘/my_included_file.php’ ); |
Дополнительная полезная информация
Использование форматов постов
Дочерняя тема наследует форматы постов, определенные в родительской. Когда создаете дочернюю тему, знайте, что использование add_theme_support('post-formats')
перекроет форматы, определенные в родительской теме, а не добавит к ним.
Поддержка RTL (написание справа-налево)
Для поддержки языков RTL, добавьте файл rtl.css к вашей дочерней теме. Он содержит:
/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */ |
rtl.css
загружается только, когда is_rtl()
возвращает true
.
Рекомендуется добавить файл rtl.css
в вашу дочернюю тему, даже если родительская такого файла не имеет.
Интернационализация
Дочерняя тема, также как и другие расширения, может быть переведена на другие языки, используя функцию gettext
.
Для интернационализации, проделайте следующее:
- Добавьте директорию для переводов. Что-нибудь в таком роде:
my-theme/languages/
. - Добавьте файлы переводов. Названия файлов должны быть такими:
ru_RU.po
иru_RU.mo
(в зависимости от вашего языка). - Загрузите
textdomain
. Используйтеload_child_theme_textdomain()
вfunctions.php
в хукеafter_setup_theme.
Текстовый домен определяется функциейload_child_theme_textdomain()
, который должен использоваться для перевода всех строк в дочерней теме. - Используйте функции GetText для добавления поддержки i18n к вашим текстам.
Пример: textdomain
<?php /** * Настройка текстового домена в дочерней теме. * * Объявление textdomain для этой дочерней темы. * Переводы находятся в директории /languages/. */ function my_child_theme_setup() { load_child_theme_textdomain( ‘my-child-theme’, get_stylesheet_directory() . ‘/languages’ ); } add_action( ‘after_setup_theme’, ‘my_child_theme_setup’ ); ?> |
Пример функции: gettext
<?php _e( ‘Code is Poetry’, ‘my-child-theme’ ); ?> |
Таким образом, все строки, которые используются текстовым доменом «my-child-theme
» будут переведены. Файлы переводов должны находиться в директории «/languages/
«.
Когда создавать дочернюю тему WordPress?
При настройке жесткого кода темы wordpress с минимальными настройками лучше создать дочернюю тему или настроить ее с помощью живой темы? Исчезнут ли ваши изменения css, если тема будет обновлена?
wordpress
Поделиться
Источник
Kate Eldridge
09 июня 2015 в 11:26
3 ответа
- Может ли дочерняя тема в wordpress также иметь свою собственную дочернюю тему
Я купил тему WordPress. У него есть детская тема. Но эта компания продолжает обновлять и детскую тему. Если я настрою какой-либо стиль или, возможно, любую функциональность в дочерней теме, то при последующем обновлении дочерней темы все будет потеряно. Можем ли мы также создать дочернюю тему В…
- Не удается активировать дочернюю тему в WordPress
Мой сайт http:/ / test.javatutorialhub.com / Я должен создать дочернюю тему для темы под названием udesign. Я сделал все необходимое. Но когда я активирую дочернюю тему, я получаю сообщение с надписью this theme requires parent theme. Вот мой код functions.php <?php /* * Add your own functions…
2
Если вы не создали полностью настраиваемую тему, дочерние темы всегда являются рекомендуемым способом изменения существующей темы, к которой вы хотите иметь возможность применять обновления в будущем.
Если вы измените тему напрямую и она будет обновлена, ваши изменения могут быть потеряны. Используя дочернюю тему, вы гарантируете, что ваши изменения будут сохранены.
Если вас это не беспокоит, всегда можно fork существующую тему и внести свои собственные изменения в fork.
Поделиться
rnevius
09 июня 2015 в 11:36
1
Вы не всегда должны создавать дочернюю тему, но факт остается фактом:
НИКОГДА НЕ ИЗМЕНЯЙТЕ ТЕМЫ ИЛИ ПЛАГИНЫ, КОТОРЫЕ ВЫ НЕ СОЗДАВАЛИ, ТО ЖЕ САМОЕ ОТНОСИТСЯ И К ЯДРУ WORDPRESS
Прежде чем создавать дочернюю тему, задайте себе этот вопрос:
То, что я собираюсь сделать, приносит пользу теме или сайту
Что приносит пользу теме и должно входить в дочернюю тему
Пользовательские шаблоны
Пользовательские CSS и все визуальные элементы. Это почти всегда связано с темой
Настройки шаблонов
Фильтры и действия, которые изменяют конкретные функции и функции темы
Настройки функций родительской темы
Когда я должен создать пользовательский плагин вместо дочерней темы
Любой тип функциональности, который расширяет функциональность сайта. Это включает в себя фавиконы, пользовательские типы записей, пользовательские таксономии, короткие коды, пользовательские фильтры и действия по изменению функций по умолчанию, а также все настройки на стороне администратора ( это исключает связанные с темой настройки ). Этот список обертывает важные вещи и не является полным
Помните, что это действия, фильтры и функциональные возможности, которые все еще должны существовать на сайте при переключении тем
Поделиться
Pieter Goosen
09 июня 2015 в 12:43
0
Лучше всего всегда создавать дочернюю тему и переопределять только те файлы, которые вы хотите изменить (просто скопировав их в папку дочерней темы, а затем внесите изменения там).
И да, любые изменения в основной теме будут потеряны во время обновлений, поэтому никогда не вносите изменения непосредственно в основную тему.
Поделиться
Swapnil Ghone
09 июня 2015 в 11:36
Похожие вопросы:
jQuery не загружайте дочернюю тему в WordPress
Я хотел бы добавить код HTML в мою дочернюю тему, чтобы добавить значок в мою дочернюю тему в WordPress. В настоящее время это так : И я хотел бы добавить такой значок Youtube (этого нет в теме,…
Как я могу создать мобильную дочернюю тему в WordPress
Я создал дочернюю тему в WordPress, используя учебник здесь: http:/ / codex.wordpress.org/Child_Themes При посещении моего сайта с мобильного устройства, похоже, применяется другой CSS, который я…
Как активировать дочернюю тему в WordPress?
Я создаю новый style.css и использую его в дочерней теме. И я создаю новую папку в wp-content, называю ее themename-child и загружаю style.css, который я создал. Теперь я иду в WP dashboard ->…
Может ли дочерняя тема в wordpress также иметь свою собственную дочернюю тему
Я купил тему WordPress. У него есть детская тема. Но эта компания продолжает обновлять и детскую тему. Если я настрою какой-либо стиль или, возможно, любую функциональность в дочерней теме, то при…
Не удается активировать дочернюю тему в WordPress
Мой сайт http:/ / test.javatutorialhub.com / Я должен создать дочернюю тему для темы под названием udesign. Я сделал все необходимое. Но когда я активирую дочернюю тему, я получаю сообщение с…
как создать рабочую дочернюю тему WordPress
Я создаю дочернюю тему, но затем хочу добавить какой-то стиль, который не изменится в моем главном меню. Я создаю папку aloshop-child в направлении \public_html\wp-content\themes В этой папке я…
Как создать дочернюю тему в WordPress?
Я пытаюсь создать дочернюю тему, чтобы настроить родительскую тему, но она не работает what-so-ever. Я сделал все, что мог придумать: создал папку для моей дочерней темы под wp-content/themes создал…
Как загрузить wordpress дочернюю тему css после родительской темы css
В моем файле wordpress дочерняя тема css загружается раньше основной темы css. Файл My child theme css functions.php приведен ниже function my_theme_enqueue_styles(){ wp_enqueue_style( ‘bootstrap’,…
Переопределение файлов родительской темы на дочернюю тему в wordpress
Я использую тему Woffice в wordpress, и я активировал дочернюю тему woffice, и теперь я хотел переопределить файлы родительской темы. Это родительская папка темы каталог…
Как активировать дочернюю тему в wordpress?
У меня есть запущенный сайт на wordpress. Теперь я хочу внести в него некоторые изменения. Поэтому разработчик темы сказал активировать дочернюю тему, но я не знаю, как это сделать. я хочу…
Дочерняя тема WordPress: что это и как ее использовать? (Child Theme)
Привет, дорогой друг! В этом видео я расскажу вам о дочерних темах WordPress. Часть моих зрителей и заказчиков задают мне вопросы по поводу дочерних тем и я решил в этом видео ответить на все часто задаваемые вопросы по этому поводу.
Вопросы
1.Что такое дочерняя тема WordPress и чем она отличается от родительской темы? Может ли она заменить родительскую тему?
2.Зачем нужна дочерняя тема WordPress?
3.Где взять дочернюю тему?
4.Как правильно установить дочернюю тему?
Также, мы рассмотрим практическое применение дочерних тем на конкретных примерах.
Дочерняя тема важная составляющая любого сайта на WordPress
Содержание видео
- Вступление
- Что такое дочерняя тема? Чем она отличается от родительской?
- Зачем нужна дочерняя тема? Что внутри дочерней темы?
- Где взять дочернюю тему?
- Генерируем дочернюю тему с помощью плагина Generate Child Theme.
- Дочернюю тему необходимо установить и активировать сразу после установки родительской. Это рекомендация!
- Практические примеры использования дочерней темы. Исправляем ошибки на сайте с помощью дочерней темы. Добавляем в папку дочерней темы другие необходимые для кастомизации/исправления файлы.
- Выводы.
Дочерняя тема WordPress: что это и как ее использовать? (Child Theme)
Смотреть это видео на YouTube.
Подпишитесь на канал InwebPress, чтобы узнать больше о создании и настройке сайтов!
Для автоматического создания дочерней темы используйте плагин Generate Child Theme. Он создаст папку с дочерней темой и все необходимые основные файлы. Также, плагин автоматически активирует созданную дочернюю тему.
Настройки плагина Generate Child Theme
Выводы
Дочерняя тема WordPress нужна для вставки произвольных функций, стилей и скриптов. А также, для кастомизации сайта и внесения программных изменений в код сайта не затрагивая файлы родительской темы. В результате, родительскую тему можно обновлять и не переживать, что все наши изменения будут потеряны после обновления или поломки сайта.
Ссылки
Плагин Generate Child Theme
What The File — плагин для WordPress
What The File добавляет на панель инструментов параметр, показывающий, какие части файла и шаблона используются для отображения страницы, которую вы в данный момент просматриваете. Вы можете щелкнуть имя файла, чтобы напрямую отредактировать его в редакторе темы, хотя я не рекомендую это делать для больших изменений. Что Файл поддерживает темы на основе BuddyPress и Roots Theme.
Более подробную информацию можно найти здесь.
Для получения поддержки посетите форум поддержки.
- What The File показывает, какой файл шаблона используется.
- Загрузить
what-the-file
в каталог/ wp-content / plugins /
- Активируйте плагин через меню «Плагины» в WordPress
Где я могу увидеть, какой файл шаблона используется?
На панели инструментов вы найдете параметр «Что за файл». При наведении указателя мыши на эту опцию отобразится текущий используемый файл шаблона, щелкнув имя файла шаблона, вы сможете редактировать файл шаблона с помощью редактора файлов WordPress.Обратите внимание, что некоторые файлы BuddyPress нельзя редактировать в редакторе WordPress.
Я не могу найти параметр «Что за файл» на панели инструментов
Вы должны быть администратором, чтобы увидеть опцию «Что за файл».
делает то, что файл поддерживает BuddyPress
Да, это так.
делает то, что файл поддерживает тему корней
Да, это так.
Вы сэкономили мне столько времени, могу ли я как-нибудь вас отблагодарить?
Рад слышать, что смог вам помочь! Вы можете поблагодарить меня разными способами, пожалуйста, посетите мою страницу пожертвований, чтобы узнать больше.
«What The File» — это программа с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.
авторов
1.5.4: 8 октября 2017 г.
1.5.3: 2 мая 2016 г.
- Добавлена дополнительная проверка для стартовой темы Sage, props remyvv.
1.5.2
- Исправлена ошибка CSS с панелью администратора.
1.5.1
- Исправлена ошибка, из-за которой в некоторых темах отображалось всех изображений.
1.5.0
- Добавляйте ссылку для редактирования, только если разрешено прямое редактирование файла. Стойка szepeviktor
- Обернутая инициация в хуках и разделенном коде интерфейса и администратора.
- Удалено использование create_function.
- Различные оптимизации кода.
1.4.1
- Исправлена неправильно выровненная стрелка в MP6 — props remyvv.
- Части шаблона теперь правильно отображаются в дочерних темах — props remyvv.
- Изменение стиля кода.
1.4.0
- Исправлена ошибка части шаблона, реквизит remyvv
- Изменение стиля кода
1.3.2
- Плагин теперь проверяет, существует ли файл в дочерней или родительской теме.
1.3.1
- Редактирование файлов напрямую через редактор тем теперь поддерживает дочерние темы.
1.3.0
- Добавлена поддержка части шаблона.
1.2.1
- Улучшена админка и проверка роли администратора.
1.2.0
- Добавлена поддержка BuddyPress.
- Добавлено уведомление об обзоре WordPress.org.
- Исправлена админ-проверка.
- Небольшие изменения кода и рефакторинг.
- Расширенная лицензия GPL.
1.1.2
- Исправлена ошибка URL-адреса администратора, возникающая при установке WordPress в подкаталог.
1.1.1
- Небольшие изменения метаинформации.
1.1.0
- Добавлена поддержка темы Roots.
- Добавлена поддержка WordPress 3.5.1.
- Метаинформация изменена.
1.0.3
- Добавлена поддержка WordPress 3.5.
- Небольшие изменения метаинформации.
1.0.2
- Исправлен неверный URL, когда имя каталога темы отличается от имени темы.
1.0.1
- Изменен способ инициализации плагина.
- CSS перемещен из файла во встроенный CSS.
Как создать дочернюю тему WordPress
В этом посте мы поговорим о создании дочерней темы WordPress и объясним, каковы плюсы и минусы ее использования для вашего сайта.Давайте сначала начнем с понятия дочерней темы.
Дочерняя тема — это тема, наследующая стили и функциональность другой темы, то есть родительской. Использование его для настройки сайта стало чрезвычайно популярным среди пользователей WordPress. Основные преимущества его применения в вашем веб-проекте:
- позволяет вам вносить различные CSS и функциональные изменения на вашем сайте
- сохраняет изменения в случае обновления родительской темы
Дочерняя тема
Согласно WordPress Codex процесс Создание дочерней темы включает в себя несколько шагов, которые не требуют от вас огромных навыков программирования.В этом кратком пошаговом руководстве мы покажем, как создать дочернюю тему WordPress на примере темы Emmet WordPress. Что ж, приступим!
1. Создайте каталог для дочерней темы на вашем сервере
Прежде всего, вы должны начать с создания каталога для дочерней темы в wp-content / themes. Он будет содержать все файлы дочерней темы. Например, если мы хотим создать дочернюю тему для Emmet, папку для нее можно назвать «emmet-child». Насколько вы видите, первый элемент в заголовке показывает, что Emmet является родительской темой для дочерней, которую мы создаем.Этот метод наименования каталога очень удобен, особенно если вы планируете иметь несколько дочерних тем в вашей установке WordPress.
На самом деле, вы можете установить любое другое имя для каталога дочерних тем, но здесь мы показали наиболее распространенную практику именования каталогов дочерних тем для пользователей WordPress. Убедитесь, что в названии каталога нет пробелов, чтобы не допустить ошибок в работе самой темы.
2. Создайте файл style.css для дочерней темы
Следующим шагом является создание таблицы стилей для дочерней темы.Заголовок файла style.css дочерней темы должен быть таким, как показано на скриншоте ниже:
Учтите следующее:
— название темы следует заменить на соответствующий заголовок вашей дочерней темы. ;
— строка шаблона соответствует имени каталога родительской темы. Темой шаблона в нашем случае является Emmet, и это означает, что имя шаблона должно быть Emmet соответственно.
— в разделе @import url необходимо указать путь к CSS-файлу родительской темы.Также помните о чувствительности к регистру слов в пути. Это означает, что если папка родительской темы начинается с нижнего регистра, путь в строке «@import url» также должен указывать на это.
— остальные данные, представленные на скриншоте: автор, описание, URL автора и т. Д. Следует заменить на свои.
Вы можете изменить файл style.css дочерней темы и настроить его в соответствии со своими потребностями. Например, в дочернем элементе Emmet мы решили изменить цвет кнопок меню на оранжевый с градиентом и изменить цвет названий кнопок меню.Для этого мы добавили соответствующие строки кода в файл style.css дочерней темы.
На скриншотах ниже показан стиль меню по умолчанию дочерней темы Emmet, унаследованный от родительской, и исходный код в файле style.css:
Исходный код:
Настроенная дочерняя тема Emmet и ее стиль. css файл:
Следуя этим простым шагам, вы можете редактировать стили дочерней темы и легко получить совершенно новый веб-сайт.
3. Создайте файл functions.php
Это последний и очень важный шаг во всем процессе. Вам нужны таблицы стилей родительской и дочерней тем. Для этого необходимо создать файл functions.php. Первая строка файла functions.php должна начинаться с открывающего тега PHP (
Это пример случая, когда родительская тема использует только один основной стиль.css файл. Если родительская тема связана с более чем одним файлом .css (например, css, main.css и т. Д.), В этом случае вам нужно будет сохранить все зависимости родительской темы.
Файл style.css дочерней темы должен загружаться автоматически. Если это не так, WordPress Codex рекомендует также поставить его в очередь, используя «родительский стиль» в качестве зависимости.
Следует отметить одну вещь, , файл «functions.php» дочерней темы не перезаписывает свой аналог родительской темы.Он загружается перед родительским файлом. Вы можете добавлять новые функции в файл functions.php дочерней темы, и они не будут затронуты после обновления родительской темы и будут правильно работать на вашем сайте.
Файл Functions.php дочерней темы загружается раньше родительского файла. Например, если вы хотите изменить PHP-код файла footer.php в родительской теме, вам нужно будет создать файл с тем же именем, то есть footer.php в каталоге дочерней темы. После загрузки вашего сайта нижний колонтитул.php-файл дочерней темы будет загружен на сайт.
Как вы можете видеть на изображении выше, использование функций WordPress «get_template_directory ()» и «get_stylesheet_directory ()» играет решающую роль в правильном расположении стилей и функций в дочерней теме. Функция «Get_template_dictory» относится к каталогу родительской темы, а функция «get_stylesheet_directory» должна указывать на каталог дочерней темы.
WordPress позволяет добавлять файлы в каталог дочерней темы, которые изначально не включены в родительскую тему.Например, если вы хотите добавить новый шаблон страницы к дочерней теме, вы можете легко это сделать, но следует учитывать иерархию шаблонов в WordPress.
4. Активируйте дочернюю тему для вашего сайта
После создания дочерняя тема должна быть доступна в списке тем в вашей панели администратора WordPress. Чтобы активировать его для своего сайта, перейдите в Личный кабинет> Внешний вид> Темы.
Преимущества и недостатки использования дочерней темы WordPress
Использование дочерней темы WordPress дает вам определенные привилегии, например:
- Независимость от обновлений родительской темы.
- Возможность изменять и дополнять функции и стили, взятые из родительской темы.
- Резервный безопасный, что означает, что если вы не включили определенную функцию или элемент дизайна в файл style.css и functions.php дочерней темы, соответствующие элементы будут загружены из родительской темы.
Несмотря на преимущества, описанные выше, использование дочерней темы предполагает следующие недостатки:
- Время, необходимое для работы с фреймворком, на котором основана родительская тема.Каждый фреймворк и созданная с его помощью тема имеет свои собственные хуки и фильтры, которые, в свою очередь, следует учитывать при создании дочерней темы. Процесс обучения может занять некоторое время, особенно если вы новичок в этой области.
- Риски потери функциональности дочерней темы после ее удаления в родительской. Конечно, вы можете добавить функцию или элемент стиля в код дочерней темы, если он был оставлен разработчиками в родительской теме, но это требует вашего времени и усилий.
Заключение
Процесс создания дочерней темы WordPress включает несколько простых шагов, которые не требуют специальных навыков программирования для пользователей WordPress. Надеюсь, этот пост будет для вас полезным, не стесняйтесь делиться своими мыслями в комментариях.
Зачем и как создавать дочернюю тему с помощью WordPress
Эта документация предполагает аудиторию, имеющую опыт работы с WordPress и веб-разработкой, со средними и продвинутыми навыками работы с php, css, html.
Почему вам следует использовать дочернюю тему?
Создание дочерней темы — лучший способ начать настройку любого
Темы WordPress. Для этого есть одна важная причина: вы не потеряете ни одну из своих настроек, когда обновите родительскую тему! Если вы отредактируете файлы style.css или functions.php своей темы напрямую, обновление просто удалит все.
Настоятельно рекомендуется поддерживать вашу тему в актуальном состоянии, поскольку это гарантирует оптимальную безопасность и устраняет ошибки или проблемы совместимости с браузером.
Кроме того, использование дочерних тем — хорошая практика разработки: в своей дочерней теме вы сосредотачиваетесь только на добавленных функциях, меньше файлов для редактирования и обслуживания. Если вы вернетесь к своему коду через некоторое время, это будет намного легче понять, чем погрузиться в родительскую тему и искать все свои настройки в каждом шаблоне и файле php …
Как создать дочернюю тему?
1) Первый способ с ftp доступом для разработчиков
Что ж, это довольно просто.Вам нужно создать папку и файл. В этом примере мы создадим дочернюю тему для темы Customizr.
- Подключитесь к вашему серверу через FTP-клиент и создайте папку в каталоге тем. Вы можете назвать его как хотите, но без пробелов и специальных символов в имени дочерней папки.
- Создайте файл style.css в этой папке, скопируйте и вставьте в него следующий код. Важным моментом здесь является написание имени параметра родительского шаблона (Template: customizr) маленькими буквами, без заглавной буквы, поскольку оно чувствительно к регистру.
/ * Название темы: Customizr Child URI темы: http://mysite.com/ Описание: Мое описание Автор: Me URI автора: http://mysite.com/ Шаблон: customizr Версия: 1.0.0 * /
2) Альтернативный метод: с плагином (рекомендуется новичкам)
Вы можете использовать плагин для создания дочерней темы одним щелчком мыши. Это отлично работает и не требует кодирования или передачи файлов.
- Загрузите и активируйте плагин Childify Me
- Перейдите в «Внешний вид»> «Настроить».Там вы увидите новую ссылку, добавленную плагином в нижнем колонтитуле текстового описания. См. Снимок экрана ниже.
- Нажмите на кнопку «Детей меня»
- Назовите свою дочернюю тему
- Вернитесь в «Внешний вид»> «Темы», найдите свою недавно созданную дочернюю тему и активируйте ее. Вы сделали!
Я настоятельно рекомендую этот метод новичкам, так как он действительно простой, безопасный и быстрый.
Примечание. Плагин Childify Me создает стиль.css и файлы function.php. Если вы хотите добавить пользовательские функции в файл functions.php, новую папку / файлы, вы можете либо загрузить их по FTP, либо использовать следующий плагин, чтобы легко управлять своими файлами прямо из администратора:
http://wordpress.org/plugins/wp-filemanager/
Как переопределить основные функции родительской темы дочерней темой
Логика перезаписи дочерней темы
Когда дочерняя тема создана и активирована, WordPress сравнивает все path / class-files.php. Каждый раз, когда будет найдено совпадение, путь / файл дочерней темы будет использоваться первым и переопределит файл родительской темы.
Однако есть одно исключение: файл functions.php загружается в дополнение к родительскому файлу functions.php и перед ним.
Например, если вы создаете шаблон index.php в своей дочерней теме, он перезапишет родительский файл шаблона index.php.
Сменные функции
Тот факт, что файл functions.php дочерней версии читается непосредственно перед родительской версией, может быть очень полезным, если вы хотите заменить функции в исходном файле функций.
Чтобы включить это конкретное поведение, разработчики темы должны написать свои функции определенным образом: это то, что мы называем сделать функцию подключаемой:
Подключаемая тема должна иметь все свои функции (в файле functions.php), обернутые следующим образом:
if (! Function_exists ('name_of_function')) { имя_функции_функции ($ params) { // делаем кое-что с $ params} }
Это дает разработчикам дочерних тем возможность полностью заменять функции, объявленные в родительской теме.К тому времени, когда WP находит их в родительском functions.php, они уже существуют и пропускаются (из-за условия function_exists ()).
Рассмотрим пример
В большинстве тем структура кода проста: в корне темы у вас есть:
- style.css
- functions.php
- и обязательные шаблоны темы: указатель, верхний колонтитул, нижний колонтитул, комментарии
Весь остальной код очень часто организован в дерево папок, начинающееся, например, с / inc или / includes.
Допустим, вам нужно перезаписать файл inc / class-content-slider.php.
В своей дочерней теме скопируйте и вставьте файл class-content-slider.php в папку inc /, которую вы создали ранее. Это должен быть точно такой же путь / файл.
Теперь вы можете сделать любую настройку, которая вам нужна в этом файле, он перезапишет родительский файл.
Если вам нужно изменить тему WordPress, я бы рекомендовал использовать хуки действий и фильтров темы вместо копирования и редактирования основных файлов.
Дополнительные ресурсы о дочерних темах в WordPress
Как создать дочернюю тему WordPress, шаг за шагом (2021 г.)
Как создать дочернюю тему WordPress, шаг за шагом (2021 год)
Предпочтение конфиденциальности
Здесь вы найдете обзор всех используемых файлов cookie.Вы можете дать свое согласие на использование целых категорий или отобразить дополнительную информацию и выбрать определенные файлы cookie.
Имя | Borlabs Cookie |
---|---|
Провайдер | Владелец этого сайта |
Назначение | Сохраняет предпочтения посетителей, выбранные в поле Cookie Borlabs Cookie. |
Имя файла cookie | Borlabs-печенье |
Срок действия куки | 1 год |
Имя | Форма согласия на использование cookie |
---|---|
Провайдер | Владелец этого сайта |
Назначение | Сохраняет присутствие и взаимодействие посетителей сайта с помощью форм подписки на рассылку новостей по электронной почте и всплывающих окон, чтобы избежать повторного показа им предложений, которые они уже отклонили. |
Имя файла cookie | mailoptin-cookie |
Срок действия куки | 30 дней |
детских тем — Kadence WP
Если вы какое-то время были в мире WordPress, вы, вероятно, знакомы с термином «дочерняя тема».«Это стало одной из тех пугающих и сложных вещей, от которых многие пытаются держаться подальше, фактически ничего не зная об этом. Однако на самом деле все не так страшно. На самом деле все очень просто. Но что это на самом деле? Что оно делает? Тебе это надо? В этом посте будут рассмотрены некоторые из этих основных вопросов, а также даны пошаговые инструкции по их созданию. Начнем с начала…
Что такое дочерняя тема?
Дочерняя тема — это, по сути, тема, которая полностью наследует стили и функции другой темы.Эта другая тема известна как родительская тема (имеет смысл, не так ли?). WordPress сначала проверит, существует ли файл шаблона в дочерней теме; если это , а не , то он будет извлекать из родительской темы. Таким образом, вы можете изменить только то, что считаете необходимым, сделав копию файла родительской темы, добавив в свою дочернюю тему, а затем отредактировав.
Дочерняя тема также может предоставить удобное место для пользовательского CSS, и вы можете использовать дочернюю тему для добавления / редактирования функций PHP с помощью файла functions.php.
Нужна ли дочерняя тема?
Если вы планируете изменять тему напрямую через файл шаблона или функцию, то да, мы определенно рекомендуем дочернюю тему. Если вы вносите изменения в свою тему без использования дочерней темы, вы рискуете потерять все добавленное содержимое при обновлении. Однако если вы планируете вносить только изменения в CSS, дочерняя тема не нужна. Любые изменения CSS можно внести с помощью настраиваемого поля CSS, расположенного в параметрах темы (или через плагин, если вы используете тему, отличную от Kadence, которая не поставляется с настраиваемым окном CSS).Кроме того, параметры, выбранные на «Панели параметров темы», сохраняются в вашей базе данных, а не в файле. Для сохранения этих разделов при обновлении не требуется дочерняя тема.
Как создать дочернюю тему
- Первое, что вам нужно сделать, это создать локальную папку на рабочем столе. Конечно, вашей папке потребуется имя, поэтому мы рекомендуем использовать имя родителя с «_child» в конце. Например, «virtue_premium_child». Вы можете называть его как хотите, но важно, чтобы в имени файла не было пробелов.
- Следующим шагом является создание таблицы стилей (style.css) для вашей дочерней темы. После создания вставьте следующее прямо в него. Просто замените информацию о вашей теме.
/ * Название темы: Добродетель Премиум Ребенок URI темы: http://example.com/virtue-premium-child/ Описание: Дочерняя тема Virtue Premium Автор: Джон Доу URI автора: http://example.com Шаблон: virtue_premium Версия: 1.0.0 Теги: светлый, темный, двухколоночный, правая боковая панель, отзывчивый макет Текстовый домен: добродетель-ребенок * / / * Здесь начинается настройка темы -------------------------------------------------- ------------ * /
- Технически говоря, ваш стиль.css — единственный необходимый файл. Однако по большей части основная причина создания дочерней темы — это редактирование / добавление функций, и для этого необходимо создать файл functions.php. Этот файл может быть пустым и не является файлом шаблона, поэтому вам не следует копировать его из родительской темы.
Вот и все! Ваша дочерняя тема готова. Теперь все, что вам нужно сделать, это зайти в админку и перейти в Внешний вид> Темы, и ваша дочерняя тема должна быть там, ожидая активации! Не так уж и плохо, а?
Our Child Theme Загрузки
Пример детской темы Kadence
Пример дочерней темы Ascend Premium
Пример детской темы Virtue Premium
Пример детской темы Pinnacle Premium
Пример бесплатной детской темы Ascend
Пример детской темы Virtue Free
Пример детской темы Pinnacle Free
Как создать дочернюю тему WordPress
Темы
WordPress могут быть фантастическими, но есть так много примеров мелких вещей, которые мы все хотим изменить.Цвет здесь, размер шрифта там, возможно, использовать другой призыв к действию на кнопках?
Проблема в том, что изменение темы даже незначительно мешает вам обновить ее до более новой версии в будущем, потому что, если вы все же попытаетесь обновить, вы потеряете все свои изменения.
Если вы работаете с темой из репозитория WordPress или с темой, приобретенной на Themeforest, у которой нет дочерних тем, вы можете использовать все функции выбранной темы при внесении обновлений, не опасаясь потерять свои изменения.
В сегодняшнем проекте WordPress выходного дня я объясню, почему вам следует использовать дочернюю тему и как вы можете выполнить эту работу.
Примечание. Если после прочтения этого сообщения у вас по-прежнему возникают проблемы с настройкой дочерней темы, позвольте нам помочь! Наша отличная служба поддержки может помочь вам с любой проблемой WordPress, большой или маленькой — и бесплатно! Неважно, сколько сейчас времени или выходные, наша команда доступна 24/7.
Как работают детские темы и зачем их использовать
Дочерние темы — это отдельные темы, большая часть функциональности которых зависит от родительской темы.Если вы используете дочернюю тему, WordPress сначала проверит вашу дочернюю тему, чтобы узнать, существует ли конкретная функция. В противном случае будет использоваться родительская тема. Это здорово, потому что позволяет изменять только то, что вам нужно.
Дочерние темы следует использовать всегда, если вы планируете изменить хотя бы один символ в своей теме. На то есть две очень веские причины: обновления и организация.
Обновления
Если вы изменяете тему без использования дочерней темы, у вас есть два варианта: вы можете отказаться от обновления темы в будущем или вы можете обновить и потерять все изменения, внесенные в вашу тему.
Более поздний вариант технически работает, но не рекомендуется. Даже если ваши изменения легко скопировать и вставить, зачем тратить две минуты на задачу, подверженную ошибкам, на каждое обновление?
Ни о каком обновлении темы не может быть и речи. Почти все списки причин взлома вашего сайта содержат устаревшее программное обеспечение как главную причину проблем с безопасностью. Вы всегда должны обновлять WordPress, свои темы и плагины, без исключений.
Организация
Когда вы добавляете код в существующую тему, вы добавляете его в базу кода, которая может состоять из тысяч и тысяч строк.Разработчикам, работающим над вашим сайтом (да и вам самим), будет сложно отслеживать ваши изменения. По крайней мере, одним из прямых результатов этого будет увеличение счета за разработку.
Поскольку дочерние темы возвращаются к родительским темам, если не указано иное, ваша дочерняя тема по сути является набором изменений для существующей темы. Это может привести к обширным изменениям, даже если дочерняя тема имеет только пару файлов и, возможно, 100 строк кода.
Создание дочерней темы
Создать дочернюю тему очень просто, так что вы можете скопировать и вставить мой пример ниже.
Чтобы создать дочернюю тему для вашей темы, вам необходимо выполнить следующие шаги:
- Создайте каталог тем в своей установке WordPress
- Создайте таблицу стилей с информацией о вашей дочерней теме
- Используйте стили родительской темы
После выполнения этих шагов вы можете активировать свою дочернюю тему, и ваш веб-сайт будет выглядеть точно так же, как и раньше, но на нем будет использоваться ваша дочерняя тема.
Итак, давайте подробно рассмотрим вышеперечисленные шаги.В этом примере я буду создавать дочернюю тему для темы Twenty Fourteen по умолчанию.
1. Сначала перейдите в каталог своей темы и создайте папку для новой темы. Вы можете называть его как хотите. Для ясности я назову свою тему , двадцать четыре ребенка,
.
2. Следующим шагом является создание файла таблицы стилей. Он должен называться style.css
. Скопируйте и вставьте следующий код в только что созданный файл:
Два необходимых элемента в приведенном выше коде — это строки, начинающиеся с « Theme Name»
и « Template
».Название темы сообщает WordPress, как называется ваша тема, и это отображается в селекторе тем. Шаблон сообщает WordPress, какую тему следует считать родительской. Большинство других говорят сами за себя, за исключением текстового домена и тегов. Текстовый домен используется для перевода строк. Текстовый домен должен быть уникальным для вашей темы и должен использоваться всякий раз, когда вы используете функции перевода. См. I18n для разработчиков WordPress для получения дополнительной информации. Раздел тегов — это список тегов, которые используются в репозитории тем WordPress.В этом примере я просмотрел файл style.css
родительской темы и просто скопировал оттуда теги.
3. Теперь ваша дочерняя тема работает нормально. Если вы активируете его и перезагрузите страницу, весь ваш контент будет там, но не будет иметь никакой информации о стиле. Я упоминал ранее, что WordPress сначала ищет функциональность в дочерней теме, и если ее нет, он возвращается к родительской теме.
В нашем случае у нас и есть таблица стилей, поэтому WordPress считает, что не должен загружать родительский файл.Чтобы убедиться, что мы загружаем таблицу стилей родительского файла, нам нужно поставить ее в очередь. Это можно сделать в файле темы functions.php
, так что создайте этот файл сейчас. В этот файл скопируйте и вставьте следующий код:
Если вы понятия не имеете о PHP и просто хотите изменить некоторые стили, не беспокойтесь о том, почему это работает. Не стесняйтесь зайти в свой файл таблицы стилей и начать вносить изменения. Если вы хотите узнать больше о постановке в очередь, мы расскажем вам прямо здесь, в WPMU DEV, о правильном добавлении скриптов и стилей в WordPress с постановкой в очередь.
Механика детской темы
Так как же на самом деле работает дочерняя тема? Дочерние темы работают на уровне файлов. Когда файл используется в процессе загрузки темы, он проверяет, присутствует ли он в дочерней теме. Если это так, используется содержимое этого файла. В противном случае используется тот же файл в родительской теме.
Есть одно исключение из этого правила — файл функций темы. Загружается файл functions.php
как в родительской, так и в дочерней теме. Если бы функции дочерней темы заменили родительские, у вас либо был бы неисправный сайт, либо вам нужно было бы скопировать и вставить все содержимое файла функций родительской темы в дочернюю тему, что как бы нарушило цель расширения темы.
Рабочий процесс при изменении функциональности следующий. Если вы хотите внести изменения в заголовок, скопируйте и вставьте файл header.php
родительской темы в свою дочернюю тему. Отредактируйте файл, сколько душе угодно, сохраните его и наслаждайтесь плодами своего труда.
Некоторые заметки для создателей тем
Если вы создаете свои собственные темы, есть несколько рекомендаций, которым вы, возможно, захотите следовать, чтобы упростить создание дочерних тем. Двумя наиболее важными из них являются изучение разницы между get_stylesheet_directory ()
и get_template_directory ()
и создание подключаемых функций.
Правильный каталог
При связывании с ресурсами с использованием упомянутых функций вы всегда должны помнить, что семейство функций get_template_
всегда будет указывать на каталог родительской темы, а семейство функций get_stylesheet_
всегда будет указывать на каталог дочерней темы.
В приведенном выше примере первая ссылка берет свое изображение из родительской темы, вторая — из дочерней темы. Нет хорошего ответа, какой из них использовать, решать только вам.
Преимущество использования get_stylesheet_directory_uri ()
заключается в том, что разработчики дочерних тем могут использовать свое собственное изображение, просто создав его в нужном месте. С другой стороны, если изображение не существует в дочерней теме, оно вообще не будет отображаться.
Причина этого в том, что если дочерняя тема активна, функция get_stylesheet_directory_uri ()
не проверяет (и не знает), какой файл вы загружаете, поэтому она не будет проверять его существование, всегда будет плевать верните URI для дочерней темы.
Изменяемые функции
Другой метод, который вы должны использовать, — это то, что WordPress называет подключаемыми функциями. Это позволяет авторам дочерних тем перезаписывать функции, которые вы определяете в родительской теме. Это включает в себя упаковку ваших функций в проверки function_exists ()
.
Предположим, вы создали функцию для настраиваемого отображения метаданных сообщений с именем my_meta ()
. Дочерняя тема не может изменить эту функцию, потому что ее нельзя определить дважды.Решение состоит в том, чтобы создать эту функцию только в том случае, если она не была определена (помните, что сначала загружается файл функции дочерней темы).
Заключение
Используя несколько очень простых шагов, которые можно скопировать и вставить, вы можете создать среду для своей темы, отвечающую требованиям завтрашнего дня, что избавит вас от головной боли лота и . Хотя может возникнуть соблазн использовать встроенный редактор тем в WordPress, он почти всегда вызывает больше проблем, чем решает, если вы не используете дочернюю тему.
Потратьте несколько минут на изучение этого руководства, и ваш веб-сайт и ваш разработчик будут вам благодарны.Наконец, дайте нам знать, если у вас есть отличные советы по дочерним темам.
Бесплатное видео
Почему 100 НЕ является идеальным показателем скорости загрузки страницы в Google (* 5 минут просмотра)
Узнайте, как использовать Google PageSpeed Insights, чтобы ставить реалистичные цели, повышать скорость сайта и почему стремиться к 100 баллам — НЕПРАВИЛЬНАЯ цель.
Как настроить тему WordPress с помощью дочерней темы Документация
Предположим, у вас есть тема WordPress на вашем веб-сайте, бесплатная или коммерческая, и вы хотите ее настроить .Рекомендуемый способ сделать это — «создать дочернюю тему». Но что это значит и как это сделать?
# Что такое дочерняя тема WordPress?
Дочерняя тема WordPress — это тема WordPress, которая наследует свои функции от другой темы WordPress, родительской темы. Дочерние темы часто используются, когда вы хотите настроить или настроить существующую тему WordPress без потери возможности обновить эту тему .
Раньше не было простого способа обновить темы WordPress без потери всех пользовательских стилей и изменений, которые вы сделали.Это превращается в хаос, когда вы внезапно обнаруживаете, что широко используемый скрипт в популярных темах содержит серьезную уязвимость, и вам нужно обновить свои темы как можно скорее. Это становится трудным выбором, потому что, с одной стороны, вы потеряете все пользовательские стили при обновлении. С другой стороны, вы рискуете взломать свой сайт, если не обновите его достаточно быстро.
Если вы вносите изменения в файлы темы напрямую (т.е. что-либо в каталоге / themes / yourthemename /
), эти изменения, вероятно, будут перезаписаны при следующем обновлении темы .
Дочерняя тема в WordPress унаследует все функции, возможности и код родительской темы без внесения каких-либо изменений в саму родительскую тему. Это позволило пользователям изменять стиль родительской темы и добавлять / изменять функции, создавая автономный каталог, в котором вы можете создавать копии файлов темы и настраивать , не опасаясь, что ваша работа будет перезаписана любыми будущими обновлениями .
# Создание собственной дочерней темы
К счастью, создать дочернюю тему очень просто — все, что вам нужно сделать, это создать одну папку и один файл .
Вам потребуется доступ к вашему сайту через FTP или через приложение файлового менеджера вашего хостинг-провайдера. Я бы порекомендовал вам настроить учетную запись FTP (используя такое программное обеспечение, как FileZilla), так как таким образом проще добавлять и редактировать файлы и папки.
# Создание папки дочерней темы
После того, как вы вошли на свой веб-сайт через выбранный вами FTP-клиент, перейдите к / wp-content / themes /
. Этот каталог будет содержать одну или несколько папок, каждая из которых представляет тему, установленную на вашем сайте.
В этом каталоге создайте новую папку. Вы можете называть его как хотите, но я бы порекомендовал вам использовать описательное имя, например parenttheme-child
(где parenttheme
— это имя вашей активной темы).
Вот пример:
Как видите, моя активная тема — «twentyeleven», поэтому я создал папку «twentyeleven-child».
# Создание файла style.css дочерней темы
После того, как вы создали свою папку, вам нужно добавить единственный файл, который необходим для создания допустимой дочерней темы — стиль .css
. Чтобы он заработал, вам нужно поместить в этот файл некоторую важную информацию, поэтому откройте свой любимый текстовый редактор и вставьте следующее в пустой файл:
/ ** * Название темы: Моя дочерняя тема * URI темы: http://mysite.com * Описание: это созданная мной настраиваемая дочерняя тема. * Автор: Мое имя * URI автора: http: //mysite.com/ * Шаблон: parenttheme * Версия: 0.1 * /
Мы будем интересоваться одной конкретной строкой из заголовка таблицы стилей.
Шаблон: parenttheme
Эта переменная требуется , чтобы сообщить дочерней теме, к какой родительской теме она относится, и ее необходимо изменить, чтобы она соответствовала имени папки вашей активной темы.
Все, что осталось сделать, это активировать вашу дочернюю тему. Сделайте это, перейдя в Внешний вид → Темы на панели инструментов WordPress и активируя дочернюю тему.
# Настройка WordPress с использованием дочерней темы
Есть 2 вещи, которые вы можете захотеть настроить на своем веб-сайте WordPress:
- Внешний вид сайта: это можно сделать через CSS
- Вывод некоторых страниц сайта: это можно сделать через PHP
# Переназначение стилей родительской темы
Перед тем, как переопределить стили родительской темы, вы должны сделать еще одну жизненно важную вещь.Если вы загрузите этот файл в его текущем состоянии и активируете дочернюю тему, WordPress посмотрит файл style.css
вашей дочерней темы как файл стиля по умолчанию и ничего не увидит. В результате ваша тема будет отображаться без стилей CSS. Следовательно, вам нужно вызвать CSS-файл родительской темы в файле style.css вашей дочерней темы со следующей строкой кода:
@import url (../ parenttheme / style.css);
Вам необходимо изменить «parenttheme», чтобы оно соответствовало имени вашей родительской темы .Если таблица стилей по умолчанию — , а не style.css
(почти наверняка так и будет), вам также нужно будет изменить ее, чтобы она подходила вам.
Теперь, когда ваша дочерняя тема активирована, WordPress будет знать, что нужно импортировать весь CSS из файла стиля вашей родительской темы перед выполнением любого CSS, хранящегося в файле style.css
дочерней темы. Поскольку CSS, содержащийся в вашем новом файле, будет последним, что будет выполняться WordPress, он будет иметь приоритет над любым предыдущим CSS.
Хорошо, теперь допустим, что вы хотите внести простые изменения в родительскую тему . Что вы делаете? Просто откройте файл style.css дочерней темы и добавьте новые стили, которые вы хотите изменить в родительской теме.
Если вы знаете, на какие элементы нужно настроить таргетинг, используйте те же селекторы в своей дочерней теме.
Мы могли бы продемонстрировать некоторые действительно простые изменения в ссылках и абзацах. Я использовал код из исходной темы Twenty Eleven для нацеливания на различные элементы.Иногда необходимо использовать более конкретный селектор, чтобы переопределить старый дизайн.
body { отступ: 0 1.4em; } #страница { маржа: 1.667em авто; максимальная ширина: 900 пикселей; } a { цвет: # 5281df; текстовое оформление: нет; семейство шрифтов: Calibri, Tahoma, Arial, sans-serif; } фокус, а: активный, a: hover { текст-оформление: подчеркивание; }
В этих изменениях я уменьшил общий размер тела, а также удалил некоторые отступы по краям.Все эти селекторы можно найти в исходном документе .css. Примечательно, что я также меняю некоторые свойства для всех якорных ссылок, которые включают другой стек шрифтов и выбор цвета.
Если вы разработчик, вы можете использовать что-то вроде инспектора браузера, чтобы выяснить, где находятся недопустимые стили в CSS родительской темы.
Затем просто скопируйте и вставьте код в CSS дочерней темы, где вы можете безопасно его отредактировать:
h3 { размер шрифта: 2.5em; / * Увеличение размера шрифта * / font-weight: жирный; / * Делаем заголовки жирным * / маржа: 20px 0 10px; }
После редактирования файла просто сохраните его.
Теперь, когда ваша дочерняя тема активирована, WordPress будет знать, что нужно импортировать весь CSS из файла стиля вашей родительской темы перед выполнением любого CSS, хранящегося в файле style.css
дочерней темы. Поскольку CSS, содержащийся в вашем новом файле, будет последним, что будет выполняться WordPress, он будет иметь приоритет над любым предыдущим CSS.
# Переназначение файлов шаблонов родительской темы
Редактирование с помощью CSS — это здорово, и его очень легко изучить, достаточно, чтобы безопасно вносить изменения в тему WordPress, но что происходит, когда вам действительно нужно внести изменения в файл шаблона? Когда что-то жестко запрограммировано?
Легко. Скопируйте файл шаблона родительской темы в каталог дочерней темы и внесите в него изменения. . WordPress будет искать файлы шаблонов в каталоге дочерних тем сначала .И если существует альтернативная версия, скажем, footer.php
или single.php
, WordPress будет использовать этот файл шаблона.
Это просто потрясающе. WordPress даже примет category-XX.php
(где XX — это идентификатор определенной категории) в дочерней теме, если вы хотите внести изменения в архив определенной категории.
# Подведение итогов
Надеюсь, после прочтения этой статьи процесс создания дочерних тем WordPress станет для вас более ясным.