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

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

И вот тогда-то я и нашел carouFredSel. Вот ссылка на сайт этого проекта: caroufredsel.frebsite.nl. Мне очень понравились их примеры, хотя увиденное все равно не обладало той функциональностью, которая была мне нужна (к примеру, отображение заголовков под картинками), но основное было именно то, что я искал. Для краткости сразу перейду к подробностям.

Шаг 1. Скачиваем carouFredSel

Начнем с того, что перейдем на http://caroufredsel.frebsite.nl/ и скачаем код нашего "карусельного" решения, а затем скопируем оттуда файл jquery.carouFredSel-5.5.0-packed.js в папку с вашей темой для WordPress.

Шаг 2. Редактируем файл functions.php

Следующий шаг — это открытие в редакторе файла functions.php и добавление в него нового кода:

if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'sliderimg', 200, 150, true );
}

Убедитесь в том, что заменили 200 и 150 собственными значениями. Сохраните изменения и загрузите файл на хостинг. После загрузки в боковой панели постов вы увидите новую опцию под названием "Featured Image". Вы можете загрузить любую картинку туда, которую хотите использовать, и это будет графический элемент (фото либо рисунок), который будет использоваться в нашей "карусели" постов. Также учтите, что вызов этого рисунка происходит при помощи "sliderimg". Почему именно так — я вам вскоре расскажу.

Шаг 3. Включаем carouFredSel и другие параметры для functions.php

Создаем новый файл JavaScript под названием wptuts-caroufredsel.js и добавляем в него следующий код, а потом копируем файл в папку с темой WordPress вашего сайта:

jQuery(function($) {
    $('#foo2').carouFredSel({
        prev: '#prev2',
        next: '#next2',
        auto: false,
        items: 3,
    });
});

Вот еще кое-что, что надо учесть для дальнейшей работы. #foo2 — это значение id нашей используемой "карусели" с постами. Это значение и параметр понадобятся нам, когда будем настраивать для данного элемента стили с помощью CSS. Также запомните #prev2 и #next2 id для оформления стилей кнопок "назад" и "вперед", и значение 3 — это количество элементов, которые за 1 раз отображаются в "карусели" постов. В данном случае это "3", но может быть и больше либо меньше.

Теперь снова откройте ваш файл functions.php и добавьте в него следующий код для загрузки файлов JavaScript:

