wordpress-лайтбокс-265x160

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

Читайте так же:  Домен для WordPress сайта

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

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

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

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


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

Добавить комментарий