こんにちは！悠です！
突然ですが、「カルーセル」というものをご存じでしょうか？
カルーセル（carousel）とは、メリーゴーランドのような回転木馬を意味する言葉で、そこから転じて左右に写真や記事を切り替えながら移動できるWebページの表示領域を意味するようになりました。
当サイトのトップページにも配置してあります。（下画像の赤枠内）
これがあるとサイトが少し華やかになりますよね！
そこで今回は、
をご紹介していこうと思います。
カルーセルを設置する方法
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の基本的な仕組みを勉強するのに活用した参考書です。
どちらも初心者でもわかりやすい簡単な表現で書かれていて、コーディングの例題も豊富なので、これからプログラムの勉強を始めてみたい方におすすめです(*´▽｀*)
コメント