WordPress как на ладони

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /**
     * Theme Name: Моя дочерняя тема
     * Template: twentyfifteen
     *
     * Не обязательные параметры:
     * Theme URI: http://example.com/
     * Description: Дочерняя тема для темы twentyfifteen
     * Author: Kama
     * Author URI: http://example.com/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://example.com/
 * Description: Дочерняя тема для темы twentyfifteen
 * Author: Kama
 * Author URI: http://example.com/about/
 * Version: 1.0
 */

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

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

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

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

Файл functions.php

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

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

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

Это значит, что для изменения родительской темы, в 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(): проверяет существует ли файл в подтеме, если не существует, то подключается из родительской темы.

Наличие родительской темы у дочерней записывается в опцию сайта template. Например если у дочерней темы есть опция template=basetheme, то тема basetheme будет родительской для текущей темы.

Такая связь устанавливается при активации темы.

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

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

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

add_action( 'after_setup_theme', 'my_child_theme_setup' );

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

Также, нужно создать файл перевода в дочерней теме: 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() буду отличаться: первый будет на дочернюю тему, а второй на родительскую...

Заметки

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

Функция 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 в дочерних темах

https://doctorsmm.com/ - это недорогой сервис с эффективным SMM соц сетей. Здесь Вы сможете получить услуги по раскрутке на более чем 9 топовых площадках, как отечественного, так и зарубежного интернета. Покупайте уже сейчас популярные ресурсы для увеличения счетчиков в соцсетях, такие, как лайки, подписчики и пр., с большими оптовыми скидками и персональными условиями добавления.

43 комментария
Полезные 6 Все
    Войти