WordPressのギャラリーの写真をスライダーにする方法

前提条件

WordPressは基本的にはお客様でサイト管理をしやすくするためのツールなので、コーディング上でスライダー写真を設定していると、お客様が写真を変更したいといわれたら、都度制作者へ連絡する必要があったりと大変ではないですか？

今回はWordPressのブロックエディターに備わっているギャラリーに写真を追加等するだけで、スライダーの写真が変更できる仕様にしてみたいと思います。

今回はすこし分かりづらいかも知れませんが、コード内に役割を書いてますので、参考程度に理解いただければと存じます。

下記が完成イメージです。

解説＆実際のコード

if(document.querySelector(".swiper")){
const swiper_sec = new Swiper('.swiper', {
  loop: true,
});

//ギャラリーで出力された画像（＝ photos > img ） をgalleryImageに格納する。
const galleryImage = document.querySelectorAll(".photos img");

//gallay-itemsは外側のULのこと
const thumbnailWrapper = document.getElementById("ｇallay-items")

//ギャラリーで出力された画像（＝ photos > img ） の数だけ、ループさせる。
galleryImage.forEach( (image, index) => {
  //リストを作る
  const li = document.createElement("li"),
  //後で、リストの中に入れるdiv
  thumbImage = document.createElement("div")
  //写真をクリックしたら、スライドさせる
  li.addEventListener("click", function (){
    swiper_sec.slideTo(index + 1)
  })

//さっき作ったdivにクラス名を付与して、背景を入れる。
  thumbImage.classList.add("thumbnailImage")

//gallaryImageのsrc属性を image.srcで取り出している。 url("")はバックグラウンドのCSSプロパティ
  thumbImage.style.backgroundImage = `url("${image.src}")`

//liの中に、thumbImageを追加する。
//ulの中に、liを追加する。
  li.appendChild(thumbImage)
  thumbnailWrapper.appendChild(li)
})
}