サポート » テーマ » raindrops で推奨のMeta Sliderを違うスライダープラグインに変更

  • 解決済 かわねこ

    (@wpmid)


    こんにちは。
    raindrops 1.472 を利用させていただいています。
    ステキなテーマでとても気に入っています。
    子テーマを作成済みです。

    raindropsはプラグインMeta Sliderをインストールすることでトップページにスライダーを容易に表示できるようになっていますが、他のスライダープラグインを利用したいと思い、header-front.phpをコピーしてみたりしましたが、知識不足で手詰まりとなっています。

    できれば、カスタマイズ>アドオン>トップページにスライダーを表示
    で管理できると嬉しいのですが、直に書いてでもかまいませんので、どこに変更を加えればよいか、ご指南いただけますとありがたいです。
    よろしくお願いいたします。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • nobita

    (@nobita)

    こんにちは、

    テーマを利用していただきありがとうございます。

    Meta Sliderスライダーを表示する仕組みについて、

    ヘッダー画像を表示する関数 raindrops_the_header_image()には、raindrops_header_image_home_urlやraindrops_header_image_elementsといったフィルターがあります。

    Meta Sliderは、これらのフィルターを使って動作します。
    raindrops_header_image_home_urlは、ヘッダー画像をクリックするとホームへのリンクがある場合、
    raindrops_header_image_elementsは、リンクがない場合に動作します。

    テンプレートは、header.phpが使われます。

    どんなプラグインを使おうとしているのかわからないので、手作りでCSSスライダーを追加する例を書いておきます。
    functions.php に以下のPHPを追加します。

    
    <?php
    add_filter( 'raindrops_header_image_home_url', 'my_insert_slider' );
    add_filter( 'raindrops_header_image_elements', 'my_insert_slider' );
    
    function my_insert_slider( $html ) {
    
    	$slider = '<div id="my_insert_slider" style="width:100%;overflow:hidden;">
    			<h1 id="slider_title">site title</h1>
    	<figure style="max-width:none;">
    	<img src="https://dummyimage.com/1600x240/336699/fff" alt><img src="https://dummyimage.com/1600x240/27ae60/fff" alt><img src="https://dummyimage.com/1600x240/e74c3c/fff" alt><img src="https://dummyimage.com/1600x240/8e44ad/fff" alt><img src="https://dummyimage.com/1600x240/d35400/fff" alt>
    	</figure>
    	</div>';
    
    	if( is_home() ) { //どのページで表示するか条件分岐
    		
    		return $slider;
    	}	
    	return $html;
    }
    ?>
    

    カスタマイザーの「追加CSS」

    
    @keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
    }
    
    #slider_title{
    position:absolute;
    top:1em;
    left:1em;
    z-index:1;
    color:#fff;
    font-weight:bold;
    }
    #my_insert_slider { overflow: hidden; }
    #my_insert_slider figure img { width: 20%; float: left; }
    #my_insert_slider figure { 
      position: relative;
      width: 500%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 30s slidy infinite; 
    }
    

    実際のコードは、

    plugins/plugins-presentation.phpの中にあります。

    動作の仕組みは、
    テーマをインストールした後に、プラグインがアクティベートされた時だけ動作する。
    (すでにアクティベートしている場合は、なんてこととするんだってなるので)
    こういうプラグインは、大抵カスタム投稿タイプを使っているので、使っているカスタム投稿タイプから、
    スライダーIDなどを取得して、先のフィルターの画像要素の部分にあたるところで、do_shortcode()して
    表示しています。
    テーマインストール後アクティベートされていれば、カスタマイザーのアドオンセクションに管理項目を表示するといった段取りになっていたと思います。

    • この返信は3 ヶ月前に  nobita さんが編集しました。
    • この返信は3 ヶ月前に  nobita さんが編集しました。
    • この返信は3 ヶ月前に  nobita さんが編集しました。

    nobita さま、お世話になっています。
    早くに詳しくお返事いただき、感謝いたします。

    手作りでCSSスライダー

    とても参考になります。ありがとうございます。
    この方法をはじめましたが、私の能力では、気の利いたスライダーにならないため、
    途中で断念してしまいました。(今後の課題として記録させていただきました)

    今回はプラグインを差し替える工程を取り入れたいと思います。
    因みに私の使いたいスライダーのプラグインで生成されたショートコードは
    [wdps id="1"]
    です。

    その場合、>手作りのスライダーの

    functions.php に以下のPHPを追加します。

    から行って、後半の

    スライダーIDなどを取得して、先のフィルターの画像要素の部分にあたるところで、do_shortcode()して表示しています。

    に進む手順ということでしょうか?
    理解力に乏しく申し訳ありません。よろしくお願いいたします。

    nobita

    (@nobita)

    プラグインの名前は解かりますか?

    こんなかんじでどうでしょう

    
    <?php
    add_filter( 'raindrops_header_image_home_url', 'my_insert_slider' );
    add_filter( 'raindrops_header_image_elements', 'my_insert_slider' );
    
    function my_insert_slider( $html ) {
    
    	$slider = '<div id="my_insert_slider" style="width:100%;overflow:hidden;">%1$s</div>';
    
    	if ( ( is_home() ) {
    
    		return sprintf( $slider, do_shortcode( '[wdps id="1"]' ) );
    	}
    	return $html;
    }
    ?>
    
    • この返信は3 ヶ月前に  nobita さんが編集しました。
    • この返信は3 ヶ月前に  nobita さんが編集しました。

    nobitaさま、早々にありがとうございます。
    お返事頂いた中の[wdps id="1"]のスライダープラグインの名称は「Post Slider WD」です。

    実はスライダーの件で諦めていた「raindrops」を、サーバーの移転をきっかけにまた復活してみようという経緯がありました。
    (組み込んだら当該サイトをnobitaさまお示ししようと思いましたので、下記が必要かどうかまで分らなかったのですがお伝えします)

    新たに「Post Slider WD」を導入して、今しがたスライダーの要素を組み込んでいました。
    ところが自分にはあまり使い勝手が良くないことが解り、今まで使っていた「Smart Slider 3」(ショートコードは[smartslider3 slider=1]を復活させることを検討中です。
    ということで二転三転して大変申し訳無いのですが、今、二種類のプラグインで迷ってるところです。

    しかし、先にお伝えしているショートコードのプラグイン名

    Post Slider WD

    を例にしてご教示いただければ応用しますので、どうぞよろしくお願いいたします。

    nobita

    (@nobita)

    コードに間違いがあったので、再掲します。

    Smart Slider 3

    
    <?php
    add_filter( 'raindrops_header_image_home_url', 'my_insert_slider' );
    add_filter( 'raindrops_header_image_elements', 'my_insert_slider' );
    function my_insert_slider( $html ) {
    
    	$slider = '<div id="my_insert_slider" style="width:100%;overflow:hidden;">%1$s</div>';
    
    	if (  is_home() ) {
    		return sprintf( $slider, do_shortcode( '[smartslider3 slider="1"]' ) );
    	}
    	return $html;
    }
    ?>
    

    Post Slider WD

    
    <?php
    add_filter( 'raindrops_header_image_home_url', 'my_insert_slider' );
    add_filter( 'raindrops_header_image_elements', 'my_insert_slider' );
    function my_insert_slider( $html ) {
    
    	$slider = '<div id="my_insert_slider" style="width:100%;overflow:hidden;">%1$s</div>';
    
    	if (  is_home() ) {
    		return sprintf( $slider, do_shortcode( '[wdps id="1"]' ) );
    	}
    	return $html;
    }
    ?>
    

    ショートコードは、wps じゃなくて wdpsというのもあるんですか?

    Post Slider WDは、フリー版だと、サイズの調整機能が見つからなかったのですが、小さく表示されるようですね。

    実はスライダーの件で諦めていた

    今後の役に立てたいので、どのような事であきらめていたのか教えていただけるとうれしいです

    • この返信は3 ヶ月前に  nobita さんが編集しました。

    nobitaさま、お世話になります。

    いまかなりの時間をかけてお返事を送信したのですが、消えてしまいました(¯―¯٥)

    概略は、変化がなく、私の方法がまちがっていたのか
    ということと
    レイアウトが崩れてしまった(スティッキーウィジェット)
    ご質問の返事

    等です。

    大変申し訳無いのですが、今週中、多用で忙しく、レスポンスが悪くなりますので、もう少し経ちましたら気を取りなおして書き直したいと思います。
    よろしくお願いいたします。

    nobita

    (@nobita)

    mod look 管理者様

    @wpmidさんの投稿が反映していないようです。

    メールで投稿が届いていたので、内容を私の返信に追加したら、私の投稿も消えてしまいました。

    @wpmid さん

    メールが届いているので書き直す必要はありません。

    ちょっと時間がかかると思いますが、動作確認用チャイルドテーマを作成して、ダウンロードできるようにしたいと思います。

    • この返信は3 ヶ月前に  nobita さんが編集しました。

    nobitaさま、そうでしたか、良かったです!
    お手数をおかけしますがよろしくお願い致します。

    nobita

    (@nobita)

    子テーマの作成は2種類で行なっていました。
    始めのコードを
    1)Child Theme Configuratorというプラグインで作成した子テーマの functions.php に追加すると、サイトが表示されなくなった。
    2)「チャイルドテーマの作成方法」に従って子テーマを作成の functions.php に追加したがなにも変化がなかった。

    今回のスライダーをテストするためのチャイルドテーマを作ってみましたので、時間のある時にでもテストしてみてください。

    tenman.info/download/raindrops-slider.zip

    使い方

    二つのスライダープラグインを両方アクティベートしておいてから、

    チャイルドテーマをインストールして、カスタマイザーを開くとEXAMPLEというセクションが追加されていると思いますので、WDスライダーを一度選択して、保存していただき、ブログを表示するとWDスライダーが表示されます。(カスタマイザープリビューの更新は行われません)
    以降、スライダーを切り替えたり、スライダーIDを変更したりして確認作業を行ってください。

    また、何度かテーマの変更をしていく間に、「スティッキーウィジェット」が、TOPページのコンテンツ内に表示されていることに気が付きました。
    私は「エキストラサイドバー」の下に「スティッキーウィジェット」が現れると認識していたのですが、それは間違いだったのでしょうか。

    トップページの、投稿一覧の上部に表示されるウィジェットです。サイドバー等で固定表示されるようなウィジェットも「スティッキーウィジェット」といった呼ばれ方をすることがあるかもしれませんが、Raindropsの場合には投稿一覧の上部になります。

    Raindropsのスティキーウィジェットエリアは、何を考えて配置したか?なんですが、最近増えているワンページレイアウト等、トップページに直接記事を配置するような形式に対応するために設けた機能です。
    スティキーウィジェットエリアにピンナップ投稿ウィジェットを追加して、投稿IDを3つぐらいカンマ区切りで入力して、グリッドレイアウト、アイキャッチ画像を設定すると投稿がグリッド形式で表示されます。そういった表示を行うために作った機能です。

    外観>カスタマイズ からのウィジェット編集において、TOPページ以外では、「スティッキーウィジェット」の表示がなくなります。
    ダッシュボード経由ですと、「スティッキーウィジェット」の項目がなくなってはいないません。

    スティキーウィジェットは、トップページだけで表示します。例えば2ページ目以降は表示しない設定になっています。
    (ちょっとカスタマイズすると、カテゴリーやほかのアーカイブでも表示が可能です。)

    カスタマイザーは、テンプレートのこの設定を検出するため 2ページ目以降を表示している場合は、ウィジェットエリアが表示されません。

    ダッシュボード経由の、ウィジェットのページでは、常に表示されます。

    少し前に「デフォルトサイドバー側にスティッキーウィジェット」といったカスタマイズを見つけ行なった記憶があり、それが見当たらないのですが、そのことが関係ありますでしょうか?

    多分関係ないと思います。「デフォルトサイドバー側にスティッキーウィジェット」という表現だと、例えば広告ブロックなんかをサイドバーのスペースが余っていたら、その部分では常に広告ブロックを表示し続けるといった機能を示すものではないかと思います。

    「wps」は無料版か、もしかしたら他のスライダープラグインのショートコードかもしれません。(Post Slider WDはWDというサイトのプラグインなので)というのもあるんですか?

    すみません、wds の間違いでした。プロ版なので、wdpsになるんでしょうね

    今後の役に立てたいので、どのような事であきらめていたのか教えていただけるとうれしいです

    Raindrops に初めてであった時に一目惚れして導入しました。

    うれしいですね、「一目惚れ」 いい響きだなー

    2年~1年半ほど前の間だったと思うのですが、アップデートの際にレイアウトが崩れてしまって原因がわからず仕方なく「Catch Evolution」というテーマに変更していましたが、今度は「Smart Slider 3」の仕様の変更で表示されなくなってしまいました。

    気づかないうちにいろいろ迷惑をおかけしていたようでごめんなさい。いろいろやらかしてしまう事も少なくないのですが、このフォーラムに書き込んでいただければ、可能な限り対処します。よろしくお願いします。

    こういう機会でもないと、スライダープラグインを改めてみてみる事もなかったと思います。進化していますね、勉強になりました。

    • この返信は3 ヶ月前に  nobita さんが編集しました。

    nobitaさま、こんにちは。
    ちょっと時間がかかる、どころか(私にとっては)瞬時に連絡が来て、サクサクっと思い通りに表示されてました!
    びっくりしました!

    慌て者なので、子テーマをダウンロード・有効にし、最初に
    テーマの編集>子テーマの functions.php 内に書かれている順に関数を消してい行き、何もつまずくことなくあっという間に表示されました。

    あとで

    カスタマイザーを開くとEXAMPLEというセクションが追加されている

    のあたりの説明に気がついて子テーマアップから再度試し、今は「EXAMPLEセクション」が残っていて、これによってセレクトできるということでしょうか?
    そうしますと、高機能過ぎて恐縮至極です。

    今まだスライダーの内容や、コンテンツが見劣りしてしまうので、「スティッキーウィジェット」の使い方も理解できたことですし、もう少し充実させてからメンテを解いてお知らせしたいと思います。

    疑問はこれで解決しすぎなくらいでありますが、スイティッキーウィジェット活用等の理解結果を報告するまでしばらくこのままにさせていただきます。
    本当に何から何までありがとうございました。

    • この返信は3 ヶ月前に  かわねこ さんが編集しました。
    nobita

    (@nobita)

    書き忘れました

    functions.php 54行

    
    return sprintf( $slider, do_shortcode( '[wds id="' . $id . '"]' ) );
    

    フリー版で作ったので プロ版の場合は

    
    return sprintf( $slider, do_shortcode( '[wdps id="' . $id . '"]' ) );
    

    になると思うので、プロ版の場合は、その点修正してください

    • この返信は3 ヶ月前に  nobita さんが編集しました。

    ありがとうございます!了解いたしました。

    nobitaさま、お世話になります。
    ご報告が大変おくれて申し訳ありません。
    この件についてはおかげさまですぐに解決がなされました。

    他の件でつまづきページを再公開出来ないままでしたのでなかなかお返事できないでいました。
    それについて新たにトピ立たせて頂くことにし、こちらは解決済みとさせていただきます。
    本当にありがとうございました。

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • このトピックに返信するにはログインが必要です。