web-dev-qa-db-ja.com

おすすめ画像のリスト/スライドショーを作成するためにどのようなプラグインを使用できますか？

私は、ユーザーがスライドショーの一部としてホームページで使用できるファイルをアップロードできるようにするプラグインを探しています。必要に応じてスライドショーの部分を自分でコーディングすることもできますが、興味があるのはユーザーが写真を選択またはアップロードする方法です。他のアップロードと同じように、それらがWordpressのメディアマネージャと統合されていれば素晴らしいでしょう。ありがとうございます。

pluginsmediapost-thumbnailsuploadsslideshow
6
cwd

jQuery Cycle と Cycle Lite は非常に柔軟で使いやすいです。

ほとんどの WordPressスライドショープラグイン は、あなたが必要としていることを正確に実行していないか、すべてを実行しようとしていてオプションや機能が非常に複雑です。

解決策

スライドショー機能をテーマテンプレートに組み込むか、独自のプラグインをコーディングします。

ユーザーにとってわかりやすく直感的にわかるように、おすすめの画像（サムネイル）のみをサポートする "おすすめコンテンツ"カスタム投稿タイプと、各画像にキャプションを追加する場合の抜粋を作成します。

あなたのカスタム投稿タイプを登録する そしてsupports引数には：

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

UI

enter image description here

フロントエンドのスライダー

enter image description here

8
Chris_O