Как использовать щелчок для увеличения изображений в WordPress?

Большинство тем WordPress используют нестандартные размеры изображений (миниатюры), чтобы уменьшить размеры больших изображений до размера экрана. Кроме того, WordPress также использует размеры миниатюр и использует атрибут srcset тега HTML img для отображения соответствующего размера изображения в зависимости от области просмотра экрана. Старый классический редактор в WordPress по умолчанию связывает изображение со страницей вложения мультимедиа. Это означает, что вы можете нажать на миниатюру или изображение меньшего размера, чтобы просмотреть его в увеличенном виде в полном размере. Однако страница вложения открывается со своим собственным URL-адресом, и вам придется вручную вернуться в браузер, чтобы снова прочитать статью. Хотя редактор Gutenberg не связывает изображение со страницей вложения, он позволяет вручную установить параметр «щелкнуть для увеличения» только для необходимых изображений.

Используйте «Нажмите, чтобы увеличить» с изображениями WordPress

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

  • Отредактируйте или создайте новое сообщение в редакторе Гутенберга.
  • Загрузите большое изображение с помощью блока «Изображение» и нажмите на загруженное изображение.
  • Выберите значок «Ссылка» на панели инструментов блока.

Загрузить изображение в ГутенбергЗагрузить изображение в Гутенберг

  • Вы увидите список меню и выберите опцию «Развернуть при нажатии».

Разверните ссылку «Нажмите в ссылке»Разверните ссылку «Нажмите в ссылке»Разверните ссылку «Нажмите в ссылке»

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

  • Значок ссылки изменится на темный фон, указывая, что изображение связано.

Изображение связаноИзображение связаноИзображение связано

  • Опубликуйте или обновите свою публикацию и откройте ее в новой вкладке.

Тестирование увеличенного изображения

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

Нажмите, чтобы увеличить изображениеНажмите, чтобы увеличить изображениеНажмите, чтобы увеличить изображение

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

Полноэкранный просмотр светового коробаПолноэкранный просмотр светового коробаПолноэкранный просмотр светового короба

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

Добавьте клик, чтобы увеличить изображения в WordPressДобавьте клик, чтобы увеличить изображения в WordPress

Нажмите, чтобы увеличить пример

Когда использовать «Нажмите, чтобы увеличить»?

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *