Добавление лайтбокса на сайт WordPress: полное руководство для начинающих

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

Что такое лайтбокс и как его добавить?

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

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

Обычно есть 3 способа создать лайтбокс для веб-сайта WordPress:

• Добавление шорткода
• Установка плагина
• Использование темы, поддерживающей лайтбокс.

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

Отображение лайтбокса, если ваша тема поддерживает его

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

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

Вот как это сделать.

Сначала перейдите в редактор сообщений , затем щелкните галерею.

Если вы используете редактор Гутенберга, посмотрите на правую боковую панель, вы увидите раздел « Ссылка на ».

Что касается одного изображения, вы должны щелкнуть этот значок на панели инструментов:

В классическом редакторе раздел « Ссылка на » появляется при создании или редактировании галереи и отдельного изображения.

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

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

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

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

Добавление лайтбокса с помощью плагина

Действительно, добавить лайтбокс совсем несложно. Выполнив поиск по ключевому слову «плагин лайтбокса», вы увидите множество плагинов для этого эффекта. Что касается нашего исследования, мы сортируем плагины на два типа: сложные плагины и простые плагины для добавления лайтбокса.

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

Этот плагин прост в использовании, довольно популярен, у него более 200 000 активных установок, и он получил 160 пятизвездочных оценок. К тому же дизайн лайтбокса хорош.

Шаг 1. Установите и активируйте плагин Simple Lightbox

На панели инструментов> Плагин> Добавить новый вам просто нужно ввести «простой лайтбокс» и нажать « Установить плагин», а затем активировать его.

Шаг 2. Настройте плагин Simple Lightbox

В разделе « Плагин»> «Установленные плагины» нажмите « Настройка» на вкладке « Простой лайтбокс ».

Вкладка активации настройки Simple Lightbox

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

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

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

Вкладка Grouping в настройке Simple Lightbox

Прокрутите вниз, есть вкладка Группировка . Он определит способ отображения лайтбокса в виде слайдера или отдельного изображения.

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

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

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

Вкладка пользовательского интерфейса простой настройки лайтбокса

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

Тема: для вашего лайтбокса есть 2 стиля. Просто выберите тот, который вам по вкусу.

Темный стиль

Легкий стиль

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

Включить анимацию: отметьте, чтобы включить эффект загрузки.

Снимите флажок, чтобы отключить эффект и ускорить навигацию.

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

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

Цикл по элементам: вы хотите повторить элементы после одного раунда слайда? Если да, щелкните это поле.

Непрозрачность наложения (0–1): вы можете изменить непрозрачность наложения фона. Чем ниже непрозрачность, тем четче вы видите сообщение позади. Например, мы установили непрозрачность 0,1, чтобы фон был хорошо виден.

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

Ярлык вкладки простого лайтбокса

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

Когда вы закончите со всеми настройками плагина Simple Lightbox, нажмите « Сохранить изменения» прямо под вкладкой « Ярлык ».

Шаг 3. Свяжите изображения / галерею с медиафайлом для отображения лайтбокса

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

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

Последние слова

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

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