Меню
ГлавнаяСоцсети

Как создать дочернюю тему (child theme) в WordPress. Дочерние темы в WordPress

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

Для подобных случаев в WordPress предусмотрен механизм создания дочерней темы (child theme). Такая тема использует в качестве основы родительский шаблон и при этом вы можете добавить в нее свои собственные файлы и функции.

Механизм работы с дочерними темами довольно простой. Прежде всего вам нужно в папке wp-content/themes создать новую папку для нее. Будем считать, что папка с основным шаблоном у нас называется parent, а мы создадим новую, которую назовем child.

В папку child нужно поместить, как минимум, один файл style.css. В нем необходимо разместить следующие инструкции:

/* Theme Name: Child Template: parent */

Theme Name: Child

Template: parent

Первая инструкция (Theme Name: Child) это просто название дочерней темы, фактически она не является обязательной, а вот вторая инструкция (Template: parent) является обязательной, и указывает, что данный шаблон является дочерним к parent.

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

@import url("../parent/style.css");

@ import url ("../parent/style.css" ) ;

Для корректной работы перед директивой @import не должно быть никаких правил CSS.

Никаких дополнительных настроек делать не нужно. Иногда автоматическое подключение стилей css из дочерней папки может не работать. Разработчик шаблона должен использовать функции:

  • get_stylesheet_uri() — адрес файла стилей;
  • get_stylesheet_directory_uri() — адрес папки со стилями,

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

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

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

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

Структура папок в дочерней теме должна совпадать с родительской структурой, если вы модифицируете файлы во вложенных папках.

П латформа WordPress является магнитом для тех, кто хочет взять дело в свои руки, кто хочет взять полный контроль над своим веб – сайтом и хотят быть независимыми в управлении ими. WordPress делает это на самом деле легко и может полностью настроить веб – сайт. Если у вас есть немного знаний HTML, CSS и/или PHP, то нет ничего, что вы не можете изменить .

Я имею в виду, просто сравнить темы по умолчанию, Twenty Fifteen and Twenty Fourteen . Трудно поверить, что они работают на той же платформе, не так ли? Поэтому, вполне естественно для вас хотеть адаптировать внешний вид вашего сайта, чтобы соответствовать своим предпочтениям. Я сомневаюсь, что есть пользователи WordPress, которые не думают постоянно об этом. Тем не менее, возникает проблема.

Настройка WordPress: Вы могли бы делать это неправильно

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

Самым большим недостатком является то, что любые изменения, внесенные в тему, таким образом, будут потеряны , как только тема обновляется разработчиком. Как следствие, пользователи либо не смогут сохранить свою тему в актуальном состоянии (что плохо для безопасности) или потеряют все настройки, которые они сделают.

В любом случае, ситуация далека от идеала.

Гораздо лучше идея заключается в том, чтобы использовать . Это позволяет сделать любое число изменений на веб-сайте, не касаясь исходных файлов темы.

Звучит неплохо? Отлично, потому что в этой статье мы подробно рассмотрим, что такое дочерние темы в WordPress , как их создавать и как использовать их, как правильно настроить свой веб-сайт.

Что такое дочерние темы и как их использовать?

Когда речь идет о дочерних темах, сначала мы должны говорить о родительских темах . Тема становится родительской, только когда кто – то строит дочернюю тему для нее. До тех пор, это просто тема, которую вы найдете в каталоге WordPress. Каждая тема включает в себя все файлы, необходимые для родительской темы.

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

Что такое дочерняя тема? В backend WordPress дочерняя тема ведет себя как обычная тема. Вы можете найти и активировать ее в разделе “Внешний вид” → “Темы”, так же, как и любую другую тему.

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

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

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

Преимущества дочерние темы

Есть многочисленные преимущества дочерней темы:

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

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

На самом деле, дочерней теме нужно только три вещи: папки, файлы таблицы стилей и . Вот и все. И то, эти два файла могут даже в значительной степени быть пустыми.

Когда следует использовать дочернюю тему

Таким образом, всегда ли надо создавать дочернюю тему, когда вы хотите внести какие-либо изменения в веб-сайт WordPress? Нет.

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

Тем не менее, если вы планируете ввести большие изменения , такие как произвести капитальный ремонт дизайна, несколько изменений шаблона или что – нибудь еще из этой величины, то дочерняя тема, безусловно, решение.

Основная настройка дочерней темы

Хорошо, теперь, когда мы знаем, что такое дочерняя тема и что они могут сделать для нас, давайте рассмотрим, как создать шаг за шагом. Для нашего примера, мы будем использовать Twenty Fifteen, последняя тема по умолчанию для WordPress. Не волнуйтесь, это очень легко, и вы получите ее в кратчайшие сроки.

Примечание:

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

Создание папки в wp-content/themes

Как уже упоминалось, дочерняя тема нуждается в трех вещах: свою собственную папку, таблицы стилей и файл functions.php . Мы начнем с папки.

