Приветствую Друзья на блоге wpandyou.ru . Я уже рассказывал как сделать 2 варианта слайд шоу WordPress для любого блога или сайта. Сегодня я Вам расскажу как сделать Nivo слайдер на WordPress . Тема довольно актуальная, будет многим полезна.
Итак, Nivo Slider это современный слайдер слайд шоу на jQuery, который можно использовать как на HTML сайтах, так и на сайтах WordPress. Правда использовать плагин Nivo слайдер в бесплатной сборке имеет ограничения на количество отображаемых слайдов. Плагин позволяет отображать только 10 слайдов, а во многих ситуациях необходимо отобразить значительно больше.
Именно с этой задачей я и столкнулся и реализовал свой вариант отображения Nivo слайдера на сайте WordPress. Установив Nivo слайдер Вы сможете в любой странице или в любом посту отобразить слайдер, картинки которого будут браться из загруженных картинок в галерею WordPress страниц или постов.
Данный способ я использую, если необходимо на странице отобразить слайдер.
Добавляем JQuery и Nivo Slider в Вашу тему или шаблон Wordpress
Первое, что Вам необходимо скачать jQuery и Nivo Slider, Вы можете прочитать о всех возможностях слайдера в документации Nivo.
После того как Вы скачали все необходимые файлы необходимо интегрировать их в тему WordPress . Подключаем jQuery в Вашу тему, данный код необходимо разместить перед тегом </head>:
|
1 2 |
// подключаем файл скрипта <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/название папки со скриптами/jquery-7.1.1.min.js"></script> |
Хочу обрадовать Вас, WordPress с 3 версии позволяет подключить скрипты jQuery с Фреймворка, при этом Вам не нужно беспокоиться об обновление скрипта, за Вас всё сделает WordPress. Чтобы подключить jQuery через WordPress используйте следующий сниппет WordPress :
|
1 |
<?php wp_enqueue_script("jquery"); ?> |
Данный код необходимо поставить перед всеми подгружаемыми файлами в Вашей теме.
После подключения jQuery необходимо подключить скрипт Nivo Slider, последнюю версию которого Вы всегда можете скачать на сайте производителя Nivo Slider. Если Вы помните, я написал как сделать и как использовать современную библиотеку jQuery Mansory, на не стандартных сайтах с нестандартной вёрсткой. Статья называется Используем jQuery Masonry на сайтах WordPress. Также Вы можете прочитать статьи о поисковом продвижение.
|
1 |
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/название папки со скриптами/jquery.nivo.slider.pack.js"></script> |
Далее, мы подключаем скрипт функции Nivo Slider, который будет отображать наш слайдер с разными настройками:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript">// <![CDATA[ $(window).load(function() { var total = $('#название дива, в котором отображаются картинки img').length; var rand = Math.floor(Math.random()*total); $('#название дива, в котором отображаются картинки').nivoSlider({ effect:'fade', //Эффекты слайдера, например: 'fold,fade,sliceDown' animSpeed:600, //Скорость перезагрузки слайдера pauseTime:6000, directionNav:false, //Кнопки следующий и предыдущий в слайдере controlNav:false, //делаем навигацию в слайдере 1,2,3... pauseOnHover:false, //Останавливаем слайдер при наведение на картинку captionOpacity:1, //Универсальная прозрачность в слайдере startSlide:0 // Старт слайдера, если 0 то он стартует вместе загрузкой страницы }); }); // ]]></script> |
Общий код, который необходимо разместить в файле header.php выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// подключаем файл скрипта <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/название папки со скриптами/jquery-7.1.1.min.js"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/название папки со скриптами/jquery.nivo.slider.pack.js"></script> <script type="text/javascript">// <![CDATA[ $(window).load(function() { var total = $('#название дива, в котором отображаются картинки img').length; var rand = Math.floor(Math.random()*total); $('#название дива, в котором отображаются картинки').nivoSlider({ effect:'fade', //Эффекты слайдера, например: 'fold,fade,sliceDown' animSpeed:600, //Скорость перезагрузки слайдера pauseTime:6000, directionNav:false, //Кнопки следующий и предыдущий в слайдере controlNav:false, //делаем навигацию в слайдере 1,2,3... pauseOnHover:false, //Останавливаем слайдер при наведение на картинку captionOpacity:1, //Универсальная прозрачность в слайдере startSlide:0 // Старт слайдера, если 0 то он стартует вместе загрузкой страницы }); }); // ]]></script> |
После того, как мы сделали основные настройки нашей темы, нам необходимо задействовать Nivo слайдер вместе с attachment WordPress, для этого необходимо прописать функцию в файле function.php следующую функцию:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php function nivo_get_images($size = 'large', $limit = '0', $offset = '0') { global $post; //вызываем постс конкретными картинками, которые будут отображаться в слайдере $images = get_children( array('post_parent' =--> $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') ); if ($images) { $num_of_images = count($images); if ($offset > 0) : $start = $offset--; else : $start = 0; endif; if ($limit > 0) : $stop = $limit+$start; else : $stop = $num_of_images; endif; $i = 0; foreach ($images as $image) { if ($start post_title; // переменная заголовок картинки. $img_description = $image->post_content; // переменная описание. $img_caption = $image->post_excerpt; // переменная caption. $img_url = wp_get_attachment_url($image->ID); // эта переменная выводит полный урл картинки. $preview_array = image_downsize( $image->ID, $size ); $img_preview = $preview_array[0]; // использовать миниатюру или среднее изображение картинки. ?> <img src="<?php echo $img_preview; ?>" alt="<?php echo $img_caption; ?>" /> |
Мы установили основные файлы в тему WordPress и добавили функцию, которая будет обрабатывать запрос на вывод галереи определённого поста. Теперь нам необходимо собственно вывести данную галерею на определённой странице. Для того, чтобы вывести слайде используйте следующий код:
|
1 |
<?php nivo_get_images('large','0','0'); ?> |
В параметрах ‘large’ Вы можете указать — large, medium, thumbnail, тол есть те размеры, которые предоставляет стандартная нарезка картинок Wordpres, все размеры Вы можете настраивать в Настройки -> Медиа.
Использование Nivo слайдер на движке WordPress без плагинов и бесплатно
С помощью данного способа можно с лёгкостью создать слайдер WordPress , который будет работать без плагинов, что значительно не нагружает сайт, значит Вам не придется оптимизировать Вашу сборку WordPress.
Nivo слайдер красивый и имеет много настроек, которые Вы можете узнать на официальном сайте производителя.
Лажняк, при добавлении кода в функции темы, все херит…
Для меня все это слишком сложно-лезть в программы. А 2 других описания просто не работают. Хорошие у Вас статьи, доходчиво все описано, но увы-НИЧЕГО НЕ РАБОТАЕТ. Спасибо.
Код неработает, порезаный
Действительно, стоит только что то засунуть в функции и сайт выпадает из реальности
ребят все работает, что вы тут в заблуждение всех вводите!!
а есть ли видео ?
Снимите видео честно новичку тяжело понять все что написано
Он же платный!
А как сделать слайдер с популярными записями?