Эффект lightbox для фото WordPress без плагина

От автора: Эффект lightbox позволяет пользователям просматривать большие версии изображений без необходимости покидать текущую страницу.

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

Эффект  lightbox

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

Код для добавления атрибута rel=”lightbox”

Функция lightbox определяет, какие изображения будут показаны в модальном окне через XHTML "rel" атрибут, который используется в элементе <a> обернутого вокруг <img>.

Чтобы применить ко всем фотографиям размещенным в статьях WordPress эффект всплывающего (модального) окна lightbox во все тег ссылки на фото, нужно добавить атрибут.

Для этого есть, вот такой код.

 

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 rel="lightbox" title="'.$post->post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
}

 

По сути это фильтр, по которому ко всем ссылкам, ведущим к файлам bmp, gif, jpeg, jpg и png добавляется атрибут rel="lightbox". Причем это код добавляет атрибут как к ссылкам на само фото (Медиафайл), так и на страницу с фото (страницу вложения attachment)

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

Редактировать Файл functions.php, можно на вкладке Внешний вид → Редактор→Функции темы (functions.php).

На этом про эффект lightbox для показа фотографий на WordPress без плагина все!