Fieldとslick.jsを使って1つ目のスライドを動画、2つ目以降は画像にする方法が知りたい。本記事ではこのようなカスタマイズ方法を実現します。Field+slick.jsを使ってカスタマイズをすることができます。この登録方法は管理画面から可能となっています。これならクライアント側でも自由に登録が可能となります。Fieldとslick.jsを使った一般的なカスタマイズ方法は下記を参考にしました。本当にありがとうございます🙇‍!この記事ではすべて画像の場合であれば問題ないのですが、1枚目だけ動画の場合のカスタマイズを構築してみました。要望によってはメインビジュアルで動画→画像と見せたい場合もあるかと思います。そんなときに使えるかと思います。Fieldで管理画面に登録画面を追加するまずは、functions.phpに下記のソースコードを貼り付けます。4);今回はスマホが必要なかったため、コメントアウトして削除しています。必要であれば追加してください。//ラベル),注意点としては、こちらを追加しています。動画URLをテキストで取得して表示させるためです。Fieldと同じような画面が、管理画面に登録されていると思います。ここからテキストや画像を埋め込んでいきます。動画のURLについては、2つ目、3つ目は空白のままでOKです。表示する数は追加することもできます。設定画面が終了したら、HTML/CSS/JavaScrptのソースコードを記入していきます。CSSScssで記入しているので注意。});});解説こちらはSlickスライダーを使用しており、スライドの表示と制御を行っています。lazyLoad:progressiveというオプションが指定されているので、画像の遅延ローディングが有効になっています。これは、data-lazy属性を使用して、画像の読み込みを遅らせるために使用されます。そのため、src属性は使用しておりません。src属性を使用して画像を即時に読み込む場合は、Slickスライダーの設定からlazyLoadオプションを削除または変更する必要があります。lazyLoadオプションを無効にするには、Slickスライダーの設定からこのオプションを削除し、HTMLタグでsrc属性を使用してください。Fieldの部分の解説です。top_sliderオプションの中からtop_slider_groupという配列を取得します。Fieldはとても便利なのでぜひ活用してみてくださいね。Reserved.プライバシーポリシー|サイトマップ|特定商取引法に基づく。