TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Избранные изображения WordPress – Пошаговое руководство

933

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

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

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

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

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

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

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

Некоторые темы даже будут отображать изображения на страницах администратора WordPress рядом с назначенными им сообщениями.

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

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

Это оно! Теперь вы можете увидеть предварительный просмотр изображения прямо в поле Featured Image. Если вы хотите увидеть, как это выглядит в сообщении, вы можете быстро прокрутить вверх и нажать кнопку «Предварительный просмотр».

Если вам нравится перетаскивать изображения в медиатеку WordPress, вам следует подумать о добавлении этого бесплатного плагина в список активных на вашем сайте. Просто установив плагин Drag & Drop Featured Image, обычная ссылка для добавления миниатюры сообщения изменится. Вместо того, чтобы щелкнуть ссылку и затем загрузить новое изображение, вы сможете перетащить изображение прямо на место.

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

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

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

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

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

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

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

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

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

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

Основные настройки изображения

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

  • Исходный размер
  • Эскиз
  • средний
  • Большой

Избранные изображения WordPress - Пошаговое руководство

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

Чтобы получить доступ к настройкам мультимедиа, перейдите в Настройки -> Медиа.

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

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

Почему WordPress генерирует дополнительные размеры?

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

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

Знаете ли вы, что темы WordPress могут использовать одно и то же изображение в нескольких разных измерениях в зависимости от местоположения? Это означало бы создание нескольких файлов изображений каждый раз, когда вы собираетесь загрузить новое изображение! На это ни у кого не будет времени.

Изменить размер избранного изображения

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

Избранные изображения WordPress - Пошаговое руководство

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

Проверьте настройки своей темы

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

Перейдите в Внешний вид -> Темы -> Настроить и найдите параметры. Кроме того, у некоторых тем будут дополнительные настройки, которые обычно можно найти в меню «Внешний вид» . Если вы можете его найти, вам повезло, потому что вы можете изменить размер избранного изображения всего за несколько кликов. Если нет, не волнуйтесь; следующий плагин будет более чем достаточно простым, чтобы внести необходимые изменения.

Простые размеры изображений

ЦЕНА: Бесплатно


Избранные изображения WordPress - Пошаговое руководство

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

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

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

А как насчет старых изображений?

Обычно при изменении размеров изображения WordPress вносит изменения только в новые, которые вы собираетесь загрузить. А как насчет старых, которые вы уже используете?

Избранные изображения WordPress - Пошаговое руководство

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

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

Когда вы будете готовы, щелкните, если хотите восстановить эскизы, и не забудьте сохранить изменения.

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

Хотя настроить новые размеры изображения с помощью Simple Image Sizes довольно просто, будьте осторожны при изменении изображений.

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

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

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

3. Автоматическая установка избранного изображения в WordPress.

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

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

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

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

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

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

Теперь, когда вы знаете, что с этим можно получить, давайте покажем вам код. Чтобы установить функцию, вам нужно будет открыть файл functions.php и скопировать / вставить следующий фрагмент:

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

4. Автоматически связывать миниатюры избранных сообщений с их исходными сообщениями.

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

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

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

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

Ссылка на избранное изображение на сообщение:

  1. Откройте functions.php
  2. Скопируйте и вставьте следующий код:
  1. Сохранить изменения

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

5. Как добавить превью миниатюр в список редактирования сообщений / страниц

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

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

Избранные изображения WordPress - Пошаговое руководство

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

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

Хватит разговоров; давайте вставим код в тему и покажем миниатюру в редакторе сообщений:

  1. Откройте ваш файл function.php
  2. Скопируйте и вставьте следующий код:
  1. Сохранить изменения
  2. Перейдите в Сообщения-> Все сообщения и посмотрите изменения.

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

Показать полнофункциональное изображение вместо миниатюры:

echo the_post_thumbnail( 'featured-thumbnail' );

Удвойте размер эскиза:

echo the_post_thumbnail( array(200,200) );

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

add_filter('manage_pages_columns', 'posts_columns', 5); add_action('manage_pages_custom_column', 'posts_custom_columns', 5, 2);

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

6. Заставьте авторов выбирать избранные изображения перед публикацией сообщений.

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

Пользователи WordPress быстро привыкли к новой функции, и теперь стало трудно найти тему без избранных изображений.

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

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

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

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

  1. Откройте ваш файл functions.php
  2. Скопируйте и вставьте следующий код:
  1. Сохранить изменения

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

Поскольку приведенный выше код не содержит самого сообщения об ошибке, вам все равно понадобится небольшой фрагмент кода, который его подготовит:

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

Если вы хотите персонализировать сообщение об ошибке, перейдите к строке № 5 и измените параметр «Перед сохранением публикации необходимо установить миниатюру сообщения» на все, что вам нравится.

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

7. Измените текст избранного изображения на страницах администратора.

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

Избранные изображения WordPress - Пошаговое руководство

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

  1. Откройте файл functions.php используемой темы.
  2. Скопируйте и вставьте следующий код:
function change_featured_image_text( $content) { return $content = str_replace( __( 'Set featured image' ), __( 'Your custom text goes here' ), $content); } add_filter( 'admin_post_thumbnail_html', 'change_featured_image_text' );
  1. Измените параметр “Здесь идет ваш собственный текст”, но не забудьте оставить одинарные кавычки.
  2. Сохранить изменения
  3. Зайдите в любой пост и посмотрите измененный текст

Подведение итогов

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

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

Источник записи: https://firstsiteguide.com

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