Начало работы с дочерними темами WordPress?

В этом уроке вы узнаете, как создать дочернюю тему WordPress. Если вы новичок в WordPress и не знаете, что такое дочерняя тема WordPress, я все объясню.

Темы WordPress представляют собой набор файлов PHP, JavaScript и CSS. Проще говоря, с темами WordPress вы можете изменить внешний вид своего блога. Темы WordPress могут быть очень мощными.

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

Вы можете создать тему WordPress с нуля или создать тему WordPress на основе другой темы. Каждая версия WordPress поставляется с предустановленными темами WordPress, и если вам не нравится предустановленная тема WordPress, вы можете установить другую тему WordPress или создать дочернюю тему.

Для чего нужны дочерние темы WordPress?

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

Дочерняя тема экономит много работы и времени. Создание темы WordPress с нуля занимает много времени, а иногда требуется продвинутое знание HTML, CSS, PHP. С дочерними темами вы можете сделать множество модификаций.

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

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

Что вы можете делать с дочерними темами WordPress

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

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

Что вам понадобится:

Теперь вы знаете, что такое дочерняя тема WordPress и почему вы должны создавать дочерние темы. Пришло время узнать, как создать дочернюю тему WordPress.

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

Есть много способов установить WordPress локально. Если вы являетесь пользователем MAC, вы можете использовать MAMP, пользователи Windows могут использовать установщик XAMPP, WAMP или Bitnami WordPress.

• Как установить WordPress с сервером WAMP
• Как установить WordPress с помощью MAMP
• Как установить WordPress со стеком Bitnami

Если вы абсолютный новичок, вы можете загрузить и установить стек Bitnami WordPress, чтобы создать полнофункциональный веб-сайт WordPress на своем MAC или ПК.

Я лично предпочитаю сервер WAMP для локальной разработки. Установить WordPress на WAMP несложно, вы можете прочитать учебник или посмотреть видео, чтобы узнать, как установить WordPress с помощью WAMP, XAMPP или MAMP.

Вам также понадобится редактор кода для редактирования файлов темы. Sublimetext, Brackets, Atom — несколько популярных редакторов кода.

Как создать дочернюю тему WordPress?

Как только ваш локальный сайт WordPress будет готов, мы можем приступить к созданию нашей дочерней темы. Если вы используете сервер WAMP, перейдите в каталог установки WAMP > WWW > WordPress > wp-content > папка тем.

В папке тем WordPress создайте новую папку и назовите ее двадцать шестнадцать детей или как угодно, например, InstantShift. Мы собираемся использовать тему двадцать шестнадцать в качестве родительской темы. Это означает, что наша дочерняя тема будет основана на теме TwentySixteen.

Для каждой дочерней темы нам нужны два файла.

• functions.php
• style.css

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

/*
 Theme Name:   InstantShift
 Description:  Twenty Sixteen Child Theme for InstantShift.
 Author:       Tahir Taous
 Author URI:   http://www.instantshift.com
 Template:     twentysixteen
 Version:      0.1
*/

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

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

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

В заголовок таблицы стилей мы также можем добавить дополнительную информацию, но это не обязательно. Теперь войдите в свою панель управления WordPress. Перейдите в «Внешний вид» > «Темы». Вы должны увидеть тему InstantShift без снимка экрана, потому что мы не добавили ни одного снимка экрана для нашей дочерней темы.

Наведите указатель мыши на тему InstantShift и нажмите кнопку «Сведения о теме». Вот скриншот моей дочерней темы.

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

Не волнуйся. Это нормально. Мы не можем видеть какие-либо стили, потому что мы не включили файл таблицы стилей родительской темы. давайте удостоверимся, что таблица стилей нашей дочерней темы работает. В файле style.css вашей дочерней темы добавьте следующий код.

body{
     background-color: #E7F5FB;
}

сохраните файл style.css, перезагрузите главную страницу вашего локального сайта WordPress, и вы должны увидеть голубой цвет фона.

Регистрация таблицы стилей родительской темы

Мы не хотим создавать все стили с нуля. Мы просто добавим несколько новых стилей в файл style.css дочерней темы. Теперь давайте добавим файл stye.css родительской темы в нашу дочернюю тему.

Откройте файл functions.php и добавьте следующий код в файл functions.php дочерней темы.

<?php
 
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    ks29so_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
    ks29so_enqueue_style( 'child-style',
        get_stylesheet_directory_uri(). '/style.css',
        array( $parent_style)     );
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );

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

Это все. Вы успешно создали свою первую дочернюю тему. Вы также добавили новый цвет фона для тела.

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

Переопределение стилей родительской темы

Настройка заголовка:

По умолчанию заголовок темы Twenty Sixteen имеет много отступов. Давайте изменим отступы и добавим новый цвет фона для шапки сайта. Добавьте следующий код в файл style.css вашей дочерней темы, сохраните файл и перезагрузите внешний интерфейс вашего сайта, чтобы увидеть изменения.

.site-header {
    padding: 0 4.5455%;
    background: #CDDC39;
    margin-bottom: 2em;
}

Здесь вы можете увидеть скриншот шапки сайта до и после добавления наших новых стилей.

Настройка основной навигации

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

После редактирования веб-страниц с помощью инструментов разработчика Chrome вы можете скопировать новый код из инструментов разработчика Chrome и вставить в файл style.css вашей дочерней темы.

Откройте файл style.css вашей дочерней темы и добавьте в него следующий код.

#menu-header > li {
    background: rgba(185, 202, 22, 0.97);
    margin-right: 4px !important;
    border-radius: 5px;
}

Здесь вы можете увидеть скриншот нашей новой шапки. Мы очень легко настроили нашу тему с дочерней темой.

Заключительные слова

Теперь вы знаете, как создавать дочерние темы WordPress. Это очень просто и легко. Имея базовые знания HTML и CSS, Вы можете полностью изменить дизайн своего сайта.

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

Если вы хотите изучить разработку тем WordPress, вам следует начать с дочерних тем WordPress. Изучите основы настройки темы.