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

В предыдущих статьях я кратко описал свой опыт знакомства с CMS WordPress, что такое темы, как с помощью файла темы style.css и файла functions.php расширить стандартный функционал темы и придать ему индивидуальность в соответствии с вашими пожеланиями и добавить в него свои функции. Но, как я уже описал в конце статьи Вордпресс. Файл functions.php, такого рода изменения могут исчезнуть в следствии самостоятельного обновления темы. Старые файлы заменятся новыми и весь ваш код пропадет вместе с вашими стараниями. Из этой ситуации есть два выхода: создание дочерней темы и создание собственного плагина.

 Сейчас рассмотрим создание дочерней темы, создание плагина оставим предметом обсуждения последующих статей.

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

 

1. Согласно кодексу вордпресс создадим папку папку в папке themes вашего сайта и назовем ее «mainthemename-chlid«, где mainthemename — имя родительской темы, внешний вид и функционал которой вы хотите перекроить по своему.

 Для примера я не стал заморачиваться и взял тему из стандартной обоймы WP — twentyfifteen.

Соответственно и папку дочерней темы я назвал «twentyfifteen-child«.

2. Создадим в ней файл style.css и functions.php.

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

/*
Theme Name:     Twenty Fifteen Child
Theme URI:      http: //example.com/
Description:    Child theme for Twenty Fifteen
Author:         Just Smith
Author URI:     http: //example.com/about/
Template:       twentyfifteen
Version:        0.1.0
*/

Самые важные строки в нем

Theme Name:  Twenty Fifteen Child

и

Template: twentyfifteen


Template должен называться как родительская тема.

Перейдем в админке сайта в раздел «Внешний вид» и увидим результат — там появилась новая тема.

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

ВНИМАНИЕ!

Если тема не появилась в нормальном виде, как на рисунке сверху, и стоит в конце списка тем с сообщением об ошибке.

Добавьте код в файл functions.php вида 

<?php
function YourNameFunction(){}
?>

должно помочь.

Итак, все получилось и вы видите все как на рисунке.

Но давайте согласимся с тем, что это выглядит не очень презентабельно.

Добавим в папку с дочерней темой графический файл и назовем его screenshot. Расширение может быть JPG или PNG, но имя обязательно screenshot!

Файл пример у меня называется screenshot.jpg. Опять зайдем в раздел «Внешний вид» нашей админки и увидим результат (у каждого свой).

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

3. Можно начинать пользоваться нашей дочерней темой.

Наведем на нее курсор мыши и кликнем на появившейся кнопке «Активировать».

4. Перейдем во фронт-энд (наш сайт снаружи), и разочаруемся результатом.

СТИЛЕЙ НЕТ!

Действия:

  • Расстрелять автора;
  • Кинуть чем-то в монитор и построить семиэтажную нецензурную конструкцию в адрес автора, и создателей Вордпресса;
  • Заглянуть в файл style.css и прописать в нем следующие строки:
@import url("../twentyfifteen/style.css");

Как говориться выберем нужное!

И не забудем взглянуть на результат!

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

Я думаю расстрел автора можно отложить!

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

Наведем курсор мыши на заголовок и кликнем правой кнопкой, выберем «Просмотр кода элемента».

инспектор браузера

в Инспекторе элементов увидим его класс

как работать с инспектором в браузере

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


.entry-title{
color:green;
}
 Сохраним наши изменения и браузере обновим страницу. Заголовок нашего поста (новости) стал зеленым.
Таким образом, все что мы пропишем в файле style.css дочерней темыостанется без изменений (не без нашего участия), но обновление темы на наши стили не повлияет.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *