WordPress ギャラリーを印象的に見せるレスポンシブスライダー(複数設置対応)プラグイン

ギャラリーの画像は thumbnail サイズが用いた一覧表示を行っている場合が多いので、意外と画像の印象が弱い感じがします

ギャラリーの画像をもっと印象的に表示できるようにスライダーを用いたプラグインを作成してみました。スライダーは、トップページのヘッダー等で多くの場合使われていますが、標準のギャラリー機能を使って指定できるようにすれば簡単に記事中で扱うことが出来ます

Celtis Gallery Slider プラグイン

スライダーを使うとこんな感じのクールで印象的なギャラリー表示ができます (^^)

gallery-slider-サンプル (1)

特徴
  1. ギャラリーの作成は標準ギャラリーと同じ方法なので設定が簡単
  2. レスポンシブ対応(画像の縮小表示はするが拡大は行わない)
  3. ページ内に複数ギャラリーを各設定で設置可能
  4. 画像のタイトル、キャプション、説明表示の有無を指定可能
  5. 画像下のナビゲーション表示の有無を指定可能
  6. 各画像にはリンク先の設定が可能
  7. スライダー処理は FlexSlider を使用

デモ

サンプルとしてギャラリースライダーを設置してみます

  • Yachtsody in Blue

    Yachtsody in Blue

    Boats and reflections, Royal Perth Yacht Club

    Public domain via http://www.burningwell.org/gallery2/v/Landscapes/ocean/dsc03149.jpg.html

  • Boardwalk

    Boardwalk

    Boardwalk at Westport, WA

    Public domain via http://www.burningwell.org/gallery2/v/Landscapes/ocean/DCP_2082.jpg.html

  • Sydney Harbor Bridge

    Sydney Harbor Bridge

    Sydney Harbor Bridge

    Public domain via http://www.burningwell.org/gallery2/v/Objects/dsc09114.jpg.html

  • Golden Gate Bridge

    Golden Gate Bridge

    Golden Gate Bridge

    Public domain via http://www.burningwell.org/gallery2/v/Objects/100_5478.JPG.html

FlexSliderとは

FlexSliderは、非常に多機能で軽量な jQuery プラグインです

とても有名なプラグインなので、検索すると沢山の使用例等を見つけることが出来ます

gallery-slider-サンプル (2)

今回は、スライダーにコントロールとしてサムネイルナビを付けたパターンを元にカスタマイズしています

スライダーに必要な機能は FlexSlider が持っていますので、WordPressのプラグインとして、ギャラリーから簡単にスライダーを扱う機能部分を作ればOKです

事前準備

この celtis gallery slider プラグインは、Jetpack がインストールされていないと有効になりません

Jetpackがギャラリーの作成ページに追加している Type の選択処理を利用しています。自前で同等機能を実装するより手軽なので今回は Jetpack に依存する形にしました

Jetpack もしくは Slim Jetpack を事前にインストールして下さい。JetPackは大変多機能で便利なプラグインなので入れておいて損はないと思います

Jetpack のインストールに関しては下記を参考にして下さい

WordPress JetPack プラグインの導入

WordPress.com にアカウントを作成したくないと言う方は、機能限定版の Slim Jetpack をインストールしてもこのプラグインを有効にすることができます

ちなみに、JetPack を入れると重くなるからなーという方は、plugin load filter 機能でプラグインの読み込みを最適化すると高速化出来るかもしれません (^^)

参照 WordPress プラグインロードに条件分岐を使い高速化する方法

インストール

この機能は、celtispack プラグインをインストールして Gallery Slider モジュールを有効化すると使用できるようになります

ダウンロードは、WordPress Plugin : Celtispack ページから行うことが出来ます

使い方

使い方は、通常のギャラリー作成と同じです

ここでは、新規投稿作成時を例に手順を紹介します

1.記事作成のタイトル下にある メディアを追加 ボタンをクリック

gallery-メディアを追加

2.ギャラリーを作成 を選択

gallery-ギャラリーを作成

ここで新たにギャラリーに登録する画像ファイルをアップロードするか、メディアライブラリ中にある既存の画像を選択肢ます

3.ギャラリーを作成

gallery-ギャラリー画像選択

今回はメディアライブラリから既存の画像を選択してギャラリーを作成してみます

登録する画像を選択して、必要に応じてその画像のタイトル、キャプション、説明文を入力します

選択した画像は画面下部に一覧表示されるので、選択が終了したら ギャラリーを作成 ボタンをクリックします

4.ギャラリーの設定

gallery-ギャラリーの設定

Type

JetPack もしくは Slim Jetpack がインストールされていれば、ギャラリーの設定に Type が追加されているので、そこから FlexSlider を選択します

リンク先

通常のギャラリーと同様に、画像をクリックした時のリンク先の設定も行えます

  1. 添付ファイルのページ  –  テーマファイルで用意されている添付テンプレートページへのリンク
  2. メディアファイル  –  画像の元ファイルへリンク
  3. なし  –  リンクファイルなし

デフォルトは添付ファイルのページになっているので、クリックを無効にする場合は、なし を選択して下さい

5.挿入されたギャラリー

gallery-挿入されたギャラリー

ギャラリーの挿入 をクリックするとエディタ内に設定したギャラリ画像が表示されます

この後は、記事を完成させて公開という手順となります

公開は、標準フォーマットでも問題ありませんが、ギャラリーフォーマットを選択すれば、テーマによってはギャラリー用のテンプレートによる表示を行ったり、アーカイブでギャラリー一覧を表示できたりするので、ギャラリーフォーマットを選択するのがお勧めです (^^)

また、この状態で挿入されている gallery ショートコードはデフォルト値です(ビジュアルモードからテキストモードにすれば確認出来ます)

gallery-挿入されたショートコード

6.flexslider タイプのオプション
オプション デフォルト 設定項目 内容
size large thumbnail / medium / large / full スライダーの画像サイズ
title true false / true タイトル表示
caption true false / true キャプション表示
description true false / true 説明(コンテンツ)表示
controlnav thumbnails false / true / thumbnails ナビの表示

※標準ギャラリーと同じく link, include, exclude のオプションも有効です

例えば、画像サイズを中サイズにして、説明文を表示しない場合を設定してみます
設定値は “” で囲んで指定です

gallery-ショートコード設定変更

これで表示実行するとこんな感じとなります

gallery-slider実行

余白部が広すぎますが、サイドバー等に表示する場合は、medium サイズ画像ならデータ量も少なくなるし大きさもちょうどいい感じとなります

表示位置ごとにそれぞれ設定値を変えて複数設置するとこんな感じです
タイトル表示の有無やナビコントロールの有無に違いのある複数のギャラリーが表示されているのが判ると思います

gallery-slider-複数設置

7.テキストウィジェットからの実行について

gallery ショートコードをテキストウィジェットに貼り付ければ実行できます
公開しない作業用の投稿ページ等で gallery ショートコードを作成して、それを貼り付けて下さい

※celtispack プラグインの テキストウィジェットでショートコードの使用を許可する をチェックすればウィジェットでショートコードが使えるようになります

8.テーマのテンプレートファイルからの実行

http://codex.wordpress.org/Gallery_Shortcode で紹介されているように、テンプレートファイル内に直接プログラムコードを追加して gallery ショートコードを実行できます

<?php echo do_shortcode( ... ); ?>
9.表示がずれる場合

このプラグインのCSSは、Celtis-one テーマに合わせて記述してあります

公式テーマの Twenty Fourteen, Twenty Thirteen, Twenty Eleven では問題ありませんでしたが、Twenty Twelve ではずれてしまいました

テーマによっては表示がずれたり、間延びしてしまう場合があるかもしれません

綺麗に表示されない場合はCSSを修正してみて下さい m(__)m

 

プログラムについて

プログラムに興味ある方もいるかも知れませんので、処理についても少し紹介します

FlexSlider のカスタマイズ

ダウンロードした jquery.flexslider.js v2.2.2 の220行目を修正しています

//if ( '' != captn && undefined != captn ) item += '<span class="' + namespace + 'caption">' + captn + '</span>';
  if ( '' != captn && undefined != captn ) {
    item = '<img src="' + slide.attr( 'data-thumb' ) + '" title="' + captn + '"/>';
  }

コントロールナビのサムネイルに span タグを使ってキャプションを追加している処理をサムネイルナビ画像の title 属性にキャプションをセットするようにして、マウスポインタがホバーした時に画像タイトルをポップアップするようにしています

それと、ブラウザに読み込まれて実行を開始する処理を jquery.flexslider.js ファイルの最後に追加して jquery.flexslider_custom.js としました

