Выберет начинающий вебмастер понравившуюся тему для блога на WP, оформит, настроит и только соберется работать, как – упс! – тема обновилась, и на месте авторских фоновых картинок снова «красуется» голый шаблон от разработчика. Знакомо? Чтобы подобное не повторялось регулярно, на сайте должна быть установлена дочерняя тема WordPress, и все настройки следует выполнять непосредственно в ней.
В свое время я набила на этом кучу шишек и сейчас могу с уверенностью сказать: дочерняя тема нужна, но не стоит бездумно пихать в нее все, что вам рекомендуют в качестве «обязательного». Единственное обязательное условие для нормального функционирования ДТ – это наличие файла стилей, остальное опционально и добавляется по мере надобности и «взросления» вебмастера.
Создаем простейшую дочернюю тему без изменения кода
Если эксперименты с кодом не планируются, то процесс создания ДТ займет буквально несколько минут.
У кого Windows, открываем программу Блокнот (Пуск – Стандартные – Блокнот). Я обычно пользуюсь Notepad++, но он не у всех установлен, плюс для данной цели возможностей Блокнота предостаточно.
Сейчас мы создадим файл стилей (можете скопировать и отредактировать этот, он точно рабочий):
/**
* Theme Name: My Child Theme
* Template: iconic-one
*/
@import url(‘../iconic-one/style.css’);
Поясню, что это означает:
Theme Name: после двоеточия должно стоять название вашей дочерней темы. Оно может быть любым, лишь бы на латинице.
Template: после двоеточия указываем название ПАПКИ родительской темы. Учтите, что оно чувствительно к регистру, поэтому пишите один в один так, как значится на родительской папке.
Строка с «собачкой» показывает, откуда будут импортированы стили. Здесь на место iconic-one между косыми чертами нужно вписать точное название вашей родительской папки.
Сохраняем файл как style.css, для этого в поле «Тип файла» выбираем «Все файлы»:
Теперь нужно закинуть созданный файл на хостинг. На Офферхосте это делается через Менеджер файлов:
Идем в корневую папку www. На других хостингах корневой может быть папка public или html, но суть не меняется: это должна быть папка с содержимым сайта. Выбираем сайт, для которого делается ДТ, далее wp-content – themes. Тут «живут» установленные темы. Создаем новую папку (каталог) через пункт «Создать» в горизонтальном меню и называем ее так же, как дочернюю тему, только строчными буквами без пробелов. В моем случае это my-child-theme:
Если слов больше одного, пишите слитно или через тире. В созданную папку закачиваем файл style.css (пункт «Закачать» в меню). Все, дочерняя тема WordPress создана и загружена на хостинг. Осталось правильно ее активировать.
Важно!
- Родительская тема должна быть установлена ОБЯЗАТЕЛЬНО, без нее «дочка» не запустится (последствия могут быть крайне неприятными).
- На дочернюю тему можно переходить только с родительской! То есть, если на данный момент у вас активна другая тема, то сначала надо активировать родительскую и лишь потом дочернюю.
Я в начале своих экспериментов проигнорировала эти предупреждения, в итоге мне пришлось переустанавливать Денвер (а если бы это был настоящий сайт?).
Отправляемся в консоль WordPress, меню Внешний вид — Темы:
Если на предыдущем этапе все было сделано правильно, то дочерняя тема появится в каталоге установленных. Убеждаемся, что сейчас активна ее «родительница». Если нет, то сначала активируем ее, нажав на кнопку «Активировать», а затем аналогичным образом активируем «дочку»:
После активации дочерней темы можно вносить в нее любые изменения (Внешний вид – Настроить) без риска потерять их при первом же обновлении.
Учимся менять код в дочерней теме
Итак, внешнее оформление у ДТ теперь свое, но остальные настройки она по-прежнему импортирует из родительской темы. Как быть, если они вас не устраивают? Например, в моей теме по умолчанию установлен такой микроскопический шрифт, что читать его совершенно невозможно.
Раньше я задавала нужный размер в файле стилей ДТ, так это выглядело:
/**
* Theme Name: My Child Theme
* Template: iconic-one
*/
@import url(‘../iconic-one/style.css’);
body {
font-size: 15px;
}
Однако с недавних пор мне приглянулась опция «Дополнительные стили» в настройках темы WP. Поначалу я боялась туда лезть, чтобы не наломать дров, но оказалось, что это самый легкий и удобный вариант. Дело в том, что, внося изменения напрямую в файл style.css, вы не знаете, каким будет конечный результат – возможно, он вас разочарует, либо через день вы захотите подкорректировать что-нибудь еще. Это значит, что вам придется снова открывать файл, искать нужный участок кода, править, сохранять, обновлять и т. д. Весьма утомительно, плюс возрастает риск совершить ошибку.
А «Дополнительные стили» показывают изменения в режиме демо: вставляете код, редактируете и сразу – еще до нажатия на кнопку «Сохранить» – видите, как это будет смотреться в реале. Если не понравилось – вышли, ничего не сохраняя, вот и все:
Признаюсь, что избежать знакомства хотя бы с азами HTML/CSS не удастся: даже если вы найдете нужную строчку, нельзя просто взять и вырвать ее из блока, частью которого она является – работать не будет. (Когда-то я по этой причине – дабы не вникать, кто к чему относится – копировала целиком родительский файл style.css в дочерний файл стилей и все изменения делала в нем. Но такой громоздкий способ оправдан лишь при большом количестве правок).
Как определить нужный участок кода
У новичков возникает естественный вопрос: а как найти нужный участок кода? Например, я хочу увеличить размер шрифта. Как в море данных вычислить строчку, которая им управляет?
Покажу на примере своего тестового блога на Денвере. Открываю его в браузере FireFox Mozilla. Навожу курсор на интересующую меня область (в данном случае это шрифт статьи) и щелкаю правой кнопкой мыши – «Исследовать элемент» (в Edge – «Проверить элемент», в Google Chrome – «Просмотреть код», суть одна):
Внизу откроется окно с информацией о коде. Мне нужна колонка справа. Я знаю, что шрифт – это «font». Но в окошке «фонтов» — как в Бразилии Педров. С которым из них работать? Интернет подсказывает, что за основной шрифт отвечает участок кода с указанием семейства шрифтов (font-family), его и ищу:
Проверяю: прямо здесь, в окне, меняю размер шрифта (font size) с 14 на 30, чтобы разница была заметна (на самом сайте это никак не отразится), а цвет – с #444 на красный #FF0000 (цвета HTML берем из таблицы в интернете):
Если строка выбрана верно, браузер тут же отразит изменения:
Справа от кода указан номер его строки в файле стилей style.css родительской темы (422), что изрядно облегчает поиск через редактор вроде Notepad++. Также можно скопировать блок прямо из браузера, вставить его в файл style.css дочерней темы и откорректировать там, а можно в окне «Дополнительные стили» в настройках WP. Мне нравится последний вариант. Выставив нужный размер и убрав все лишнее (если не уверены, оставьте как есть), я получаю конечный результат:
body {
font-size: 15px;
}
Сейчас моя дочерняя тема WordPress потихоньку обрастает новыми папками. В частности, недавно туда перекочевал файл single с кнопками для социальных сетей. Устанавливать их всякий раз после обновления хлопотно:). В общем, все совсем не страшно, главное – начать. Только не забывайте перед каждым изменением делать резервные копии. Удачи!
Если вы никогда не работали с кодом и боитесь что-нибудь «сломать», пройдите БЕСПЛАТНЫЕ курсы Евгения Попова по HTML и CSS. Оба курса рассчитаны на начинающих с нуля, но наверняка будут полезны и более опытным пользователям.
