Cocoonのカルーセル（画像のスライドショー）をカスタマイズしました。※サンプルページ
- 表示する記事を指定したい
- 表示する画像の順番を指定したい
- トップページにだけ表示したい
- スマホの時だけ表示したい
- 画像を画面幅いっぱいに表示したい
- 画像を1枚ずつ表示したい
やり方を調べてみたら、slick(スリック)というjQuery？のプラグイン？を導入するのが良いという情報が多数ありました。でも「？」だらけの私には難しそう・・
さらに調べてみると、slickはCocoonに実装されている？という情報も・・(混乱)。その後、色々あって何とか完成したので手順を纏めておきます。
カスタマイズ概要
基本的には以下の3箇所にコードを追加して完成です。最初にイメージしてたよりは少ない手順でカスタマイズできました。
- javascript.js
- main-before.php
- style.css
Cocoonの設定
2019年11月頃のバージョンアップ以降、画像が縦並びに表示されてしまいました。Cocoon設定の「カルーセル」→「カルーセルの表示」を表示しない以外にして改善。
そうなると、PCやタブレットで閲覧した時にデフォルトのカルーセルが表示されますが、非表示にする方法は以降で説明します。
javascript.js【全体定義】
◾️外観 → テーマエディター → javascript.js
jQuery(function($){
$('.slider').slick({
autoplay:true,
autoplaySpeed:4500,
fade:true,
speed:900,
});
$('.slider').offset({
top:80, left:0});
});.slick
オートプレイスピードの数値を変えれば次の画像に切り替わるまでの時間を調整できます。今回は「fade(フェードイン&アウト)」も有効にしました。そちらも「speed」で時間の調整が可能です。
.offset
画像の位置調整は「offset」を使用します。試しに色々やってみた結果、上記のコードが完成しました。
場合によっては不要かも知れませんが、恐らく数値の調整が必要になるかと思います。
main-bedore.php【画像とリンク先の指定】
◾️外観 → テーマエディター → tmp-user → main-before.php
<?php if(wp_is_mobile() && is_front_page()) : ?>
<ul class="slider">
<li><A href="ページリンク①"><img src="画像リンク①" /></A></li>
<li><A href="ページリンク②"><img src="画像リンク②" /></A></li>
<li><A href="ページリンク③"><img src="画像リンク③" /></A></li>
</ul>
<?php endif; ?>ページリンクには画像をクリックした際に飛ばせたいページのURL、画像リンクには表示させる画像のURLを指定します。
スマホのトップページにだけ適用
普段はココでつまづくのですが、奇跡的に複数条件を適用する事ができました。
<?php if(wp_is_mobile() && is_front_page()) : ?>表示させる画像とリンク先を指定
コード内の「リンク先」と「画像リンク」は、それぞれ該当するURLに変更してください。
| 名称 | 内容 |
| ページリンク | 画像をクリックした際のリンク先URL |
|---|---|
| 画像リンク | 表示させる画像のURL |
style.css【画像の位置調整】
ここからは必須ではありませんので、微調整が必要な場合の参考にしてください。
画像を画面幅いっぱいに
画像を画面の幅いっぱいにするために以下のコードを追加しました。
/**カルーセル**/
.slider{
width: 100vw;
padding: 0;
margin: 0;
}標準のカルーセルを非表示に
スマホを横向きにしたりタブレットで見ると既存のカルーセルと今回作ったスライダーが重複して表示されるので、デフォルトのカルーセルを非表示にしました。
/* とにかく非表示 */
.carousel {
display: none !important;
}/* スマホだけ非表示 */
@media screen and (max-width: 750px){
.carousel {
display: none !important;
}
}ドットが表示されない
本来は「dots:true」で画像の下にドットが表示されるはずですが、何をやっても表示されていません。
ドットが無いとスライドショーである事が見ている人に伝わらないので、不便とまではいきませんが「不親切」な状態かなと感じています。時間は掛かりそうですが何とか表示できる様に頑張ってみます。
↓やっとドットが表示できた件
Comment