20.05.2017      405      0
 

Зачем нужна дочерняя тема WordPress и как ее установить новичку


Выберет начинающий вебмастер понравившуюся тему для блога на 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, для этого в поле «Тип файла» выбираем «Все файлы»:

Файл стилей дочерней темы

Теперь нужно закинуть созданный файл на хостинг. На Офферхосте это делается через Менеджер файлов:

Менеджер файлов Offerhost

Идем в корневую папку www. На других хостингах корневой может быть папка public или html, но суть не меняется: это должна быть папка с содержимым сайта. Выбираем сайт, для которого делается ДТ, далее wp-content – themes. Тут «живут» установленные темы. Создаем новую папку (каталог) через пункт «Создать» в горизонтальном меню и называем ее так же, как дочернюю тему, только строчными буквами без пробелов. В моем случае это my-child-theme:

Папки с темами на хостинге

Если слов больше одного, пишите слитно или через тире. В созданную папку закачиваем файл style.css (пункт «Закачать» в меню). Все, дочерняя тема WordPress создана и загружена на хостинг. Осталось правильно ее активировать.

Важно!

  1. Родительская тема должна быть установлена ОБЯЗАТЕЛЬНО, без нее «дочка» не запустится (последствия могут быть крайне неприятными).
  2. На дочернюю тему можно переходить только с родительской! То есть, если на данный момент у вас активна другая тема, то сначала надо активировать родительскую и лишь потом дочернюю.

Я в начале своих экспериментов проигнорировала эти предупреждения, в итоге мне пришлось переустанавливать Денвер (а если бы это был настоящий сайт?).

Отправляемся в консоль WordPress, меню Внешний вид — Темы:

Темы WordPress

Если на предыдущем этапе все было сделано правильно, то дочерняя тема появится в каталоге установленных. Убеждаемся, что сейчас активна ее «родительница». Если нет, то сначала активируем ее, нажав на кнопку «Активировать», а затем аналогичным образом активируем «дочку»:

Каталог установленных тем WordPress

После активации дочерней темы можно вносить в нее любые изменения (Внешний вид – Настроить) без риска потерять их при первом же обновлении.

Учимся менять код в дочерней теме

Итак, внешнее оформление у ДТ теперь свое, но остальные настройки она по-прежнему импортирует из родительской темы. Как быть, если они вас не устраивают? Например, в моей теме по умолчанию установлен такой микроскопический шрифт, что читать его совершенно невозможно.

Раньше я задавала нужный размер в файле стилей ДТ, так это выглядело:

/**

* Theme Name: My Child Theme

* Template: iconic-one

*/

@import url(‘../iconic-one/style.css’);

body {

font-size: 15px;

}

Однако с недавних пор мне приглянулась опция «Дополнительные стили» в настройках темы WP. Поначалу я боялась туда лезть, чтобы не наломать дров, но оказалось, что это самый легкий и удобный вариант. Дело в том, что, внося изменения напрямую в файл style.css, вы не знаете, каким будет конечный результат – возможно, он вас разочарует, либо через день вы захотите подкорректировать что-нибудь еще. Это значит, что вам придется снова открывать файл, искать нужный участок кода, править, сохранять, обновлять и т. д. Весьма утомительно, плюс возрастает риск совершить ошибку.

А «Дополнительные стили» показывают изменения в режиме демо: вставляете код, редактируете и сразу – еще до нажатия на кнопку «Сохранить» – видите, как это будет смотреться в реале. Если не понравилось – вышли, ничего не сохраняя, вот и все:

Дополнительные стили для темы WordPress

Признаюсь, что избежать знакомства хотя бы с азами 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. Оба курса рассчитаны на начинающих с нуля, но наверняка будут полезны и более опытным пользователям.


Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сайт использует cookies. Политика конфиденциальности