こんにちは!悠です!
突然ですが、「カルーセル」というものをご存じでしょうか?
カルーセル(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の基本的な仕組みを勉強するのに活用した参考書です。
どちらも初心者でもわかりやすい簡単な表現で書かれていて、コーディングの例題も豊富なので、これからプログラムの勉強を始めてみたい方におすすめです(*´▽`*)
コメント