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


Эффект lightbox позволяет пользователям просматривать большие версии изображений без необходимости покидать текущую страницу. Из этой статьи вы можете взять небольшой код, для применения ко всем фотографиям в статьях эффекта всплывающего окна (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”.Причем это код добавляет атрибут как к ссылкам на само фото (Медиафайл),так и на страницу с фото (Страницу вложения)

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

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

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

Специально для Как сделать сайт WordPress

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


Отправить ответ

Оставьте первый комментарий!

Уведомлять
500
wpDiscuz