Эффект 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

Другие статьи раздела: WordPress без плагина

Статьи связанные по теме:

rss