Июн
21
12

Использование скрипта 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 выделятся за счет гибкости, эффективности и возможности дальнейшего расширения.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 11, средний балл: 5,64 из 7)
Загрузка...

категория Категории: Плагины; Хаки и секреты;
теги Теги: , , , , , , .

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

  • TIgor   22.06.2011

    Интересное решение. Я бы правда сделал по другому.
    Срабатывание отвязки по отсутствию определенного тега. Если в записи есть тег «фото» то галерея грузится, если нет, то нет.

  • Крупенич Андрей   22.06.2011

    Супер, то что нужно :) Куда высылать пиво? :) Работает как часы! Спасибо!
    Есть еще сложность в подгрузке сразу целой директории картинок, понятно, что можно бы это сделать все стандартными средствами, но иногда лучше бы сделать все минуя вордпресс.
    К примеру, у меня есть галлерея из 400 фоток, если все их подгрузить к посту, то проблема решится, но вот с точки зрения файловой системы будет полный бардак.
    Но это уже ерундовая проблема.
    Осталось теперь разделить CSS на отдельный для главной страницы, поста, рубрики, страницы и подгружать только нужный, тогда все будет выглядеть более-менее оптимально…

  • Азамат   30.06.2011

    Хорошая качественная статья. Попробую обязательно эту фишку. Побольше бы таких полезных блогов про вордпресс.

  • benefit89   09.07.2011

    Хороший плагин..
    надо попробовать

  • Dev   10.07.2011

    Прикольно. Я последнее время пытаюсь обходится без плагинов.

  • Сергей   30.08.2011

    Спасибо за интересную статью. У себя просто поставил плагин и не парился, однако имеет смысл перевести все же на скрипты, без плагина, ведь в нем могут быть дыры =)

  • GRAFaFox   24.09.2011

    Сергей, подскажите название плагина, пожалуйсто. =)

  • Tod   26.09.2011

    В начале статьи была ссылочка на другой пост, там где реализация с плагином — https://wpinsideblog.com/beginners/standart-gallery-lightbox/

  • Виктор   01.06.2013

    Tod, добрый день.

    Подскажите пожалуйста вот с чем. Установил на сайте который у меня в подписе плагин jQuery Lightbox и хотел бы его активировать только на нескольких страницах (сейчас плагин нужен вообще только на одной).

    Решение Вариант №1 к сожалению не работает у меня, а второй вариант мне кажется слишком сложным. Не могли бы вы обновить информацию как активировать плагин только на одной странице.

    К сожалению, я не программист, но возможно с обновлениям плагина эти строчки поменять надо на что-то новое? Только пока не понял на что :)

    wp_deregister_script( ‘lightbox’ );
    remove_action(‘wp_head’,’lightbox_styles’);

    Или у Вас есть другие варианты?

    Буду признателен за ответ.

  • Tod   02.06.2013

    Виктор, можно попробовать использовать условные операторы вордпресс для вывода на определенной странице. Из последнего помню только плагин Lightbox Plus возможно там в настройках есть опция включить только на определенных страницах.

  • Kolass   17.04.2014

    А как сделать привью при просмотре изображений?

  • Tod   18.04.2014

    Kolass, если честно, вообще не понял вопрос. Типа чтобы увеличенная картинка отображалась при наведении на превью или что? Нужно искать другие плагины.

Оставить комментарий

(предыдущая статья)

Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости