Вы хотите создать дочернюю тему в WordPress?
Изучив основы WordPress, вы, вероятно, захотите узнать, как настроить свой сайт WordPress. Дочерние темы — это отличная отправная точка для тех, кто хочет настроить темы WordPress.
В этой статье мы покажем вам, как создать дочернюю тему в WordPress.
Зачем нужна дочерняя тема?
Дочерняя тема — это тема WordPress, которая наследует функциональность, возможности и стиль другой темы WordPress, родительской темы. Затем вы можете настроить дочернюю тему, не внося никаких изменений в родительскую тему.
Детские темы — лучший способ настройки темы WordPress, поскольку они экономят время и усилия. Родительская тема уже содержит много форматирования и функциональности, поэтому вам не придется создавать все с нуля.
Они также позволяют безопасно обновлять темы WordPress. Поскольку вы изменили дочернюю тему, а не родительскую, вы не потеряете никаких настроек при обновлении родительской темы.
Как только вы будете довольны своей дочерней темой, вы сможете использовать ее даже на другом сайте WordPress.
Как создать дочернюю тему (Child theme) WordPress | Вордпресс с нуля
Прежде чем начать создание дочерней темы
Чтобы создать дочернюю тему, вы должны знать, что будете работать с кодом. Вам понадобится базовое понимание HTML и CSS, чтобы понять, какие изменения нужно внести в код для достижения ваших целей.
Некоторые знания PHP также будут полезны. Вы, по крайней мере, должны быть знакомы с копированием и вставкой фрагментов кода из других источников.
Наконец, вам нужно определиться с родительской темой. Вы должны выбрать родительскую тему, которая по внешнему виду и возможностям похожа на вашу конечную цель. Цель — внести как можно меньше изменений.
В этой статье мы будем использовать тему Twenty Twenty-One, которая является одной из тем WordPress по умолчанию.
Создание первой дочерней темы
Вы можете создать дочернюю тему вручную, создав необходимые папки и файлы. Или вы можете создать дочернюю тему с помощью плагина.
Ручной метод полезен, потому что он поможет вам ознакомиться с файлами, с которыми вам придется работать далее в учебнике. Метод плагина можно использовать, если у вас возникли трудности с созданием этих файлов.
Вам нужно использовать только один метод, и вы можете перейти к тому методу, который вы предпочитаете, используя ссылки ниже.
- Метод 1: Создание дочерней темы с помощью кода
- Метод 2: Создание дочерней темы с помощью плагина
Метод 1: Создание дочерней темы с помощью кода
Во-первых, вам нужно открыть папку /wp-content/themes/ в папке установки WordPress и создать новую папку для дочерней темы. Вы можете назвать эту папку как угодно. Для этого руководства мы назовем ее wpbdemo.
Далее вам нужно создать первые два файла для вашей дочерней темы. Начните с открытия текстового редактора, например, Блокнота. Затем вам нужно вставить следующий код в пустой документ.
Имя темы: WPB Child Theme URI темы: https://www.wpbeginner.com/Описание: Дочерняя тема Twenty Twenty-One Автор: WPBeginner Автор URI: https://www.wpbeginner.com Шаблон: twentytwentyone Версия: 1.0.0 Текст Домен: twentytwentyonechild
Этот код содержит информацию о дочерней теме, поэтому не стесняйтесь изменять его в соответствии с вашими потребностями. Теперь сохраните этот файл как стиль.css в папке дочерней темы, которую вы только что создали. Это основная таблица стилей вашей дочерней темы.
Следующее, что вам нужно сделать, это создать второй файл, который будет импортировать, или enqueue, таблицы стилей из родительской темы. Для этого создайте новый документ в текстовом редакторе и скопируйте в него следующий код.
/* enqueue scripts and style from parent theme */ function twentytwentyentyone_styles() < wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') ); > add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');
Этот код будет работать, если вы используете Twenty Twenty-One в качестве родительской темы. Если вы используете другую родительскую тему, то вам нужно использовать другой код, как описано в Руководстве по темам WordPress.
Если вам сложно изменить код для другой родительской темы, то лучше использовать метод плагина.
Теперь сохраните этот файл как функции.php в папке дочерней темы. Мы вернемся к этому файлу позже, чтобы добавить функциональность в вашу дочернюю тему.
Примечание: В прошлом родительская тема импортировалась с помощью команды @import в стиль.css. Мы больше не рекомендуем использовать этот метод, так как он увеличивает время загрузки таблиц стилей.
Теперь вы создали очень простую дочернюю тему, и когда вы перейдете на страницу Внешний вид » Темы вы должны увидеть дочернюю тему WPB. Вам нужно будет нажать кнопку Активировать, чтобы начать использовать дочернюю тему на вашем сайте.
Поскольку вы еще ничего не изменили в дочерней теме, ваш сайт будет использовать функциональность и внешний вид родительской темы. Теперь вы можете перейти к следующему разделу, где вы будете настраивать дочернюю тему.
Способ 2: Создание дочерней темы с помощью плагина
Child Theme Configurator — это простой в использовании плагин WordPress, который позволяет быстро создавать и настраивать дочерние темы без использования кода.
Первое, что вам нужно сделать, это установить и активировать плагин Child Theme Configurator. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.
После активации вам нужно перейти по адресу Инструменты » Детские темы в вашей приборной панели WordPress.
На вкладке Parent/Child вам будет предложено выбрать родительскую тему из выпадающего меню. Мы выберем тему Twenty Twenty-One.
Как только вы нажмете кнопку «Анализ», плагин убедится, что тема подходит для использования в качестве родительской темы. Twenty Twenty-One подходит.
Далее вам будет предложено назвать папку, в которой будет сохранена дочерняя тема, и выбрать место сохранения стилей. Мы оставим настройки по умолчанию.
В следующем разделе вам будет предложено выбрать, как будет осуществляться доступ к таблице стилей родительской темы. Опять же, мы будем использовать настройки по умолчанию.
Когда вы дойдете до раздела 7, вам нужно будет нажать кнопку с надписью «Нажмите, чтобы отредактировать атрибуты дочерней темы». Затем вы можете заполнить детали вашей дочерней темы.
Когда вы создаете дочернюю тему вручную, вы теряете меню и виджеты родительской темы. Child Theme Configuratator может скопировать их из родительской темы в дочернюю тему. Поставьте галочку в поле Раздел 8, если вы хотите это сделать.
Наконец, нажмите кнопку, чтобы создать новую дочернюю тему. Плагин создаст папку для ваших дочерних тем и добавит стиль.css и функции.php файлы, которые вы будете использовать для настройки темы в дальнейшем.
Прежде чем активировать тему, вам следует нажать на ссылку в верхней части экрана, чтобы просмотреть ее и убедиться, что она выглядит хорошо и не сломает ваш сайт.
Если все работает, нажмите кнопку Activate & Publish, и ваша дочерняя тема начнет работать.
На этом этапе дочерняя тема будет выглядеть и вести себя точно так же, как родительская тема. Далее мы приступим к ее настройке.
Настройка дочерней темы
Теперь мы настроим дочернюю тему так, чтобы она выглядела немного иначе, чем родительская. Мы делаем это, добавляя код в стиль.css, а это требует некоторого знакомства с CSS.
Вы можете упростить процесс, скопировав и изменив существующий код из родительской темы. Вы можете найти этот код с помощью инспектора Chrome или Firefox, или скопировав его непосредственно из стиля родительской темы.css-файл.
Метод 1: Копирование кода из инспектора Chrome или Firefox
Самый простой способ найти код CSS, который необходимо изменить, — использовать инструменты инспектора, поставляемые с Google Chrome и Firefox. Эти инструменты позволяют просмотреть HTML и CSS, лежащие в основе любого элемента веб-страницы.
Например, если вы хотите увидеть CSS, используемый для тела поста, то просто наведите курсор на пост и щелкните правой кнопкой мыши, чтобы выбрать Inspect.
Это разделит экран вашего браузера на две части. В нижней части экрана вы увидите HTML и CSS для страницы. В зависимости от настроек вашего браузера, HTML и CSS могут отображаться в правой части экрана.
Когда вы наводите курсор мыши на различные строки HTML, инспектор Chrome будет выделять их в верхнем окне. Он также покажет вам правила CSS, связанные с выделенным элементом.
Вы можете попробовать отредактировать CSS прямо здесь, чтобы посмотреть, как это будет выглядеть. Давайте попробуем изменить цвет фона тела на #fdf8ef.
Вы увидите, что цвет фона страницы изменится, но это изменение будет временным. Чтобы сделать его постоянным, вам нужно скопировать это правило CSS и вставить в стиль вашей дочерней темы.css-файл.
body
Сохраните изменения, внесенные в стиль.css файл, а затем просмотрите ваш сайт.
Вы можете повторить этот процесс для всего, что хотите изменить в таблице стилей вашей темы. Вот полная таблица стилей, которую мы создали для дочерней темы. Не стесняйтесь экспериментировать и изменять его.
Название темы: WPB Child Theme URI темы: https://www.wpbeginner.com/Описание: Дочерняя тема Twenty Twenty-One Автор: WPBeginner Автор URI: https://www.wpbeginner.com Шаблон: twentytwentyone Версия: 1.0.0 Текстовый домен: twentytwentyonechild */ .site-title < color: #7d7b77; >.site-description < color: #aba8a2; >body < background-color: #fdf8ef; color: #7d7b77; >.entry-footer < color: #aba8a2; >.entry-title < color: #aba8a2; font-weight: bold; >.widget-area
Метод 2: Копирование кода из стиля родительской темы.css Файл
Вы также можете скопировать некоторый код непосредственно из стиля родительской темы.css-файл. Затем вы можете вставить его в стиль дочерней темы.css файл, а затем измените его.
Это особенно удобно при использовании Twenty Twenty-One в качестве родительской темы, поскольку в ней широко используются переменные CSS.
Например, когда мы выше изменили цвет фона страницы, исходный код был таким:
background-color: var(--global--color-background);
Здесь ‘-global-color-background’ является переменной. Переменная может использоваться в нескольких местах темы. Чтобы изменить цвет во всех этих местах одновременно, нужно просто изменить значение переменной.
Вам нужно перейти в папку /wp-content/themes/twentytwentyone в папке установки WordPress, а затем открыть стиль.css файла в вашем текстовом редакторе. Затем вы можете найти, где определен -global-color-background.
--global--color-background: var(--global--color-green);
Мы обнаруживаем, что переменная определяется другой переменной!
На самом деле, в секции :root стиля родительской темы.css мы находим целый ряд определенных цветовых переменных. Это цветовая палитра, используемая темой Twenty Twenty-One.
:root
Как только вы выберете идеальную цветовую схему для вашего WordPress сайта, эти переменные позволят вам быстро настроить вашу дочернюю тему.
Вы просто копируете этот код и вставляете его в стиль вашей дочерней темы.css-файл. Затем вам нужно заменить коды цветов на новые, которые вы выбрали для своей собственной цветовой палитры.
Эти цвета будут автоматически использоваться во многих местах вашей дочерней темы. Это не только быстрее, но и сделает цвета вашей темы более последовательными.
Будьте изобретательны. Переменная зеленого цвета не обязательно должна быть зеленой.
Вы можете сделать то же самое для других переменных. Стиль Twenty Twenty-One.css перечисляет переменные для семейств и размеров шрифтов, заголовков, межстрочного интервала и многого другого. Вы можете скопировать любой из них в ваш новый стиль.css файл, где вы можете их настроить.
Редактирование файлов шаблона
Каждая тема WordPress имеет свой макет. Например, тема Twenty Twenty-One имеет заголовок, контур контента, область виджетов футера и нижний колонтитул.
Каждый раздел обрабатывается отдельным файлом в папке twentytwentyone. Эти файлы называются шаблонами.
Шаблоны обычно называются в честь области, для которой они используются. Например, раздел футера обычно обрабатывается функцией footer.php файл, а области заголовка и навигации обрабатываются header.php файл.
Некоторые области, например, область контента, могут обрабатываться несколькими файлами, называемыми шаблонами контента.
Если вы хотите изменить шаблон, то сначала найдите файл в папке родительской темы и скопируйте его в папку дочерней темы. После этого откройте файл в текстовом редакторе и внесите нужные изменения.
В этом руководстве мы скопируем нижний колонтитул.php-файл из папки родительской темы в папку дочерней темы. После этого нужно открыть файл в обычном текстовом редакторе, например, в Блокноте.
В качестве примера мы удалим ссылку «Proudly powered by WordPress» из области нижнего колонтитула и добавим туда уведомление об авторских правах. Для этого необходимо удалить все, что находится между файлами
Затем вам нужно вставить код, который вы найдете под этими тегами в примере ниже.
После сохранения файла и посещения вашего сайта WordPress, вы должны увидеть новое уведомление об авторских правах.
Добавление новой функциональности в дочернюю тему
Функции.php-файл в теме использует PHP-код для добавления функций или изменения функций по умолчанию на сайте WordPress. Он действует как плагин для вашего сайта WordPress, который автоматически активируется с вашей текущей темой.
Вы найдете множество руководств по WordPress, в которых предлагается скопировать и вставить фрагменты кода в функции.php. Но если вы добавите ее в родительскую тему, она будет перезаписываться всякий раз, когда вы будете устанавливать новое обновление темы.
Вот почему мы рекомендуем использовать дочернюю тему при добавлении пользовательских фрагментов кода. В этом уроке мы добавим новую область виджетов в нашу тему.
Мы можем сделать это, добавив этот фрагмент кода в функции нашей дочерней темы.php-файл.
'custom_sidebar', 'name' => __( 'Custom Widget Area', 'text_domain' ), 'description' => __( 'A custom widget area', 'text_domain' ), 'before_title' => ''
', 'before_widget' => '', ); register_sidebar( $args ); > add_action( 'widgets_init', 'custom_sidebars' ); ?>
После сохранения файла вы можете посетить страницу Внешний вид » Виджеты перейдите на страницу вашей приборной панели WordPress, и вы увидите новую область пользовательских виджетов.
Вы можете узнать больше о добавлении областей виджетов в нашем руководстве о том, как добавить динамические готовые области виджетов и боковые панели в WordPress.
Существует множество других функций, которые вы можете добавить в свою тему с помощью пользовательских фрагментов кода. Ознакомьтесь с этими 25+ чрезвычайно полезными трюками для файла функций WordPress.
Устранение неполадок
Если вы никогда раньше не создавали дочернюю тему, то велика вероятность, что вы допустите несколько ошибок. Просто не сдавайтесь слишком быстро. Просмотрите наш список наиболее распространенных ошибок WordPress, чтобы найти решение.
Наиболее распространенные ошибки, которые вы, вероятно, увидите, это синтаксические ошибки, вызванные тем, что вы что-то пропустили в коде. Вы найдете помощь в решении этих проблем в нашем кратком руководстве, как найти и исправить синтаксическую ошибку в WordPress.
Вы всегда можете начать сначала, если что-то пошло не так. Например, если вы случайно удалили что-то, что требовалось вашей родительской теме, то вы можете просто удалить этот файл из дочерней темы и начать сначала.
Мы надеемся, что это руководство помогло вам узнать, как создать дочернюю тему WordPress. Возможно, вы также захотите узнать, как выбрать лучший конструктор сайтов или ознакомиться с нашим списком обязательных плагинов для развития вашего сайта.
Если вам понравилось это руководство, то, пожалуйста, подпишитесь на наш канал YouTube для просмотра видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook (признана экстремистской организацией на территории РФ).
Источник: www.wpbeginner.com