/**
 * Flexslider2 ギャラリーのスライダー表示
 * Author: enomoto@celtislab
 */
jQuery(document).ready(function($){
    $flexsliders = $('.flexslider');
    if($flexsliders.length > 0){
        var timer = false;
        $(function(){
            //複数スライダー設置時の異なるオプション指定に対応
            for (var i=0; i<$flexsliders.length; i++) {
                var idtag = '#' + $flexsliders[i].id;
                $(idtag).flexslider({
                    //animation: "slide", //環境によっては firefox でエラーとなる場合があるようなので、コメントにしておく
                    thumbCaptions: true,
                    controlNav: $(idtag).data('controlnav'),
                    //pauseOnAction: false,
                    start: function(slider) {
                        modifySliderSize('#' + slider[0].id);
                    },
                });
            }
        });    
        //最大を原寸表示とする
        $('.flexslider .slides li img').css('width','auto');
        $('.flexslider .slides li img').css('hight','auto');
        $('.flexslider .slides li img').css('max-width','100%');
        $('.flexslider .slides li img').css('max-height','100%');
        $('.flexslider .slides li img').css('margin','0 auto');

        function modifySliderSize(idtag) {
            //カレントの width をセット
            $(idtag + " .flex-info").css('width', $(idtag + " .slides > li").css("width"));
        }
        $(window).resize(function() {
            if (timer !== false) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                for (var i=0; i<$flexsliders.length; i++) {
                    modifySliderSize('#' + $flexsliders[i].id);
                }
            }, 300);
        });
    }
});

スライダーのプロパティに関しては FlexSlider Properties を参照して下さい

少し解説しますとスライダーの複数設置に対応する記述が悩みました (^^)

検索しても複数設置に関して解説しているサイトがほとんどありませんでしたが、英語のサイトでヒントとなるコードを見つけて実装しました

スライダーのプロパティを id 単位に設定

やり方はいろいろあるでしょうが、$flexsliders = $(‘.flexslider’); とすればページ内に複数設置されているスライダー部のDOMデータを所得できるので、そこから id を取得して id毎に設定します

id 毎のオプション値の渡し方

echo で js に変数を渡すにしても id 毎に区別して反映させなければならないので、うまく関連付ける方法がないものかと調べると、どうやら dataset という仕組みでHTML要素中に任意のデータを設定出来るらしいとということでやってみると chrome ではうまく行ったのですが IE がダメでした

さらに調べると jQuery で同様な感じで data として取得出来ることがわかったのでそれを使ってみました

js は、ブラウザ間の違いが大きく、jQUery はバージョンによる変化が大きいのでどこまで動作するかいまいちわかりませんが、とりあえず動いたようです (^_^;)

参考:意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ

不揃いの画像サイズの拡大対策

画像サイズが揃っていれば、きれいなスライドとなるのですが、画像の大小、縦長、横長等が混在すると、小さな画像を拡大表示する場合があったので、max-width, max-height を100%として拡大されないようにしました

また、スライダー画像上にキャプションや説明文表示をするのに width 指定することで長い説明文でも適切に折り返し表示するようにしています

PHPプログラム

Jetpackのチェック

Jetpack内の関連するクラスが定義されているかチェックしてプラグインを有効化します

if(class_exists('Jetpack_Gallery_Settings', FALSE)) { 
    $celtisone_gallery = new Celtisone_gallery();
}

Gallery に FlexSlider タイプを追加

jetpack_gallery_types フィルターフックして flexslider を登録すれば選択できるようになります

public function __construct() {

    add_filter( 'use_default_gallery_style', '__return_false' );
    add_filter( 'post_gallery', array(&$this, 'gallery_slider'), 1990, 2 );
    add_filter( 'jetpack_gallery_types', array( $this, 'add_gallery_type' ), 10 );

    $path = __DIR__ . '/flexslider_custom.css';
    wp_enqueue_style( 'flexslider-css', content_url() . str_replace('\\' ,'/', substr( $path, stripos($path, 'wp-content') + 10)) );
    $path = __DIR__ . '/jquery.flexslider_custom.js';
    wp_enqueue_script( 'flexslider-js', content_url() . str_replace('\\' ,'/', substr( $path, stripos($path, 'wp-content') + 10)), array('jquery'), NULL, true);
}

