Главная - Изучаем файлы темы WordPress - Как создать дочернюю тему
Важно!
Темы и плагины, о которых я написал свои обзоры и выложил на скачивание, могут не корректно работать на последних версиях WordPress. У меня нет физически возможности проверять все бесплатные темы и плагины WordPress на корректную работу и совместимость. Благодарю за понимание.
Мой сервер для вашего сайта

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

Это статья 16 из 18 в серии статей Изучаем файлы шаблона

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

О функционале в этой статье я говорить не буду – расскажу о дизайне.

Например: вам в шаблоне не нравиться фон вокруг страницы, не нравится шрифт, цветовые элементы заголовков и мета-тегов (имена рубрик, меток, дата и т.д.).

Вы немного знакомы с CSS и HTML, но вам не хочется трогать основной файл стилей шаблона и перерисовывать картинки в папке /images. Вдруг не получится – придется все заново.

Есть вариант. Можно создать так называемую “дочернюю” тему. От родительской она отличаться может именно в дизайне.

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

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

06

Какой инструментарий нам нужен?

Главное – это обычный редактор файлов PHP, CSS, HTML и многих других – Notepad++. Скачать его вы можете например, здесь — https://www.softportal.com/software-5406-notepad.html

Если пользуетесь браузером Мазилла – установите расширение (плагин браузера) по имени Web Developer. Отличный инструмент для анализа файлов сайта, например, того же файла стилей. Как его скачать? Найдите в браузере Мазилла в Меню –> Инструменты –> Дополнения –> Найти. Введите в поиск имя расширения – Web Developer. Последняя версия – 1.1.9. Установите расширение и перегрузите Мазиллу. Теперь у вас это приложение доступно в меню –> инструменты –> web developer.

Теперь активируйте шаблон и откройте его в окне браузера Мазилла (как на скриншоте выше). Запустите Web Developer сочетанием клавиш Ctrl+Enter – Y – ваш курсор превратится в черный крестик. Наведите крестик на серый фон вокруг страницы и кликните по фону – откроется редактор стилей и откроется именно тот контейнер, в котором описаны свойства тега BODY:

17

В этом контейнере нас интересует два момента:

Фон. В дефолтной теме используется картинка по имени kubrickheader.jpg, которая лежит в папке /images (строка 27 в файле стилей).

Семейство шрифтов. Основной шрифт – Lucida Grande. Если его в компьютере нет – подключается Verdana и так далее (строка 26 в файле стилей).

Допустим, мы решили изменить фон и заменить шрифт на Times. Размер шрифта сейчас – 62,5% от стандартного, Times – мельче чем Verdana, поэтому мы изменим и это свойства (строка 25 файла стилей).

Итак, открываю Photochop, открываю файл kubrickheader.jpg, делаю его в пастельных тонах, сохраняю под именем template.jpg на Рабочем столе:

template

Теперь открываю редактор Notepad ++, новый файл, сохраняю его как style.css, записываю в него заголовок – описание, затем – Обязательно – такой код:

/*
Theme Name: Default Child Theme
Theme URI:
Description: A child theme for Default
Version: 0.1
Author: WP Collection
Author URI: <a href="https://www.wpfreethemes.ru/">https://www.wpfreethemes.ru/</a>
Template: default

The CSS, XHTML and design is released under GPL:
<a href="https://www.opensource.org/licenses/gpl-license.php">https://www.opensource.org/licenses/gpl-license.php</a>

*/

@import url("../default/style.css");


Этот код необходим для того, чтобы переопределить свойства, которые мы сейчас пропишем для дочерней темы Default Child Theme:

body {
font-size: 100%; /* Resets 1em to 10px */
font-family: Times, Verdana, Arial, Sans-Serif;
background: #efd1b5 url('images/template.jpg');
color: #333;
text-align: center;
}

Если вы сравните, свойства для тега BODY я поменял так, как хотел выше. Шрифт изменил на Таймс, увеличил его до 100%, изменил цвет фона и картинку для фона. Больше ничего не менял.

Теперь создам папку, назову ее Default Child Theme, создам в этой папке папку /images, положу туда картинку фона template.jpg, а в основную папку – файл стилей CSS. Перенесу папку дочерней темы в папку наших шаблонов, где уже лежит родительская папка Default.

Открою страницу Внешний вид –> Темы в админке и увижу новую тему, правда, без скриншота:

18

Скриншот можно сделать позже.

Теперь активирую нашу дочернюю тему. Смотрим:

19

Получилось не красиво, но главное – получилось!

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

В ваших руках довести дизайн этой дефолтной темы до совершенства. Главное, знать, какой контейнер за какие свойства шаблона отвечает.

Моя задача в этой статье была не научить вас дизайну и знаниям CSS + HTML, а показать, как можно сделать дочерний шаблон для той темы, в котрой вы хотите что-то изменить, не прибегая к правке файлов родительского шаблона.

Понравилась статья? Напишите свои отзывы в комментариях и напишите, нужны еще подобные статьи или нет.

Хотите следить за новыми публикациями на моем сайте – .

дизайн кухни 10 кв м

Навигация по серии статейКак отлючить HTML теги в комментарияхWordPress для начинающих: ставим Логотип-картинку

О Олег

Я более шести лет профессионально занимаюсь сайтами на CMS WordPress: перевод на русский тем и плагинов; разработка уникальных тем под заказ; сопровождение сайтов, защита и безопасность, продвижение в поисковых системах. У меня несколько своих проектов, в которых я пишу только о WordPress, продаю свои авторские работы, пишу платные и бесплатные видео-уроки. В свободное время люблю ездить на рыбалку. И еще - хочу завести собаку.

2 комментария

  1. 🙁 У меня почему-то в админке не появился дочерний шаблон. Делала для темы Absolute Style, назвала Default Absolute Style. из-за чего он мог не появится?

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

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*