Слайдер постов WordPress. Подборка из 5 плагинов

Плагины для WordPress WordSmall

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

Ранее я уже пытался сделать подобный слайдер, только еще добавлял свой блок с последними публикациями. Но затея потерпела неудачу из-за удаления плагина с официального репозитория. Наверно было связано с безопасностью. Возможно, в будущем его восстановят, если разработчики не забросят идею, но, а пока подберем ему замену. Подборка включает в себя 5-ть слайдер плагинов постов с кратким описание и демо роликами.

Smart Slider 3

плагин слайда

Современный слайдер с полным набором настроек и понятным интерфейсом управления. Легко устанавливается через шорткод, виджет сайдбара, функцию вызова. Это позволяет встраивать слайдер прямо в тело файла. В отличие от других похожих плагинов, Smart Slider 3 имеет преимущество в функциональности бесплатной версии. Кроме того, есть инструмент для вставки видео с таких видеохостингах, как YouTube и Vimeo.

Некоторые особенности:

  • Адаптивный под мобильные устройства
  • Создание слайда: изображений, постов, видео
  • Готовые темы оформления
  • Управление: стрелки, эскизы, тени, автозапуск
  • Многое другое

Meta Slider

slider wordpress

Русифицированный, отзывчивый слайдер с эффектами Nivo Slider, Flex, Coin Slider, Responsive Slides. В своей тематики имеет статус «самый популярный» за легкость и простоту. Также не отстает от вышеупомянутого конкурента с возможностью добавлять слайдер через шорткод, виджет, функцию вызова. Но в бесплатной версии присутствует больше ограничений, к примеру, вставка видео доступна лишь про версии.

Особенности:

  • Предварительный просмотр в админ-панели
  • Конфигурация: эффекты, переходы, скорость и т.д.
  • Полная локализация
  • Бесплатная начальная поддержка (вопросы об установки и конфликтов)
  • Отзывчивый
  • Многое другое

Master Slider — Responsive Touch Slider

вордпресс ползунок

Условно бесплатный слайдер работает с любой темой, включая и стандартные. Поддерживает сенсорное управление, отзывчивый на всех основных устройствах. Но есть один небольшой минус, во всяком случае я не нашёл этих параметров, нет возможности установит краткое описание и название поста. То есть можете выбрать любое изображение, указать ссылку, куда эта картинка должна ввести. А вот вывести информация, о чем и что, нет способа. В остальном довольно неплохой выбор.

Особенности:

  • Полностью отзывчивый
  • Кроссбраузерность IE8+ и другие современные браузеры
  • Поддержка сенсорного управления
  • Красивые эффекты переходов
  • Полная настройка: стрелки, эскизы и т.д.
  • Прочее

Meteor Slides

slider post

Простой русифицированный слайдер, поддерживающий сенсорное управление и адаптивный под мобильные устройства. Работает на jQuery Cycle, что обеспечивает больше чем 20 эффектных переходов. Может интегрироваться в тему через шорткод, функцию вызова и виджет сайдбара. Нет возможности добавлять краткое описание и название поста.

Dessky Responsive Slider

пост слайдер

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

Слайдер с последними новостями

В заключение статьи повторим проделанный маневр с блоком последних записей из определенной рубрики, расположенным возле слайдера. Ориентированные размеры слайда 600×300, а сам блок длиной 1000px. И так как адаптивность присутствует в каждом плагине, мы подкорректируем весь блок для мобильных устройств.

Откройте файл темы header.php, в самом конце после всех функций добавьте следующий код:

    <?php if ((is_front_page()) and (!is_paged())) { ?>
    <div class="wordsmall">
    <div class="ws_slider">
    сюда вставить функцию вызова
    </div>
    <div class="newslider">
    <h3>Новости дня</h3>
    <ul>
    <!-- определение категории и количество записей -->
    <?php $the_query = new WP_Query('cat=2&showposts=5'); ?>
    <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
    <li>
    <!-- заголовок записи -->
    <a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail'); ?></a>
    <a href="<?php the_permalink() ?>"><span class="novdate"><?php the_time( get_option( 'date_format' ) ); ?></span><?php echo mb_strimwidth(get_the_title(), 0, 60,"...") ?></a>
     <!-- дата -->
    </li>
    <?php endwhile; ?>
    <!-- функция для правильной работы условных тегов -->
    <?php wp_reset_query(); ?>
    </ul>
    </div>
    </div>
    <div class="clear"></div>
    <?php } ?>

Слайдер обернут в условие, которое позволяет отображать его только на главной странице сайта. В коде указано где вы должны будете поместить функцию вызова слайдера из выше выбранного плагина.

Осталось добавить стили в файл style.css.

          /*Стили слайдера*/

.wordsmall {
    background: #fff none repeat scroll 0 0;
    height: auto;
    margin: 20px auto;
    padding: 20px;
    width: 1000px;
    display: table;
}
.newslider {
    float: right;
    width: 38%;
    margin-left: 20px;
}
.ws_slider {
    float: left;
}

.newslider li{
    border-top: 1px solid #f2f2f2;
    display: block;
    padding: 7px;
}

.newslider li img {
    display: block;
    height: auto;
    transition: all 0.25s ease-in 0s;
    width: 50px;
    float: left;
    margin: 0 10px 0 0;
}

.newslider a {
    color: #444;
    display: block;
    font: 14px arial;
    text-decoration: none;
}
.newslider a:hover {
   text-decoration: underline;
}
.newslider h3 {
    color: #333;
    font: bold 17px arial;
    margin-bottom: 8px;
    text-align: left;
}
span.novdate {
    background: #DEE7E8;
    border-radius: 2px;
    color: #798283;
    display: inline-block;
    font: bold 12px arial;
    margin-right: 5px;
    padding: 3px;
}
@media screen and (max-width:480px) {
.wordsmall {
    height: auto;
    width:300px;
}
.newslider {
    float: none;
    width: 100%;
    margin: 10px 0 0 0;
}
.ws_slider {
    float: none;
}
        
}
    /*конец*/

Результат.

результат слайда

Адаптивный результат.

адаптивный результат

