Хотите создать дочернюю тему WordPress? После знакомства с основами WordPress возникает вполне обоснованное и понятное желание изменить под свои вкусы и нужды шаблонный дизайн сайта. Создание дочерней темы это то, с чего стоит начинать создавать сайты. В этой статья я расскажу, как создать дочернюю тему в WordPress.
Содержание
Создание дочерней темы – это лучший способ настроить под себя выбранный шаблон WordPress. Дочерняя тема обладает всеми теми характеристиками и внешним видом, что есть у родительской темы. Вы можете сделать все необходимые настройки и при этом никак не повлиять на основной шаблон. Также вы сможете легко обновлять родительскую тему, нисколько не беспокоясь о потере настроек.
Для того, чтобы вносить какие-либо изменения в шаблон, необходимы базовые знания CSS/HTML, также неплохо было бы знать PHP. Очень понадобятся навыки копирования и вставки кусков кода с других источников.
Для начала я бы посоветовал попрактиковаться на localhost’е. Вы также можете переместить действующий сайт на локальный сервер и потренироваться на нем или использовать фиктивный контент.
Советую почитать статью — Как установить сайт на локальном сервере MAMP
Любая хорошая тема WordPress может стать родительской темой. Однако существует огромный выбор тем и некоторые из них достаточно сложны для первых экспериментов в создании дочерних тем, поэтому в качестве примера я решил взять стандартную тему Twenty Thirteen, которая является одной из тем по умолчанию в WordPress.
Для начала в папке установки откройте /wp-content/themes/ и создайте новую папку для дочерней темы. Назовите ее так, как хотите. Я, например, назову ее wpbdemo.
Откройте текстовый документ наподобие Блокнота и вставьте туда вот этот код:
|
1
2
3
4
5
6
7
8
9
10
11
|
/*
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");
|
Сохраните данный документ в только что созданной папке дочерней темы и назовите его как style.css.
Строки кода здесь само собой разумеющиеся. На что действительно следует обратить внимание, так это на строку Template: twentythirteen.
Она сообщает WordPress, что наша тема является дочерней темой, а папка с родительской темой названа twentythirteen. Обратите внимание, что название родительской папки чувствительно к регистру, т.е. если вы введете «Template: TwentyThirteen» — ничего работать не будет.
Последняя строка кода импортирует в дочернюю тему таблицу стилей родительской темы.
Это минимальные требования для создания дочерней темы. Теперь можно перейти в меню Внешний вид » Темы, где в качестве дочерней темы вы увидите WPB. Щелкните по кнопке Активировать для того, чтобы начать ее использовать на своем сайте.
Так как вы еще ничего не изменили в дочерней теме, то на сайте будет использоваться весь функционал и внешний вид родительской темы.
В директории каждой темы содержится файл со стилями – style.css. чаще всего он является главным файлом со стилями, где есть CSS. Однако у некоторых тем в этом файле содержится лишь информация о теме. В этом случае, как правило, CSS файлы находятся в отдельном каталоге.
Здесь вам потребуются кое-какие знания и навыки работы с CSS.
Google Chrome и Firefox идут со встроенным инструментом инспектирования, который позволяет просмотреть HTML и CSS многих элементов веб-страницы.
Если вы хотите увидеть CSS навигационного меню, то просто подведите курсор мышки к меню, щелкните ПКМ и выберите «Просмотреть код».
Как только вы это сделаете, окно браузера будет разделено на две части. В нижней части экрана вы увидите HTML и CSS для страницы.
При наведении курсора мышки к различным строкам HTML, инструмент инспектирования в верхней части экрана будет выделять соответствующий элемент. Как видно из скриншота, я выбрал навигационное меню.
Инструмент хрома также в правой части отобразит CSS правила, относящиеся к выбранному элементу.
Вы можете попробовать отредактировать CSS прямо тут, чтобы сразу увидеть, как все будет выглядеть. Давайте поменяем цвет фона .navbar на #e8e5ce .
Фоновый цвет панели навигации изменился. Если он вам нравится, то можете скопировать это CSS правило и вставить дочерний файл темы style.css.
|
1
2
3
|
.navbar {
background-color: #e8e5ce;
}
|
Сохраните изменения в файле style.css и просмотрите сайт.
Повторите процесс для всего того, что вы хотите изменить в таблице стилей темы.
Вот полный список стилей, что я создал для дочерней темы. Не бойтесь экспериментировать – меняйте его на свое усмотрение.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
/*
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
}
|
У каждой темы WordPress свой макет. Давайте взглянем на строение темы Twenty Thirteen. Здесь есть: хедер, навигационное меню, контентная часть, зона нижнего виджета, вторая (боковая) зона виджетов, футер.
Каждая из этих секций обрабатывается различными файлами в папке twentythirteen. Называются эти файлы templates.
Как правило, эти файлы имеют имя той секции, к которой относятся. Например, футер обслуживается файлом footer.php, хедер и навигационное меню – файлом header.php. Некоторые секции, как например, контентная зона обслуживается несколькими файлами – «content templates».
Итак, начать работу надо с выбора файла темы, который вы хотите изменить; скопируйте его в дочернюю тему.
Например, вы хотите удалить с зоны футера надпись «работает на WordPress» и вставить туда информацию об авторском праве. Для этого: скопируйте в дочернюю тему файл footer.php, откройте его в простом текстовом редакторе, как например, Блокнот. Найдите строку, которую вы хотите удалить и замените ее на то, что хотите. Это может выглядеть так:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<?php
/**
* The template for displaying the footer
*
* Contains footer content and the closing of the #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php get_sidebar( 'main' ); ?>
<div class="site-info">
<p>&copy; Copyright <?php echo date(Y); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
|
Кстати, поиск и устранение неисправностей намного проще проводить в дочерних темах. Например, если вы случайно удалили что-то, что необходимо родительской теме, то можно просто удалить файл из дочерней темы и начать все заново.Например, в этом коде я заменил надпись о теме Twenty Thirteen на уведомление об авторском праве.
В интернете можно найти много руководств по копированию и вставке кусков кода в файл темы functions.php.
Добавление фрагментов кода в родительский файл functions.php означает, что ваши изменения будут перезаписаны, вне зависимости от того будет ли апдейт родительской темы. Именно поэтому всегда рекомендуется работать в дочерней теме и добавлять все коды в ее файл functions.php.
Давайте создадим файл в папке дочерней темы и назовем его functions.php. В этом примере я хочу добавить кусок кода, который изменит стандартное изображение в хедере на свое изображение.
Я уже создал изображение хедера и миниатюру, редактируя стандартное изображение в хедере темы Twenty Thirteen. Следующий шаг – загрузить их в дочернюю тему по адресу inside /images/headers/ folder .
После этого WordPress необходимо указать использовать это изображение в качестве стандартного изображения хедера для нашей темы. Делается это так: вставьте следующий код в файл дочерней темы
functions.php:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php
function wpbdemo_custom_header_setup() {
add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );
register_default_headers( array(
'caramel' => array(
'url' => '%2$s/images/headers/circle-wpb.png',
'thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png',
'description' => __( 'Caramel', 'Caramel header', 'twentythirteen' )
),
) );
}
add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );
?>
|
Зайдите в консоли админки во Внешний вид » Header, и вы увидите изображение, которое мы задали использовать по умолчанию.
Вы можете вставить в файл functions.php любой пользовательский код, который только хотите.
Как и любой новичок, вы будете допускать ошибки при создании первой дочерней темы. Не сдавайтесь сразу! Проверьте мой список самых распространенных ошибок в WordPress и способы их устранения.
Самой распространенной ошибкой, вероятно, будет ошибка синтаксиса, которая обычно возникает, если что-то упустить в коде.
Вы можете скачать всю мою дочернюю тему вот здесь. Помните, что это очень простая дочерняя тема на основе темы Twenty Thirteen.
Вот примеры других дочерних тем, разработанных на основе Twenty Thirteen. Взгляните на них и обратите внимание, насколько сильно они изменены.
Надеюсь, эта статья помогла вам разобраться в создании дочерней темы WordPress. Помните, в интернете можно найти множество инструкций и руководств, кому действительно интересен этот вопрос.
Если вам понравилась статья, то не забывайте ею делиться. Находите меня в социальных медиа, подписывайтесь на мой канал в YouTube. Всем хорошего дня!
Я подготовил для Вас обращение, с ним можете ознакомиться тут
Макс Метелев - автор, блоггер, актер местного театра, ведущий городских мероприятий. Делюсь только лучшим!
Всплывающая форма обратного звонка на сайте WordPress
Как проверить сайт на дубли страниц?
Как добавить Disqus комментарии на сайте WordPress?
11 важных правил первичной оптимизации сайтов
Nrelate — плагин внутренней перелинковки страниц сайта
Как сделать импорт CSV записей в WordPress?
24 плагина обязательных для установки на коммерческие сайты на 2016 год
Создаем красивую форму обратной связи самостоятельно
57 отличных примеров сайтов на WordPress
Как настроить рубрики wordpress с помощью Rich text tags?
Бизнес идея — сухая автомойка
18 способов где брать уникальный контент для сайта
101 полезный совет для начинающего блоггера
Как установить метрику на сайт MODx
Как правильно подключить шрифты в CSS на сайте?
Как ограничить доступ к админке wordpress?
Устанавливаем виджет яндекс пробки без информеров
Как добавить кнопку подписки на канал Youtube?
Как установить фон для сайта?
Как привлечь рекламодателей на сайт
Обучающий тренинг-центр База знаний для интернет предпринимателя. Здесь вы сможете получить полную, проверенную, а самое главное доступную информацию о Wordpress, SEO, научитесь востребованной профессии на рынке IT услуг. Все уроки бесплатные, мы не взымаем плату. Информация постоянно обновляется и пополняется свежими выпусками.
