Как увеличить изображения при нажатии в WordPress (3 простых способа)

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

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

Я настроил эту функцию на нескольких проектах WordPress. Она всегда приносит быстрый результат.

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

Зачем увеличивать изображения при нажатии в WordPress

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

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

WordPress по умолчанию включает базовую функцию «Увеличить при нажатии». Она открывает изображение прямо на странице, без затемнения фона или визуальных эффектов.

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

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

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

Это означает, что возможно использовать большие изображения (например, шириной 1500 пикселей). Они отлично смотрятся при приближении, не ухудшая производительность.

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

Метод 1: Использование стандартной функции WordPress (простой)

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

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

Шаг 1: Добавьте изображение в редактор WordPress

Сначала нужно создать или открыть пост, в который хотите добавить кликабельное изображение.

Затем в редакторе блоков нажмите значок (+), чтобы вставить новый компонент. Выберите «Изображение» из опций. После этого вы увидите кнопки для добавления картинки 3-я разными способами: «Загрузить», «Медиатека» или «Вставить из URL».

Я рекомендую избегать опции «Вставить из URL». Она создает прямую ссылку на изображение на другом сайте. Это означает, что картинка может не отображаться на вашем ресурсе, если оригинал будет удален.

Шаг 2: Настройте опцию «Увеличить при нажатии»

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

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

Шаг 3: Настройте параметры изображения

Теперь, когда вы включили функцию «Увеличить при нажатии», можете кастомизировать параметры исходного изображения. Это обеспечит наилучшее качество отображения в посте или на странице.

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

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

Шаг 4: Просмотрите изображение и опубликуйте контент

Прежде чем публиковать пост или страницу с включенной опцией «Увеличить при нажатии», нужно просмотреть его, чтобы убедиться, что все работает.

Для этого нажмите кнопку «Просмотр» в правом верхнем углу редактора. Дале выберите «Просмотр в новой вкладке».

Я рекомендую протестировать его в каждом варианте просмотра, особенно в «Мобильном», поскольку в наши дни многие люди используют смартфоны.

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

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

Когда все будет выглядеть хорошо, вы готовы к публикации или обновлению своего контента.

Метод 2: Использование плагина Lightbox (больше кастомизаций)

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

Я рекомендую бесплатный плагин Simple Lightbox. Он позволяет добавлять плавные анимации, кастомизируемые темы и функции слайд-шоу, которые выделяют изображения. Инструмент легкий и работает автоматически со всеми вашими картинками после активации.

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

Для начала вам нужно установить и активировать плагин Simple Lightbox.

Шаг 2: Настройте параметры Simple Lightbox

После активации плагина рекомендуется перейти в «Внешний вид» > «Lightbox» и проверить конфигурации. Это позволит убедиться, что все настроено так, как нужно.

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

Затем прокрутите вниз до настроек «UI». Они контролируют внешний вид и поведение лайтбокса.

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

Не стесняйтесь экспериментировать с этими настройками и не забудьте нажать «Сохранить изменения», когда закончите.

Шаг 3: Добавьте изображение и включите Lightbox

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

Как только картинка окажется в редакторе, нужно вставить подпись. Плагин Simple Lightbox покажет этот текст в окне лайтбокса.

Просто нажмите на изображение и убедитесь, что значок «Добавить подпись» активирован на панели инструментов. Это позволит ввести текст в поле «Добавить подпись» под картинкой.

Затем, не снимая выделения с изображения, нужно кликнуть на значок «Ссылка» на панели инструментов и выбрать опцию «Ссылка на файл изображения». Это ключевой шаг. Он позволяет Simple Lightbox работать.

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

Шаг 4: Протестируйте лайтбокс

Теперь протестируем функцию лайтбокса, открыв предварительный просмотр поста. Просто нажмите на опцию «Просмотр» в правом верхнем углу. Затем выберите «Предварительный просмотр в новой вкладке».

В зависимости от настроек дизайна он будет в светлой или темной теме. Вот как выглядит первый вариант.

А вот как выглядит темная тема.

Вы должны увидеть подпись к изображению в левом нижнем углу лайтбокса.

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

