Вы только что установили на свой хостинг новый движок WordPress. И первое, что вы делаете после установки, — это настраиваете свой сайт и выбираете подходящую тему для вашего блога.

Я тоже раньше использовал готовые темы для своих сайтов, но теперь предпочитаю работать с базовыми темами, которые идут в комплекте с движком. Долгое время я использовал тему Twenty Twenty с небольшими изменениями, и меня всё устраивало. Однако с выходом шестой версии WordPress, на основе которой была создана Twenty Twenty, я решил перейти на более современный движок и тему.

Новый движок WordPress 6 и верстка блоками

Я осознанно перешёл на новую версию, и дело было не в улучшенном дизайне или более продвинутой теме. С переходом на 6 версию полностью изменился подход к вёрстке страниц и блоков. Теперь элементы страницы, такие как шапка и подвал, больше не представляют собой смесь HTML и PHP кода, поэтому изменить их вручную по-старому уже не получится.

Многие настройки стиля теперь хранятся в глобальных параметрах CSS и прописаны в файле theme.json. Из-за этого их нельзя изменить в файле style.css, если только не указать директиву!important.

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

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

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

В этой статье я пройдусь по настройке сайта на базовой теме twenty twenty four по следующему плану:

Оглавление:

1. Новый движок WordPress 6 и верстка блоками
2. Цветовая палитра сайта на WordPress
3. как управлять элементами шапки

Как выглядит тема twenty twenty four

Открываем только что установленный сайт на Вордпрессе. Сразу бросается в глаза, что главная страница заточена под лендинг, где первые два экрана продающие. Ссылки на статьи блога появляются только после двух страниц скрола. Мобильная версия, кстати, отлично парсится под экран смартфона. 

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

Если у вас новостной блог и вам нужен журнальный стиль для главной страницы, то можете оставить текущий дизайн. Сейчас ваша главная страница не совсем похожа на блог, но я расскажу вам, как сделать её похожей на главные страницы таких изданий, как Bloomberg или Лента.ру.Сейчас нам важно выполнить базовые настройки темы.

В настройках темы twenty-twenty-four вы также можете найти раздел «Паттерны». Там вы обнаружите более 30 готовых дизайн-решений для статей, обложек и галерей. Поверьте, эта тема способна на многое даже по умолчанию.

И самое важное: пока вы не наполните сайт контентом — статьями и разделами — не из чего будет создавать дизайн. Поэтому сначала нужно поработать над контентом и SEO, чтобы сделать сайт популярным.

Надеюсь, я убедил вас, что базовая тема — это удобное и полезное решение. Теперь перейдём к настройке.

Создаем дочернюю тему

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

Заходим в /themes и создаем папку /twentytwentyfour-child

В эту папку нужно поместить 2 файла: style.css и functions.php

Style.css должен содержать всего три строчки.
Theme Name должно отличаться от других установленных тем
Template должно содержать название папки с родительской темой, то есть twentytwentyfour.

/*
Theme Name: Twenty 24 Child
Text Domain: twentytwentyfour-child
Template: twentytwentyfour
*/

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

<?php

function add_style() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_style' );

?>

Теперь можно заходить в раздел Темы, где вы увидите новую дочернюю тему. Если вы все сделали верно, то активировав ее вы не увидите никаких изменений на сайте. Но если мы внесем правки к файл style.css внутри дочерней темы, то они будут работать независимо от основной темы. При этом стили основной темы продолжат работать, а изменятся только те, которые определены в файле style.css дочерней папки.

Проверим? Заходим в Инструменты (Tools) -> Редактор тем (Theme editor) и в пустом, совершенно, пустом style.css добавляем строку: 

