Как создать дочернюю тему WordPress (видео)

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


Простая дочерняя тема WordPress, основанная на Двадцать тринадцать

Видеоурок:

Подписаться на WPBeginner

Для тех, кто не хочет смотреть видео, вы можете продолжить чтение статьи ниже..

Почему вам нужно создать детскую тему?

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

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

Требования

Требуется базовое понимание CSS / HTML, чтобы вы могли вносить свои собственные изменения. Некоторое знание PHP, безусловно, поможет. Если вы хорошо умеете копировать и вставлять фрагменты кода из других источников, это тоже подойдет.

Мы рекомендуем вам практиковаться в вашей локальной среде разработки. Вы можете переместить живой сайт WordPress на локальный сервер для тестирования или использовать фиктивный контент для разработки тем.

Начиная

Любая хорошая тема WordPress может быть использована в качестве родительской темы. Тем не менее, существует множество различных тем, и с некоторыми из них может быть не так просто работать. Для этого урока мы будем использовать Twenty Thirteen, который является одной из тем WordPress по умолчанию..

Создание вашей первой детской темы

Сначала вам нужно открыть / wp-content / themes / в папке установки WordPress и создать новую папку для своего ребенка. Вы можете назвать эту папку как угодно. Для этого урока мы будем называть его wpbdemo.

Создание новой дочерней темы WordPress

Откройте текстовый редактор, например Блокнот, и вставьте этот код:

/ *
Название темы: WPB Child Theme
URI темы: https://www.wpbeginner.com/
Описание: Двадцать тринадцатая детская тема
Автор: WPBeginner
URI автора: https://www.wpbeginner.com
Шаблон: двадцать тринадцать
Версия: 1.0.0
* /

@import url ("../twentythirteen/style.css");

Теперь сохраните этот файл как style.css в папке дочерней темы, которую вы только что создали.

Большинство этого материала в этом файле говорит само за себя. На что вы действительно хотите обратить внимание – это Шаблон: двадцать тринадцать.

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

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

Это минимальное требование для создания дочерней темы. Теперь вы можете перейти к Внешний вид »Темы где вы увидите WPB Child Theme. Вам нужно нажать на кнопку активировать, чтобы начать использовать дочернюю тему на вашем сайте.

Активация вашей дочерней темы WordPress

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

Настройка темы вашего ребенка

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

Для этого раздела вам понадобится немного ноу-хау CSS.

Google Chrome и Firefox поставляются со встроенными инструментами инспектора. Эти инструменты позволяют взглянуть на HTML и CSS за любым элементом веб-страницы..

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

Использование инструмента Inspect Element в Google Chrome

Это разделит экран вашего браузера на две части. В нижней части экрана вы увидите HTML и CSS для страницы.

Инспектор Chrome, отображающий визуализированные правила стиля HTML и CSS

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

Он также покажет вам правила CSS, связанные с выделенным элементом в окне справа.

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

Игра с CSS в Chrome Inspector

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

.navbar {
цвет фона: # e8e5ce;
}

Сохраните внесенные изменения в файл style.css, а затем просмотрите свой сайт..

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

/ *
Название темы: WPB Child Theme
URI темы: https://www.wpbeginner.com
Описание: Двадцать тринадцатая детская тема
Автор: WPBeginner
URI автора: https://www.wpbeginner.com
Шаблон: двадцать тринадцать
Версия: 1.0.0
* /

@import url ("../twentythirteen/style.css");

.Название сайта {
отступы: 30px 0 30px;
}

.заголовок сайта .home-link {
минимальная высота: 0 пикселей;
}

.navbar {
цвет фона: # e8e5ce;
}

.виджет {
цвет фона: # e8e5ce;
}
.site-footer {
цвет фона: # d8cdc1;
}
.site-footer .sidebar-container {
цвет фона: # 533F2A
}

Редактирование файлов шаблона

Двадцать тринадцать макет

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

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

В большинстве случаев эти шаблоны названы в честь области, для которой они используются. Например, раздел нижнего колонтитула обычно обрабатывается файлом footer.php, области заголовка и навигации обрабатываются файлом header.php. Некоторые области, например область содержимого, обрабатываются несколькими файлами, которые называются шаблонами содержимого..

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

Например, вы хотите удалить ссылку «powered by WordPress» из области нижнего колонтитула и добавить туда уведомление об авторских правах. Просто скопируйте файл footer.php в вашей дочерней теме, а затем откройте его в текстовом редакторе, таком как блокнот. Найдите строки, которые вы хотите удалить, и замените их своими. Нравится:

<?PHP
/ **
* Шаблон для отображения нижнего колонтитула
*
* Содержит содержимое нижнего колонтитула и закрытие элементов #main и #page div.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
* /
?>

<?php get_sidebar (‘main’); ?>

© Авторское право <?php эхо-дата (Y); ?> <?php bloginfo (‘имя’); ?> Все права защищены.



<?php wp_footer (); ?>

В этом коде мы заменили двадцать тринадцать кредитов на уведомление об авторских правах.

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

Добавление новой функциональности к детской теме

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

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

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

Мы уже создали изображение заголовка и миниатюру, отредактировав изображение заголовка Twenty Thirteen по умолчанию. Затем мы загрузили его в нашу дочернюю тему в папке / images / headers /.

После этого нам нужно указать WordPress использовать это изображение в качестве изображения по умолчанию для нашей темы. Мы можем сделать это, добавив этот фрагмент кода в файл functions.php нашей дочерней темы:

<?PHP
function wpbdemo_custom_header_setup () {

add_theme_support (‘custom-header’, массив (‘default-image’ => ‘% s / images / headers / circle-wpb.png’));

register_default_headers (массив (
‘карамель’ => массив (
‘url’ => ‘% 2 $ S / изображения / заголовки / круг-wpb.png’,
‘thumbnail_url’ => ‘% 2 $ S / изображения / заголовки / круг-WPB-thumbnail.png’,
‘описание’ => __ («Карамель», «Карамель», «Двадцать тринадцать»)
),
));

}
add_action (‘after_setup_theme’, ‘wpbdemo_custom_header_setup’);
?>

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

Изменение заголовка темы в вашей дочерней теме WordPress

Вы можете добавить любой необходимый фрагмент кода в файл functions.php вашей дочерней темы. Проверьте эти 25+ чрезвычайно полезных трюков для файла функций WordPress.

Поиск проблемы

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

Наиболее распространенная ошибка, которую вы видите, это, вероятно, синтаксическая ошибка, которая обычно возникает, когда вы что-то пропустили в коде. Вот краткое руководство, объясняющее, как найти и исправить синтаксическую ошибку в WordPress.

Конечный результат

Простая дочерняя тема WordPress, основанная на Двадцать тринадцать

Скачать демо-тему

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

Другие детские темы, основанные на двадцать тринадцать

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

Холи

Холи - детская тема WordPress, основанная на Двадцать тринадцать

вишня в цвету

Вишневый цвет - тема двадцать тринадцать детей

Синий 2013

Синий 2013

Плоский Портфолио

Плоский Портфолио

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map