问题描述

我正在寻找一个允许用户上传文件的插件，也许 4-10 可以在主页上使用，作为幻灯片的一部分。如果需要，我可以自己编写幻灯片部分，但我感兴趣的是用户选择/上传照片的方式。如果与 Wordpress 的媒体管理器集成，就像其他上传一样，这将是非常好的。谢谢！

最佳解决方案

jQuery Cycle 和 Cycle Lite 非常灵活，非常易于使用。

大多数 WordPress slideshow plugins 既不完全符合您的需要，也不会尝试做所有事情，并且过于复杂的选项和功能。

解决方案

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

为了使用户方便直观，我将创建一个仅支持特色图像 (缩略图) 的”Featured Content” 自定义帖子类型，如果要为每个图像添加标题，则会提示摘录。

使用 Register your custom post type 和支持参数：

 '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);
            }

?>

将”featured image” 大小设置在 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
    }

用户界面

前端滑块

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。