Вы можете сделать это, вернувшись к опции «Просмотр» и выбрав «Десктоп», «Планшет» или «Мобильное устройство». После этого нажмите «Предварительный просмотр в новой вкладке».

Метод 3: Использование плагина галереи (подходит для нескольких изображений)

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

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

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

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

Теперь давайте пройдемся по шагам использования Envira Gallery для добавления опции лайтбокса.

Шаг 1: Установите и активируйте Envira Gallery

Начнем с установки плагина на сайт. В этом уроке я буду использовать бесплатную версию. Но вы можете приобрести лицензию Pro на сайте Envira Gallery.

Затем установите и активируйте плагин. После запуска должен сразу запуститься мастер настройки Envira.

Здесь нажмите «Начать», чтобы начать процесс.

В этом мастере есть 5 шагов.

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

Я рекомендую продолжить с предложенными конфигурациями по умолчанию. Они обычно представляют все необходимое. Однако, если есть план Pro, то сможете активировать более продвинутые функции.

Имейте в виду, что опция «Лайтбоксы» уже должна быть отмечена. Поэтому эта функция будет включена автоматически.

После завершения работы мастера настройки все равно нужно активировать лицензию Pro, если ее приобрели. Для этого перейдите в Envira Gallery > «Настройки» и вставьте лицензионный ключ в поле. Затем нажмите «Проверить ключ».

Шаг 2: Создайте новую галерею

Чтобы создать свою первую галерею, перейдите в Envira Gallery > «Добавить новую» на дашборде.

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

Далее вы увидите 3 варианта добавления изображений: Native Envira Gallery, Galleries from Other Sources и Create with Envira AI.

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

Шаг 3: Настройте параметры галереи и лайтбокса

В меню слева от изображений коллекции вы найдете настройки галереи Envira.

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

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

Прокрутив вниз, вы найдете дополнительные параметры настройки.

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

Я рекомендую включить опцию отложенной загрузки. Эта функция помогает галерее открываться быстрее. Она загружает изображения только по мере прокрутки страницы посетителями. Это помогает оптимизировать скорость сайта.

Затем перейдите на вкладку «Лайтбокс». Помните, что эта функция должна быть включена по умолчанию. Если это не так, установите флажок рядом с «Включить лайтбокс?».

Затем нужно выбрать «Тему лайтбокса галереи». Это определит общий вид лайтбокса.

Варианты будут зависеть от плана Envira и от того, есть ли дополнение «Темы галереи». Но вы должны иметь возможность выбрать темную, светлую или устаревшую тему.

Откройте вкладку «Лайтбокс». Здесь можете определить, как будут отображаться увеличенные изображения, выбрать эффекты перехода и решить, показывать ли названия.

Затем возможно найти дополнительные настройки во второй половине страницы.

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

Например, для «Эффект перехода лайтбокса» можете выбрать интересные варианты, такие как «Затухание», «Слайд», «Круговой», «Трубка», «Вращение» и другие.

Далее я рекомендую перейти на вкладку «Мобильные устройства», чтобы настроить общие параметры и опции лайтбокса.

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

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

Наконец, на вкладках «Standalone» и «Misc» есть несколько дополнительных настроек, которые могут пригодиться.

Вкладка «Misc» содержит инструменты для импорта и экспорта галерей, но вам они, вероятно, сейчас не понадобятся.

Шаг 4: Предварительный просмотр и публикация галереи

Чтобы просмотреть галерею, нажмите кнопку «Предварительный просмотр» в правой части страницы настроек.

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

Здесь можете увидеть название картинки и остальную часть галереи.

При тестировании изображения должны открываться плавно. Если выбрали эффект перехода, он будет виден здесь.

Например, я установил вариант «Слайд», и вот как он выглядит.

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

Когда будете удовлетворены тем, как все функционирует, возможно опубликовать галерею. Для этого нажмите «Опубликовать» в правой части настроек.

После публикации галереи можете перейти к ее добавлению на сайт.

Шаг 5: Добавьте галерею на свой сайт

Теперь, когда галерея работает идеально, давайте добавим ее в публикацию.

В редакторе WordPress нажмите значок (+), чтобы вставить новый блок. Найдите «Envira Gallery». Затем перетащите блок в свой пост.

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

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

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

FAQ