Эффект lightbox для фото WordPress без плагина
Опубликовано: 01.09.2018
От автора
Эффект lightbox позволяет пользователям просматривать большие версии изображений без необходимости покидать текущую страницу.
Важно! Любые работы, по редактированию и изменению основного кода файлов вашего шаблона, необходимо начинать при наличие резервной копии сайта . Она нужна для восстановления сайта в случае фатальных ошибок при редактировании.
Эффект lightbox
WordPress имеет в своем арсенале как внутренние, так и сторонние инструменты по размещению и оформлению фото с постах. Один из интересных эффектов для фото, это эффект lightbox. На странице с поддержкой 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 без плагина все!
©www.wordpress-abc.ru