Пошаговое руководство по созданию дочерней темы в WordPress

В этом посте вы узнаете, как шаг за шагом создать дочернюю тему в WordPress, все основы дочерних тем WordPress.

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

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

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

С дочерними темами WordPress вы можете очень легко настроить активную тему WordPress по умолчанию. Вам не нужно знать сложные HTML, CSS, PHP или JavaScript для создания дочерних тем.

Базовое или хорошее понимание HTML, CSS и PHP может быть очень полезным.

Дополнительная литература: Как выбрать идеальную бесплатную или премиальную тему WordPress

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

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

Почему вы должны создать дочернюю тему WordPress

Причина, по которой существуют дочерние темы, заключается в том, что вы можете настроить «родительскую» (вашу существующую/активную) тему без потери изменений и модификаций при обновлении родительской темы.

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

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

Что вам нужно

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

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

С локальным сайтом WordPress вы можете совершать ошибки, не затрагивая ваш живой сайт, и это намного быстрее и лучше.

Есть много способов установить WordPress локально на Windows, MAC или Linux. Прочтите это руководство, чтобы узнать, как установить WordPress на локальный ПК с помощью стека Bitnami WordPress.

Мы уже публиковали пошаговое руководство для начинающих.

Как установить WordPress на сервер WAMP в Windows 8

Как установить WordPress на Windows 8 с помощью стека Bitnami

как создать дочернюю тему в WordPress пошаговое руководство?

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

• functions.php
• стиль.css

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

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

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

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

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

Создайте два новых файла и сохраните их как functions.php и style.css в папке нашей дочерней темы. Имя папки моей дочерней темы — designbomb.

Теперь добавьте следующую информацию в файл style.css вашей дочерней темы и сохраните файл.

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

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

Вы увидите следующую информацию для вашей новой дочерней темы.

На снимке экрана выше вы можете увидеть всю основную информацию о нашей дочерней теме. Название нашей дочерней темы, кто автор этой темы, описание дочерней темы и вы также можете увидеть Это дочерняя тема Twenty Sixteen. сообщение.

Мы добавили Шаблон: двадцать шестнадцать в файле style.css нашей дочерней темы. Эта строка сообщает WordPress, что двадцать шестнадцать является родительской темой.

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

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

После активации новой дочерней темы перейдите в «Внешний вид» > «Редактор» и выберите файл functions.php (Функции темы), добавьте следующий код в файл functions.php и нажмите кнопку «Обновить файл», чтобы сохранить изменения.

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

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

Изменение существующих стилей

Это означает, что наша дочерняя тема готова. Пришло время настроить нашу родительскую тему с помощью новых стилей CSS. Теперь в разделе «Внешний вид» > «Редактор» выберите файл style.css. Мы собираемся добавить несколько новых стилей.

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

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

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

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

Это все

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

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

Скачать дочернюю тему Designs