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


От автора

Эффект 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 без плагина


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

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

500

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

  Subscribe  
Уведомлять