🤔 Что делаем: создаём новый шаблон страницы на основе старого, чтобы в этих страницах немного изменить оформление картинок (да и чего угодно ещё).
🕔 Время: 10 минут.
✅ Понадобится: сервер с установленным Вордпрессом и доступ к файлам на этом сервере.
👉 Коротко суть. Допустим, у нас есть новостной сайт на Вордпрессе, где все титульные картинки (они же — обложки к статьям) всегда имеют один и тот же формат и одно и то же соотношение сторон. Например, 2 на 3 или 16 на 9, вообще неважно.
Пока картинки изначально с этим соотношением сторон — всё хорошо, ничего не обрезается и выглядит адекватно. Но потом нам понадобилась новая рубрика, где мы, например, разбираем мемы про киногероев, а там уже соотношение сторон в таких картинках нам заранее не известно. И когда мы создаём новую статью и загружаем такую картинку, то оказывается, что она тоже обрезается в стандартном формате и всё выглядит некрасиво.
🛠 Решение: текущий дизайн страницы нас, допустим, полностью устраивает, вся проблема только в обрезке картинок. Получается, что нам нужно создать новый шаблон оформления страницы на основе старого, где сохранится весь старый дизайн, а единственное, что изменится, — это формат обложки, чтобы она не обрезалась, а показывалась как есть.
1. Создаём тестовую страницу в Вордпрессе
Заходим в админку своего Вордпресса: в боковом меню выбираем «Записи» → «Все записи» → «Добавить запись». Появляется пустой шаблон страницы:
Придумываем заголовок и пишем какой-то текст для записи (вообще что угодно):
Теперь в разделе «Запись» в правом боковом меню нажимаем кнопку «Установить изображение записи»:
В появившееся окно перетаскиваем нужную картинку или выбираем её вручную на компьютере по кнопке «Выберите файлы»:
Смотрим — картинка появилась в правом боковом меню:
Это значит, что всё готово к дальнейшим действиям. Нажимаем «Опубликовать» в правом верхнем углу, а затем в боковом левом меню нажимаем «Просмотреть запись». Откроется страница с тем дизайном, который у нас был настроен до этого:
Видно, что картинка обрезалась — и это плохо: для этой рубрики нам нужно сохранять всегда исходный формат картинок, оставив остальной дизайн как есть. Для этого переходим к следующему шагу.
2. Создаём копию шаблона страницы
Чтобы сделать копию шаблона страницы, заходим в админку хостинга и переходим в файлы. В каждом хостинге это выглядит и работает по-разному, мы до сих пор для учебных проектов пользуемся хостингом Sweb, поэтому покажем на нём.
Заходим в папку с установленным Вордпрессом, там выбираем wp-content → themes и в ней выбираем папку с названием текущей темы. Так как у нас тема называется twentytwentyfive, заходим в неё и там выбираем папку templates (шаблоны). Внутри увидим файлы, которые составляют основу оформления страниц в этой теме:
👉 Если вы не знаете, какая у вас сейчас выбрана тема, заходите в админку Вордпресса, слева в меню выбираете «Внешний вид» → «Темы» и смотрите на название активной темы:
За шаблон самой страницы отвечает файл single.html — на его основе движок собирает основной каркас страницы, который потом и наполняется контентом. Создаём копию этого файла и называем её как угодно, например no-resize.html. Теперь заходим в этот файл в режиме правок и смотрим, что там внутри.
Нас интересует строка, которая отвечает за стиль титульной картинки (обложки):
<!-- wp:post-featured-image {"aspectRatio":"3/2"} /-->
Видно, что картинка обрезается под формат 3 на 2 — какого бы формата она ни была изначально. Чтобы такого не происходило, убираем "aspectRatio":"3/2" — именно эта команда отвечает за соотношение сторон. Получается такое:
<!-- wp:post-featured-image {} /-->
Сохраняем и закрываем файл no-resize.html — и это по сути всё, что нужно было сделать, переходим к выбору шаблона страницы. Весь дизайн остался прежним — мы лишь убрали обрезку обложки и сделали так, чтобы она показывалась целиком.
3. Выбираем новый шаблон страницы
Возвращаемся в редактор страницы и в правом меню находим поле «Шаблон». По умолчанию там стоит что-то вроде «Отдельные записи» или «Страница по умолчанию», но это нам уже не нужно. Нам надо, чтобы конкретная статья была в новом формате, где обложки не обрезаются. Для этого нажимаем на название шаблона и выбираем «Заменить шаблон»:
Магия! Наш новый шаблон, который мы сделали на основе старого, уже появился в списке шаблонов оформления, и мы видим, что там картинка не обрезается:
Выбираем этот шаблон, потом нажимаем в правом верхнем углу кнопку «Сохранить» и обновляем опубликованную страницу:
А что если у меня все стили к дизайну прописаны в отдельном файле?
В этом случае создаёте дополнительно копию того самого файла со стилями, убираете оттуда ненужное (или добавляете нужное) и подключаете его вместо старого к новому шаблону.
И это всё, так просто?
Да. Это фронтенд, тут так часто бывает. Приходите в Практикум, чтобы научиться делать магию более крутого порядка.
