WordPress как на ладони
Плагин рекламы для WordPress wordpress jino

Дочерние темы WordPress

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

Дочерняя тема — это тема созданная на основе родительской. «На основе» значит, что если запрашиваемого файла темы нет, он будет взят из родительской темы: родительская тема как бы страхует дочернюю тему. С технической стороны, при создании дочерней темы, она становится основной, а родительская дополняющей темой.

Оглавление:

Зачем нужна дочерняя тема?

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

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

Что можно изменить в  дочерней теме?

В ней можно изменить практически все, но нужно понимать что и как работает (см. ниже). Однако, чтобы изменять некоторые вещи, родительская тема должна быть создана с учетом возможных изменений. Если разработчик родительской темы, не продумывает возможные изменения, то изменить некоторые моменты будет или сложно, или невозможно.

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

Был вопрос по подтемам, рекомендую прочитать: Как вносить изменения в шаблоны дочерней темы?

к началу

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

Создать подтему легко! Ниже создается дочерняя к twentyfifteen тема.

  1. Создайте папку с любым названием в каталоге тем: wp-content/themes. Пусть twentyfifteen-child

  2. Создайте в новой папке файл style.css. С содержимым:

    /*
    Theme Name: Моя дочерняя тема
    Template: twentyfifteen
    
    Не обязательные параметры:
    Theme URI: http://site.ru/
    Description: Дочерняя тема для темы twentyfifteen
    Author: Kama
    Author URI: http://site.ru/about/
    Version: 1.0
    */
    
    /* импортируем стили родительской темы */
    @import url("../twentyfifteen/style.css");
    
    /* Свои дополнительные стили */
    .foo{ color:red; }
  3. Зайдите во Внешний вид › Темы и активируйте новую тему «Моя дочерняя тема».

Обязательно нужно указать строку Template: twentyfifteen, (строка регистрозависима) она указывает что это подтема темы twentyfifteen.

Директива @import должна быть первым правилом в style.css. Если написать правила перед ней, то она не сработает и стили родительской темы не подключаться.

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

В результате у нас должна получиться такая структура:

wp-content
   └── themes
		 ├── twentyfifteen (родительская тема)
		 └── twentyfifteen-child (подтема; может иметь любое название)
				 └── style.css

twentyfifteen-child может содержать и другие файлы, среди них:

  • style.css — (обязательный) полностью заменяет такой же файл родительской темы.

  • functions.php — дополняет functions.php родительской темы (загружается перед ним).

  • файлы шаблонаindex.php, home.php и т.д., которые есть/нет в родительской теме. Если файл есть в дочерней теме, то этот файл полностью заменит родительский файл. Например: создав footer.php и скопировав в него содержимое footer.php из родительской темы, мы можем изменять вывод, не меняя файл родительской темы.

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

Файл style.css

style.css — единственный обязательный файл в подтеме. Дает информацию WordPress, чтобы опознать дочернюю тему.

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

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

Пример style.css дочерней темы.

/*
Theme Name: Моя дочерняя тема
Template: twentyfifteen
Theme URI: http://site.ru/
Description: Дочерняя тема для темы twentyfifteen
Author: Kama
Author URI: http://site.ru/about/
Version: 1.0
*/

// стили родительской темы
@import url("../twentyfifteen/style.css");

// дополнительные стили
.foo{ color:red; }
  • Theme Name  —  (обязательно) название дочерней темы.
  • Template — (обязательно) регистрозависимое название папки родительской темы.

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

  • Theme URI — адрес сайта дочерней темы.
  • Description — описание дочерней темы.
  • Author URI  — адрес сайта автора дочерней темы.
  • Author — имя автора дочерней темы.
  • Version  — версия дочерней темы.
к началу

Файл function.php

Рекомендую ознакомится со статьей: файл шаблона functions.php в WordPress.

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

Это значит, что для изменения родительской темы, в functions.php можно использовать хуки и можно «переопределять» функции, если они на это рассчитаны.

Использование хуков

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

add_action( 'twentyfifteen_credits', function() {
	echo 'Компания © 2015';
} );

Переопределение функции

В файле functions.php родительской темы twentyfifteen есть функция twentyfifteen_fonts_url() - регистрирует шрифты google. Выглядит она так:

if( ! function_exists( 'twentyfifteen_fonts_url' ) ){
	function twentyfifteen_fonts_url(){
		// код функции ...
	}
}

Условие ! function_exists('twentyfifteen_fonts_url') - если функция не существует, позволяет определить такую же функцию в functions.php дочерней темы.

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

Например, добавив такой код в functions.php дочерней темы, мы отключим подключение шрифтов:

function twentyfifteen_fonts_url() {
	return '';
}

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

if( ! function_exists('theme_function') ){
	function theme_function() {
		// Код.
	}
}

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

к началу

Файлы шаблона

В дочерней теме можно использовать все те же файлы темы, что и в любой теме WP. Полный список читайте в статье «Иерархия шаблонов темы».

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

Несколько примеров создания файла шаблона в дочерней теме:

#1 Добавление шаблона, отсутствующего в родительской теме

Создадим шаблон для страницы "карта сайта". Для этого в подтеме создадим файл page-sitemap.php, а на сайте создадим страницу с ярлыком sitemap. Готово!

