スマホのトップページにオリジナルのカルーセルを表示【Cocoon】

Cocoonのカルーセル（画像のスライドショー）をカスタマイズしました。※サンプルページ

やり方を調べてみたら、slick(スリック)というjQuery？のプラグイン？を導入するのが良いという情報が多数ありました。でも「？」だらけの私には難しそう・・

さらに調べてみると、slickはCocoonに実装されている？という情報も・・(混乱)。その後、色々あって何とか完成したので手順を纏めておきます。

カスタマイズ概要

基本的には以下の3箇所にコードを追加して完成です。最初にイメージしてたよりは少ない手順でカスタマイズできました。

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に変更してください。

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」で画像の下にドットが表示されるはずですが、何をやっても表示されていません。

ドットが無いとスライドショーである事が見ている人に伝わらないので、不便とまではいきませんが「不親切」な状態かなと感じています。時間は掛かりそうですが何とか表示できる様に頑張ってみます。

↓やっとドットが表示できた件

slickのdotsが表示されない問題を泥臭く解決【cocoon】

cocoonでslickを利用してスライドショーをカスタマイズしたがドット(dots)がどうしても表示されない。位置やサイズではなくslick-dotsのクラス名を変更して新たにドットのコード作成と適用で直りました！

unity-right.com