Главное изображение сайта в ВП

Автор Тема: Главное изображение сайта в ВП  (Прочитано 1541 раз)

Оффлайн Val_EryАвтор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 141
  • Сообщений: 247
  • Карма: 28

Оффлайн Val_EryАвтор темы

  • Постоялец
  • ***
1
Всем привет!

Решил накропать маленький пост о том, как в ВП создать главное изображение сайта (hero image), что для этого уже есть в движке и как это использовать.

Если кому-то будет интересно, кто-то узнает что-то новое - буду рад. Увидите ошибки, сообщайте.
Вообще, если подобная тематика ("как сделать?..") зайдет (и не только для ВП), буду чё-нить выкладывать. Если народ не будет против ::)

Несколько слов, вначале...
Я буду использовать последнюю на данный момент версию 5.8.1. В этой версии уже имеется поддержка формата webp. Почти полноценная поддерка - загрузка изображений посредством медиа аплоадера, превьюшки картинок в библиотеке... все дела, в общем. Поэтому, я буду использовать веппи.

Если есть желание попробовать этот формат, посмотреть, реально ли он жмет жипеги на 40%, переходите в их репозиторий https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html, качаете самый свежий архив и распаковываете на своем диске.
Так как cwebp - утилита командной строки, установщика не имеет, желательно добавить путь к каталогу, в котором лежит экзешник cwebp в переменную path. Тогда конвертер будет доступен из любого каталога по своему имени.

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

После добавления пути в переменную path, конвертировать изображения будет совсем просто: открыли каталог с картинками, с шифтом нажали правую кнопку мыша чтобы открыть командную строку в этом каталоге, в командной строке набрали cwebp file.jpg -o file.webp.
Плюс, в документашке по libwebp есть батники, которые пройдутся по каталогу с картинками рекурсивно.

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

Узнать, включена ли поддержка можно так: админ-панель -> внешний вид -> настроить. В открывшемся интерфейсе ищите несколько странный перевод Заголовок. Если Заголовок есть, значит поддержка пользовательских изображений включена.

Да, и я проговорился... Добавлять главное изображение мы будем, задействуя поддержку темой пользовательских изображений.
И чтобы наши ковыряния в коде не были удалены при первом же обновлении темы, работать будем с темой дочерней. В принципе, создать дочернюю ему руками не так сложно. Если умеете - пожалуйста. Если нет, то лучше установить плагин типа child theme generator. Он сделает все за вас. После создания дочерней темы плагин можно удалить.

Далее... Шаблон.
Мы не будем погружаться в иерархию шаблонов ВП. Для дочерней темы с нашей задачей достаточно скопировать (или создать) один единственный шаблон из каталога родительской темы в каталог темы дочерней.
Какой шаблон использовать? Здесь все зависит от того, где вы желаете вывести главное изображение... и что у вас является главной страницей сайта.
Если это блог, то можно создать шаблон home.php, если главная страница будет статической, то можно создать front-page.php (ну, или скопировать их из родительской темы оформления).
Можно поступить еще проще: использовать шаблон header.php (так я и поступлю). Но тогда добавляемый код лучше выводить внутри проверки "а является ли это главной страницей". В противном случае, наше главное изображение будет выводиться на всех страницах сайта.

Далее... Файлы шаблона.
Для дочерней темы достаточно 2-х файлов: style.css (в котором мы сообщаем вордпрессу о том, что это дочерняя тема, и указываем, кто ее родитель) и functions.php (здесь подключаются стили родителя и стили ребенка).
Как я уже сказал, в качестве примера "внедрения" я буду использовать шаблон header.php. Это будет третий файл.
И еще я создаю два каталога: inc (здесь будет функционал, подключаемый к fuctions.php) и page-template (здесь будут "части шаблонов" - я планирую рассмореть пару/тройку способов добавления главного изображения, и чтобы не удалять предыдущий код, я буду писать его в частичном шаблоне и подключать в header.php)

Последнее... Наша задача, по названию этой темы на форуме, состоит в выводе некоторых картинок на сайт. Вопросы "а как добавить форму обратной связи?"/"а как вывести в блоке с изображением свой текст?"/и пр. рассматриваться не будут

Итог... У меня установлен ВП последней версии. В качестве темы для экспериментов я выбираю дефолтную 2021. Она хороша еще тем, что возможность вывести собственное главное изображение в ней отсутствует. Копирую header.php из темы 2021, создаю каталоги, о которых писал чуть выше, получая такую файловую систему
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.В template-parts - частичные шаблоны, которые буду заполнятся по мере рассмотрения способов создания.
Header.php взят из 2021 и немного изменен (закомментаренные строки для подключения частичных шаблонов)
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Приступаем :)

