問題描述

我正在尋找一個允許使用者上傳檔案的外掛，也許 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。