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

cocoonのカルーセルをカスタマイズ

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

今回のカスタマイズの目的
  • 表示する記事を指定したい
  • 表示する画像の順番を指定したい
  • トップページにだけ表示したい
  • スマホの時だけ表示したい
  • 画像を画面幅いっぱいに表示したい
  • 画像を1枚ずつ表示したい

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

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

スポンサーリンク

カスタマイズ概要

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

コードを追加する場所
  1. javascript.js
  2. main-before.php
  3. 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

タイトルとURLをコピーしました