Если что-то не получается или есть вопросы, задавайте их в комментариях.

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 17
  • Heaveton

    Здравствуйте.

    Подскажите пожалуйста, а какой плагин используется для получившегося в конце результата? Дело в том, что мне нужен примерно такой вариант, а не слайдер. Спасибо.

    • WordSmall

      Heaveton, Здравствуйте! Конечный результат я делал сам без плагина, а весь код, отвечающий результат, вложил в статью. Он находится чуть выше результата, можете просто его скопировать и вставить в удобное вам место. Но, в коде рассчитано, что будет слайд (там написано где нужно его вставить) определенных размеров.

      • Heaveton

        WordSmall, Я уже попытался использовать ваш код, но у меня кроме текста на главной странице ничего не отображается. Судя по надписи «сюда вставить функцию вызова», нужно вставлять какую-то функцию. :?:

      • WordSmall

        Heaveton, Вот здесь 'cat=2' укажите идентификатор своей категории, а вместо надписи «сюда вставить функцию вызова» вставляется функция вызова слайда, которую можно найти в любом плагине после его установки.

      • Heaveton

        WordSmall, Попробовал вставить функции вызова нескольких плагинов, но они как-то некорректно отображаются на главной странице. Не так, как у вас. Вид функций примерно такого типа:

        <?php masterslider(1); ?>

        Не подскажите, а как можно сделать что-то подобное imgur.com/FQyPk2X для вывода последних записей? Спасибо. ;-)

      • WordSmall

        А что именно некорректно? Подобное, как на скриншоте, делается обычными стилями.

  • Heaveton

    Вот как отображается, когда вставляю функцию вызова плагина «Master Slider»: imgur.com/9aFOm9s

    Подобное, как на скриншоте, делается обычными стилями.

    А что именно оборачивать в стили? Если Вас не затруднит, объясните пожалуйста подробнее. Битый день пытаюсь решить эту проблему, а нужной информации/плагина найти не могу. Спасибо. :oops:
    • WordSmall

      Heaveton, А вы размеры слайда сделали такие, как указано в статье? И весь блок вставили за пределами контента? Его размер ведь 1000px. По поводу блочного вывода последних записей, как найду время, сделаю мини-статью. Ну, то есть как это сделать.

      • Heaveton

        WordSmall, Пожалуй, дождусь вашей мини-статьи. Спасибо за ваши ответы. ;-)

      • WordSmall

        Heaveton, Рад был помочь ;-) На днях, думаю, сделаю.

      • WordSmall

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

        функция:

        <div class="blocknewpost">
                <ul>
            <!-- определение категории и количество записей -->
            <?php $the_query = new WP_Query('cat=2&showposts=5'); ?>
            <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
            <li>
            <!-- заголовок записи -->
            <a href="<?php the_permalink() ? rel="nofollow">"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail'); ?></a>
            <a href="<?php the_permalink() ? rel="nofollow">" class="tt"><?php echo mb_strimwidth(get_the_title(), 0, 60,"...") ?></a>
            </li>
            <?php endwhile; ?>
            <!-- функция для правильной работы условных тегов -->
            <?php wp_reset_query(); ?>
            </ul>
                </div>
        

        Стили:

        /*Стили слайдера*/
        .blocknewpost {
            background: #fff none repeat scroll 0 0;
            height: auto;
            margin: 0px auto;
            padding: 20px;
             width: 760px;
            display: table;
        }
        .blocknewpost ul{
            display: block;
                margin: 0;
        }
        
        .blocknewpost li{
            display: block;
                list-style:none;
                float:right;
                position:relative;
                width:150px;
                margin-left: 5px;
        }
        
        .blocknewpost ul li:nth-child(1){
            height: 253px;
            width: 405px;
                float:left;
                margin-left:0;
        }
        
        .blocknewpost li img {
            display: block;
            height: 100%;
            width: 100%;
        }
        .blocknewpost a.tt {
            color: #eee;
            display: block;
            font: 14px arial;
            position: absolute;
            text-decoration: none;
            background: rgba(0,0,0,0.5);
            padding: 3px;
            bottom: 0;
        }
        .blocknewpost a:hover {
           text-decoration: underline;
        }
        

  • Артём

    Добрый день!

    Нужна Ваша помощь :cry:

    WordPress 4.6.1

    Установлены следующие плагины :

    Advanced post slider bydigontoahsan

    PageBuilder by SiteOrigib

    PHP Code For Posts by wpxue

    В PageBuilder by SiteOrigib создана страница и через установку виджета вывожу php код вашего примера.

    Но ничего не выходит, ошибок не пишет и не выводит контент.

    • WordSmall

      Артём, здравствуйте! Код обернут в условие (показывать только на главной) уберите его и попробуйте снова.

  • Артём

    Добрый вечер!

    Про условие я понял сразу.

    Не помогло.

    Пока ищу решение задачи.

    возможно данная связка плагинов и темы на каком-то этапе не срабатывает, грешу на PHP Code For Posts by wpxue, так как при создании страницы не выводит ничего.

    Как решу, закину свой вариант сюда, если интересно.

    • WordSmall

      Артём, здравствуйте! Обратите внимание, что там указывается с какой именно категории выводить записи. И попробуйте не через виджет, а в тело шаблонного файла вставлять весь код.

  • Артём

    В теле шаблона все прекрасно работает, а вот задача стоит через виджет вывести.

    Еще не решил, но близок к результату

    • WordSmall

      Артём, тогда не знаю, чем помочь.

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