Для добавления главного изображения в ВП существует т.н поддержка темой некоторого свойства, которое именуется custom-header. В общем виде добавление поддержки пользовательских заголовков (custom-header) выглядит так

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.здесь $args - массив доступных аргументов.

В ВП custom-header - это не только добавление в админ-интерфейс формы, при помощи которой пользователь может добавить/изменить/удалить собственное изображение. Разработчики решили предоставить возможность пользователям управлять цветом текстовых заголовков. На моё ИМХО - сомнительная возможность. Поэтому цветом текста мы озадачиваться не будем.

Что ж, добавляем первый код в функциональный файл functions.php и переходим к...

Способ 1 - "дефолтный"
Дефолтный потому, что это, по сути, единственный вариант, описанный в кодексе - https://codex.wordpress.org/Custom_Headers

Работает это так:
 - добавляется поддержка темой выбранного свойства, что мы уже сделали
 - описывается набор аргументов
 - для вывода на страницах сайта используется специальная ВП-функция header_image()
 - включение поддержки добавляет новый пункт "Заголовок" в разделе "Внешний вид" админки для управления пользовательскими изображениями

Значит, набор аргументов (файл functions.php)
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Здесь,
default-image оставляем пустым, пользователь сам выберет изображение и сам загрузит его на сайт;
ширина и высота изображения задаются явно, в пикселях;
но если мы для ключей с flex-* установим значение в true, ширина и высота изображения не будут жестко связаны с прописанными нами размерами (в медиа аплоадере для каждого загружаемого изображения будет добавлена кнопка "не обрезать");
uploads позволяет управлять изображением из админки (загрузить/удалить)

Остается прописать вывод изображения в шаблоне. Так как способ дефолтный, то для создания разметки используем частичный шаблон default-header.php. Не забываем снять комментарий со строки /get_template_part( 'template-parts/default-header' );  в header.php
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Всё достаточно просто:
функция header_image возвращает url изображения, поэтому она вставлена в src тега img,
get_custom_header позволяет получить данные загруженного изображения.

Результат будет такой.
Для страницы настроек Заголовка в админке сайта:


Главная страница сайта:


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

Но есть не менее очевидный минус:
изображение, выводимое при помощи рекомендуемой функции header_image(); имеет одну размерность. В моем примере - это 1920х1279 (см. предыдущий скриншот). Но если вы заглянете в каталог uploads (именно туда складируются все картинки, загружаемые через медиа аплоадер), то увидите, что ВП для загруженного изображения создал несколько экземпляров этого изображения в соответствии с теми размерами, которые используются активной темой.
То есть... header_image(); работает с исходным изображением, про существование экземпляров этого изображения других размеров он не знает.

Главная засада с этим способом, на моё ИМХО, в следующем:
если вы подобрали картинку с пропорциями 3 к 1 или 4 к 1 (узкая и длинная), для десктопов она может и будет выглядеть хорошо, но на мобилах вы получите из-за правила для img {max-width: 100%;} узкое и мелкое изображение. Например, на яФонах высота изображения с исходными размерами 1920х640 будет всего 120px, что совсем не торт) Я знаю форумчан, у которых на сайте есть подобный баннер...

Способ 2 - вариация "дефолтного", шаблон - background-header.php
Понятно, что если header_image(); возвращает нам url изображения, мы можем использовать этот url не только как источник (src) для тега img, но и как адрес для фонового изображения.

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
То есть... для блока id="site-bgheader" явно прописываем стиль с url('<?php header_image(); ?>').
Inline-стили подбираются в зависимости от изображения. Главное здесь - background-size: cover; При такой установке правила изображение не будет подгоняться под размер родительского контейнера (как при значении contain). Правилом background-position задается размещение картинки в родительском блоке.

Плюсы и минусы такого способа аналогичны + и - "дефолтного". За небольшим исключением:
 - на мобильных устройствах ваш баннер не будет масштабироваться под размер экрана; картинка всегда будет большая (точнее, ее видимая часть)
 - высота фонового изображения
Я руками прописал минимальную высоту в 480px. И выглядит это примерно так:


P.S. Именно с фонами работают большинство тем, в свойствах которых присутствует поддержка custom-header. Потому, что на малых экранах легко получить большое не масштабированное изображение (в отличии от тега img).
В примере я использую только min-height. Это означает, что и для 2К мониторов мой баннер будет ограничен высотой 480px. Самым простым решением будет добавление @media с высотой под каждый конкретный брейкпоинт.
Еще момент: в примере блок id="site-bgheader" пустой. То есть не содержит ни заголовков, ни форм, ни текстовых описаний, который пользователь может захотеть туда добавить... Решение - добавление своих стилей. Это не сложно)

