Главная Вебмастеру Подключаем FancyBox на WordPress без плагина

Подключаем FancyBox на WordPress без плагина

В этом материале разберём один из способов установить скрипт «FancyBox» на ваш WordPress. Этот вариант отличается своей лёгкостью, так как через пару минут картинки на вашем сайте будут открываться в модальных окнах.

Вариант подключения FancyBox на WordPress без плагина

Fancybox 1.3.4 вызов через CDN Яндекса

FancyBox является популярным скриптом, позволяющим открывать графические объекты в модальном окне поверх контента. Это упрощает навигацию по сайту, и позволяет пользователю масштабировать изображение для просмотра.
Для подключения мы воспользуемся файлами Яндекса, размещёнными на
CDN сервере. Это, как минимум, оптимизирует загрузку страниц WordPress, и исключит копирование файлов на хостинг.

Для подключения внешнего скрипта открываем файл «header.php» вашей активной темы, где вставляем следующий код до закрывающегося тега «</head>»:

<?php if ( is_single() ) : ?>
<link rel="stylesheet" href="//yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.css" />

<script src="//yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js"></script> 

<script type="text/javascript">$(document).ready(function(){$('a[href^="https://wd-x.ru/wp-content/uploads/"]:has(img)').fancybox({'titleFromAlt':true,'titlePosition':'outside','padding':'5','margin':'25'});});</script>
<?php endif; ?>

Здесь мы ограничили вывод скрипта только на страницах «single.php». Подключили файлы стилей CSS и самого скрипта fancybox. А в конце указали путь до конечных файлов изображений «/wp-content/uploads/», чтобы на клик мышкой раскрывались только загруженные на сайт картинки.

Сохраняем файл «заголовка», и отправляемся проверять работу скрипта «FancyBox». Напомним, что в модальном окне откроются только изображения для которых в поле ссылка указан «Медиафайл» То есть, миниатюра в теле публикации должна ссылаться на свой оригинал.

Fancybox 3.0.47 вызов через cdnjs.cloudflare.com

Ещё вариант внешнего подключения, но более свежей версии fancybox 3.0.47. Из отличительных особенностей переработанная логика, анимация и функция полноэкранного просмотра. Аналогично предыдущему вызов происходит через сторонний CDN сервер.

Для вызова добавьте следующий код перед закрывающимся тегом «</head>»:

<?php if ( is_single() ) : ?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

<script type="text/javascript">$(document).ready(function(){$('a[href^="https://wd-x.ru/wp-content/uploads/"]:has(img)').fancybox({});});</script>
<?php endif; ?>

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

Сохраняем изменения в шаблоне нажатием кнопки «Обновить», и отправляемся проверять работу скрипта. Если у Вас установлено активное кэширование, то предварительно полностью очистите кеш.

Примечание! В ряде случаев, новый скрипт может не отрабатываться  должным образом. Для исправления можно поэкспериментировать с версией установленной библиотеки Jquery (для проверки запуска fancybox 3.0.47 мы применили jquery 3.2.1).

Где скачать оригинальные файлы FancyBox?

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

Важно, в этом случае, не забудьте изменить адрес до файлов в «functions.php»!

Вместо послесловия

Надеюсь, Вы по достоинству оценили простоту, описанного варианта подключения “FancyBox”. Но, если же данный метод показался ограниченным, то рекомендуем установить плагин «FancyBox for WordPress”…

  поделитесь с друзьями:
Подписаться на почтовую рассылку

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

Авторизоваться через: 

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить", я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности

Сообщите об ошибке, мы исправим:

Отправить