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

2 минуты чтения
Цзянсу
2025-08-22
2025-10-29
2,788
Я получаю комиссионные, когда вы совершаете покупки по ссылкам ниже, без дополнительных затрат для вас.

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

Что означает подтема?

По сути, дочерняя тема - это отражение любой темы. Идея заключается в том, что какие бы изменения вы ни внесли в дочернюю тему, ваша родительская тема не будет затронута, но любые изменения, внесенные в родительскую тему, будут отражены в дочерней теме.

Нужно ли использовать дочернюю тему

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

Установка дочерней темы WordPress

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

Помните, что она не будет работать, пока ваша родительская тема не появится на странице “Темы” в разделе “Внешний вид”.

Способ 1: Создайте дочернюю тему вручную

#1Прежде всего, создайте новую папку и назовите ее по своему усмотрению, например, “twentytwentyfour-child”.

#2:Далее необходимо создать файл и назвать его “style.css”, обратите внимание, что этот файл должен существовать.

#3Теперь вам нужно открыть этот недавно созданный файл и ввести в него следующую информацию.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://example.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

Объяснение ключевых параметров.

  • Theme Name:.(обязательно)Название вашей дочерней темы.
  • Template:.(обязательно)этонаиболее важныйлинии. Она должнаидеальное соответствиеИмя каталога родительской темы. Например, родительской темой является twentytwentyfourЗаполните пропуски. twentytwentyfourРодительской темой является DiviЗаполните пропуски. Divi.Дело должно быть последовательным
  • Description: Краткое описание подтемы.
  • AuthorВаше имя.
  • Author URI: Адрес вашего сайта.
  • Version: Номер версии подтемы.

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

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

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://www.likacloud.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");

/* 自定义样式从这里开始 */

/* 1. 更改文章标题颜色 */
.wp-block-post-title {
    color: #1a4f6e;
    font-weight: 700;
}

/* 2. 更改网站背景色 */
body {
    background-color: #f8f9fa;
}

/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
    max-width: 1280px;
}

/* 4. 自定义链接颜色 */
a {
    color: #d14545;
}
a:hover {
    color: #a23434;
    text-decoration: none;
}

принимать к сведению

несмотря на то, что @import это самый простой подход, но он не оптимален с точки зрения производительности (так как препятствует параллельной загрузке). Более продвинутый подход заключается в использовании wp_enqueue_style() функция в подтеме functions.php файл, чтобы добавить таблицу стилей родительской темы в очередь. Однако для начала можно использовать @import Она полностью осуществима и проста для понимания.

Вот так:

<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');

function enqueue_parent_and_child_styles() {
    // 加载父主题样式
    wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
    
    // 加载子主题样式,并指定依赖于父主题样式
    // 这样可以确保子主题样式在父主题样式之后加载,保证样式覆盖生效
    wp_enqueue_style('child-style', 
                     get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
                     array('parent-style'), // 依赖关系
                     wp_get_theme()->get('Version') // 版本号,可选
                    );
}

Код Объяснение:

  1. add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles'): Установка пользовательских функций на крючки загрузки в стиле WordPress
  2. get_template_directory_uri(): Получение URL-адреса директории родительской темы
  3. get_stylesheet_directory_uri(): Получение URL-адреса каталога подтемы (если подтема активна)
  4. array('parent-style'): Объявите стили дочерней темы зависимыми от стилей родительской темы, чтобы обеспечить правильный порядок загрузки.

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

Вы можете просто добавить этот код в дочернюю тему functions.php файл (или создайте его, если он не существует), сохранив при этом уже существующую дочернюю тему style.css Достаточно информации об аннотации в заголовке.

Все остальные детали могут быть изменены в соответствии с вашими пожеланиями.

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

Способ 2: Используйте плагин для создания дочерней темы

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

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

#1: Во-первых, вам нужно скачать Конфигуратор дочерних тем Плагины.

#2: Теперь войдите на свой сайт и откройте панель управления.

#3: Перейдите в раздел Плагины и выберите пункт Добавить новый.

#4:Теперь вам нужно загрузить плагин, который вы только что скачали, нажав на опцию “Upload Plugin”, а затем активировать его.

#5:Важно убедиться, что вы активировали тему, для которой хотите создать дочернюю тему.

#6: Это можно сделать, просто перейдя в раздел “Инструменты” и нажав на подтему.

#7: Теперь нажмите на кнопку "Анализ" и создайте дочернюю тему в соответствии с настройками, указанными в плагине.

#8: Теперь вам нужно нажать на опцию “Создать новую дочернюю тему”.

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

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

Предположим, что вы создали twentytwentyfour дочерней темы, в которой вы хотите изменить способ отображения одиночных страниц. Местонахождение одностраничника - twentytwentyfour-child/template-parts/content-single.php

#1:В папке дочерней темы создайте файл content-single.php. Вам нужно быть очень внимательными к названию и структуре. Они должны быть такими же, как в родительской теме, чтобы их можно было переопределить.

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

#3: Вот и все. На этом шаге вам осталось только написать код пожеланий в content-single.php, который перезапишет родительский файл.

Осторожно: Убедитесь, что имя файла и путь к папке должны быть одинаковыми.

Мы надеемся, что теперь вы сможете легко создавать дочерние темы. Если у вас есть вопросы, пожалуйста, добавьтеГруппа QQ 1398231Обсуждение.

Посмотреть рекомендуемые облачные хостинг-провайдеры WordPress