Использование скрипта Lightbox 2 в WordPress блоге без плагина

В прошлой статья я рассказал как достаточно легко и быстро подключить простую галерею в WordPress а также добавить в нее эффектное открытие картинок через Lightbox. Для первой задачи мы воспользовались базовыми возможностями системы, а для второй установили соответствующий плагин Lightbox 2. Процесс не занял много времени, да и вообще все выполнить было не так уж сложно. Единственная проблема, которая возникла – автоматическое добавление в код блога много разных дополнительных скриптов. Если быть точнее вот что появляется в Header с использованием модуля:

<script type='text/javascript' src='https://wpinsideblog.com/wp-includes/js/prototype.js?ver=1.6.1'></script>
<script type='text/javascript' src='https://wpinsideblog.com/wp-includes/js/scriptaculous/wp-scriptaculous.js?ver=1.8.3'></script>
<script type='text/javascript' src='https://wpinsideblog.com/wp-includes/js/scriptaculous/effects.js?ver=1.8.3'></script>
<script type='text/javascript' src='https://wpinsideblog.com/wp-content/plugins/lightbox-2/lightbox.js?ver=1.8'></script>
<!-- begin lightbox scripts -->
<script type="text/javascript">
    //<![CDATA[
    document.write('<link rel="stylesheet" href="https://wpinsideblog.com/wp-content/plugins/lightbox-2/Themes/Black/lightbox.css" type="text/css" media="screen" />');
    //]]>
    </script>
<!-- end lightbox scripts -->

И проблема даже не в том, что столько много кода, ведь по заявлению разработчика плагина в процессе его создания использовались сжатые скрипты и все оптимизировано без лишних деталей. Главная “не состыковка” заключалась в том, что этот код отображался абсолютно на всех страницах блога, а галерея (у меня, например) только на одной. В итоге почти 1000 уников ежедневно грузят все скрипты, при том что 98% никогда эту галерею так и не увидит.

Что ж, будем исправлять этот неэффективный подход, то есть нам нужно заставить отображаться (подключаться) скрипты на страницах блога с галерей. Для этих целей, по сути, существует 2 метода:

1. Можно сделать оптимизацию header в wordpress с помощью функций в functions.php, как я рассказывал ранее, исключив ненужный код.
2. Использовать стандартный код подключения скрипта вручную без плагина.

Вариант 1. Хак для functions.php

В принципе, теоретически, когда я разбирался с плагином Lightbox 2 понял, что можно исключить ненужный код через  header, но к сожалению, “первый подход к снаряду” не принес успеха. Сегодня “поднажал” и за 2-3 часика тестов разных комбинаций таки нашел решение:) Заходим в файл functions.php, где добавляем код:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
   if (!is_single('2969') ) {
        wp_deregister_script( 'lightbox' );
        remove_action('wp_head','lightbox_styles');
    }
}

Эти строки, во-первых, отключат вызов CSS стилей для оформления, а во-вторых, отменят и само подключение скрипта. Здесь отметим условие !is_single(‘2969’) которое означает, что скрипт будет деактивирован на всех страницах сайта кроме поста под указанным ID (именно там в моем случае располагается фотогалерея). Конечно, условие можно менять, размещая просто is_single, is_page и т.п. Важным моментом остается использование всех остальных обозначений – пытался менять название функций – другие не работают. Поэтому данный хак нужно использовать “как есть”, меняя лишь условие.

Вариант 2. Ручное подключение скрипта Lightbox 2

Как я уже сказал выше, изначально избавиться от кода скрипта по хорошему не получилось, править сам php исходник планина было бы вовсе не комильфо, поэтому оставался лишь вариант подключения скрипта Lightbox 2 вручную. Тем более, что процесс этот элементарный. Вся информация по нему находится на официальном  сайте. Алгоритм действий следующий:

1. Скачиваем архив скрипта Lightbox 2, разархивируем и заливаем на ФТП в любую директорию.

2. Открываем код шаблона wordpress и в файл header.php добавляем:

<?php if (is_single()) { ?>
<script type="text/javascript" src="https://wpinsideblog.com/files/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="https://wpinsideblog.com/files/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="https://wpinsideblog.com/files/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="https://wpinsideblog.com/files/lightbox/css/lightbox.css" type="text/css" media="screen" />
<?php } ?>

Обратите внимание, что я опять использую условие, которое задает вывод кода скрипта только на страницах постов + нужно будет заменить мой путь wpinsideblog.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.

Если хотите добавить для картинок еще какие-то оригинальные фишки, можете использовать плагины для создания изображений с фото до и после которые одновременно показывают оба объекта в одном слайдере.

Какой же из двух подходов лучше?

• Если у вас уже есть стандартная настроенная галерея, то вариант 1 наверное чуть проще и легче применить (меньше нужно сделать телодвижений).
• Плагин Lightbox 2 (первый вариант) имеет хоть какие-то настройки (цвет фона), оригинальный скрипт выглядит сыроватым.
• Конечно, по скорости быстрее будет второй способ, там меньше кода используется, но если учитывать условие вывода скрипта на отдельных страницах с галереей и отсутствие на остальном сайте, то преимущество нивелируется.

В целом, я бы использовал первый метод – плагин Lightbox 2 + хак в functions.php.

P.S. Разрабатывая интернет магазин нужно выбирать функциональные решения из которых magento выделятся за счет гибкости, эффективности и возможности дальнейшего расширения.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 11, средний балл: 5,64 из 7)

Loading...

Категории: Плагины; Хаки и секреты;
Теги: без плагинов, вывод постов, галереи, изображения, оптимизация кода, оптимизируем работу, пишем функцию для wp.