how toСоздание сайтов на WordPress

Создание дочерней темы wordpress и безопасный перенос настроек родительской темы

создание дочерней темы wordpress

Привет друзья! Когда я сделал свой первый сайт на wordpress, о том, что существует дочерняя тема wordpress я даже не подозревал. Поэтому, как и все новички совершил типичную ошибку – установил тему (у меня стоит Sydney) с репозитория вордпресс, активировал ее и настроил с помощью кастомайзера. Со временем подключил собственный custom.css файл и внес некоторые настройки темы в файл functions.php. Потом, когда пришло обновление темы, я ее обновил и увы, как вы уже, наверное, догадались все мои правки исчезли.

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

Прошло около трех лет и wordpress обновился уже несколько раз, появился php 7, а у меня на сайте было все по-старому. После того как плагин Sydney toolbox не смог обновиться из-за старой версии темы, я решил, что пора создать дочернюю тему wordpress и перейти на нее. Но как перенести настройки с родительской темы wordpress в дочернюю, так чтобы сохранились все пользовательские css стили и настройки темы? Мне нужно было найти безопасный способ перенести тему wordpress на дочернюю с сохранением настроек родительской темы.

После того как мне пришлось какое-то время погуглить и испробовать несколько способов создать дочернюю тему wordpress я обнаружил, что существует плагин child theme configurator. Если вы не сильны в кодировании и боитесь что-то упустить при переносе темы, то плагин child theme configuration это как раз, то что нужно.

Child Theme configurator как пользоваться

Для того чтобы установить плагин child theme configurator необходимо чтобы на вашем сервере был включен php7. Если версия php будет ниже 7, то плагин даже не установится. В таком случае повысьте версию языка php в Cpanel своего сервера. У меня эта опция находится во вкладке Программное обеспечение / Выбор версии php.
В остальном, установка плагина child theme configurator происходит стандартным способом прямо с консоли сайта. Устанавливаем и активируем плагин. После активации видим что во вкладке Инструменты появился пункт меню Child Themes. Активация и все настройки дочерней темы находятся здесь.

Child Theme Configurator настройка

Входим во вкладку Child themes и видим, что настройка дочерней темы wordpress происходит на восьми вкладках:

  • Parent / Child
  • Query / Selector
  • Property / Value
  • Web Fonts & css
  • Baseline styles
  • Child styles
  • Files
  • Upgrade

Я нашел для себя полезными только первую и седьмую вкладки – Parent / Сhild и Files. Вкратце рассмотрим каждую вкладку и остановимся на самых важных моментах.

Вкладка Parent / Child

Здесь происходят все самые важные настройки дочерней темы с помощью трех шагов:

  1. Создайте новую дочернюю тему используя существующие темы в качестве родительских (активация по умолчанию)
  2. Выберите родительскую тему из выпадающего списка установленных тем (сделайте выбор)
  3. Жмите на кнопку Analyze для определения таблицы со стилями и других зависимостей.

Некоторые шаги на вкладке Parent / Child я пропущу так как не считаю их важными.
На пятом шаге, называемом Select where to save new styles нам предлагается сделать выбор файла для хранения стилей дочерней темы. Жмем на кнопку Analyze и видим, что плагин предлагает использовать стандартный для wordpress файл со стилями, называемый style.css.

Это единственный необходимый файл в дочерней теме. С его помощью wordpress видит и распознает дочернюю тему и все кастомные стили желательно хранить в нем.

Плагин автоматически прописывает информационный заголовок в начале данного файла, на основе выбранной вами родительской темы на предыдущем шаге. Так что вам ничего не придется делать вручную.
Если вы хотите сохранять пользовательские стили, в другую таблицу стилей, и объединить их со стилями родительской темы в один файл то активируйте кнопку Separate Stylesheet. Однако я не вижу в этом никакого смысла, поскольку каждый отдельный файл css создает отдельный запрос к базе данных. Я считаю, что чем меньше файлов со стилями, тем лучше. В конечном итоге, если вы используете плагин кеширования, то все файлы css будут объединены в один и минифицированны.

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

