Привет читателям блога SEOBID! Наверняка каждый из вас видел в интернете сайты со слайдерами и хотел себе такой же. Ну, не такой, немного другой, но чтобы работал и не грузил сайт. Но, как известно, плагин, если он работает как слайдер wordpress, нагружает блог или сайт запросами, поэтому не все веб-мастера хотят устанавливать слайдер именно в исполнении плагина.

Популярны становятся слайдеры-карусели, реализованные при помощи php-кода, так называемые скрипты. Однако разобраться с многострочным кодом тоже не всем под силу, и слайдеры-скрипты тоже остаются в большинстве своем невостребованными.

Простой слайдер

Промежуточное звено — слайдер для wordpress комбинированного типа. То есть, есть плагин, который работает встраиванием кода в шаблон сайта. Таким образом, нагрузка на сайт и БД становится меньше, скрипт плагина вызывается быстрее, а результат – тот же. Сам плагин должен при этом загружаться не в директорию с плагинами /plugins, а в директорию того шаблона, который сейчас работает на сайте. Такое размещение также уменьшает количество запросов к базе данных.

Так что это за конструкция такая — комбинированный слайдер для вордпресс? Например, распространенный плагин bxslider, который вы не найдете в репозитарии WordPress, но который можно и нужно скачать с официального сайта плагина — http://bxslider.com/. Естественно, плагин содержит все необходимое для организации и работы слайдера на любой странице (страницах) вашего блога, но его нужно закачать на сайт, подключить и настроить. Вот этим мы сегодня и займемся.

плагин bxslider

Весит слайдер вордпресс bxslider всего 157 кБ, и это уже большой плюс. Работает он на Jquery, а это означает, что нам необходимо будет подключить внешнюю библиотеку Jquery. Таким образом, запросы именно к вашему серверу сокращаются на глазах. Недостаток у этого плагина один – благодаря своей универсальности для каждого шаблона темы WordPress нужно будет подправлять кое-какие настройки в файле css и в основных настройках кода, который мы сейчас научимся вставлять в файлы шаблона сайта.

Код слайдера

Всего вам придется вставить три фрагмента кода php. Первый и второй фрагменты – в файл header.php, в любое место между тэгами <hеаd> и </hеаd>. Первым фрагментом кода мы подключаем внешнюю библиотеку Jquery – без нее картинки будут стоять на месте, хотя отображаться все будет правильно.

Вот первый фрагмент:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.min.js"></script>

Вот второй фрагмент – сам бесплатный слайдер для wordpress:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<!-- bxSlider Javascript file -->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function(){
        $('.slider1').bxSlider({
            slideWidth: 300,//ширина слайдера
            maxSlides: 5,//максимальное количество слайдов
            moveSlides: 1,//количество слайдов для смещения при анимации
            auto: true,//Автоматическая смена слайдов
            autoStart: true,//автоматический старт
            slideMargin: 10//отступ между слайдами
        });
    });
</script>

В первом отрывке кода вам нужно будет или изменить название папки «js» на свое название папки, которую вы создадите в директории шаблона темы, в данный момент работающей на вашем сайте. Надеюсь, это понятно – если вам не нравится название «js», придумайте свое.

Создайте новую папку в директории шаблона с этим именем и загрузите туда разархивированный плагин. В таком случае поменяйте пути к папкам и файлам в первом и втором фрагменте кода. Если хотите облегчить себе работу – создайте новую папку с именем «js», и в нее загружайте плагин. При этом в кодах ничего менять не придется. Название папки несущественно и ни на что не влияет.

Третий фрагмент кода – это подключение собственно слайдера. Вставляете его в то место, где хотите увидеть карусель. Например, если вы хотите, чтобы горизонтальный слайдер wordpress отображался только на главной странице сайта – вставляйте код в файл index.php (может быть – home.php).

Если хотите, чтобы слайдер-карусель отображался на всех страницах записей – вставляйте код в файл single.php. Куда именно нужно вставлять код? Во всех случаях после функции вызова контента. Он может выглядеть вот так:

 <?рhр if ( hаvе_роsts() ) : ?> 

или похоже.

Вот сам код:

<!--BXSLIDER-->
<div class="slider1">
    <?php
        $args = array('cat'=>'1,2','showposts' => 10,'order' => 'DESC' );
        query_posts($args);
        while ( have_posts() ) : the_post();
    ?>
    <div class="slide">
            <a href="<?php the_permalink() ?>"><?php the_title();?></a>
            <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>

    </div>
    <?php endwhile; wp_reset_query(); ?>
    <?php $wp_query1 = $temp_query1; ?>
