Разница между закрытыми изображениями и избранными изображениями в WordPress

Когда в WordPress 5.0 появился редактор Gutenberg, он также привнес в WordPress несколько новых функций. Некоторые из этих функций видны в виде блоков. Один из этих блоков называется Обложка, который помещает закрытое изображение с несколькими настраиваемыми функциями в содержимое вашего сообщения или страницы.

Конечно, WordPress по-прежнему включает возможность указывать избранное изображение для страниц и сообщений. Это вызывает несколько вопросов. Обложенные изображения и избранные изображения - это одно и то же? Если нет, то что это такое и как они используются? Какая разница? В этой статье мы обсудим покрытые изображения и избранные изображения в WordPress и ответим на каждый из этих вопросов.

Покрытые изображения

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

Обложки легко добавить к вашему контенту в Gutenberg, и они включают в себя некоторые функции стилизации, которые изначально недоступны для избранного изображения.

Gutenberg включает новый блок под названием Cover, который позволяет создавать изображение обложки для ваших сообщений или страниц. Вы найдете блок на вкладке Common Blocks в списке блоков.

Блок Обложка позволяет добавлять изображение с наложением и текстом. Загрузите свое изображение или выберите изображение из медиатеки. Вы также можете использовать видео, если хотите, которое будет воспроизводиться за текстом и наложением. Это отлично подходит для создания привлекательных заголовков. Это то, что невозможно сделать с избранным изображением без использования стороннего плагина.

После того, как вы добавили изображение или видео, вы увидите функции для текста, фиксированные настройки фона и наложения. Он имеет некоторые настройки выравнивания над изображением.

Чтобы добавить заголовок, просто поместите курсор туда, где написано «Написать заголовок…», и начните вводить текст. Он также позволяет использовать полужирный шрифт, курсив, добавить ссылку или зачеркнуть текст. В настройках над изображением вы можете выровнять текст.

Фиксированный фон добавляет функцию параллакса для изображений. Изображение остается на месте, пока текст прокручивается. Эта функция недоступна для видео, но все остальные настройки доступны.

Добавьте цвет наложения, выбрав нужный цвет из вариантов, или выберите разноцветный круг, чтобы выбрать собственный цвет.

Пользовательский цвет включает палитру цветов с ползунком и показывает значение цвета в шестнадцатеричном формате или в формате RGB.

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

В этом примере я установил непрозрачность на 20. Можно увидеть намного больше изображения, но он все еще имеет оттенок цвета наложения.

Изображение также имеет параметр полной ширины в настройках вверху изображения. Это отлично подходит для создания заголовков изображений или видео или создания красивых вступлений к разделам.

Блоки обложек открывают множество возможностей дизайна, давая вам возможность добавлять изображения с текстом, наложениями и параллаксом. Изображение / видео, текст, цвета и параллакс помогают задать настроение статьи и привлечь внимание целевой аудитории. Вы можете использовать несколько блоков обложки по всему контенту, чтобы ввести новые разделы (которые обычно обозначаются текстом заголовка) или просто добавить визуальную привлекательность ссылкам на страницы или продуктам.

Избранные изображения

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

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

Рекомендуемое изображение добавляется в настройки публикации или страницы. Нажмите « Установить избранное изображение» и выберите или загрузите свое изображение в медиатеку.

Такие темы, как Twenty Nineteen, включают наложение для избранного изображения. Вы можете выбрать цвета в настройщике темы в разделе «Цвета». Синий - это цвет по умолчанию, но вы можете использовать ползунок для выбора почти любого цвета.

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

Совместное использование обложек и тематических изображений

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

Если вы используете то же изображение, что и обложка, изображения будут дважды отображаться в вашем контенте. На самом деле он показывает две разные вещи: избранное изображение и изображение обложки, но вы выбрали одно и то же изображение для обоих.

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

Если вы используете Divi или Extra, в меню панели инструментов перейдите в Divi (или Extra )> Параметры темы > Макет и отключите Поместить большие пальцы в сообщение на вкладке Макет отдельного сообщения . Этот параметр также доступен на вкладке « Макет одной страницы », поэтому вы можете настроить параметры в соответствии со своими потребностями.

В этом примере рекомендуемое изображение совпадает с изображением на обложке. Я добавил наложение при наведении, которое демонстрирую, наведя указатель мыши на сообщение справа.

Сам пост показывает только изображение обложки. Рекомендуемое изображение не отображается в содержимом сообщения.

Дополнительно есть возможность индивидуально скрыть избранное изображение в посте. Это дает вам больше контроля над тем, как WordPress обрабатывает избранные изображения в сообщениях и на страницах. В настройках публикации нажмите « Скрыть избранное изображение в публикации» .

Вы также можете скрыть избранное изображение в публикации с помощью такого плагина, как Hide Featured Image, бесплатного плагина в репозитории WordPress. Выберите, чтобы скрыть все избранные изображения в сообщениях или страницах, или скрыть их по отдельности на страницах и самих сообщениях. В то время, когда я тестировал плагин, он не был совместим с Twenty Nineteen, но отлично работал с Twenty Seventeen и другими.

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

Конечные мысли

Это наш взгляд на закрытое изображение и избранное изображение в WordPress. Сначала они кажутся одинаковыми или похожими, но на практике они очень разные.

Избранные изображения привлекают читателя к статье. Статья будет иметь только одно избранное изображение на сайте, которое будет отображаться везде, где отображаются миниатюры для сообщений, но его можно заменить другим изображением для отображения в социальных сетях с помощью таких плагинов, как Yoast. Некоторые темы, такие как Twenty Nineteen, и конструкторы, такие как Divi, включают настройки для избранных изображений.

Обложки на самом деле являются частью статьи и могут помочь улучшить взаимодействие с постами. В содержании статьи может быть несколько изображений обложки или видео. Они отлично подходят для визуального оформления и разделения разделов статьи, если вы хотите использовать изображения вместо текста заголовка. Обложки особенно интересны из-за встроенных в WordPress параметров полной ширины, текста, параллакса и наложения. Мне нравится, что он может отображать видео. До Гутенберга для этих функций требовался плагин или конструктор страниц.

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

Ждем вашего ответа. Как вы используете крытые изображения и избранные изображения в WordPress? Дайте нам знать об этом в комментариях.

Лучшее изображение через karnoff / shutterstock.com