Темы WordPress: с чего начать и как не сломать сайт

За 30–40 минут вы выберете тему WordPress, посмотрите её на своём содержимом без публикации, включите и настроите так, чтобы правки не пропали после первого обновления. Инструкция написана для WordPress 6.x на вашем хостинге. Главная ловушка новичка не в выборе шаблона, а в том, что правки, внесённые прямо в файлы темы, стирает обновление: WordPress заменяет папку темы целиком.

Что нужно до начала

• WordPress 6.x на вашем хостинге. На WordPress.com набор тем и правила установки другие, эта инструкция не про него.
• Роль «Администратор». Без неё в разделе «Внешний вид» не будет установки тем.
• Свежая резервная копия файлов и базы. Проверьте, что архив скачивается и открывается.
• SFTP-доступ или файловый менеджер хостинга. Он нужен для дочерней темы и для спасения сайта, если что-то пойдёт не так.
• Тестовая копия сайта, если она у вас есть. Тогда все шаги делайте на ней.

Классическая или блочная: определите сразу

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

Пояснение. Блочная тема собирает шапку, подвал и шаблоны страниц из блоков в Редакторе сайта, он появился в WordPress 5.9. Классическая хранит шаблоны в PHP-файлах и настраивается через Настройщик (Customizer).

Названия пунктов зависят от темы и версии, таблица ниже даёт ориентир.

Шаги: от выбора до включения

1. Запишите, что есть сейчас. Откройте «Внешний вид → Темы» и запомните название активной темы. Если вы добавляли свой CSS, скопируйте его в текстовый файл. Проверка: у вас есть копия сайта, название старой темы и сохранённый CSS.
2. Выберите тему в каталоге. Нажмите «Добавить новую тему». В карточке смотрите дату последнего обновления, число активных установок и отзывы. Ориентир: тема без обновлений больше года вызывает вопросы, ведь WordPress и PHP за это время уходят вперёд. Проверка: обновление не старше года, а в описании нет требований к версии PHP выше той, что стоит у вас.
3. Установите, но не включайте. Нажмите «Установить». Платную тему загрузите zip-файлом через «Загрузить тему». Берите её только у автора или в официальном магазине: взломанные копии платных тем часто несут вредоносный код. Проверка: тема появилась на странице «Темы», кнопка «Активировать» доступна, для посетителей сайт не изменился.
4. Откройте предпросмотр. Наведите курсор на тему и нажмите кнопку предпросмотра (Live Preview). Он показывает ваши записи в новой теме, посетители его не видят. Проверка: главная, одна запись, одна страница и поиск открываются без ошибок.
5. Активируйте тему. Нажмите «Активировать» и откройте сайт в окне инкогнито. Проверка: главная, запись, страница 404 и мобильная ширина (через инструменты разработчика браузера) выглядят прилично, меню на месте. Если меню пропало, назначьте его заново в настройках меню.
6. Настройте внешний вид. Используйте пункты из таблицы выше: логотип, меню, цвета, дополнительный CSS. Проверка: после сохранения обновите сайт в окне инкогнито, изменения видны. Если нет, очистите кеш в плагине кеширования.

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

Дочерняя тема: когда нужна и как сделать

Дочерняя тема нужна, если вы собираетесь править PHP-файлы классической темы. Для пары правил CSS хватит дополнительного CSS из шага 6. Пример ниже для классической темы и WordPress 6.x. В роли родителя взята Twenty Twenty-One (папка twentytwentyone), подставьте имя папки своей темы. У блочных тем свои нюансы, о них читайте в разделе про дочерние темы в Theme Handbook.

1. Узнайте имя папки родителя. Подключитесь по SFTP и откройте wp-content/themes/. Проверка: вы видите папку родительской темы и точно знаете её имя.
2. Создайте папку и style.css. Рядом с родителем создайте папку twentytwentyone-child, а в ней файл style.css. Значение Template должно совпадать с именем папки родителя символ в символ.

   /*
    Theme Name: Twenty Twenty-One Child
    Template: twentytwentyone
    Version: 1.0.0
   */

   Проверка: в «Внешний вид → Темы» появилась «Twenty Twenty-One Child» без сообщения об ошибке.
3. Подключите стили. В той же папке создайте functions.php. Некоторые темы подключают свои стили сами, тогда повторное подключение лишнее, но обычно не ломает вёрстку.

   <?php
   // Сначала стили родительской темы, затем дочерней.
   add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );
   
   function child_theme_enqueue_styles() {
       wp_enqueue_style(
           'parent-style',
           get_template_directory_uri() . '/style.css'
       );
       wp_enqueue_style(
           'child-style',
           get_stylesheet_uri(),
           array( 'parent-style' ),
           wp_get_theme()->get( 'Version' )
       );
   }

   Проверка: активируйте дочернюю тему, сайт должен выглядеть так же, как с родительской.
4. Убедитесь, что правки работают. Добавьте в конец style.css строку body { border-top: 5px solid #cc0000; } и обновите сайт. Проверка: сверху появилась красная полоса. Затем удалите строку.

Если не получилось

• «The uploaded file exceeds the upload_max_filesize directive in php.ini». Zip-файл больше лимита PHP на хостинге. Поднимите upload_max_filesize в настройках PHP или распакуйте архив и загрузите папку темы по SFTP в wp-content/themes/.
• «Could not create directory». У WordPress нет прав на запись в wp-content/themes. Попросите хостера проверить владельца и права папки. Права 777 не ставьте.
• «The package could not be installed. The theme is missing the style.css stylesheet». В архиве лишний уровень вложенности или лежит пакет с документацией. Распакуйте его, найдите папку со style.css и заархивируйте именно её.
• «There has been a critical error on this website». Тема упала при активации, часто из-за несовместимой версии PHP. Переименуйте папку темы в wp-content/themes/ по SFTP: WordPress переключится на стандартную тему, если она установлена. Обычно на почту администратора приходит письмо со ссылкой на режим восстановления.
• «The parent theme is missing. Please install the parent theme». Значение Template в style.css не совпадает с именем папки родителя. Проверьте регистр и дефисы, на Linux они важны.

Что делать дальше

• Включите автообновления темы: ссылка есть в окне со сведениями о теме (функция появилась в WordPress 5.5).
• Прогоните главную страницу в PageSpeed Insights до и после смены темы и сравните мобильные показатели.
• Удалите неиспользуемые темы. Оставьте активную, дочернюю и одну стандартную запасную, чтобы WordPress было куда переключиться при сбое.
• Углубиться можно в Theme Handbook на developer.wordpress.org: там описаны шаблоны, иерархия и блочные темы.