p { color: #ff0000; }

Жмем “Сохранить” и проверяем результат. Текст сайта поменяется на красный. 

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

Настройки сайта на WordPress

Как отображаются URL
Идем в настройки, в раздел “Постоянные ссылки” (Permalinks) и меняем стиль отображения адресов сайта на такой как на картинке, чтобы в адресе было и название раздела и название статьи. Это нам нужно для SEO. 

Чуть ниже в настройках есть такая строчка — “префикс для рубрик”. Вот здесь необходимо поставить точку. Просто “.” Это избавит нас от дублирования ссылок на разделы с коротким url с названием категории и со словом ‘category’. Яндексу это не нравится. Если вы оставите category, то поисковики будут рассматривать оба варианта ссылки /category/finance и /finance как дублирующие контент, что плохо для SEO. 

Необходимые плагины

Удалите предустановленные плагины: Akismet и Hello,Dolly.

Вместо этого установите плагин для создания микроразметки. Если нужно, чтобы плагин сделал все сам, выбираем Schema & Structured Data. Если хотите иметь возможность и автоматом и вручную прописать разметку, я посоветую Schema Scalpel Это также важно для SEO.

Не ставьте монструозные SEO плагины типа Yoast или All-in-One SEO съедают больше ресурсов движка и назойливо предлагают купить платную версию.

Кстати, знали ли вы, что sitemap в WordPress генерится на автомате? Просто у него другой адрес: domain/wp-sitemap.xml.
И работает он получше всяких плагинов. Прописывайте его в robots.txt и панели вебмастера.

Настройки стиля

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

По умолчанию, меня не устраивает ширина контента на сайте. А она выставлена в 620 пикселей. Я бы сделал пошире — около 840 пикселей. Изменить это можно в разделе Стили. Первый стиль выбран по умолчанию. Он нас всем устраивает. Но если вы хотите поменять цвет шрифтов, то это меняется именно в разделе Стили.

Выбираем стиль по умолчанию, жмем карандашик и заходим в настройки стиля. Нам нужен раздел Макет (Layout). Внутри настроек макета мы можем сделать ширину содержания (текста), например, 840 пикселей.

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

Цветовая палитра сайта на WordPress

Определитесь с цветовой палитрой сайта. Обычно это два-три контрастных друг другу цвета, один из которых выражает брендинг, ну и пара дополнительный оттенков.

В интернете есть онлайн-помощники, создающие палитру сайта за несколько секунд. Например, Coolors.

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

Видите здесь два блока. Первый «Палитра», где определены цвета и ниже цвета для различных элементов дизайна.

Вам захочется сразу поменять цвет ссылок, кнопок и вы начнете делать это во втором блоке. Но это не будет работать или не будет работать глобально, пока вы не внесете нужные цвета в палитру. Так, что жмем на палитру и настраиваем ее.

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

Прочите параметры, которые не указаны в стилях вы можете настроить в своем файле styles.css. Тот самый, который вы создали для дочерней темы.

Например, если нужно убрать подчеркивание ссылок внутри постов, то добавляем такую строчку стиля.

.wp-block-post-content a { text-decoration: none; }

А если по всему сайту вам не нужны подчеркнутые ссылки, то укажите этот css параметр для глобального тега a.

a { text-decoration: none; }

/** но можно оставить при наведении на ссылку **/
a:hover { text-decoration: underline; }

Настройте языки сайта и админки в WordPress

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

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

Чтобы это сделать, нужно в настройках зайти в «Основные» (General) и установить язык «Русский». Потом зайти в раздел «Пользователи» — выбрать аккаунт Админа и внутри его настроить язык на Английский.

Спроектируйте структуру разделов и наполните контентом

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

Важный совет: Постарайтесь сделать не более 3-4 категорий, чтобы не запутаться и не растянуть меню сайта. И не создавайте вложенных категорий. Все категории должны остаться на верхнем уровне. Это упростит создание URL и тоже полезно для SEO.

Доработаем верхнее меню сайта

После того как со структурой понятно, можно на основе ее сделать верхнее меню. Заходим в настройки темы, далее в раздел Навигация. Здесь уже создано верхнее меню с единственным пунктом — Пример статьи. Для редактирования жмем на иконку “карандашика”. Удаляем пункт “Пример статьи”, а через “+” добавляем наши разделы сайта. Вот почему я просил вас сперва заняться структурой разделов.

как управлять элементами шапки

Здесь же в редакторе тем идем в Паттерны — Части шаблона — Заголовок (Header)

Здесь у вас два основных блока, и каждый сверстан в виде строки. Об этом говорит иконка

Другие варианты группировок:
— 1 ый просто в одном div.
— второй — div c параметром flex-direction:row
— третий flex-direction: column (колонка).

Просто запомните, это может понадобиться для группировки других частей дизайна на сайте. Но для верхнего меню, нам нужен вариант — строка (row), чтобы все элементы выстроились в один горизонтальный ряд.

Блоки с названием сайта и навигацией также между собой объединены в div и сгруппированы как строка. 

Ниже есть настройки выравнивания их друг с другом. Выбран вариант “пространство между”. Первые три варианта:
— по левому краю,
— по центру
— по правому краю.

И все это еще раз завернуто в слой div, который и формирует верхнюю шапку сайта (Header).

Варианты отображения постов по умолчанию

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

• Шаблон по умолчанию
• Шаблон с правой колонкой (sidebar)

Давайте глянем, как они выглядят. Скучно, но неплохо. А давайте, сделаем шаблон с картинкой на весь экран и заголовком статьи поверх этого рисунка. И сделаем это буквально на 5 минут, без установок каких либо сторонних шаблонов.

Создаем новый шаблон отображения постов

Для этого снова идем в раздел Внешний вид — Редактор. Здесь мы и будем создавать новый шаблон. Поэтому и заходим в раздел «Шаблоны».

В разделе “Шаблоны” нужно нажать на плюсик «+». На всплывающем окне не стоит выбирать из предложенных вариантов, так как это все шаблоны встроенные в движок. Мы их трогать не будем. Скролим вниз и выбираем вариант: Произвольный шаблон и даем ему какое нибудь название.

Выберите паттерн обычной страницы поста, чтобы было удобнее начинать с заготовки. Открывается окно очень похожее на создание поста. Но это не пост, а шаблон. Давайте сделаем из него «конфетку».

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

Также выделяем шапку поста. Это должна быть группа элементов, включающая картинку и заголовок. Нужно также нажать на три точки, откроется развернутое меню и выбрать «Удалить».

После того как удалили, жмем “+” плюсик и добавляем новый элемент “Обложка”. Важно нажать на плюсик как раз между шапкой сайта и началом контента. Но если промахнулись, то не беда, так как все это можно перенести в нужное нам место. 

Обложку лучше всего выбирать, нажав на пункт “Посмотреть все”, далее зайти в Блоки и там уже найти Обложку. Вам сразу предложат загрузить картинку для фона Обложки. Но мы выберем третий вариант: “Использовать изображение записи”. 

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

Поэтому, мы также удаляем блок с заголовком, который тут стоит по умолчанию, и снова жмем плюсик “+”, но уже внутри Обложки, снова выбираем “Посмотреть все” и ищем блок “Заголовок”.

Обратите внимание, что в русской версии движка из-за кривого перевода у нас несколько таких блоков. Нам нужно поскролить и выбрать “Заголовок” с такой иконкой. 

Вставили? Теперь в свойствах этого блока выбираем “отобразить по центру” — тут панель как в Word. 

Давайте еще добавим красивую навигацию сайта. Ведь мы зачем-то удалили шапку. Теперь уже нужно зайти в раздел не «Блоки», а уже “Паттерны” и снова выбираем «Заголовки» (да что же не так с переводом?) и выбрать вот такой отцентрованный вариант шапки. 

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

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

Название сайта можно удалить, также жмем три точки и выбираем Удалить в меню. 

Выделяем логотип, и растягивая, можем чуть увеличить его размер. 

Добавляем ниже еще один блок. Он называется “Рубрики”, чтобы под Заголовком статьи была указана рубрика. Тут вы решайте сами, что вам удобнее выводить. Можете выводить дату публикации. Или автора. Или теги. Мне удобнее “Рубрику”. 

Небольшая доработка руками понадобится на этом этапе. Выделите всю Обложку поста в этом шаблоне. В меню справа раскройте раздел “Дополнительно” и укажите название класса CSS в поле “Дополнительные классы CSS”. Давайте назовем его screen_height.

Это необходимо, чтобы растянуть обложку на 100% высоты экрана.

Для этого нужно выйти из Редактора темы и перейти в другой раздел, который в переводе на русский тоже называется «Редактор тем», но уже в меню Инструменты.

Помните мы создавали пустой файл style.css в дочерней теме. В него нужно добавить стиль.

Всего 1 строчку:

.screen_height { height: 100vh; } 

и сохранить. 

Добавим в шаблон ссылки на недавние статьи

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

Конечно же, этот блок добавляется после содержимого поста. Жмем плюсик, “Посмотреть все” — Паттерны — Записи. Справа появятся превью предложенных шаблонов Записей, листаем пока не увидим вот такую трехколоночную версию. Ее мы и выбираем. 

В Вордпресс это перевели как «Записи» и, кстати, это очень полезный блок. На английском он называется Query Loop. Если вдруг вам нужно вывести список статей из какой-либо категории, этот блок отправляет запрос и выводит заданное число записей из нужной категории, которую вы выбрали. Можно добавлять его как через Паттерны, так и через Блоки — в блоках нужно выбрать Query Loop. 

Давайте немного дорабатываем отображение этого блока внизу страницы.

По умолчанию три колонки растянуты на 100% ширины страницы. Давайте добавим отступы от краев страницы. Для этого выделяем блок, убедитесь, что иконка выглядит как такая закорючка. В правой колонке опций блока, включаем опцию “Внутренние блоки используют ширину содержимого”. И ниже по ширине выставляем размер 80 VW. 

Далее мы настраиваем то, как отображаются элементы внутри блока. 

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

Начнем с картинки. Кликаем по ней и меняем пропорции 4:3 и если нравится картинка с закругленными краями, то можно установить Радиус 6. 

Далее, выделяем текст заголовка новости. Выравниваем по центру, меняем тип заголовка на H4. Можно еще и размер шрифта поменять. 

Под заголовком есть блок с датой и автором новости. Мне этот блок совсем не нужен. Я его просто удаляю. 

Теперь можно нажать голубую кнопочку “Сохранить”. Подтверждаете, что сохраняете шаблон Post Cover и выходите из Редактора на основную страницу Админки. 

Смотрим на результат шаблона для постов

Теперь вернитесь в меню «Записи» и зайдите в редактирование любого поста. В меню шаблонов, справа у вас появится еще один вариант “Post Cover”. Выберите его, сохраните пост и посмотрите, что получилось.

Нравится? Мне очень. Чтобы текст был белым и более крупным, можете вернуться в редактирование шаблона и поменять цвета и размер Заголовка и других элементов. 

Не получился шаблон?

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

Скачать за 68 руб.

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

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

Навигация по управлению элементами не самая простая. Но с практикой вы постепенно освоитесь. 

В редакторе есть еще окно слева, в котором можно увидеть иерархию элементов дизайна. Вызывается оно вот такой иконкой — бургером.

Иногда, когда нужно перетащить элемент из одной группы в другую это окно бывает очень полезным.

Добавил свои шрифты в Вордпресс

Тема Twenty-Twenty-Four поставляется в комплекте с четырьмя шрифтами. Немного, согласитесь. Вы можете найти подходящие шрифты в библиотеке Google Fonts или добавить свои шрифты.

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

Если у вас версия ниже, чем 6.5 вы можете прочесть статью об установке шрифтов в WordPress без плагинов.

https://antijeans.com/wordpress/kak-dobavit-shrift-wordpress-bez-plagina/embed/#?secret=KnN166zTjB#?secret=n5bbCHtuVV

Почему не загружается логотип

Запара с логотипом. На некоторых хостингах, при попытке загрузить логотип в шапке сайта такой опции просто нет. Логотип есть, блок такой создать можно, но картинку не загрузить.

Проблема решается костылем. Для этого проще на 2 минутки установить любую старую тему, где редактируется логотип, переключиться в эту тему и загрузить его. Потом вернуться на тему twenty twenty four и удалить старую тему. 

Создаем шаблон главной страницы как у новостного портала

А вот и обещанное видео-инструкция, как сделать красивую главную страницу в стиле новостного портала.

https://youtube.com/watch?v=2TIqEaJJ3kY%3Ffeature%3Doembed%26enablejsapi%3D1%26origin%3Dhttps%253A%252F%252Fantijeans.com

---

Читать далее про настройку WordPress

https://antijeans.com/wordpress/ustanovka-schetchikov-metriki-i-analytics-wordpress-bez-plaginov/embed/#?secret=ffumZkgL7K#?secret=ThJewpSWUa

https://antijeans.com/wordpress/turbo-stranici-yandex-wordpess-bez-plagina/embed/#?secret=VlpBXjrMmR#?secret=QTyLrGjuCd

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

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

Что такое родительские и дочерние темы?

Родительские темы

Все темы, кроме тех, которые являются дочерними, можно назвать основными темами. Это означает, что они полноценные темы, которые можно установить и использовать в WordPress.

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

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

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

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

• Сделайте ваши изменения переносимыми и воспроизводимыми.
• Сохраняйте настройки отдельно от родительской темы.
• Разрешите обновлять родительские темы без потери внесенных изменений.
• Экономьте время разработки, поскольку вы пишете только необходимый вам код.
• Это отличный способ начать свой путь к разработке полноценных тем.

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

Как насчет тем для внуков?

В настоящее время это невозможно. В стандартной иерархии тем есть только два уровня: родительская и дочерняя тема.

Однако при создании блочных тем существуют другие уровни по сравнению с тем, что представлено во внешнем интерфейсе сайта (они просто не являются частью тематического слоя):

• Сам WordPress (по умолчанию theme.json)
• Родительская тема
• Дочерняя тема
• Пользовательские настройки (могут переопределять theme.json шаблоны и паттерны)

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

Помимо этого, не существует стандартного метода создания устанавливаемой дочерней темы.

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

Давайте попробуем создать дочернюю тему для темы по умолчанию Twenty Twenty-Four, поставляемой в комплекте с WordPress.

Создайте папку дочерних тем

Во-первых, вашей дочерней теме нужно название. Это может быть любое название, которое вы хотите, чтобы ваша тема называлась, но для данного руководства давайте назовем ее “Grand Sunrise”.

Теперь создайте новую папку в своем wp-content/themes каталоге с версией названия вашей темы для шашлыка: grand-sunrise.

Создание стиля.css

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

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

Копировать

/**
 * Theme Name: Grand Sunrise
 * Template:   twentytwentyfour
 * ...other header fields
 */

В Template поле есть одно предостережение. Оно должно на 100% совпадать с названием папки родительской темы относительно wp-content/themes папки. В данном случае мы знаем, что папка Twenty Twenty-Four theme расположена по адресу wp-content/themes/twentytwentyfour. Следовательно, Template значение должно быть twentytwentyfour.

Установите и активируйте дочернюю тему

Если вы еще не работаете в среде разработки со своей темой в wp-content/themes папке, вам нужно переместить ее туда прямо сейчас. В зависимости от ваших настроек у вас есть несколько вариантов, но самый простой — создать ZIP-файл вашей темы и загрузить его на свой тестовый сайт через Внешний вид> Темы> Добавить новый в вашем WordPress admin.

Для получения дополнительной информации о том, как добавить тему в WordPress, прочитайте о Добавлении новых тем на сайте документации WordPress.

После установки темы перейдите в раздел Внешний вид> Темы в разделе администратора WordPress и найдите нужную тему. Нажмите на ссылку Активировать, как показано на этом скриншоте:

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

Настройка вашей дочерней темы

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

Стиль загрузки.css

Это необязательный шаг, который часто не требуется для блочных тем, поскольку обработка их стилей обычно выполняется через theme.json. Но часто это необходимо, если вы создаете классическую тему. В любом случае, вам нужно выполнить этот шаг, только если вы хотите убедиться, что любой CSS-код в style.css загружен.

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

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

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

В случае темы Twenty Twenty-Four таблица стилей вообще не загружается. Таким образом, вам придется загружать свой style.css через functions.php, как показано в этом фрагменте кода:

Копировать

add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );

