Эффект 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="https://wpincode.com/files/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="https://wpincode.com/files/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="https://wpincode.com/files/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="https://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.
