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

Опубликовано: 08.10.2017

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

Как поставить всплывающее окно popupdomination в блог WordPress?

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



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

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


Плагин WordPress - импорт видео в WordPress (YouTube WordPress plugin - video import)

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

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


Подключение Lightbox 2.6 (инструкция)

<?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». Напомним, что в модальном окне откроются только изображения для которых в поле ссылка указан «Медиафайл» То есть, миниатюра в теле публикации должна ссылаться на свой оригинал.