function grand_sunrise_enqueue_styles() {
	wp_enqueue_style( 
		'grand-sunrise-style', 
		get_stylesheet_uri()
	);
}

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

Если родительская тема загружает только таблицу стилей активной темы, например, через get_stylesheet_uri(), то она загрузит таблицу стилей дочерней темы. В этом случае вы можете также захотеть поставить в очередь таблицу стилей родительской темы через functions.php, и ваш код будет выглядеть следующим образом:

Копировать

add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );

function grand_sunrise_enqueue_styles() {
	wp_enqueue_style( 
		'grand-sunrise-parent-style', 
		get_parent_theme_file_uri( 'style.css' )
	);
}

Шаблоны, детали и паттерны

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

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

• Шаблоны
• Шаблоны

Использование functions.php

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

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

Предположим, что вы хотите добавить функцию PHP в свою тему. Самым быстрым способом было бы открыть ее functions.php файл и поместить туда функцию. Но это не считается хорошей практикой — при следующем обновлении вашей темы ваша функция исчезнет!

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

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

Чтобы узнать больше о functions.php, ознакомьтесь с документацией по пользовательской функциональности.

Ссылающиеся или включающие другие файлы

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

Например, если вы хотите включить другой PHP-файл через свой functions.php, вы бы использовали get_theme_file_path() функцию. Вот фрагмент кода, показывающий включение functions-helpers.php файла из /inc папки в вашу дочернюю тему:

Копировать

require_once get_theme_file_path( 'inc/functions-helpers.php' );

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

Когда вам нужно сослаться на файл по его URL, например на изображение или таблицу стилей, вы должны использовать другую функцию: get_theme_file_uri(). Давайте рассмотрим пример использования файла с именем bunny.jpg из /assets/images папки вашей темы в <img> HTML-теге:

Копировать

<?php $image = get_theme_file_uri( 'assets/images/bunny.jpg' ); ?>

<img src="<?php echo esc_url( $image ); ?>" alt="" />

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

Интернационализация

Как и родительские темы, дочерние темы также можно интернационализировать и заставить работать на любом языке. Чтобы узнать больше, прочтите документацию по интернационализации в справочнике по темам.

Самые большие изменения, как отмечено в документации по интернационализации, заключаются в том, что вы должны создать уникальный текстовый домен и использовать load_child_theme_textdomain() вместо load_theme_textdomain() при ручной загрузке переводов.