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; ?>トップページ &&(且つ) スマホのみ表示
普段はココでつまづくのですが、奇跡的に複数条件を適用する事ができました。
<?php if(wp_is_mobile() && is_front_page()) : ?>表示させる画像とリンク先を指定
コード内の「リンク先」と「画像リンク」は、それぞれ該当するURLに変更してください。
| 名称 | 内容 |
| リンク先 | 画像をクリックした際のリンク先URL |
|---|---|
| 画像リンク | 表示させる画像のURL |
style.css【画像の位置調整】
ここからは必須ではありませんので、微調整が必要な場合の参考にしてください。
画像を画面幅いっぱいに
画像を画面の幅いっぱいにするために以下のコードを追加しました。
/**カルーセル**/
.slider{
width: 100vw;
padding: 0;
margin: 0;
}標準のカルーセルを非表示に
スマホを横向きにしたりタブレットで見ると既存のカルーセルと今回作ったスライダーが重複して表示されるので、画面サイズに応じてカルーセルを非表示にしました。
/* カルーセル非表示 */
@media screen and (max-width: 750px){
.carousel {
display: none !important;
}ドットが表示されない
本来は「dots:true」で画像の下にドットが表示されるはずですが、何をやっても表示されていません。
ドットが無いとスライドショーである事が見ている人に伝わらないので、不便とまではいきませんが「不親切」な状態かなと感じています。時間は掛かりそうですが何とか表示できる様に頑張ってみます。
↓やっとドットが表示できた件
Comment