Как создать новый шаблон страницы в WordPress на основе старого — и не испортить дизайн

Иногда бывает так: сайт работает как часы, всё выглядит аккуратно и ровно… пока не появляется новая задача. Допустим, вы ведёте новостной ресурс, где все изображения к статьям строго одного формата — скажем, 16:9. Всё выглядит ровно и предсказуемо, пока вы не решаете ввести новую рубрику. Например, с мемами. А у мемов формат картинок — какой придётся. И тут начинаются проблемы: WordPress берёт и автоматически обрезает всё под привычные пропорции, уродуя изображение. Хорошая новость — это можно исправить. Причём не ломая основной шаблон сайта. Сделаем отдельный шаблон, в котором обложки будут отображаться целиком, как есть. Всё остальное — шрифты, отступы, структура — останется как было.

Шаг 1. Создаём тестовую страницу

Для начала — создайте черновик новой статьи или страницы в админке WordPress. Это нужно, чтобы потом было удобно протестировать новый шаблон. Название — любое, текст — произвольный. Главное — добавить изображение записи (то самое, которое обрезается). После загрузки картинки опубликуйте страницу и откройте её. Убедитесь, что обложка действительно обрезалась — значит, всё работает «по-старому» и шаблон нужно править.

Шаг 2. Делаем копию шаблона

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

wp-content → themes → [your theme] → templates

Если не уверены, какая тема используется — загляните в раздел «Внешний вид → Темы» в админке WordPress.

Найдите файл single.html — он отвечает за отображение одиночных записей. Скопируйте его и дайте новому файлу понятное имя, например no-resize.html.

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

<!-- wp:post-featured-image {"aspectRatio":"3/2"} /-->

В этом фрагменте ключевая часть — "aspectRatio":"3/2". Именно она заставляет WordPress обрезать изображение под указанные пропорции.

Чтобы отключить обрезку, просто удалите этот параметр, оставив:

<!-- wp:post-featured-image {} /-->

Сохраняем изменения. Всё — теперь у вас есть шаблон, в котором изображения отображаются полностью.

Шаг 3. Применяем новый шаблон

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

Нажимаем на название и выбираем наш новый шаблон (например, no-resize). Сохраняем изменения и обновляем страницу. Если всё сделали правильно — обложка больше не обрезается, а отображается в оригинале.

Что делать, если стили подключаются из внешнего файла?

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

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