Создание дочерней темы WordPress за 3 шага

Приветствую вас на сайте impuls-web.ru!
В данной статье я покажу вам как быстро и просто создавать дочерние темы для WordPress.

Для чего нужны дочерние темы?

Приведу небольшой пример. Представьте что вы установили на свой сайт какую нибудь классную тему, настроили её, внесли изменения в её структуру и подправили ей стили чтобы она стала более уникальной. И вот выходит новое обновление, вы обновляете эту тему и все ваши изменения просто затираются и приходится либо всё делать по новой либо забыть про обновление данной темы.

Знакомая ситуация?

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

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

Шаг первый. Создаем папку для нашей дочерней темы.

Для этого воспользуемся ftp-клиентом. Я использую для этого ftp-клиент FileZilla, вы можете использовать тот с которым вам удобней работать.

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

Если вы планируете периодически подключаться к вашему сайту, то вам лучше создать для него отдельный профиль.

Далее мы заходим в корневую папку вашего домена => открываем папку “wp-content” => “Themes” и находим здесь папку с названием той темы, для которой вы планируете создавать дочернюю тему.

Рядом с этой папкой нам нужно будет создать специальную папку в которой будут расположены файлы нашей дочерней темы. В FileZill-е это делается следующим образом:

Щёлкаем правой кнопкой мыши => «Создать каталог» => вводим имя папки для дочерней темы => кнопка «Оk».

Шаг второй. Создаем файл стилей дочерней темы.

Для создания этого файла воспользуемся любым текстовым редактором. Я буду использовать Notepad++, вы можете использовать тот, с которым вам привычнее работать. Для этого мы создаем пустой файл и вносим в него следующий код:

Из всего этого кода нам обязательными являются только первые две строки. Остальные пять строк вы можете добавить по своему желанию.

Рассмотрим для чего нужна каждая строка:

Theme name — имя дочерней темы. Называем тему так же как назвали папку для неё.

Template – указываем название папки родительского шаблона.

В принципе, на этом можно остановиться, но я покажу, как заполнить оставшиеся пять строк.

Template URI – здесь можно указать адрес своего сайта.

Description – пишем описание для своей темы. Например: «Данная тема может использоваться в качестве дочерней для темы impulsweb»

Author – указываете имя автора темы. В данном случае можете указать своё.

Author URI – здесь можно указать ссылку на свой персональный сайт, либо на свой профиль в одной из социальных сетей.

Version — версия нашей темы.

Основные данные мы задали, теперь нам нужно импортировать наш файл стилей родительской темы. Для этого добавим в наш файл еще одну строку:

Здесь, вместо template_name нам необходимо прописать имя родительского шаблона. В моём случае это будет выглядеть так:

После этого нам нужно сохранить этот файл с именем «style.css» и загрузить на сервер в папку дочерней темы. При этом обращаем внимание на то, что у него должна стоять кодировка UTF-8 (без ВОМ).

Если вы используете Notepad++, то там эта кодировка ставится по умолчанию. Если же вы используете какой-то другой редактор, то делайте так как он делает по умолчанию. Если возникнут проблемы, нужно будет его перекодировать в UTF-8.

Для сохранения файла нажимаем меню «Файл» => «Сохранить как…» вводим имя файла “style.css” => кнопка «Сохранить».

И теперь нам нужно загрузить этот файл на наш хостинг. В FileZill-е это делается либо путем перетаскивания, либо правой кнопкой мышки по файлу => «Закачать на сервер».

После этого вы можете перейти в административную часть сайта и зайти в меню «Внешний вид» => «Темы». Если предыдущие 2 шага сделаны правильно, то у вас должна появиться ещё одна тема без картинки предпросмотра.

Активируем эту тему и переходим на сайт.

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

Такое происходит далеко не со всеми темами, но если у вас такое произошло, то вам просто нужно обновить все эти настройки.

Для того чтобы вернуть настройки меню переходим в раздел «Внешний вид» => «Меню», и просто поставить галочку там где у нас основное меню, и сохранить его.

Для того чтобы вернуть настройки виджетов их придётся добавлять по новой в разделе «Внешний вид» => «Виджеты»

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

Шаг третий. Создаем дополнительные файлы для дочерней темы.

Как видите, для того, что бы наша дочерняя тема начала работать достаточно всего одного файла style.css. Что же делать в том случае, если вы вносили изменения не только в style.css, но еще и в другие файлы темы?

Здесь все очень просто. Для того чтобы сохранить изменения внесенные вами в файлы темы после ее обновления, вам достаточно просто взять эти файлы и скопировать их в папку с нашей дочерней темой. Т.е. если вы вносили изменения в файл header.php, то вы просто берете этот файл из папки с родительской темой => копируете его к себе на компьютер => потом открываете папку дочерней темы у себя на хостинге, и загружаю его туда.

Таким образом, теперь вы можете спокойно обновлять свою родительскую тему, и все изменения, которые были внесены в шаблон header.php у вас сохранятся. Тоже самое касается всех остальных файлов темы.

Если какой-то файл лежит не просто в папке с вашей темой, а в какой-то еще подпапке (например папку templates), то вам нужно будет загружать этот файл не просто в папку с дочерней темой, а создать в ней такую же папку templates, и уже в нее загружать. Т.е. иерархия шаблонов и папок дочерней темы должна сохраняться такой же как и в родительской теме.

Что делать если вы уже внесли изменения в файлы вашей темы а потом решили её обновить?

Если вы вносили изменения только в файл стилей, то вы создаете папку для дочерней темы. Берете файл стилей вашей темы, копируете его в эту папку.

Меняете тот код, который расположен в шапке вашего файла стилей, на тот код, который я вам сегодня дала. При этом, там где «Template» вы указываете название папки родительского шаблона, а там где «Theme name» вы указываете название папки вашего дочернего шаблона. Остальные строчки указывать не обязательно.

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

Видеоинструкция по созданию дочерней темы

Надеюсь, что теперь у вас не возникнет проблем с обновлениями тем. Если остались вопросы, то вы можете задать их в комментариях.

Желаю вам успешного создания дочерних тем!

С уважением Юлия Гусарь