Добавляем rel=»lightbox» для всех изображений в блоге
Опубликовано: 24.08.2018
Эффект lightbox, когда изображение открывается в модальном окне, затемняя содержимое окна, довольно популярен среди администраторов сайтов и блогов. Используя такой эффект, вы сможете концентрировать все внимание читателей на конкретном изображении. Для активации подобного эффекта, очень часто требуется в код прямой ссылки, которая указывает на изображение, вставлять rel=»lightbox» или что-то в этом роде. Иногда используемый плагин или скрипт не делает этого автоматически и приходится искать и переписывать коды ссылок на изображения вручную, что неудобно.
Другие атрибуты гиперссылок в HTML
Вариант 1
Для того, чтобы rel=» lightbox » в коды прямых ссылок вставлялись автоматически, откройте файл functions.php, и добавьте в него:
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».Изменить фильтр легко, если добавить в него другой тег, и такое изменение автоматически заработает в блоге.
Вариант 2
1. Скачиваем архив скрипта Lightbox 2, разархивируем и заливаем на ФТП в любую директорию.
2. Открываем код шаблона wordpress и в файл header.php добавляем:
<?php if (is_single()) { ?> <script type="text/javascript" src="http://wpincode.com/files/lightbox/js/prototype.js"></script> <script type="text/javascript" src="http://wpincode.com/files/lightbox/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://wpincode.com/files/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="http://wpincode.com/files/lightbox/css/lightbox.css" type="text/css" media="screen" /> <?php } ?>Обратите внимание, что я опять использую условие, которое задает вывод кода скрипта только на страницах постов + нужно будет заменить мой путь wpincode.com/files/lightbox на свой.
3. Теперь чтобы применить эффект для картинки для нее указывается специальный HTML параметр rel=»lightbox», например:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>Собственно, все сложность метода получается в этом rel=»lightbox», так как если для единичных картинок вы сможете его указать, то с галереей не все так просто. К счастью, для этой можно использовать специальный плагин Add LightBox & Title . Процесс установки стандартный – скачали, разархивировали, залили на фтп в /wp-content/plugins/ и активировали.
Главная (и единственная) функция модуля – автоматическое добавление кода rel=»lightbox[POST-ID]» в ссылки картинок блога. Сразу после этого скрипт Lightbox 2 начнет работать корректно. Плагин позволяет работать в wordpress с разными скриптами эффектов изображений – как Lightbox 2, так другими, например, Shadowbox JS.
VN:F [1.9.22_1171]
Rating: 5.0/ 5 (2 votes cast)
