Дочерняя тема WordPress: что такое, как создать и использовать

Опубликовано ,

Содержание:

  1. Для чего нужна дочерняя тема;
  2. Этапы создания;
    1. Состав темы;
    2. Файлы шаблона;
    3. Файл функций.

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

В каких случаях это может быть полезно:

  • У вас премиум-тема, регулярно обновляющаяся автором. Дополнения из дочерней темы не слетят при обновлении шаблона, особенно это важно при больших изменениях кода.
  • Вы новичок и очень боитесь напортачить или просто ковыряться в крупных файлах =) с дочерней темой можно не бояться, что блог внезапно полетит, и вы не сможете откатить изменения.

Этапы создания дочерней темы WordPress

Давайте сделаем свою первую тему. Мучать традиционно будем xMarkUp.

Процесс не занимает много времени — для полноценного функционирования достаточно лишь одного правильно прописанного файла style.css – он заменяет (или дополняет) файл стилей дочерней темы. Также благодаря ему WordPress опознает тему.

Размещается новая тема в отдельной папке, которая затем помещается в соответствующую директорию. Вот, как выглядит полный путь к папке с дочерней темой:

raspolozhenie-child-theme

Что может входить в состав дочерней темы:

  • style.css — обязательно;
  • functions.php;
  • шаблон.php;
  • другие файлы.

Дочерняя тема — легко и просто

Создадим на рабочем столе папку X-Child, затем откроем пустой файл в Notepad++. Первым делом нам потребуется внести информацию о новой темке.

style-child

Минимально информационный заголовок включает в себя закомментированные знаками /*….*/  названия дочерней и родительской тем:

 /* (открываем информацию о дочерней теме)
 Theme Name: X-Child (название дочерней темы)
 Template: xmarkup-new (папка родительской темы, регистр учитывается)
 */ (закрываем информацию)

При желании можно указать любую дополнительную информацию – описание темы, версию, имя автора, сайт, теги и так далее:

 /*
 Theme Name: X-Child
 Template: xmarkup-new
 Description: child theme for lesson (описание)
 Author: Askaria (автор)
 Author URI: rat-felt.ru (сайт автора)
 Version: 1 (версия)
 */

Все =) Можно сразу после закрывающего знака начинать писать новые стили. Однако, учтите, что в этом случае новый файл стилей полностью заменит style.css родительской темы. Чтобы этого не произошло — например, нам надо внести совсем немного изменений, — мы должны прописать сразу после информационного блока ссылку на родительские стили. Делается это следующим образом:

 @import url('../ПАПКА_С_ВАШЕЙ_ТЕМОЙ/style.css');
Примечание. @import должен идти сразу после информации о дочерней теме.

Теперь сохраняем наш текстовый файл как style.css в папку X-Child. Чтобы в панели управления темами отображался не пустой экран, я добавила в папку с дочерней темой скриншот рабочего стола.

x-child

Все, наша дочерняя тема готова, осталось добавить ее на сайт. Через FTP-клиент загружаем папку на сайт: «/httpdocs/wp-content/themes».

dochernyaa-tema

Нажимаем  ПКМ-Обновить и заходим в админку сайта – там должна появиться наша новая тема. Как видите, в ней отображается вся информация, которую мы прописали в начале файла стилей. Если мы сейчас активируем эту дочернюю тему, внешне шаблон блога не изменится — будет тот-же xMarkUp.

themes-admin

Теперь, при редактировании шаблона все правки вносим в новый файл стилей. Найти элемент, который хотите редактировать можно при помощи функции «Просмотр исходного кода» в Google Chrome (упоминала в этом уроке) или расширения Firebug.

Так можно поступать с любыми файлами темы Вордпресс. Просто копируем php-шаблон, вносим изменения и добавляем в дочернюю тему. Таким же образом можно подключать новые файлы шаблонов, отсутствующие в родительской теме. Все!

functions.php

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

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

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

Примечание: файл функций дочерней темы загружается первым.

Структура нового файла функций проста:

<?php
//добавляем наши функции сюда
?>

На этом все. Если есть какие-нибудь вопросы — обращайтесь.

7 комментариев

  1. seoonly.ru

    Спасибо, а то стандартные оч. унылы в плане дизайна

    Ответить
  2. Егор

    Привет. Что-то не слышно тебя. Или валенки вязать интереснее? НЕ в обиду…

    Ответить
    1. Анастасия

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

      Ответить
  3. Егор

    Привет. Приятно . У тебя грамотный подход. Тоже стараюсь гуглить в европе, там все новое.

    Ответить
  4. Olga

    Посмотрите, пожалуйста, так? правильно? я создала файл для дочерней темы, уж очень боязно первый раз использовать Фазилу и что — то менять в папках сайта. Можно такой файл помещать на хостинг?
    /*
    Theme Name: X-Child
    Template: orchid
    */
    @import url(‘../orchid/style.css’);

    Ответить
    1. Анастасия

      Здравствуйте, Ольга! Да, Этот файл сохраняется как style.css в папку с названием дочерней темы и помещается на хостинг. Можно через ФТП, а можно заархивировать как ZIP и через стандартный загрузчик «Внешний вид / Темы»

      Ответить
  5. Мария+Зазвонова

    Привет, заглянула в гости полюбоваться!

    Ответить

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован.

Добавить в комментарий код: CSSHTMLPHP