</div>

Стили слайдера находятся в папке «js», которую вы создали и в которую закачали все файлы плагина. При необходимости или по желанию можете поэкспериментировать с внешним видом слайдера.

А технически настроить простой слайдер wordpress на основе плагина Jquery bxslider очень просто – можно указать необходимое число слайдов, расстояние между картинками, количество слайдов для смещения при анимации, ширину всего слайдера и включить/выключить автоматический показ слайдов. Все это делается во втором фрагменте кода – там есть подсказки в виде закомментированных строчек.

В третьем фрагменте кода вы можете настроить вывод картинок и заголовков из конкретной категории или категорий. Все настройки по выводу заголовков взяты из настроек аргумента — это стандартная функция wordpress. В нашем случае это функция ‘showposts’ => 10, которая определяет количество записей-картинок в слайдера, а функция ‘order’ => ‘DESC’ организует сортировку записей по убыванию. Если вместо DESC указать ASC, то будет работать показ слайдов по возрастанию.

В третий фрагмент кода можно также добавить, кроме выбора категории дату и вывод анонса – в общем, любые параметры, которые используются в запросе query_posts. Например, чтобы крутился слайдер категорий, нужно добавить параметр категории cat. В самом коде выбора категории можно указывать нужные рубрики, например, так: cat’=>’1,2′. Будут отображаться 1 и 2 рубрики. Если между одиночными кавычками ничего не прописывать, то будут выводиться все категории сайта.

Как определить ID категории без плагина вы, надеюсь, знаете. Но для новичков расскажу – в консоли идете в «Записи» — «Рубрики». Там выбираете нужную рубрику и жмете «Изменить». В адресной строке браузера смотрите на все эти цифры и выбираете вот эти:

Идентификатор рубрики

В нашем примере ID категории равняется 1, что и нужно прописать в третьем фрагменте кода – будут отображаться картинки записей из рубрики с ID=1. И кстати, чтобы слайдер работал вообще, необходимо, чтобы ваш шаблон темы поддерживал вывод миниатюр записи. То есть, при публикации записи вы должны обязательно вставлять миниатюры, и я думаю, вы знаете, как это делается. Если шаблон не выводит миниатюры, а менять вам его не хочется – не беда, выход есть, и очень простой.

В файл functions.php добавтье следующие строки:

add_theme_support(‘post-thumbnails’); // поддержка миниатюр
set_post_thumbnail_size(200, 150, false);

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

Но!… Здесь тоже есть подводные камни. Будет работать только слайдер, который будет выводить миниатюры записей, а сами миниатюры в записях не будут отображаться. Что делать в таком случае? Тоже не беда. Чтобы миниатюра отображалась в анонсах записей, откройте файл index.php, который находится в папке с вашим шаблоном темы — /wp-content/themes/название вашей темы/index.php.

Перед стандартной функцией — <?php the_excerpt (); ?> вставьте эту функцию — <?php the_post_thumbnail (); ?> , и все, теперь миниатюры будут отображаться и в записях. Оформить вывод миниатюры в css можно следующим образом: например, нужно, чтобы текст анонса обтекал миниатюру по правому краю. Для этого идите в файл style.css вашего шаблона темы, и в самом низу файла добавьте такой код:
.wp-post-image {
float: left;
margin: 4px 15px 5px 0;
}
Обязательно сохраните файл, не забудьте. Теперь все будет выглядеть красиво! Можно добавить цветную рамку к картинке. С рамкой цветовой гаммы сайта миниатюры будут соответствовать общему стилю шаблона темы. Для организации рамки добавьте к коду стиле такую строчку: border: 5px solid #FFDD00;

где 5px — толщина рамки, а #FFDD00 — цвет рамки.

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

<!--BXSLIDER-->
<div class="slider1">
    <?php
        $args = array('cat'=>'1,2','showposts' => 10,'order' => 'DESC' );
        query_posts($args);
        while ( have_posts() ) : the_post();
    ?>
    <div class="slide">
            <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('thumbnail'); ?></a>

    </div>
    <?php endwhile; wp_reset_query(); ?>
    <?php $wp_query1 = $temp_query1; ?>
</div>

При таком изменении (без заголовков, которые тоже занимают определенное место) вам придется подправить и сам код — возможно, нужно будет изменить расстояние между слайдами или ширину самого слайдера.

Но это не страшно — ведь вы уже это умеете. Поэтому удачи вам в работе и до новых встреч. Постараюсь в следующей статье рассказать о том, как организовать слайдер при помощи разных плагинов.