Главная
Wordpress
Вывод миниатюр WordPress в слайдере
  • 23 Окт 2015г
  • 697
  • 0
  • Рубрика: Wordpress

Вывод миниатюр WordPress в слайдере

Вывод миниатюр Wordpress в слайдере

Доброго времени суток. 🙂

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

Слайдером, который будет листать миниатюры, будет - Elastislide. О нем я писал в прошлой статье, так что как подключить плагин, второй раз писать не буду, смотрите здесь - Универсальный слайдер на jQuery.

Чтобы вывести миниатюры WordPress в этом слайдере, надо будет просто изменить HTML разметку. Для этого меняем код из первого пункта прошлой статьи на вот такой:

<ul id="carousel" class="elastislide-list">
<?php
 $pc = new WP_Query('orderby=date&posts_per_page=10'); ?>
 <?php while ($pc->have_posts()) : $pc->the_post(); ?>
 <li>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array()); ?></a>
 </li>
 <?php endwhile; ?>
</ul>

Получается, мы просто добавляем цикл с помощью WP_Query и внутри него в тегах li заключаем вывод миниатюр.

Цикл WP_Query имеет несколько настроек:

  1. orderby=date - сортировка по дате.
  2. posts_per_page=10 - вывод 10 миниатюр.

Также можете добавить cat=9 - где 9 это айди рубрики. Этот параметр задаст условие вывода миниатюр только с определенной рубрики.

Чтобы все выглядело корректно и так как Вам надо, Вам придется еще править стили, но это уже индивидуально для каждого сайта.

Данный способ я применял на практике, когда делал тему онлайн кинотеатр на WordPress. Такой слайдер листал обложки фильмов в шапке сайта.

Думаю, у Вас не составит труда интегрировать такой слайдер миниатюр WordPress себе на сайт. Главное правильно установите слайдер как расписано в прошлой статье.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 5 из 5)

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий