Добавляем rel=»lightbox» для всех изображений в блоге

Эффект lightbox, когда изображение открывается в модальном окне, затемняя содержимое окна, довольно популярен среди администраторов сайтов и блогов. Используя такой эффект, вы сможете концентрировать все внимание читателей на конкретном  изображении. Для активации подобного эффекта, очень  часто требуется в код прямой ссылки, которая  указывает на изображение, вставлять rel=»lightbox» или что-то в этом роде. Иногда используемый плагин или скрипт не делает этого автоматически и приходится искать и переписывать  коды ссылок на изображения вручную, что неудобно.

Вариант 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)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
Scroll To Top