Как и любая другая тема, дочерние темы находятся в папке wp-content/themes вашей установке WordPress. Таким образом, перейдем туда и создадим новую папку для вашей дочерней темы.

Наилучшей практикой является предоставление папки вашей темы, то же имя родительской темы и добавить -child . Поскольку мы используем тему twentyfifteen , мы назовем нашу папку twentyfifteen-child .

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

Создание таблиц стилей

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

Создание таблицы стилей легко: Просто создайте новый текстовый файл и назовите его style.css . Готово! Тем не менее, для того, чтобы она работала, нам придется вставить следующий код, так называемый “заголовок таблицы стилей,” в самом начале файла (код любезно предоставлено WordPress Codex):

/* 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 */

Вот что означает каждая строка:

  • Theme name
    Это имя, которое будет отображаться для вашей темы в бэкэнде WordPress.
  • Theme URI
    Ссылка указывает на веб – сайт или демонстрацию страницы темы. Это как правило ссылка автора, которая должна присутствовать для того, чтобы тема могла быть принятой в каталог WordPress.
  • Description
    Это описание вашей темы будет отображаться в меню темы при нажатии на кнопку “Theme Details.”
  • Author
    Это имя автора – это вы в этом случае.
  • Author URI
    Вы можете поместить адрес вашего сайта здесь, если вы хотите.
  • Template
    Эта часть имеет решающее значение. Здесь идет имя родительской темы, а это означает его имя папки. Имейте в виду, что он чувствителен к регистру, и если вы не ставите в нужную информацию, вы получите сообщение об ошибке, так что дважды проверьте!
  • Version
    Отображает версию вашей дочерней темы. Как правило, все начинают с 1,0.
  • License
    Это лицензия вашей дочерней темы. Темы в каталоге WordPress, как правило, выпускается под лицензией GPL; вы должны придерживаться той же лицензии, что и ваша родительская тема.
  • License URI
    Это адрес, где указывается ссылка на вашу лицензию темы. Опять же, придерживаться того, что говорит ваш родитель тема.
  • Tags
    Теги помогают другим найти вашу тему в каталоге WordPress. Таким образом, если вы включите некоторые, убедитесь, что они актуальны.
  • Text domain
    Эта часть используется для интернационализации и сделать темы переводимые. Это должно соответствовать “слизняка” вашей темы.

Если вы чувствуете себя немного перегруженным (уже? ), Вы может быть счастливы знать, что не вся информация на самом деле требуется. На самом деле, все, что вам действительно нужно, это название темы и шаблон.

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

/* Theme Name: Twenty Fifteen Child Theme Description: A child theme of the Twenty Fifteen default WordPress theme Author: AndreyEx Template: twentyfifteen Version: 1.0.0 */

Активирование дочерней темы

После того, как вы создадите папку и таблицы стилей, перейдите в раздел “Внешний вид” → “Темы” в и найдите там дочернюю тему. При нажатии на кнопку “Theme Details”, вы увидите содержимое заголовка таблицы стилей. Вот и вся информация.

Хорошо, теперь нажмите на кнопку с надписью “Activate.” Хорошая работа! Ваша тема активирована. Тем не менее, если вы посмотрите на свой веб-сайт, он будет выглядеть следующим образом:

Не волнуйтесь, все нормально. Вы не облажались. Получите ваше лицо из бумажного пакета. Причина, почему ваш сайт является пустым, потому что он не имеет еще каких-либо стилей

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

Создание файла functions.php

Файл functions.php позволяет изменять и добавлять функциональные возможности и возможности для веб – сайта WordPress. Он может содержать как PHP и встроенные функции WordPress. Кроме того, вы можете создавать свои собственные функции.

Короче говоря, functions.php содержит код, который коренным образом меняет вид и поведение веб – сайта.

Создание файла так же легко, как и создание таблицы стилей, если не легче. Все, что вам нужно, это текстовый файл с именем functions.php , а затем вставить следующий код:

Давайте посмотрим, что происходит, когда мы изменим порядок кода:

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

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

Работа с файлами шаблоном

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

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

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

Для нашего пользовательского шаблона страницы, мы просто скопируем файл page.php из родительской темы, переименуем его в custom-full-width.php и поместим его в папку с именем page-templates в нашей дочерней теме.

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

Единственное, что мы сделали здесь, это ввели заголовок, который говорит WordPress, что это шаблон страницы, где мы изменили get_header и get_footer , так что они будут включать в себя два файла с именами header-custom.php и footer-custom.php .

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

Теперь пришло время создать наш пользовательский заголовок и нижний колонтитулы в файле темы. Во- первых, перейдите к родительской теме, и скопируйте header.php и footer.php в папку дочерней темы, и переименуйте их в header-custom.php и footer-custom.php , соответственно.

До сих пор наша страница выглядела так же, как и раньше. Это время для настройки. Давайте начнем с нашего пользовательского заголовка.

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

После этого нам нужно добавить вызов к нашему новому виджету колонтитула, так что это будет выглядеть следующим образом: