Вывод изображений в большинстве шаблонов под WordPress сделан из рук вон плохо. Что чаще всего происходит при нажатии на какую-либо картинку, когда мы хотим рассмотреть её более подробно? В большинстве случаев она открывается в этом же окне. Для того чтобы вернуться к просматриваемому материалу, необходимо нажать в браузере кнопку «Назад». После этого мы снова возвращаемся на исходную страницу. Нельзя сказать, что это неудобно – скорее, это просто некрасиво. Было бы интересно, если бы при нажатии на изображение оно открывалось в небольшом окошке, которое пропадает при нажатии на любую другую область экрана (или по нажатию кнопки Escape).
Такой эффект называется Lightbox и он может быть реализован с помощью сторонних библиотек и скриптов. Как видно на представленном скриншоте, задний фон при этом затемняется. Кроме того, пользователь не покидает страницу, что очень важно для поведенческих факторов. Как реализовать такие всплывающие окна с изображениями на WordPress?
Плагин WP Lightbox 2
Большинство вещей в WordPress реализуется при помощи плагинов, которые мы можем установить прямо из управляющей консоли. Для реализации вышеописанного эффекта нам потребуется плагин WP Lightbox 2. Его профессиональная версия платная, но в большинстве случаев хватает и базового функционала. Установив плагин, мы активируем его и отправляемся в меню настроек, которых здесь очень много. Взглянем на скриншот:
Это базовые настройки, которые можно и не трогать. Интересные пункты в этом меню:
- Enable lightbox in comments – включает эффект в комментариях;
- Show download link – вместе с изображением отобразится прямая ссылка на его скачивание.
В меню настроек дизайна мы видим множество опций, позволяющих настроить вид всплывающего окошка:
Следует сразу разочаровать вебмастеров в том, что практически все представленные в этом меню опции доступны только Pro Version – для этого нужно купить плагин на его официальном сайте. Но профессиональные возможности потребуются только тогда, когда вебмастеру выставляются повышенные требования к дизайну создаваемого. В большинстве случаев, опять же, будет достаточно функционала бесплатной версии.
Нужно ли как-то помечать изображения, чтобы они выводились в отдельном окне? Ничего этого не нужно. Главное, чтобы в тексте записи или страницы стояла ссылка на это изображение, которая ставится там по умолчанию. Если при вставке изображения в меню «Ссылка» выбрать значение «Нет», то эффект не подключится – изображение будет статичным и некликабельным.
