Какой плагин можно использовать для создания списка/слайд-шоу избранных изображений?

jQuery Cycle и Cycle Lite очень гибкие и простые в использовании.

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

Решение

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

Чтобы сделать его простым и интуитивно понятным для пользователя, я бы создал настраиваемый тип сообщения «Избранный контент», который поддерживает только избранное изображение (миниатюру) и отрывок, если вы хотите добавить подпись к каждому изображению.

Зарегистрируйте свой пользовательский тип сообщения и для аргумента поддержки используйте:

 'supports' => array('thumbnail','excerpt',)

Поместите свои скрипты в functions.php

<?php

    add_action( 'init', 'c3m_get_the_js' );

    function c3m_get_the_js() {
    wp_register_script( 'jquery.cycle', get_bloginfo('template_directory'). '/path_to_your_js/jquery.cycle.lite.1.1.min.js', array('jquery'), TRUE);
    wp_enqueue_script('jquery.cycle' );
    wp_enqueue_script( 'custom', get_bloginfo('template_directory'). '/path_to_your_js/c3m_functions.js', array('jquery.cycle'), TRUE);
            }

?>

Установите размер «избранного изображения» в functions.php

add_image_size( 'featured', 747, 285, true );

Настройте шаблон для отображения слайд-шоу

<div id="home-slider">

        <div class="cycle-nav">
            <a id="prev2" href="#">«Prev</a> <a id="next2" href="#">Next»</a>
        </div>

        <ul id="cycle" class="pics">

            <?php
                        $i = 1;
                        global $wp_query;
                        $custom_query = array(
                            'post_type' => 'featured_content',
                            'posts_per_page' => -1
                        );
                        if ( $custom_query )
                            query_posts( $custom_query );
                        $more = 0;
                    ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

            <li class="cycle-item slide-<?php echo $i; ?>">

                 <?php   the_post_thumbnail('featured'); ?>
                <div class="excerpt">
                    <?php echo get_the_content('<span class="more">more &raquo;</span>'); //Use this if you want text with your images ?>
                </div>
            </li>

            <?php
                        $i++;
                        endwhile;
                        endif;
                    ?>
                    <?php wp_reset_query(); ?>

        </ul>

    </div> <!-- /home-slider -->

Добавьте настройки цикла jQuery в файл custom.js.

jQuery.noConflict();
jQuery(document).ready(function($) {


jQuery('ul#cycle').cycle({
            timeout: 9000,
            speed: 1500,
            delay: 2000,
            prev:   '#prev2',
            next:   '#next2'
        });
});

Добавьте немного CSS

     #home-slider {
width:735px;
     overflow:hidden;
     height:280px; 
    float:right; 
    position:relative;
     margin-right:0; 
    display:inline-block
}

    a#prev2 {
position:absolute; 
    width:31px; 
    height:32px; 
    text-indent:-999em; 
    z-index:100; 
    background-position:0 0; 
    background-image:url(images/cycle-nav.png); 
    top:185px; 
    box-shadow:1px 1px 2px rgba(2,2,2,0.3); 
    -moz-box-shadow:1px 1px 2px rgba(2,2,2,0.3);  
    -webkit-box-shadow:1px 1px 2px rgba(2,2,2,0.3)
    }

    a#prev2:hover {
    background-position:0px -32px
    }

     a#next2 {
    position:absolute; 
    right:0px; 
    width:31px; 
    height:31px; 
    display:block; 
    z-index:100; 
    top:185px; 
    background-position:31px 0px; 
    background-image:url(images/cycle-nav.png); 
    overflow:hidden; 
    text-indent:-999em; 
    box-shadow:1px 1px 2px rgba(2,2,2,.3);  
    -moz-box-shadow:1px 1px 2px rgba(2,2,2,0.3);  
    -webkit-box-shadow:1px 1px 2px rgba(2,2,2,0.3)
    }

     a#next2:hover {
    background-position:31px -32px
    }

    ul#cycle { 
    margin:0;  
    padding:0;  
    list-style:none
    }

    ul#cycle .excerpt {
    width:700px; 
    height:82px;
    background: rgb(0, 0, 0); 
    background:rgba(0,0,0,.5); 
    position:absolute; bottom:0;
    padding:10px 20px 10px 25px; 
    overflow:hidden
    }

Пользовательский интерфейс

Слайдер на переднем конце