Руководство для начинающих по использованию избранного изображения в WordPress? –

Вы когда-нибудь задумывались о красивом изображении, которое вы видите вместе со статьей, которой поделились в Facebook или Twitter? Это называется избранным изображением статьи, и социальные платформы используют такой протокол, как Open Graph, для извлечения этого избранного изображения при встраивании вашей статьи. Во многих отношениях избранные изображения передают суть поста или страницы в WordPress. Они действуют почти как сообщение или страница и, скорее всего, первое, на что посетитель увидит, прежде чем открыть страницу. Это означает, что избранное изображение является важной частью вашего веб-сайта, поскольку оно может сильно повлиять на просмотр ваших потенциальных клиентов. В этой статье мы объясним, как добавить избранное изображение в ваши сообщения WordPress. Мы также рассмотрим другие варианты применения избранных изображений в WordPress, например, как они отображаются в социальных сетях, а также отключим избранные изображения и найдем правильный размер избранного изображения для вашего веб-сайта.

Зачем вам нужно избранное изображение?

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

• Темы используют загруженные избранные изображения и красиво отображают их на странице блога, страницах архива и виджетах боковой панели. Многие журнальные и новостные веб-сайты даже отображают избранные изображения на макете главной страницы. Например, все те изображения, которые вы видите на макете домашней страницы ниже, являются избранными изображениями, загруженными под соответствующими сообщениями. Без избранных изображений тема будет отображать только текстовый контент, который полностью испортит красоту страницы.

Избранные изображения, отображаемые на главной странице

• Кроме того, если у вас есть веб-сайт электронной коммерции на WordPress, у вас будет избранное изображение для каждого из продуктов на вашем веб-сайте.
• Увлекательное изображение в сочетании с интригующим заголовком сообщения может привести к увеличению числа посетителей сайта.
• Наконец, когда страница вашего веб-сайта публикуется в ленте социальных сетей, угадайте, что будет показано? Да, верно, изображение статьи. Ниже приведен пример избранного изображения, отображаемого в социальной ленте Facebook.

Избранное изображение в социальной ленте

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

Добавление избранного изображения в сообщения WordPress

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

• Откройте панель администратора WordPress вашего сайта и нажмите на меню «Сообщения».
• Либо нажмите «Добавить новый», если вы хотите создать новый пост, либо отредактируйте один из постов, которые вы уже создали, и хотите добавить или обновить изображение объекта.
• В редакторе сообщений, расположенном в правой части страницы, вы найдете мета-поле «Избранное изображение», как показано на скриншоте ниже.

Метабокс избранных изображений в Гутенберге

• Нажмите «Установить избранное изображение», чтобы открыть «Медиатеку».
• Здесь вы можете либо загрузить новое изображение со своего компьютера в разделе «Загрузить файлы», либо выбрать один из файлов, которые уже есть в вашей «Медиатеке».
• Нажмите «Установить избранное изображение» после того, как вы выбрали изображение.

Установить избранное изображение

• Это будет выглядеть так, как показано ниже в сообщении, и вы можете в любое время заменить загруженное избранное изображение новым изображением.
• Нажмите кнопку «Опубликовать» или «Обновить», чтобы опубликовать статью.

Посмотреть или заменить избранное изображение

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

Метабокс избранного изображения в классическом редакторе

Отсутствует метабокс избранного изображения

Если вы поиграетесь с настройками в редакторе, иногда вы в конечном итоге испортите настройки по умолчанию и обнаружите, что поле «Избранное изображение» отсутствует. Следуйте приведенным ниже инструкциям, чтобы включить редактор метабоксов.

В редакторе Гутенберга:

• Нажмите на значок «Параметры» в виде трех вертикальных точек в правом верхнем углу редактора.
• Выберите опцию «Настройки» в меню.
• Перейдите на вкладку «Панели» и включите опцию «Избранное изображение».

Включить избранное изображение в Гутенберге

В классическом редакторе:

