Создание дочерней темы в WordPress
Зачем нужна дочерняя тема?
Дочерняя тема позволяет сохранять изменения в дизайне сайта, чтобы они не потерялись при обновлении основной темы.
Шаги по созданию дочерней темы:
Перейдите в папку тем.
- Зайдите в директорию вашего WordPress:
/wp-content/themes/.
Создайте папку для дочерней темы.
- Назовите ее
twentytwentyfive-child-child.
Создайте файлы.
- В вашей новой папке создайте два файла:
style.cssfunctions.php
Заполните файл style.css.
- Откройте
style.cssи добавьте следующий код:
/*
Theme Name: Twenty 24 Child
Text Domain: twentytwentyfive-child
Template: twentytwentyfive
*/Обратите внимание: Template должно содержать название папки с родительской темой, в данном случае twentytwentyfive.
Заполните файл functions.php.
- Откройте
functions.phpи добавьте следующий код:
<?php
function add_style() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_style' );
?>Активируйте дочернюю тему.
- Перейдите в админку WordPress в раздел «Внешний вид» → «Темы».
- Найдите свою новую дочернюю тему и активируйте её.
Проверка работоспособности:
Измените style.css.
- В открытом
style.cssдобавьте строку:
p { color: #ff0000; }Сохраните изменения.
Проверьте результаты.
- Перейдите на ваш сайт. Если всё сделано правильно, текст на сайте станет красным.
Примечание:
Не следует переписывать все стили в дочерней теме. Используйте дочернюю тему только для тех изменений, которые не могут быть выполнены через настройки основной темы.
Настройка URL сайта на WordPress
Как настроить отображение URL
Перейдите в настройки.
- Зайдите в админку WordPress и выберите меню «Настройки» (Settings).
Выберите раздел «Постоянные ссылки».
- Найдите и кликните на «Постоянные ссылки» (Permalinks).
Измените стиль отображения адресов.
- Выберите вариант, который включает название раздела и название статьи, как на картинке (обычно это «Название записи» или «Post name»). Это улучшает SEO.
Настройте префикс для рубрик.
- Чуть ниже найдите поле «Префикс для рубрик» (Category base).
- Введите в это поле точку (.) — просто
.. Это избавит от дублирования ссылок: без префикса ссылки будут выглядеть как/finance, а не/category/finance.
Сохраните изменения.
- Прокрутите вниз и нажмите на кнопку «Сохранить изменения» (Save Changes).
Примечание:
- Если оставить
categoryв URL, поисковые системы могут рассматривать/category/financeи/financeкак дублирующийся контент, что негативно сказывается на SEO.
Необходимые плагины для WordPress
Удаление ненужных плагинов
Удалите предустановленные плагины.
- Перейдите в меню «Плагины» (Plugins).
- Найдите плагины Akismet и Hello Dolly.
- Удалите их, выбрав «Удалить» (Delete).
Установка необходимых плагинов
Установите плагин для создания микроразметки.
- Перейдите в раздел «Добавить новый» (Add New) в меню «Плагины».
- Если хотите, чтобы плагин автоматически создавал микроразметку, установите «Schema & Structured Data».
- Если вам нужна возможность ручной настройки разметки, выберите «Schema Scalpel». Это важно для SEO.
Избегайте тяжелых SEO плагинов
Не устанавливайте тяжелые SEO плагины.
- Избегайте использования плагинов типа Yoast SEO или All-in-One SEO. Они могут потреблять много ресурсов и навязывать платные версии.
Использование карт сайта
Имейте в виду, что карта сайта генерируется автоматически.
- В WordPress карта сайта доступна по адресу:
domain/wp-sitemap.xml. - Эта карта работает лучше, чем многие плагины, поэтому добавьте её в файл
robots.txtи в панели вебмастера.
Настройки стиля в WordPress
Первоначальная настройка стиля
Проведите начальные настройки стиля.
- Перейдите в раздел «Стили» (Styles).
Измените ширину контента.
- Обратите внимание, что по умолчанию ширина контента составляет 620 пикселей.
- Измените её на 840 пикселей. Для этого выберите стиль по умолчанию, нажмите на иконку «карандаш» и зайдите в настройки стиля.
- Перейдите в раздел «Макет» (Layout) и установите нужную ширину содержания.
- Установите внутренние отступы в ноль, чтобы использовать полноэкранные блоки.
Сохраните изменения.
Настройка цветовой палитры
Определитесь с цветовой палитрой сайта.
- Рекомендуется использовать два-три контрастных цвета, один из которых будет основным для брендинга.
Используйте онлайн-инструменты.
- Для создания палитры можно воспользоваться сервисом, например, Coolors.
Настройте палитру в разделе «Цвета».
- Выберите созданную палитру или добавьте новые цвета.
- Обратите внимание на два блока:
- Первый блок «Палитра» (Palette) определяет основные цвета.
- Второй блок позволяет настраивать цвета различных элементов дизайна.
- Для изменения цвета ссылок и кнопок сначала добавьте нужные цвета в палитру.
Сохраните настройки палитры.
Дополнительные стили в styles.css
Настройте дополнительные стили в styles.css.
- Например, для удаления подчеркивания ссылок внутри постов добавьте следующий стиль:
.wp-block-post-content a { text-decoration: none; }- Для глобальной настройки всех ссылок уберите подчеркивание:
a { text-decoration: none; }
a:hover { text-decoration: underline; } /* Подчеркивание при наведении */Настройка языков сайта и админки
Выберите язык для сайта и админки.
- В меню «Настройки» (Settings) выберите «Основные» (General) и установите язык сайта на «Русский».
- Для админки выберите «Английский». Это поможет избежать путаницы с переводами.
Сохраните изменения.
Проектирование структуры разделов
Разработайте структуру сайта.
- Определите ключевые темы и категории (рекомендуется не более 3-4 категорий).
- Избегайте создания вложенных категорий, чтобы упростить структуру и улучшить SEO.
Доработка верхнего меню сайта
Настройте верхнее меню.
- Перейдите в настройки темы и выберите раздел «Навигация» (Navigation).
- Удалите пункт «Пример статьи», нажав на иконку «карандаш».
- Добавьте ваши основные разделы сайта, нажав на кнопку «+».
Управление элементами шапки в WordPress
Настройка заголовка (Header)
Перейдите в Паттерны.
- В редакторе тем найдите раздел «Паттерны» (Patterns) и выберите «Части шаблона» (Template Parts) → «Заголовок» (Header).
Изучите варианты группировок.
- Здесь есть два основных блока в виде строки (значок строки).
- Другие варианты группировок:
- Первый: один
div. - Второй:
divс параметромflex-direction: row. - Третий:
flex-direction: column(колонка).
- Первый: один
Настройка выравнивания.
- Блоки с названием сайта и навигацией сгруппированы в
div. Вы можете настроить их выравнивание:- По левому краю
- По центру
- По правому краю
- Выбран вариант «пространство между» (space between).
Создание нового шаблона отображения постов
Создайте новый шаблон.
- Перейдите в раздел «Внешний вид» (Appearance) → «Редактор» (Editor) и выберите «Шаблоны» (Templates).
Добавьте новый шаблон.
- Нажмите на плюсик «+».
- Выберите «Произвольный шаблон» (Custom Template) и дайте ему название.
- Выберите паттерн для страницы поста для удобства начала.
Удалите ненужные элементы.
- Удалите шапку сайта, нажав на три точки и выбрав «Удалить».
- Также удалите группу элементов, включающую картинку и заголовок, выбрав «Удалить».
Добавьте новый элемент «Обложка».
- Нажмите на плюсик «+» между шапкой сайта и контентом.
- Выберите «Посмотреть все» и в разделе «Блоки» добавьте «Обложку».
- Выберите опцию «Использовать изображение записи».
Настройка заголовка внутри обложки
Добавьте заголовок.
- Удалите блок по умолчанию, затем нажмите «+» внутри Обложки и выберите «Заголовок» (Header).
- Настройте его на «отобразить по центру».
Добавьте навигацию.
- Перейдите в раздел «Паттерны» и выберите «Заголовки» (Headers), выбрав отцентрованный вариант.
- Переместите шапку на уровень выше заголовка статьи с помощью стрелочки.
Настройте логотип.
Выделите логотип и измените его размер, растянув его.
Добавьте блок «Рубрики».
Добавьте блок «Рубрики» под заголовком статьи. Выберите, что вам нужно выводить, например, рубрику, дату публикации или автора.
Доработка стилей
Добавьте класс CSS.
Выделите всю Обложку поста и в меню справа в разделе «Дополнительно» укажите название класса CSS: screen_height.
Создайте стиль для обложки.
- Перейдите в «Инструменты» и выберите «Редактор тем».
- В файл
style.css, созданный в дочерней теме, добавьте следующий стиль:
.screen_height { height: 100vh; }
Сохраните изменения.
Добавление ссылок на недавние статьи в шаблон
Создание блока с недавними статьями
Добавьте блок с недавними статьями.
- После содержания поста нажмите на плюсик «+» и выберите «Посмотреть все».
- Перейдите в «Паттерны» (Patterns) → «Записи» (Posts).
- Выберите трехколоночный шаблон, который отображается справа.
Понимание блока «Записи».
- В WordPress этот блок называется Query Loop. Он позволяет выводить список статей из указанной категории.
- Блок можно добавлять как через Паттерны, так и через Блоки, выбрав Query Loop.
Настройка отображения блока
Настройте ширину колонок.
- По умолчанию три колонки растянуты на 100% ширины страницы. Для добавления отступов:
- Выделите блок и убедитесь, что иконка выглядит как закорючка.
- В правой колонке опций блока включите опцию «Внутренние блоки используют ширину содержимого».
- Установите значение ширины на 80 VW.
Настройка элементов внутри блока.
- Изменив стиль одного элемента, он применится ко всем таким же объектам в колонках.
Настройка изображений и заголовков.
- Кликните по картинке, измените её пропорции на 4:3 и, при желании, установите радиус закругления на 6.
- Выделите текст заголовка, выровняйте его по центру и измените тип заголовка на H4. Также можно изменить размер шрифта.
Удаление ненужных блоков.
- Если вам не нужен блок с датой и автором, удалите его.
Сохраните изменения.
- Нажмите голубую кнопку «Сохранить» и подтвердите сохранение шаблона Post Cover.
Проверка результата шаблона для постов
- Просмотрите обновленный шаблон.
- Перейдите в меню «Записи» и выберите редактирование любого поста.
- В меню шаблонов появится новый вариант «Post Cover». Выберите его, сохраните пост и проверьте результат.
Доработка элементов.
- Если хотите изменить цвет или размер заголовка и других элементов, вернитесь в редактирование шаблона.
Обратите внимание на возможности настройки темы.
Базовая тема позволяет создавать шаблоны записей, сопоставимые с внешними шаблонами.
Работа с иерархией элементов
- Используйте окно иерархии.
- В редакторе слева можно увидеть иерархию элементов дизайна, вызываемую иконкой «бургер».
- Это окно полезно для перетаскивания элементов между группами.
Решение проблемы с загрузкой логотипа
- Загрузка логотипа.
- На некоторых хостингах может отсутствовать опция загрузки логотипа.
- Для решения проблемы установите любую старую тему, где доступна редактирование логотипа.
- Загрузите логотип, затем вернитесь к теме Twenty-Twenty-Five и удалите старую тему.
Создание шаблона главной страницы
- Создание главной страницы в стиле новостного портала.
- Смотрите видеоинструкцию, чтобы узнать, как сделать красивую главную страницу в стиле новостного портала.