amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .amp-logo amp-img{width:190px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}

Увеличивающиеся по клику изображения в WordPress

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

Наверняка на многих сайтах вы видели замечательный эффект, который решают эту проблему – при клике по картинке она открывается в увеличенном виде, затемняя задний фон и всё содержимое сайта. Этот эффект называется лайтбокс (lightbox).

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

Изображения в WordPress с плагином Simplelightbox

Плагин Simplelightbox применяет эффект лайтбокс к изображениям WordPress. Плагин отличается особой простотой в настройке и не нагружает сервер сайта. Этим он и хорош.

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

  • Class Name. Указывается CSS класс, который будет применяться к изображениям в WordPress для лайтбокс эффекта. По умолчанию он уже записан. Если вы разбираетесь в CSS, то вы можете создать собственный класс, и указать здесь его имя. Таким образом, в профессиональных руках этот плагин превращается в супер-кастомный.
  • Show Navigation. Можно выбрать, отображать ли стрелки для переключения между картинками.
  • Text/Html for Prev/Next Button. Здесь выбирается кнопки для стрелок навигации.
  • Show Captions. Показывать или нет подписи картинки.
  • Caption Attribute. Выберите, какой атрибут изображения будет отображаться в качестве подписи в лайтбоксе. Подробнее об атрибутах изображения в WordPress вы можете узнать в этой статье.
  • Show Close Button. Показывать или нет кнопку для закрытия увеличенного изображения.
  • Text/Html for Close Button. Выбираем, как будет выглядеть эта кнопка.
  • File Extensions. Сюда записываем расширения изображения WordPress, к которым будет применён эффект. По умолчанию уже записаны самые популярные: png, jpg, jpeg, gif.

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

Адель Гадельшин

View Comments

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

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

  • Здравствуйте , Адель!
    Как всегда весь материал преподан очень понятно и логично. Чувствую, что для того чтобы на самом деле понимать в создании разных инструментов продвижения своего сайта, нужно просто постоянно заходить к вам на сайт и знакомиться с его содержимым.
    Елена.

Recent Posts

Что такое отказы на сайте, почему они происходят, как их уменьшить

Отказы на сайте - это процент посетителей, которые покидают сайт после просмотра только одной страницы.…

10 месяцев ago

Как сделать запуск инфопродукта

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

10 месяцев ago

Как вебмастеру юридически обезопасить себя

Ведение сайта - это не только подержание его работоспособности и наполнение контентом. В последние годы…

10 месяцев ago

Папки WordPress: значение папок /wp-admin, /wp-includes и /wp-content

WordPress - это популярная система управления контентом (CMS), которая позволяет создавать и управлять веб-сайтами различной…

11 месяцев ago

Что такое сертификат Let’s Encrypt и стоит ли его устанавливать

Сертификат Let’s Encrypt - это бесплатный и открытый сертификат SSL/TLS, который позволяет защитить веб-сайт от…

11 месяцев ago

Защита WordPress от вирусов

WordPress - это одна из самых популярных систем управления контентом в мире, которая используется миллионами…

11 месяцев ago