Простой адаптивный Lightbox изображений для WordPress без плагинов

Подключать будем библиотеку отсюда. Там же можно посмотреть demo. Называется Lightbox2 от разработчика Lokesh Dhakar. Достаточно простое решение, не перегруженное, изображения в лайтбоксе будут адаптироваться под любые размеры мониторов на любых мобильных устройствах.

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

Итак, делаем всё по инструкции для подключения Lightbox изображений в Вашей теме WordPress:

1. Скачиваем и распаковываем архив с файлами Лайтбокса.
2. Ищем папку “src”, в ней есть три папки, которые нужно скопировать в корень папки Вашего шаблона WordPress.
   
3. Затем в файле header.php между нужно подключить файлы Лайтбокса вот так:
   <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/lightbox.css">
<script src="<?php bloginfo('template_url'); ?>/js/lightbox.js"></script>
4. После этого в файл functions.php нужно вставить этот код:
   <?php
add_filter('the_content', 'addrellightbox');
function addrellightbox($content) {
global $post;
$pattern ="/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i";
$replacement = '<a$1href=$2$3.$4$5 data-lightbox="image"$1 title="'.$post->post_title.'"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
?>
5. Изображения в посты нужно вставлять как медиафайл:
   

Теперь у Вас есть красивый, простой, адаптивный Lightbox для изображений 😉 Пишите комменты, делитесь статьёй в соц. сетях.