Способ 3 - использование всего набора изображений, шаблон imagetag-header.php
Перед тем, как писать данный пост, я просмотрел несколько тем с официального сайта. На предмет "а как разработчики кодируют вывод custom header?". Вывод: если исключить шаблоны, использующие элементор или другие пейдж билдеры, в остатке никто не парится размерами картинок, у всех src="<?php header_image(); ?>" :o

Кстати, использование элементора не означает, что ваши баннеры будут адаптивны. Я посмотрел демки двух тем с вп.орг из списка топ: OceanWP и Astra - фигня та же, на мобилах грузятся картинки максимального размера. Например,
Rings от OceanWP - https://rings.oceanwp.org/
Outdoor от Астры - https://websitedemos.net/outdoor-adventure-02/
Они используют background-image, но сути это не меняет: для мобильных устройств грузятся изображения на пару-тройку сотен килобайт.

На самом деле, это странно. Ибо решение простое - ВП функция get_header_image_tag();, добавленная ещё в ВП версии 4.4. Результатом примения будет тег img на выходе с подтянутыми srcset (источниками). В общем, код, добавляемый в выбранный частичный шаблон:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
И результат (инициатор imageset):


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

Способ 4 - the_custom_header_markup(), шаблон markup-header.php
Данная ВП функция появилась в версии 4.7. Используется для вывода (и создания разметки) изображений или видео на страницах сайта. Применительно к нашему случаю: выводу главного изображения сайта - код приобретает очень простой вид

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Результат аналогичен предыдущему. Будет создан блок с классом wp-custom-header и изображением, содержащим srcset'ы. Поэтому, скриншот не прилагаю)

Способ 5 - использование кастомайзера
Все рассмотренные до этого момента варианты позволяли вывести в качестве главного выбранное изображение. И если размеры исходной картинки велики, мы можем выводить её фоном (способ с background-image), используя background-size: cover; и размещая относительно top/right/bottom/left родительского блока.

Тогда любой вложенный в родительский блок (id="site-bgheader" из второго способа) элемент (заголовок, форма обраной связи и т.п.) может быть размещен в "пределах" этого фонового изображения при помощи стилей.

Но... Мы можем выводить два главных изображения (естесственно, изначально подготовленных): одно - для десктопов, другое - для мобильных устройств; одно - с ориентацией ландшафт, другое - с ориентацией портрет. Так как функционал custom-header сделать этого не позволяет (так же, как и регистрация множества пользовательских изображений - register_default_headers();) воспользуемся вордпресс-кастомайзером

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

Я создаю файл customizer.php в каталоге inc, подключаю его в functions
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
В файл customizer.php прописываю следующий код:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Здесь, Header banners - это заголовок, который появится в "Внешний Вид -> Настроить", класс WP_Customize_Image_Control позволяет добавить в созданную нами секцию header форму для работы с изображениями (загрузить/удалить/изменить).

Остается только загрузить заранее подготовленные изображения через "Внешний Вид -> Настроить -> Header banners". Результат будет примерно такой:



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

Итак, частичный шаблон banner.php:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.

Здесь, для вывода изображения я использую picture (можно добавить media query). Стили относятся только к блоку  id="site-banner". Если решите выводить картинки фоном, то блок id="site-imagesbanner" можно просто удалить.

В общем, результат


По итогу...
Итак, пять способов добавления :D

Каждый имеет свои плюсы и минусы. Выбирать, каким методом добавлять главные изображения на сайт - вам (если они, конечно, вам там нужны). Главное - для достижения результата нам не потребовалось ставить никаких плагинов, использовалось только то, что есть в движке ВП. Способы достаточно простые, и не требуют особых познаний.


 

Похожие темы

  Тема / Автор Ответов Последний ответ
6 Ответов
2583 Просмотров
Последний ответ 17-08-2012, 18:51:46
от mark3000
7 Ответов
2441 Просмотров
Последний ответ 07-11-2012, 02:51:47
от YouTuberz
3 Ответов
977 Просмотров
Последний ответ 02-07-2014, 17:04:30
от reage
16 Ответов
2350 Просмотров
Последний ответ 02-12-2015, 11:12:52
от ВикторияИ
1 Ответов
1270 Просмотров
Последний ответ 27-03-2019, 09:18:58
от Sky-fi