【Cocoon】カルーセルを1枚ずつスライドさせる方法【コピペでOK】

こんにちは!悠です!

 

突然ですが、「カルーセル」というものをご存じでしょうか?

カルーセル(carousel)とは、メリーゴーランドのような回転木馬を意味する言葉で、そこから転じて左右に写真や記事を切り替えながら移動できるWebページの表示領域を意味するようになりました。

当サイトのトップページにも配置してあります。(下画像の赤枠内)

 

これがあるとサイトが少し華やかになりますよね!

そこで今回は、

『Cocoon』でカルーセルを設置する方法と、カルーセルを1枚ずつスライドさせる方法

をご紹介していこうと思います。

スポンサーリンク
スポンサーリンク

カルーセルを設置する方法

WordPressの管理画面を開き、「Cocoon設定」→「カルーセル」を選択します。

 

カルーセルの表示

プルダウンメニューから、カルーセルを表示させたい位置を指定します。

私の場合はフロントページのみに表示させています。

 

スマートフォンでもカルーセルを表示させたい場合は、「スマートフォンで表示」にチェックを入れます。

 

表示内容

カルーセルに表示させる記事の内容を「カテゴリー別」、「タグ別」で指定することができます。

特に表示させる内容を決めていない場合は、「人気記事」の欄にチェックを入れておきましょう。

 

カルーセルの外観・動作設定

  • カルーセルの並び替え:ランダム、投稿日(降順)、更新日(降順)で指定します。
  • 最大表示数:カルーセルに表示する記事数を指定します。
  • 枠線の表示:カルーセルに表示する記事に枠線を追加します。
  • オートプレイ:一定間隔で自動的に記事がスライドするようになります。
  • オートプレイインターバル:オートプレイで記事がスライドする間隔を指定します。

 

オートプレイインターバルは、デフォルトの5秒がちょうどよく感じました!

 

カルーセルを1枚ずつスライドさせる方法

「Cocoon」のカルーセルは、デフォルトの状態では一定間隔で全ての記事がスライドします。

 

これだと少しせわしない印象を受けるので、一定間隔で1記事だけスライドするように変更するように変更します。

 

この方法は、「Cocoon」のテーマに関するお問い合わせフォーラムで、「Cocoon」製作者のわいひらさんから教えていただきました。そのトピックはこちらです。

 

functions.phpにコードを追加する

WordPressの管理画面から、「外観」→「テーマエディター」と選択します。

 

右側の「テーマのための関数(functions.php)」を選択します。

 

ファイルの内容に記載されている「以下に子テーマ用の関数を書く」の下に、次のコードをコピペして貼りつけます。貼りつけたら「ファイルを更新」をクリックします。

//カルーセルを1枚ずつスライドする。
if ( !function_exists( 'wp_enqueue_slick' ) ):
function wp_enqueue_slick(){
  if (is_carousel_visible()) {
    wp_enqueue_style( 'slick-theme-style', get_template_directory_uri() . '/plugins/slick/slick-theme.css' );
    //Slickスクリプトの呼び出し
    wp_enqueue_script( 'slick-js', get_template_directory_uri() . '/plugins/slick/slick.min.js', array( 'jquery' ), false, true  );
    $autoplay = null;
    if (is_carousel_autoplay_enable()) {
      $autoplay = 'autoplay: true,';
    }
    $data = minify_js('
              (function($){
                $(".carousel-content").slick({
                  dots: true,'.
                  $autoplay.
                  'autoplaySpeed: '.strval(intval(get_carousel_autoplay_interval())*1000).',
                  infinite: true,
                  slidesToShow: 6,
                  slidesToScroll: 1,
                  responsive: [
                      {
                        breakpoint: 1240,
                        settings: {
                          slidesToShow: 5,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 1023,
                        settings: {
                          slidesToShow: 4,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 834,
                        settings: {
                          slidesToShow: 3,
                          slidesToScroll: 1
                        }
                      },
                      {
                        breakpoint: 480,
                        settings: {
                          slidesToShow: 2,
                          slidesToScroll: 1
                        }
                      }
                    ]
                });
              })(jQuery);
            ');
    wp_add_inline_script( 'slick-js', $data, 'after' ) ;
  }

}
endif;

 

ソースコード内のslidesToScrollの値を1にすることで、カルーセルが1記事ずつスライドするようになります。

 

slick dotsを非表示にする(任意)

functions.phpにコードを追加することで、カルーセルが1記事ずつスライドするようになったと思います。

ここでカルーセルを確認すると、下にスライドの移動を示す黒点(slick dots)が表示されています。

 

完全に好みの問題になるのですが、私はこの部分は不必要に感じたので、非表示にする方法をご紹介いたします。

 

WordPressの管理画面から、「外観」→「テーマエディター」と選択します。

 

右側の「スタイルシート(style.css)」を選択します。

 

ファイルの内容に記載されている「必要ならばここにコードを書く」の下に、次のコードをコピペして貼りつけます。

.slick-dots {
	display: none !important;
}

 

これで下画像のようにslick dotsを消すことができます。

まとめ

以上が、『Cocoon』でカルーセルを設置する方法と、カルーセルを1枚ずつスライドさせる方法でした。

カルーセルを設置することで、昔書いた記事を読者に発見してもらいやすくなります。

ぜひ試してみてくださいね!

では、ここまで読んでいただきありがとうございました!

 

プログラムの勉強に活用した参考書

私がHTML、CSS、JavaScriptの基本的な仕組みを勉強するのに活用した参考書です。

どちらも初心者でもわかりやすい簡単な表現で書かれていて、コーディングの例題も豊富なので、これからプログラムの勉強を始めてみたい方におすすめです(*´▽`*)

コメント