function wptuts_load_caroufredsel() {
    // Enqueue carouFredSel, note that we specify 'jquery' as a dependency, and we set 'true' for loading in the footer:
    wp_register_script( 'caroufredsel', get_template_directory_uri() . '/js/jquery.carouFredSel-5.5.0-packed.js', array( 'jquery' ), '5.5.0', true );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'wptuts-caroufredsel', get_template_directory_uri() . '/js/wptuts-caroufredsel.js', array( 'caroufredsel' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'wptuts_load_caroufredsel' );

Шаг 4. Редактируем шаблон страницы

Теперь давайте откроем ваш шаблон страницы, на которой вы хотите отображать "карусель". После открытия вставьте следующий код там, где вы хотите отображать "карусель" с постами:

<div class="list_carousel">
    <ul id="foo2">
        <?php
        $carouselPosts = new WP_Query();
        $carouselPosts->query('showposts=12');
        ?>
        <?php while ($carouselPosts->have_posts()) : $carouselPosts->the_post(); ?>
        <li>
            <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo get_the_post_thumbnail($id, 'sliderimg'); ?></a>
            <div class="slidertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
        </li>
        <?php endwhile; ?>
    </ul>
    <div class="clearfix"></div>
    <a class="prev" id="prev2" href="#"><span>prev</span></a>
    <a class="next" id="next2" href="#"><span>next</span></a>
</div>

Теперь давайте я вам дам кое-какие пояснения, пока вы окончательно не сошли с ума, разбираясь во всем этом коде. Первая часть приведенного блока с кодом — это название класса (для настройки стиля), я называю его list_carousel. Далее идет #foo2 id, о котором речь шла ранее. Далее идет запрос для постов:

<?php query_posts('showposts=12'); ?>

Этот запрос нужен для того, чтобы "вытащить" последние 12 опубликованных постов. Ранее я описал способ, которым вытягивается 3 поста за 1 раз, таким образом, у нас 4 блока по 3 поста. Но предположим, что вы хотите быть более точными в выборе постов и отображать только посты из конкретной категории. Для этой цели используйте следующий код вместо кода showposts, упомянутого выше:

<?php query_posts('category_name=slider&showposts=12'); ?>

А что насчет сортировки постов по тегам? Вот и для этой цели код:

<?php query_posts('tag=featured&showposts=12&offset=0&order=ASC'); ?>

Измените "featured" на любой тег, который вам нужен. Все 12 постов в моем случае вызываются и сортируются по нарастающей.

Все еще путаетесь в предназначении кода? Думаю, что уже нет. Далее идет основная часть кода, где при помощи "sliderimg" мы извлекаем картинку "featured image" для поста и также даем ссылку на сам пост, чтобы при клике на картинку пользователь переходил к чтению непосредственно самого поста.

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo get_the_post_thumbnail($id, 'sliderimg'); ?></a>

В случае с моим заказчиком они хотели не только отображать картинку-иллюстрацию к посту, но и заголовок самого поста в "карусели". Так что под картинкой надо было включить еще и отображение заголовка, сделав его также ссылкой на пост, и назначив для этой цели класс под названием "slidertitle", чтобы в дальнейшем также его можно было обработать при помощи стилей.

<div class="slidertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>

Уфф, ну вот, в самом низу находятся кнопки для перелистывания вперед и назад с id prev2 и next2, которые ранее были упомянуты в коде JavaScript.

<a class="prev" id="prev2" href="#"><span>prev</span></a>
<a class="next" id="next2" href="#"><span>next</span></a>

После того, как я вам все так подробно разъяснил, давайте двигаться дальше.

Шаг 5. Настраиваем стили с помощью CSS

Теперь у нас все работает, но выглядит не так, как нам бы хотелось. Так что открываем файл style.css и вставляем в него следующий код:

.list_carousel {
    height: 175px;
    margin: 0 auto;
    overflow: hidden;
    width: 660px;
}
.list_carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}
.list_carousel li {
    font-size: 14px;
    color: #333;
    width: 200px;
    padding: 0;
    margin: 2px;
    display: block;
    float: left;
}
.list_carousel.responsive {
    width: auto;
    margin-left: 0;
}
.list_carousel .clearfix {
    float: none;
    clear: both;
}
.list_carousel a.prev {
    background: url("next-arrow-left.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 150px;
    position: relative;
    top: -174px;
    width: 50px;
}
.list_carousel a.next {
    background: url("next-arrow-right.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 150px;
    position: relative;
    left: 635px !important;
    top: -324px;
    width: 50px;
}
.list_carousel a.prev {
}
.list_carousel a.next {
    right: -29px;
}
.list_carousel a.prev.disabled, a.next.disabled {
    cursor: default;
}
.list_carousel a.prev span, a.next span {
    display: none;
}
#foo2 {
    left: 20px;
    margin: 0 2px;
    position: relative;
}

Немаленький блок кода получился, неправда ли? Вы уж простите, но с помощью такого большого массива кода мы решим сразу много различных задач. Попытаюсь разъяснить, для чего это все предназначено. Если вы хотите настроить ширину, измените значение 660 px и 175 px на желаемые для вас значения ширины и высоты "карусели" постов. Также при помощи .list_carousel li вы можете отредактировать цвета заголовка в постах и ширину заголовка для каждого из них. Классы .list_carousel a.prev и .list_carousel a.next показывают, где и как отображаются картинки для стрелок прокрутки назад и вперед. Вот так все и выглядит в моем случае. Дополнительная настройка стилей — за вами.

Как будет выглядеть окончательный результат

Вот ссылка на "живую" версию того, что у меня получилось в итоге: http://www.kstudiofx.com/carousel-tutorial

Дополнение: Это практическое руководство в оригинале использует query_posts(), что является не слишком хорошим практическим решением. Поэтому я обновил код и счел более уместным использование для этой цели WP_Query().

Источник: WP.tutsplus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

13 комментариев

сначала новые
по рейтингу сначала новые по хронологии
Вячеслав

Отлично!Спасибо!Доработал и все встало как надо.Вопрос: как уменьшить интервал прокрутки и время?

Виктор

не рабочая ссылка http://www.frebsite.nl/caroufredsel/ на плагин. Не могли бы вы выложить файл jquery.carouFredSel-5.5.0-packed.js Заранее спасибо!

Нужна помощь!

Все работает, но при сохранении материала, или чего-либо в админке выдает ошибку: "Warning: Cannot modify header information - headers already sent by (output started at /site/wp-content/themes/wp_businesstwo5-v1.0/functions.php:123) in/site/wp-admin/post.php on line 222

Когда убираю код с functions.php - все ок, но карусель не двигается и нет кнопок вправо-влево.

Виктор

Огромное спасибо автору за этот мануал!!! немного подредактировав код я получил именно то, что мне надо было!

ещё рааз выражаю благодарность за этот прекрасный сайт и статью! продолжайте в том же духе
Спасибо!

а если мне нужно выводить конкретные посты, которые я сам вручную выберу. Как это сделать?

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

или использовать теги featured, очевидно же!

Возможно ли просто выводить картинки из галереи с этим плагином?

Не получается. Посты друг за другом выводятся. На сайте http://caroufredsel.frebsite.nl/ кстати уже версия 6.0.4. Кроме jquery.carouFredSel-5.5.0-packed.js и wptuts-caroufredsel.js никаких больше скриптов подключать не надо?

Очень интересно! Спасибо!

Интересный способ вывода! особенно полезен для сайтов тематики онлайн кино! Спасибо за доходчивое объяснение!

Andrekalinin

Шикарно! Надо попробовать! Спасибо!