Настраиваем отображение записей в «карусели»

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

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

Стильный адаптивный слайдер последних записей Wordpress !

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

И вот тогда-то я и нашел 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 .

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

Шаг 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() .