#2 Изменение шаблона, имеющегося в родительской теме

Допустим, у нас есть home.php в родительской теме и нам нужно его изменить.

  1. Создаем home.php в подтеме.

  2. Скопируем в него код файла из родительской темы.

  3. Изменим скопированный код как нужно.
к началу

Как это работает: шаг за шагом

Процесс работы дочерней темы со стороны WordPress:

  1. WP открывает style.css темы установленной в настройках системы и считывает заголовки.

  2. Директива Template: объявляет что у темы есть родительская тема и указывает её название. Теперь WP работает с темой как с дочерней.

  3. Дальше все файлы, кроме functions.php, подключаются с помощью locate_template(): проверяет существует ли файл в подтеме, если не существует, то подключается из родительской темы.

Локализация подтем

Для локализации WP будет использовать файлы перевода родительской темы. И разумеется, нужных строк перевода там может не быть. Поэтому для подтемы нужно создать файл перевода и подключить его в коде подтемы.

Для подключения есть спец. функция: load_child_theme_textdomain(). Используем её в functions.php подтемы:

function my_child_theme_setup() {
	load_child_theme_textdomain( 'my_child_theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );

Также, нужно создать файл перевода в дочерней теме: languages/en_US.mo.

Теперь можно использовать функции локализации WordPress в подтеме:

_e( 'Это нужно перевести на англ.', 'my_child_theme' );

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

к началу

Функции WordPress связанные с дочерними темами

  • get_stylesheet_directory_uri() — получает URL текущей темы (дочерней, не родительской).

  • get_template_directory_uri() — получает URL текущей темы (родительской, не дочерней).

  • get_stylesheet_directory() — получает путь до текущей темы (дочерней, не родительской).

  • get_template_directory() — получает путь до текущей темы (родительской, не дочерней).

  • get_stylesheet() — получает название каталога текущей темы (дочерней, не родительской).

  • get_template() — получает название каталога текущей темы (родительской, не дочерней).

  • get_stylesheet_uri() — получает готовый URL на файл стилей style.css текущей темы. Если используется дочерняя тема, то получит ссылку на стили доч. темы. В этом случае для родительской темы такой функции в WordPress нет.

Т.е. если нужно получить ссылку на файл темы, но при этом используется дочерняя тема, то УРЛы от: get_stylesheet_directory_uri() и get_template_directory_uri() буду отличаться: первый будет на дочернюю тему, а второй на родительскую...

к началу

Плагин для быстрого создания дочерних тем

Чтобы не возиться с созданием папок и файлов, можно воспользоваться плагином One-Click Child Theme.

Он позволяет создать дочернюю тему из текущей в один клик. После создания темы плагин можно удалить. У плагина много хороших отзывов...

Заметки

Форматы записей

Функция add_theme_support('post-formats') переопределит форматы, заданные родительской темой, а не дополнит их.

@import в style.css дочерней темы

Несмотря на то что везде пишут использовать @import в style.css подтемы. Делать это я не рекомендую. Потому что в этом случае браузер не может параллельно загрузить оба файла стилей: от родительской темы и от дочерней... Ему придется загрузить их последовательно: сначала стили дочерней темы, там он увидит @import и только потом начнет загружать стили родительской темы... В итоге получается, что мы теряем в скорости загрузки страницы порядка 200мс. Столько уходит на загрузку файла стилей. Под загрузкой подразумевается отправка запроса на сервер, ожидание ответа, загрузка файла...

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

add_action('wp_enqueue_scripts', 'my_theme_styles' );
function my_theme_styles() {
	wp_enqueue_style('parent-theme-css', get_template_directory_uri() .'/style.css' );
	// не обязательно, правильная родительская тема подключит его сама.
	//wp_enqueue_style('child-theme-css', get_stylesheet_directory_uri() .'/style.css', array('parent-theme-css') );
}

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

Подробнее про такой тип загрузки читайте в отдельной статье: Альтернатива @import в дочерних темах

Дочерние темы WordPress 34 комментария
Полезные 3 Вопросы 3 Все
  • Evgeny

    Добрый день, стили родительской темы подхватываются и их удается переопределить, но мобильный стиль не получается. Он находится в родительской теме рядом с главным стилем style.css . Под названием responsive.css

    В файл функций дочерней темы писал следующее:

    add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
    
    function my_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'responsive', get_template_directory_uri() . '/responsive.css' );
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    }
    
    Пытаюсь в файле style.css (в дочерней теме) в начале добавить:
    
    media screen and (max-width:840px){
    
    #nav-main {
    
    код стиля, который изменил...
    
    }
    
    }
    

    А в файле функций родительской темы есть такой код:

    if ( is_child_theme() )
    	wp_enqueue_style( 'frontier-parent', get_template_directory_uri() . '/style.css' );
    
      wp_enqueue_style( 'frontier-main', get_stylesheet_uri(), array(), $frontier_version );
    
      if ( frontier_option('responsive_disable', 0) != 1 )
    	wp_enqueue_style( 'frontier-responsive', get_template_directory_uri() . '/responsive.css', array(), $frontier_version );
    Ответить2 месяца назад #

Здравствуйте, !

Ваш комментарий