Как создать дочернюю тему (child theme) в WordPress. Как создать дочернюю тему или wordpress child theme
Всем привет, сегодня хочу рассказать вам о замечательной функции движка wordpress – дочерняя тема. В самом конце записи я покажу пример как сделать дочернюю тему wordpress на базе готового шаблона, сейчас же хочу объяснить зачем нужны wordpress child theme.
Навигация по странице:
Что такое дочерняя тема wordpress и зачем она нужна
Дочерняя тема wordpress – это тема, которая используется в wordpress для изменения или расширения функций родительской (основной) темы.
Использование wordpress child theme позволяет полностью изменить CSS стили, Html и javascript код, а также PHP код или отдельные его функции без вмешательства в авторскую тему. Проще говоря, после наших правок мы сможем обновлять скачанную или приобретенную тему не теряя своих правок и функционала.
Предположим, мы купили платную тему с бесплатными обновлениями и поддержкой на год. Нам нужно создать свой сайт на базе готовой темы + внести мелкие изменения в стили.
Первое что приходит в голову (и это ошибочно): нужно взять и записать свои стили в файл style.css. Таким образом мы получим требуемый результат, НО:
при обновлении все наши стили слетят. Если мы попросим помощи у поддержки они откажутся нам помочь, а если даже помогут то придется обновить в автоматическом режиме...
Замкнутый круг? – не совсем, можно не обновлять тему и не обращаться в поддержку 🙂
Хорошенький совет, не правда ли??
В этой ситуации нам может помочь wordpress child theme. Мы просто забрасываем в wp-content/themes чистую (без правок) приобретенную тему, а также создаем дочернею и забрасываем единственный файл: style.css (он обязательный).
Преимущества использования wordpress child theme
(нажимайте на цифры, чтобы посмотреть все преимущества)
- Wordpress child theme наследует все функции и возможности родительской темы + позволяет дописать свои или заменить существующие.
После активации дочерней темы в админке мы увидим что она работает аналогично родительской.
- Для добавления своих стилей нам достаточно прописать их в дочернею тему, родительская останется без изменений.
- При добавлении нового пользовательского типа или таксономии мы можем добавить недостающие файлы в тему, при этом они не будут мешать обновлению основной темы.
- Безупречным преимуществом использования wordpress child theme есть возможность обновлять тему.
Например, если разработчик найдет уязвимость, или конфликт темы с новой версией вордпресс, он выпустить обновление, а вы легко и просто сможете его установить.
Как создать дочернюю тему wordpress
Для создания дочерней темы вордпресс, нам понадобится выполнить всего лишь несколько условий:
- Создать директорию с произвольным названием.
- В этой папке создать файл style.css со специальным текстом. (покажу ниже)
Предлагаю вашему вниманию краткую инструкцию по созданию wordpress child theme для темы Twenty Sixteen, которая идет в базе нового WP.
Краткая инструкция как сделать дочернюю тему wordpress
Нажимая на цифры ниже, вы сможете перейти к следующему шагу.
Создание дочерней темы для wordpress
Вот так сейчас выглядит наш сайт:
Предлагаю изменить цвет заголовков в виджете справа. Для этого нам нужно в стили дочерней темы добавить вот такой код:
Widget h2.widget-title{color:#228E4F;}
Вот так выглядят правки в стилях:
А так результат наших правок:
Предлагаю также создать другие правки. Например, всем СЕО разработчикам надоедает то, что у виджетах заголовки выводятся в h2. Лечить эту проблему довольно просто через wordpress child theme. Для этого мы должны:
1) Создать файл functions.php.
2) Записать в него вот такой код:
__("Sidebar", "twentysixteen"), "id" => "sidebar-1", "description" => __("Add widgets here to appear in your sidebar.", "twentysixteen"), "before_widget" => "", "after_widget" => "", "before_title" => "
",)); unregister_sidebar("sidebar-2"); register_sidebar(array("name" => __("Content Bottom 1", "twentysixteen"), "id" => "sidebar-2", "description" => __("Appears at the bottom of the content on posts and pages.", "twentysixteen"), "before_widget" => "", "after_widget" => "", "before_title" => " ",)); unregister_sidebar("sidebar-3"); register_sidebar(array("name" => __("Content Bottom 2", "twentysixteen"), "id" => "sidebar-3", "description" => __("Appears at the bottom of the content on posts and pages.", "twentysixteen"), "before_widget" => "", "after_widget" => "", "before_title" => " ",)); } ?>Здесь мы делаем очень простую вещ, удаляем все сайдбары зарегистрированные родительской темой unregister_sidebar("sidebar-3"); и закидываем новый код создания сайдбаров, который мы взяли с родительской темы. Вот и все. Смотрим результат:
Аналогично можно менять содержимое любого файла темы, или добавлять новые, с той лишь разницей, что functions.php не затирается, а добавляются новые функции. Для файлов же темы при добавления файла, например, footer.php - этот файл в родительской теме будет отключен, и мы будем использовать этот файл с дочерней темы.
Отличия родительской от дочерней темы wordpress
Отличие этих тем в логике работы:
если файл не подключен в дочерней теме, значит вордпресс пытается найти его в родительской теме
если файл отличный от functions.php есть в дочерней теме, значит он заменяет собой аналогичный файл в родительской
Всем спасибо за внимание, на этом у меня пожалуй что все, делимся статьей со своими друзьями
, пишем комментарии 🙂Хотите создать дочернюю тему WordPress? После знакомства с основами WordPress возникает вполне обоснованное и понятное желание изменить под свои вкусы и нужды шаблонный дизайн сайта. Создание дочерней темы это то, с чего стоит начинать создавать сайты. В этой статья я расскажу, как создать дочернюю тему в WordPress.
Зачем надо создавать дочернюю тему?
Создание дочерней темы – это лучший способ настроить под себя выбранный шаблон WordPress. Дочерняя тема обладает всеми теми характеристиками и внешним видом, что есть у родительской темы. Вы можете сделать все необходимые настройки и при этом никак не повлиять на основной шаблон. Также вы сможете легко обновлять родительскую тему, нисколько не беспокоясь о потере настроек.
Требования
Для того, чтобы вносить какие-либо изменения в шаблон, необходимы базовые знания CSS/HTML, также неплохо было бы знать PHP. Очень понадобятся навыки копирования и вставки кусков кода с других источников.
Для начала я бы посоветовал попрактиковаться на localhost’е. Вы также можете переместить действующий сайт на локальный сервер и потренироваться на нем или использовать фиктивный контент.
Начало работы
Любая хорошая тема WordPress может стать родительской темой. Однако существует огромный выбор тем и некоторые из них достаточно сложны для первых экспериментов в создании дочерних тем, поэтому в качестве примера я решил взять стандартную тему Twenty Thirteen , которая является одной из тем по умолчанию в WordPress.
Создание первой дочерней темы
Для начала в папке установки откройте / wp - content / themes / и создайте новую папку для дочерней темы. Назовите ее так, как хотите. Я, например, назову ее wpbdemo.
Откройте текстовый документ наподобие Блокнота и вставьте туда вот этот код:
/* Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com/ Author: WPBeginner Template: twentythirteen Version: 1.0.0 */ @import url("../twentythirteen/style.css");
Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com/ Description: A Twenty Thirteen child theme Author URI: http://www.wpbeginner.com Template: twentythirteen Version: 1.0.0 |
Сохраните данный документ в только что созданной папке дочерней темы и назовите его как style.css.
Строки кода здесь само собой разумеющиеся. На что действительно следует обратить внимание, так это на строку Template : twentythirteen .
Она сообщает WordPress, что наша тема является дочерней темой, а папка с родительской темой названа twentythirteen. Обратите внимание, что название родительской папки чувствительно к регистру, т.е. если вы введете «Template: TwentyThirteen» — ничего работать не будет.
Последняя строка кода импортирует в дочернюю тему таблицу стилей родительской темы.
Это минимальные требования для создания дочерней темы. Теперь можно перейти в меню Внешний вид » Темы , где в качестве дочерней темы вы увидите WPB. Щелкните по кнопке Активировать для того, чтобы начать ее использовать на своем сайте.
Так как вы еще ничего не изменили в дочерней теме, то на сайте будет использоваться весь функционал и внешний вид родительской темы.
Настройка дочерней темы
В директории каждой темы содержится файл со стилями – style.css. чаще всего он является главным файлом со стилями, где есть CSS. Однако у некоторых тем в этом файле содержится лишь информация о теме. В этом случае, как правило, CSS файлы находятся в отдельном каталоге.
Здесь вам потребуются кое-какие знания и навыки работы с .
Google Chrome и Firefox идут со встроенным инструментом инспектирования, который позволяет просмотреть и CSS многих элементов веб-страницы.
Если вы хотите увидеть CSS навигационного меню, то просто подведите курсор мышки к меню, щелкните ПКМ и выберите «Просмотреть код».
Как только вы это сделаете, окно браузера будет разделено на две части. В нижней части экрана вы увидите HTML и CSS для страницы.
При наведении курсора мышки к различным строкам HTML, инструмент инспектирования в верхней части экрана будет выделять соответствующий элемент. Как видно из скриншота, я выбрал навигационное меню.
Инструмент хрома также в правой части отобразит CSS правила, относящиеся к выбранному элементу.
Вы можете попробовать отредактировать CSS прямо тут, чтобы сразу увидеть, как все будет выглядеть. Давайте поменяем цвет фона . navbar на #e8e5ce .
Фоновый цвет панели навигации изменился. Если он вам нравится, то можете скопировать это CSS правило и вставить дочерний файл темы style.css.
Navbar { background-color: #e8e5ce; }
Navbar { |
Сохраните изменения в файле style.css и просмотрите сайт.
Повторите процесс для всего того, что вы хотите изменить в таблице стилей темы.
Вот полный список стилей, что я создал для дочерней темы. Не бойтесь экспериментировать – меняйте его на свое усмотрение.
/* Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com Description: A Twenty Thirteen child theme Author: WPBeginner Author URI: http://www.wpbeginner.com Template: twentythirteen Version: 1.0.0 */ @import url("../twentythirteen/style.css"); .site-title { padding: 30px 0 30px; } .site-header .home-link { min-height: 0px; } .navbar { background-color: #e8e5ce; } .widget { background-color: #e8e5ce; } .site-footer { background-color: #d8cdc1; } .site-footer .sidebar-container { background-color:#533F2A }
Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com Description: A Twenty Thirteen child theme Author URI: http://www.wpbeginner.com Template: twentythirteen Version: 1.0.0 @ import url ("../twentythirteen/style.css" ) ; Site - title { padding : 30px 0 30px ; Site - header . home - link { min - height : 0px ; Navbar { background - color : #e8e5ce; Widget { background - color : #e8e5ce; Site - footer { background - color : #d8cdc1; Site - footer . sidebar - container { background - color : #533F2A |
У каждой темы WordPress свой макет. Давайте взглянем на строение темы Twenty Thirteen. Здесь есть: хедер, навигационное меню, контентная часть, зона нижнего виджета, вторая (боковая) зона виджетов, футер.
Каждая из этих секций обрабатывается различными файлами в папке twentythirteen. Называются эти файлы templates.
Как правило, эти файлы имеют имя той секции, к которой относятся. Например, футер обслуживается файлом footer.php, хедер и навигационное меню – файлом header.php. Некоторые секции, как например, контентная зона обслуживается несколькими файлами – «content templates».
Итак, начать работу надо с выбора файла темы, который вы хотите изменить; скопируйте его в дочернюю тему.
Например, вы хотите удалить с зоны футера надпись «работает на WordPress» и вставить туда информацию об авторском праве. Для этого: скопируйте в дочернюю тему файл footer.php, откройте его в простом текстовом редакторе, как например, Блокнот. Найдите строку, которую вы хотите удалить и замените ее на то, что хотите. Это может выглядеть так: