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

DmitriyDenisov.com Logo

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

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

Скачать готовый пример

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

Скачать

Если у вас возникнут какие-то вопросы по использованию данного примера, вы всегда можете задать их в комментариях к статье.

Структура дочерней темы

Для создания дочерней темы в WordPress, достаточно создать папку с таким же названием, как и у родительской темы, но с приставкой -child в конце, и поместить в нее три файла: style.css, functions.php и screenshot.png.

  • style.css – содержит информацию о теме и CSS стили.
  • functions.php – содержит PHP код темы.
  • screenshot.png – изображение темы.

Все три файла являются обязательными для корректной работы дочерней темы. Рассмотрим более подробно файлы style.css и functions.php.

Файл style.css

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

Пример содержимого файла style.css дочерней темы оформления.

/*
 Theme Name:   WebPoint PRO Child Theme
 Theme URI:    https://dmitriydenisov.com
 Description:  The child theme to modify the WebPoint PRO parent Theme.
 Author:       Dmitriy Denisov
 Author URI:   https://dmitriydenisov.com
 Template:     webpoint-pro
 Version:      1.0.0
 Text Domain:  webpoint-pro-child
*/


/* Style CSS
--------------------------------------------------------------------------- */



/* ############################################################## Style CSS */
  • Theme Name – название дочерней темы WordPress.
  • Theme URI – ссылка на страницу темы.
  • Description — описание темы.
  • Author — имя автора темы.
  • Author URI — ссылка на страницу автора темы.
  • Template — название папки с родительской темой.
  • Version — версия дочерней темы.
  • Text Domain — уникальный идентификатор для перевода.

В качестве значения Text Domain вы можете использовать как значение родительской темы, так любое другое. Особых ограничений здесь нет. Подробнее об использовании переводов в WordPress будет написано в будущих статьях.

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

Файл functions.php

Файл functions.php отвечает за модификацию функционала темы посредством PHP кода. В качестве примера рассмотрим код для подключения таблицы стилей темы style.css и ее скриптов functions.js.

if ( ! function_exists( 'webpoint_pro_child_scripts' ) ) {

   /* Hook the function to the action. */
   add_action( 'wp_enqueue_scripts', 'webpoint_pro_child_scripts', 99 );

   /**
    * Enqueue Child Theme Scripts.
    */
   function webpoint_pro_child_scripts() {

      /**
       * Register the CSS stylesheet.
       *
       * Name: webpoint-css-child
       * Path: get_theme_file_uri( 'style.css' )
       * Depends: webpoint-css (parent theme CSS stylesheet)
       * Version: null
       * Media: all
       */
      wp_register_style(
         'webpoint-css-child',
         get_theme_file_uri( 'style.css' ),
         array( 'webpoint-css' ),
         null,
         'all'
      );

      /* Enqueue the CSS stylesheet */
      wp_enqueue_style( 'webpoint-css-child' );

      /**
       * Register the Script.
       *
       * Name: webpoint-js-child
       * Path: get_theme_file_uri( 'functions.js' )
       * Depends: webpoint-js (parent theme script)
       * Version: null
       * In footer: true
       */
      wp_register_script(
         'webpoint-js-child',
         get_theme_file_uri( 'functions.js' ),
         array( 'webpoint-js' ),
         null,
         true
      );

      /* Enqueue the Script */
      wp_enqueue_script( 'webpoint-js-child' );

   } // webpoint_pro_child_scripts();

}

После сохранения данного кода, вы сможете использовать файл style.css дочерней темы оформления для переопределения стилей родительской темы, а файл functions.js — для выполнения JavaScript кода.

Стоит сразу отметить, что файл functions.php дочерней темы WordPress загружается раньше файла functions.php родительской темы, в связи с чем PHP функции родительской темы следует использовать только через хуки. В противном случае это вызовет ошибку Call to undefined function.

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

Пример проверки существования функции перед ее созданием:

if ( ! function_exists( 'function_name' ) ) {
   
   function function_name() {

      // код функции

   } // function_name();

}

Перезапись файлов

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

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

Подключение файлов

Отдельно следует поговорить о подключении файлов в дочерней теме WordPress. Для получения путей к дочерней теме используйте следующие функции:

  • get_stylesheet_directory() — абсолютный путь до папки темы.
  • get_stylesheet_directory_uri() — URL темы.

Обе функции возвращают строку без слэша в конце.

Использование функций get_template_directory() и get_stylesheet_directory_uri() для подключение файлов дочерней темы недопустимо, так как эти функции работают с родительской темой WordPress.

Заключение

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

Нашли ошибку? Выделите ее и нажмите Ctrl + Enter

Оставить комментарий

* - поля, обязательные для заполнения
Загрузка Google reCAPTCHA