【Cocoon】カルーセルの表示数を変更する方法【2023年最新】
2023年3月22日
WordPressの無料テーマ「Cocoon」でカルーセルの表示件数を変更する方法を紹介します。
この記事の具体的な解説手順はこちらです。
- カルーセルの設定方法
- カルーセルの表示件数の変更方法
では、早速本題に入っていきます！
カルーセルの表示方法
初めに、Cocoonでカルーセルを表示する方法を紹介します。
※カルーセルの表示方法が分かっている方は、飛ばしていただいて問題ないです。
カルーセルの表示手順
１．「Cocoon設定」⇒「カルーセル」タブを選択します。
２．カルーセルタブで「カルーセルの表示」をお好みの設定に変更します。
スマートフォンで表示したい場合は、「スマートフォンで表示」にチェックを入れてください。
上記の手順でカルーセルが表示されるようになります。
カルーセルの表示件数の変更
本題のカルーセルの表示件数を変更する方法を紹介します。
表示件数の変更手順
１．「外観」から「テーマファイルエディター」を選択し「Cocoon Child: テーマのための関数 (function.php)」を開きます。
※選択するテーマは必ず「Cocoon Child」にしましょう。
こちらにカルーセルの表示設定の件数を記述します。
以下のコードをもとに、設定してください。
////カルーセルを1枚ずつスライドさせる
//Slickの読み込み
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: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1240,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 1023,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 834,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
})(jQuery);
');
wp_add_inline_script( 'slick-js', $data, 'after' ) ;
}
}
endif;コードの解説
・breakpointは画面のデバイスサイズを設定しています。
1240と1023はPC、834はタブレット、480はスマホの設定となります。
・slideToShowはスクロールの表示件数を設定しています。
・slideToScrollは一度にスクロールされる件数を設定しています。
それぞれのbreakpointに応じて、slideToShowを変更します。
一度に、スクロールされる件数を変更したい場合は、slideToScrollも変更してください。
例）
スマホ画面で、スクロールの表示件数を3つにして、1つずつスライドさせたい場合は、以下のように設定します。
{
breakpoint: 480,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
}設定が完了したら、ファイルを保存します。
上記の設定手順でカルーセルの表示件数を変更することができます。
補足
Cocoon設定でカルーセルを表示した後に、function.phpに上記のコードが記述されている場合があります。
その際は、slideToShowとslideToScrollのみ設定を変更するようにしてください。
まとめ
Cocoonでカルーセルの表示件数を変更する方法を紹介しました。
当ブログでは、Cocoonのカスタマイズについて他の記事でも様々な内容を取り上げています。
また、当ブログではブログのカスタマイズをサポートします。
『こんなブログサイトのデザインに変更したい』『サイトの余白を調整したい』『モバイル表示でのデザインを変更したい』など、どんな内容でも構いません。
ご要望通りにデザインをカスタマイズします！
この記事を読んで、不明点があればお気軽にご連絡ください。
最後まで読んでいただきありがとうございました。