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

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

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

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

Добавляем скрипты и стили FancyBox

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

Откройте редактор WordPress, и в файл «functions.php» вставьте нижеприведённый код, например, в самый конец, сразу перед закрывающимся тегом «?>

wp_enqueue_script('fancybox', 'http://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.js', array( 'jquery' ), '1.3.4', true);

Если у Вас есть отведённая функция для подключения скриптов «JS”, то смело добавляем очередной пункт.

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

function my_css() {
    echo '<link rel="stylesheet" type="text/css" href="https://yandex.st/jquery/fancybox/1.3.4/jquery.fancybox.min.css" media="screen" />'."\n";
}
add_action('wp_head', 'my_css', 5);

Не забываем сохранять изменения. И открываем файл «header.php», где вставляем код скрипта до закрывающегося тега </head>:

<?php if ( is_single() ) : ?>
<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», и указали в самом скрипте, путь до конечных файлов изображений «/wp-content/uploads/», чтобы на клик мышкой раскрывались только загруженные на сайт картинки.

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

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

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

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

P.S.

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

Расскажи друзьям:

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

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

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

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: