jQueryCycle 和Cycle Lite 非常灵活，使用非常方便

MostWordPress slideshow plugins 要么不完全按照你的需要做，要么他们尝试做所有事情，而且选项和功能过于复杂。

The solution

将幻灯片功能构建到主题模板中，或编写自己的插件。

为了让用户更容易和直观，我将创建一个“特色内容”自定义帖子类型，如果您想为每个图像添加标题，它只支持特色图像（缩略图）和摘录。

Register your custom post type 对于supports参数，请使用：

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

将脚本排入函数队列。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);
            }

?>

在函数中设置“特色图像”大小。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循环设置添加到自定义中。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
    }

UI

前端的滑块