function add_gallery_type( $types = array() ) {
    $types['flexslider'] = 'FlexSlider';
    return $types;
}

あとは、gallery ショートコードの post_gallery にフィルターフックしてブラウザに出力するスライダー用のHTMLコードを生成して、FlexSliderのCSSを wp_enqueue_style、JSを wp_enqueue_script に設定するだけです

スライダー用のHTMLにするメイン部

標準のギャラリー処理を参考にスライダー用にカスタマイズしていきます

function gallery_slider($output, $attr) {
    // 既に post_gallery がフックされて上書きされていたら実行しない
   if ( ! empty( $output ) || empty( $attr['type'] ) || 'flexslider' !== $attr['type']) 
    return $output;  

    global $post;
    static $instance = 0;
    $instance++;

    if ( ! empty( $attr['ids'] ) ) {
        // 'ids' is explicitly ordered, unless you specify otherwise.
        if ( empty( $attr['orderby'] ) )
            $attr['orderby'] = 'post__in';
        $attr['include'] = $attr['ids'];
    }

    // We're trusting author input, so let's at least make sure it looks like a valid orderby statement
    if ( isset( $attr['orderby'] ) ) {
        $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
        if ( !$attr['orderby'] )
            unset( $attr['orderby'] );
    }

    //スライドのデフォルトサイズは large とする
    extract(shortcode_atts(array(
        'order'      => 'ASC',
        'orderby'    => 'menu_order ID',
        'id'         => $post ? $post->ID : 0,
        'size'       => 'large',
        'include'    => '',
        'exclude'    => '',
        'link'       => '',
        'controlnav' => 'thumbnails',
        'title'      => 'true',
        'caption'    => 'true',
        'description'=> 'true',
    ), $attr, 'gallery'));

    $id = intval($id);
    if ( 'RAND' == $order )
        $orderby = 'none';

    if($controlnav !== 'false' && $controlnav !== 'thumbnails')
        $controlnav = 'true';
       
    if ( !empty($include) ) {
        $_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
        $attachments = array();
        foreach ( $_attachments as $key => $val ) {
            $attachments[$val->ID] = $_attachments[$key];
        }
    } elseif ( !empty($exclude) ) {
        $attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    } else {
        $attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
    }
    if ( empty($attachments) )
        return '';

    if ( is_feed() ) {
        $output = "\n";
        foreach ( $attachments as $att_id => $attachment )
            $output .= wp_get_attachment_link($att_id, "thumbnail", true) . "\n";
        return $output;
    }

    $output = "<div id='galleryslider-{$instance}' class='flexslider' data-controlnav='{$controlnav}'>";
    $output .= "<ul class='slides'>";
    foreach ( $attachments as $id => $attachment ) {
        $this->attachment_thumbnail_regenerate($id, 'small');
           $thumb = wp_get_attachment_image_src($id, 'small');
        if ( $thumb ) {
            list($src, $width, $height) = $thumb;
            $attr = array(
                'item_src'       => $src,
                'item_title'   => trim(strip_tags( $attachment->post_title  )),
                'item_excerpt' => trim(strip_tags( $attachment->post_excerpt )),
                'item_content' => trim(strip_tags( $attachment->post_content )),
            );
            if ( empty($attr['item_title']) )
                $attr['item_title'] = trim(strip_tags( $attachment->post_excerpt ));
        }
        $output .= "<li data-thumb='{$attr['item_src']}' data-thumbcaption='{$attr['item_title']}'>";
            
        if($title !== 'false') {
            $output .= "<h3 class='flex-title'>" . $attr['item_title'] . "</h3>";
        }
        //画像クリック時のリンク先を設定により切り替える
        if ( ! empty( $link ) && 'file' === $link )     //メディアファイルへリンク
            $output .= wp_get_attachment_link( $id, $size, false, false );
        elseif ( ! empty( $link ) && 'none' === $link ) //添付ページヘリンク
            $output .= wp_get_attachment_image( $id, $size, false );
        else                                            //リンクなし
            $output .= wp_get_attachment_link( $id, $size, true, false );
            
        if ($caption !== 'false' || $description !== 'false') {
            $output .= "<div class='flex-info'>";
            if ($caption !== 'false' && !empty($attr['item_excerpt']) )
                $output .= "<p>". wptexturize($attr['item_excerpt']) . "</p>";
            if ($description !== 'false' && !empty($attr['item_content']) )
                $output .= "<p>". wptexturize($attr['item_content']) . "</p>";
            $output .= "</div>";
        }
        $output .= '</li>';
    }
    $output .= "</ul>";
    $output .= "</div>\n";
    return $output;
}