• Нажмите кнопку «Параметры экрана», которая отображается в правом верхнем углу экрана.
• Это откроет слайд вниз и установит флажок «Избранное изображение».

Просмотр избранного изображения из параметров экрана

После включения этой опции вы увидите мета-окно «Избранное изображение» на боковой панели или под содержимым публикации.

Появление рекомендуемых изображений в опубликованном контенте

Загруженное избранное изображение в приведенном выше случае с темой Twenty-Twenty-One будет выглядеть так, как показано ниже в опубликованной статье.

Опубликованное сообщение с избранным изображением

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

Опубликованное сообщение с избранным изображением сверху

Ниже приведен еще один пример страницы блога на тему GeneratePress с избранными изображениями.

Избранные изображения на странице блога

Добавление Open Graph для публикации в социальных сетях

Самый важный аспект, в котором используются избранные изображения, — это когда вы делитесь публикацией или страницей в канале социальных сетей. Как мы уже упоминали ранее, вам нужно использовать метатеги Open Graph в разделе заголовка ваших статей, чтобы использовать возможность делиться избранными изображениями на социальных платформах. Некоторые платформы, такие как Twitter, используют Twitter Card, однако Open Graph также будет работать в Twitter. При встраивании или совместном использовании ваших статей эти социальные платформы проверяют раздел заголовка и извлекают соответствующие метаданные, включая избранное изображение, и красиво отображают их с соответствующей миниатюрой.

Самый простой способ вставить метатеги Open Graph на ваш сайт WordPress — использовать один из бесплатных плагинов SEO, доступных в репозитории WordPress. Лучший пример — использовать Yoast SEO или Rank Math и включить автоматическое включение метатегов на все ваши страницы. Если у вас нет набора избранных изображений для большого количества старых сообщений на вашем сайте, то будет сложно открыть каждое сообщение и загрузить избранное изображение. Кроме того, вы можете установить избранное изображение по умолчанию для публикации в социальных сетях с помощью плагина Yoast SEO.

• Установите и активируйте плагин Yoast SEO на своем веб-сайте WordPress.
• Откройте социальную страницу плагина, наведя указатель мыши на меню SEO, а затем щелкнув подменю «Социальные сети».
• Откройте вкладку Facebook и обязательно включите опцию «Добавить метаданные Open Graph». Активация метаданных Open Graph для Facebook позволит отображать предварительный просмотр с избранным изображением всякий раз, когда ссылка с вашего веб-сайта публикуется на платформе.

Включить метатеги Open Graph

• Нажмите кнопку «Выбрать изображение» на вкладке изображения по умолчанию.
• Загрузите изображение или выберите существующее изображение из медиатеки вашего веб-сайта, а затем нажмите «Выбрать».
• Вы можете сделать то же самое с Twitter и нажать «Сохранить изменения».

И это все!! Отныне любая статья, которой вы делитесь в социальных сетях со своего сайта, будет отображать избранное изображение, если оно уже загружено, или показывать изображение по умолчанию, если избранное изображение отсутствует. Вы также можете проверить исходный код своей страницы и убедиться, что метатеги присутствуют. Как вы можете видеть в приведенном ниже исходном коде, плагин Yoast SEO добавляет теги Open Graph и Twitter. Для избранного изображения вы можете видеть, что используются три метатега:

Метатеги Open Graph от Yoast SEO Plugin

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

Загрузить пользовательское избранное изображение или публикацию

Скрытие избранных изображений от показа в статьях

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

• Если вы не хотите показывать избранные изображения в социальных сетях, просто отключите метатеги Open Graph в разделе заголовка вашего сайта.
• Рекомендуемые изображения, как правило, больше по размеру и замедляют скорость загрузки страницы. Поэтому обязательно ленивую загрузку изображений, чтобы они загружались только тогда, когда пользователь прокручивает до этой позиции. Это будет полезно на страницах архивов и блогов, где у вас может быть много изображений.
• Поскольку избранное изображение в макете отдельного поста доступно в верхней части области сгиба, Google PageSpeed ​​Insights и другие инструменты измерения скорости будут показывать такие проблемы, как предварительная загрузка самого большого содержательного изображения. В этом случае вы можете отключить видимость в настройках темы или предварительно загрузить их с помощью плагина кэширования, такого как WP Rocket.
• Наконец, это может повлиять на доход от рекламы, поскольку она занимает видное и значительное место в верхней части страницы. В этом случае вы можете отключить избранное изображение, используя настройки темы или добавив простой код CSS, например .Рекомендуемое изображение-CSS-класс {дисплей: нет;}.

Многие темы, такие как GeneratePress, Astra и Kadence, предлагают отключить избранное изображение на всем сайте одним щелчком мыши. Как правило, это можно сделать в настройках настройщика для страницы блога и макета отдельной записи в блоге. Точно так же вы можете отключить только для определенного сообщения, используя параметры темы, доступные в редакторе сообщений.

Настройки избранного изображения в теме Kadence

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

Скрыть плагин избранного изображения

После установки и активации плагина вы найдете флажок «Скрыть избранное изображение» в редакторе сообщений. Просто отметьте «Да», и избранное изображение будет скрыто от интерфейса опубликованной страницы.

Скрыть избранное изображение

Массовое редактирование избранных изображений

По умолчанию WordPress позволяет загружать избранное изображение для одного сообщения. Хотя вы можете просматривать избранные изображения нескольких сообщений в разделе «Сообщения > Все сообщения», невозможно удалить или загрузить изображения массово. Если вы действительно хотите массово редактировать избранное изображение, вам нужно использовать сторонний плагин.

• Установите и активируйте плагин WP Sheet Editor. Это хороший плагин, который поможет вам редактировать информацию о сообщениях в формате электронной таблицы Excel. Вы можете редактировать детали в редакторе без загрузки или загрузки.
• Следуйте инструкциям на экране, чтобы настроить плагин и выбрать бесплатную версию, которой достаточно для массовой загрузки или удаления избранных изображений.
• Перейдите в меню «Сообщения > Редактор листов WP» или «Редактор листов WP > Редактировать сообщения», чтобы открыть все свои сообщения в формате листа Excel.
• Прокрутите вправо и найдите поле избранного изображения. Вы увидите маленькую миниатюру, когда для этого поста есть избранное изображение, или она будет отображаться пустой, если нет доступного избранного изображения.

Массовое редактирование избранного изображения

• Наведите указатель мыши на любое изображение, чтобы просмотреть его в большом размере, и нажмите кнопку загрузки. Откроется ваша «Медиатека», из которой вы сможете выбрать изображение или загрузить новое изображение.
• Если вы хотите удалить все функции, просто выберите ячейки для нескольких сообщений и нажмите клавишу удаления на клавиатуре. Теперь вы увидите, что поля изменены на «(пусто)».

Предварительный просмотр увеличенного изображения при наведении

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

Поиск правильного размера для избранного изображения

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

Если ваша тема использует миниатюры WordPress по умолчанию и вы хотите изменить размер по умолчанию на своем веб-сайте, перейдите в раздел «Настройки > Мультимедиа» в панели администратора. Здесь вы сможете изменить размеры эскизов по умолчанию, средние и большие изображения для избранных изображений.

Настройки мультимедиа WordPress

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

Примечание: Изменение темы или плагина приведет к тому, что на вашем сайте будет использоваться другой размер избранного изображения по сравнению с зарегистрированными размерами. В этом случае вы столкнетесь с двумя проблемами. Во-первых, на вашем сервере будет много старых неиспользуемых эскизов, занимающих место для хранения. Во-вторых, ваша новая тема будет использовать неприемлемые изображения, загруженные в старую тему. Это вызовет проблемы, такие как правильное изменение размера изображений в инструменте Google PageSpeed ​​Insights. К счастью, вы можете использовать плагин Regenerate Thumbnails, чтобы решить обе проблемы, удалив старые миниатюры и восстановив избранные изображения до размеров, необходимых для вашей новой темы.

Заключительные слова

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