На восьмом шаге, если вы хотите сохранить и перенести настройки родительской темы, такие как меню, виджеты и прочие кастомные настройки в дочернюю тему, то активируйте эту кнопку. Я считаю этот пункт важным, для тех, кто не создает сайт с нуля, но имеет действующий сайт и ему нужен перенос настроек темы сайта в дочернюю тему.

На девятом, завершающем шаге предлагается кликнуть по кнопке Создать новую дочернюю тему и плагин Child theme configurator сделает все за вас. Сверху вы увидите уведомление, о том, что ваша дочерняя тема была удовлетворительно создана.
Вы создали дочернюю тему, но пока еще не активировали ее. Чтобы сделать предварительный просмотр дочерней темы перед активацией нажмите на ссылку, расположенную в строке этого уведомления Previeve your child theme. Если вас все устраивает, то активируйте ее, если нет, то с вашей родительской темой ничего не случилось, просто вернитесь к ней.

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

Вкладки Query / Selector и Property / Value

Если вы хотите изменить селектор класса (например, размер заголовка h1) или прописать новые свойства и их значения в таблице стилей какому-нибудь элементу (например, color: red), то настройки child theme configurator позволяют вам сделать это прямо в интерфейсе настроек дочерней темы.

Честно говоря, я считаю это эти две вкладки бесполезными. Я не понимаю, почему мне вместо того чтобы прописать свойства напрямую в файле stylesheet.css (ведь для этого и создается дочерняя тема) или в кастомайзере, мне предлагают какой-то неповоротливый функционал. Я должен странным образом искать селектор или свойство селектора. Как то сделано все сложно и запутанно. Так что здесь я ставлю минус.

Вкладка Web Fonts & CSS

Здесь можно подключать веб шрифты, которые были уже загружены в папку fonts нашей темы локально или с внешнего сервера, скажем с google fonts. Подключение осуществляется через правило import css @import url( [path] );

Например: @import url(‘https://fonts.googleapis.com/css family=Roboto:400,400i,500,500i,700,900&display=swap’);

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

Вкладка Baseline css

Здесь показаны все основные стили формирующие внешний вид родительской темы.

Вкладка Child Styles

Из самого названия видно, что здесь показаны стили, которые вы прописываете в дочерней теме.

Вкладка Files

На этот раз это уже что-то интересное. Здесь отображены php файлы шаблона темы. В дочерней теме есть только файл functions.php Если вы хотите изменить какой-либо файл шаблона wordpress вам его нужно выделить (поставить галочку в чекбокс напротив соответствующего файла) и скопировать его в дочернюю тему нажав на кнопку Copy Selected to Child Theme.

Если вносить правки в родительской теме, то при ее обновлении ваши правки затрутся. Например, если вам нужно изменить стандартную фразу Proudly powered by wordpress. Делается это в файле footer.php Для этого перенесите файл footer.php из родительской в дочернюю тему и удалите ссылку. Вместо нее вставьте свой текст, знак копирайта или что вам будет угодно.

Заключение

Итак, я нашел для себя полезным плагин child theme configuration для создания дочерней темы. С его помощью можно создать дочернюю тему легко и просто. Делаешь несколько кликов и все остальное плагин делает за вас. Я надеюсь, что вы узнали, как пользоваться плагином child theme configurator и настраивать его.
Если у вас есть опыт создания дочерних тем с помощью данного плагина или вы знаете какие-либо тонкости его настроек не упомянутые в этой статье, то прошу поделитесь своим опытом в комментариях к статье. Так же не забудьте воспользоваться кнопками социальных сетей и закрепить эту статью на своей стене в социальных сетях. Пока!

Добавить комментарий

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

девятнадцать + 15 =