以上です (^^)

プログラムコードは、ダウンロードしたファイルの modules/celtis-gallery-slider フォルダにあるファイルを参照してください

ギャラリーやスライダーのプラグインは、既に沢山あります、逆にありすぎてどれを使用してよいか迷いますが、シンプルなものをお探しであれば、このプラグインは、標準ギャラリーと同じ使い方で、ギャラリーを簡単にスライダー表示にできるのでお勧めです (^^)

 


まとめ記事紹介

WordPress ギャラリーを印象的に見せるレスポンシブスライダー(複数設置対応)プラグイン” への27件のコメント

  1. 説明通りしているのに、うまく表示されなくてへこんでいます。どこが違うのかも分からない。
    泣けてくる。使いたいのに。

    1. うまく表示されないというのは、何か表示されるけどずれたりしている状態ということでしょうか
      それとも、Celtispack プラグインがインストールできないということでしょうか?
      また、このスライダー機能はJetpackかSlimJetpackのインストールされていないと動作しません
      他のプラグインが影響していることも考えられます

      もう少し詳しい状況を教えて頂ければアドバイス出来るかもしれません

  2. こんにちは
    理想のギャラリーだと思い説明通りに導入を頑張ったのですが…、
    どうしてもサムネイル部分がうまく表示されず、サムネイルになるはずの下の画像達すべて元々の画像サイズのまま縦に並んでしまいます…。
    大きく表示されるプレビュー画像の下にも空白があり、そこをクリックするとプレビュー画像とは異なる画像のリンクに飛んでしまいます…。
    それと、スライドショー機能をなくしクリックだけでページめくりをしたり、サムネイル画像の大きさを変えることなどはできないのでしょうか?
    初心者ですみません。どうしても利用したいのでなにかアドバイスを頂けないでしょうか…;;

    1. サムネイル部分の画像は 70×70 サイズの画像を使用して表示していますがこのプラグインを導入する前の画像には 70×70 のサムネイルが存在しないので、代わりに大きなサムネイルが表示されていると思われます。

      プラグインの Thumbnail optimize モジュールを有効にして、「表示時に該当サムネイルの画像サイズを確認して、メディア設定値と異なる場合は再作成します」 機能にチェックを入れて頂ければ小さなサムネイルが表示されるようになると思いますので試してみてください

      また、サムネイル画像のクリックでは、大きな画像表示部が切り替わるだけのはずなのですが、何か想定外のリンクが挿入されてしまっているのかも? ちょっと良くわかりません (^_^;)

      サムネイル画像の大きさを変えるにはプログラムを修正すれば可能ですが、このプラグインでは、他の機能でも 70×70 の画像を多用しているのでサイズ変更すると色んな所に影響してしまうので、今のところ変更する予定はありません

  3. こんにちは
    返信ありがとうございます!
    どうやらwordpressのライブラリにメディアをアップロードする際に、FTPソフトで直接アップロードした画像はうまくサムネイル化されず、ダッシュボードのメディアの新規追加よりアップロードした画像は正しくサムネイルとして表示されました。
    あと一点問題がありまして…、サムネイルの下にサムネイル三個分縦に並べたくらいのスペースが空いてしまっており、どうにか無くしたいのですがなかなかうまく行きません…。
    よーく見るとできたスペース部分には、なぜか箇条書きに使われるような「・」が2個入っています…。
    度々すみませんが、何かアドバイスをいただければと思います><
    よろしくお願いします。

    1. スライダーの flex-direction-nav ナビ部分の ul リスト要素が表示されているようです
      CSSで他の優先度が高い ul 指定によって無効化されているようです

      テーマの style.css の最後の方に下記の設定を追加してみてください
      強制的に優先度を高くすれば解消すると思います (^^)

      .slides,
      .flex-control-nav,
      .flex-direction-nav {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
      }

  4. 返信ありがとうございます!
    アドバイスの設定を試してみたのですが変化がありまえせんでした…。
    しかし、CSSのul指定が問題ということで、ulタグの設定をコメントアウトしてみると正しくギャラリーが表示されるようになりました!
    ページ内でリスト表示ができなくなってしまいましたが…、ギャラリーが使えるようになって大満足です!!
    何度もアドバイスしていただき、ありがとうございました(*´∇`*)

    ちなみに、CSSよりコメントアウトした設定は下記でした。
    .post ul {
    list-style-type: disc;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-bottom: 20px;
    }

  5. はじめまして
    Celtis Gallery Sliderを是非使わせて頂きたくダウン―ドさせて頂きました。
    使用させていただきましたところ、記事表示で全く表示されない状態となっておりコメントさせて頂きました。ネットショップのようなギャラリーを作成させて頂くのにピッタリなギャラリーと思います!是非ご教授いただければ幸いです。

    ・ワードプレスのテーマは「ProtoPress」を使用
    ・Celtispack プラグインインストール済
    ・SlimJetpackのインストール及び有効化済

    です。

    1. ProtoPress テーマを手元のローカル環境に入れて確認しましたが、こちらでは問題なく動作しました。
      Celtispackプラグインの動作には、WP3.9 以上、PHP5.3 以上である必要があります
      また、他のプラグインの影響をうけて動作しない場合もありますので、SlimJetpack 以外の他のプラグインを停止させて試してみてください

  6. 早速のご返信ありがとうございます。

    動作環境を確認したところ、
    WP4.3
    PHP5.4
    となっております。

    また、SlimJetpack以外のプラグインを停止させて画面を確認しましたが、
    やはり表示がされておらず、変わりに長方形の黒い帯のような画像が投稿画面に表示されました。

    メディアライブラリから選択した画像のピクセルは560 × 619を6画像選択し、ギャラリーを作成→TypeをFlex Sliderを選択です。

    Celtis プラグインパックのThumbnail optimizeは有効にしており、
    [サムネイル再作成サムネイル表示時にサイズを確認して、メディア設定値と異なる場合は再作成にチェックしています。

    WPのテーマ編集からのPHPソースなどは詳しくありませんので、カスタマイズしておりません。

    何か他に確認することはありますでしょうか?

    1. 確認されたブラウザは何を使用していますか

      Chrome, firefox, IE の最新版なら表示されると思うのですが、IE8以下だと表示されない場合があります(詳細には検証していませんが、いろいろ不具合が生じる場合があります)

      1. ご返信ありがとうございます。
        使用ブラウザはChromeを使用しています。

        flexsliderを選択せずに、試しにスライダーにしてみたところ右上にjavascriptを有効にしてくださいと表示されていました。

        御社のデモや他サイトのスライダーなどは問題なく閲覧できています。

        1. 他のテーマに切り替えると動作しますか?
          ProtoPress テーマはスライダー機能が含まれているようですので、何か影響を受けてjavascript でエラーが起きて機能していないのかも知れません

  7. 引き続きご返信ありがとうございます。

    ProtoPress→Twenty Fifteenにテーマを切り替えたところ

    正常に機能しました。はじめて見れたので感動しました。

    テーマはProtoPressで使いたいのですが、何か方法はありますでしょうか?

    またスライダーの背景を白にできることは可能でしょうか?

    とても便利な機能だけにどうしても使いたくて、何度も申し訳ありません。

    1. ProtoPress テーマに関しては、手元では何もカスタマイズしない状態で一応動作しているのですが、おそらくテーマで使っている Javascript との相性と言いますか、何か不具合があると思われますので同時に使用するのは難しいのかも知れません

      色の変更は、CSSで行うことが出来ます
      CSS についてはお分かりでしょうか
      以下のクラスの #222222 となっている2箇所で黒色を指定していますので、ここを任意の色コードにすればOKです

      .flexslider {
      background: #222222;
      border: 2px solid #222222;
      margin: 0 0 40px;
      }

      /* キャプション/説明部の表示 */
      .flex-info {
      background: #222222;
        opacity: 0.6;
      color :white;
      margin: 0 auto;
      position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 50%;
      }

      CSSを変更する手段は、子テーマだったり、テーマやプラグインによってはカスタムCSS機能としてサポートしていたりと、いろいろありますのでやりやすい方法で修正して下さい

  8. ご返信ありがとうございます。
    ProtoPress テーマを変更し、使用させて頂く形を取ろうと思います。
    最後にネットショップの商品などの掲載しようと思いますが、商用利用は可能でしょうか?

    1. 自由に使って下さい
      一応プラグインのライセンスとしては、GPLv2 です
      License URI: http://www.gnu.org/licenses/gpl-2.0.html
      また、利用している FlexSlider 部に関しては MIT ライセンスですので商用利用可です

      但し、本ソフトウェアを使用した事による、いかなる損害も一切の責任を負いませんので、自己責任の上でご使用下さい

  9. 度重なる、ご対応ありがとうございました。
    とても素晴らしいプラグインだと思います。

    何度もご丁寧にアドバイス頂きましてありがとうございました。

  10. 初めまして。
    こちらのプラグインを利用させていただきたく、
    手順通りに準備して、作業したのですが
    投稿)新規追加 -> メディアを追加 -> ギャラリーを作成
    その後に type:flexslider が表示されません。

    JetPackも有効になっていますが、
    他になにか必要な作業などあるのでしょうか?

    テーマは自作中です。
    それが原因でしょうか?
    ちなみにJetPackとceltispackを有効にしたところギャラリー編集画面に
    種類:サムネイルグリッド、スライドショー
    という項目が増えていました。

    アドバイスいただけますとありがたいです。

    1. 管理画面の設定->Celtisプラグインパックから Thumbnail Optimize のサムネイル再生成と Gallery Slider が有効化されているか確認して下さい

      有効化しているのにうまくいかない場合は、公式テーマの Twenty Fifteen や Twenty Sixteen を使って表示されるか確認してみてください

      1. ありがとうございました!

        有効になっていないのが原因でした。
        思い通りの動きになりそうです。

        すばらしいプラグインだと思います。
        今後とも活用させていただきます。
        ありがとうございました^^

  11. はじめまして。
    大変便利なプラグインで使わせて頂いております!

    自分ではうまくできないなかったので質問させてください。
    テーマは自作のものを使っています。

    『jquery.flexslider_custom.js』にて
    //FlexSlider: Default Settingsの箇所にある(1109行目あたり)
    manualControls: ” ”

    manualControls: “.flex-control-nav li”
    に変更したのですが効いてないようです。

    他に変更する箇所がありますでしょうか?
    (色々調べてみたのですが見当違いのところを直しているかもしれません・・・)

    やりたいことは、
    .flex-activeクラスをimgタグ(画像そのもの)ではなく、liタグにつけたいです。
    (after擬似要素を入れたい為です。)

    お忙しいかと存じますが、アドバイスいただけますと幸いです。

    1. 『jquery.flexslider_custom.js』 の 1094行目の controlNav を false にする必要があるみたいです

      controlNav: false, //Boolean: Create navigation for paging control of each slide? Note: Leave true for manualControls usage

      こちらの環境ではうまくいったので試してみて下さい

      1. ご丁寧にありがとうございます!

        試してみたのですが、こちらの環境では上手くいかず、
        imgタグに.flex-activeクラスがついた状態になります。

        jsファイルは、
         controlNav: false,
         manualControls: “.flex-control-nav li”,
        以外は触っていません。

        1つ1つプラグインを外してみたり、テーマをTwenty Fifteenにしてみたりしたのですが変わらず・・・
        PHPのバージョンは5.6.22なので問題ないかと思うのですが。。。
        他に原因となりそうな点はありますでしょうか?
        何度も申し訳ありません。

        1. 私の勘違いで、一つ上のメインスライドの li タグを見てしまっていました m(__)m

          申し訳ないので、特別に直接コードを修正する方法での対応を参考までに提示します

          285行目 set: function() 内の slider.controlNav の下に以下を追加 (slider.controlNav はそのまま残してください)

          slider.controlNavli = $(‘.’ + namespace + ‘control-nav li ‘, (slider.controlsContainer) ? slider.controlsContainer : slider);

          これで flex-active クラスをつける対象を img から li に変更しています

          次に288行目 active: function() 内の slider.controlNav.—— の controlNav 部分を先ほど追加した名前 controlNavli に書き換えます

          これで li タグに flex-activeクラスがつきます
          ちょっと強引なやり方ですが試してみて下さい

          1. 何度もご丁寧に対応いただきましてありがとうございました!

            おかげさまでやりたいことが実現できてうれしいです。

            今後とも使わせていただきます。

コメントを残す

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss