{"id":26939,"date":"2025-04-19T20:33:29","date_gmt":"2025-04-19T11:33:29","guid":{"rendered":"https:\/\/motoki-design.co.jp\/wordpress\/?p=26939"},"modified":"2026-10-13T05:08:05","modified_gmt":"2026-10-12T20:08:05","slug":"gallery-block-swiper-slider","status":"publish","type":"post","link":"https:\/\/motoki-design.co.jp\/wordpress\/gallery-block-swiper-slider\/","title":{"rendered":"WordPress\u2502\u30ae\u30e3\u30e9\u30ea\u30fc\u30d6\u30ed\u30c3\u30af\u3092\u30ab\u30eb\u30fc\u30bb\u30eb\u4ed8\u30b9\u30e9\u30a4\u30c0\u30fc\u8868\u793a\u306b\u3059\u308b\u65b9\u6cd5\u2502Swiper"},"content":{"rendered":"

WordPress\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u30d6\u30ed\u30c3\u30af\u3092\u3001Swiper\u306e\u5927\u304d\u306a\u753b\u50cf\u3068\u30b5\u30e0\u30cd\u30a4\u30eb\u30dc\u30bf\u30f3\u3067\u5207\u308a\u66ff\u3048\u308b\u8868\u793a\u306b\u3057\u307e\u3059\u3002\u6307\u5b9a\u3057\u305f\u30ae\u30e3\u30e9\u30ea\u30fc\u3060\u3051\u304c\u5bfe\u8c61\u3067\u3001\u524d\u5f8c\u30dc\u30bf\u30f3\u3068Tab\u30fbEnter\u30fbSpace\u3067\u64cd\u4f5c\u3067\u304d\u307e\u3059\u3002\u81ea\u52d5\u518d\u751f\u306f\u884c\u3044\u307e\u305b\u3093\u3002<\/p>

\u52d5\u304f\u30b5\u30f3\u30d7\u30eb<\/h2>\n
\n
\"\u898b\u672c\u753b\u50cfA\"<\/figure>\n\n\n\n
\"\u898b\u672c\u753b\u50cfB\"<\/figure>\n\n\n\n
\"\u898b\u672c\u753b\u50cfC\"<\/figure>\n\n\n\n
\"\u898b\u672c\u753b\u50cfD\"<\/figure>\n\n\n\n
\"\u898b\u672c\u753b\u50cfE\"<\/figure>\n\n\n\n
\"\u898b\u672c\u753b\u50cfF\"<\/figure>\n<\/figure>\n

\u30b5\u30e0\u30cd\u30a4\u30eb\u3092\u62bc\u3059\u3068\u9078\u3093\u3060\u753b\u50cf\u306b\u5207\u308a\u66ff\u308f\u308a\u307e\u3059\u3002\u7aef\u306e\u524d\u5f8c\u30dc\u30bf\u30f3\u306f\u7121\u52b9\u306b\u306a\u308a\u307e\u3059\u3002\u753b\u50cf\u304c2\u679a\u672a\u6e80\u306e\u5834\u5408\u3084Swiper\u3092\u8aad\u307f\u8fbc\u3081\u306a\u3044\u5834\u5408\u306f\u3001\u5143\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u6b8b\u3057\u307e\u3059\u3002<\/p>

\u8907\u6570\u8a2d\u7f6e\u30681\u679a\u3060\u3051\u306e\u30ae\u30e3\u30e9\u30ea\u30fc<\/h2>

\u4e0a\u306e6\u679a\u306e\u898b\u672c\u3068\u3001\u3053\u306e2\u679a\u306e\u898b\u672c\u306f\u3001\u305d\u308c\u305e\u308c\u5225\u306e\u30dc\u30bf\u30f3\u3067\u5207\u308a\u66ff\u308f\u308a\u307e\u3059\u3002\u64cd\u4f5c\u3059\u308b\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u533a\u5225\u3067\u304d\u308b\u3088\u3046\u3001\u751f\u6210\u3059\u308b\u9818\u57df\u306b\u306f\u30da\u30fc\u30b8\u5185\u306e\u9806\u756a\u3092\u4ed8\u3051\u3066\u3044\u307e\u3059\u3002JS\u306f\u30da\u30fc\u30b8\u306b\u4e00\u5ea6\u3060\u3051\u8aad\u307f\u8fbc\u307f\u3001\u30ae\u30e3\u30e9\u30ea\u30fc\u3054\u3068\u306b\u8ffd\u52a0CSS\u30af\u30e9\u30b9\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>

\n
\"\u898b\u672c\u753b\u50cfC\"<\/figure>\n\n
\"\u898b\u672c\u753b\u50cfD\"<\/figure>\n<\/figure>

\u6b21\u306f\u753b\u50cf1\u679a\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3059\u30022\u679a\u672a\u6e80\u3067\u306f\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u4f5c\u3089\u305a\u3001\u5143\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u8868\u793a\u3092\u6b8b\u3057\u307e\u3059\u3002<\/p>

\n
\"\u898b\u672c\u753b\u50cfE\"<\/figure>\n<\/figure>

\u516c\u958b\u898b\u672c\u3067\u306fSWELL 2.19.0\u540c\u68b1\u306eSwiper 7.0.6\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u30021280px\u5e45\u3068390px\u5e45\u3067\u3001\u7247\u65b9\u306e\u753b\u50cf\u3092\u5909\u3048\u3066\u3082\u3082\u3046\u7247\u65b9\u306e\u9078\u629e\u304c\u5909\u308f\u3089\u306a\u3044\u3053\u3068\u3001\u524d\u5f8c\u30fb\u30b5\u30e0\u30cd\u30a4\u30eb\u306eEnter\u30fbSpace\u64cd\u4f5c\u3001\u753b\u50cf1\u679a\u306e\u901a\u5e38\u8868\u793a\u3092\u78ba\u8a8d\u3057\u307e\u3057\u305f\u3002\u4e0b\u306ePHP\u4f8b\u3067\u56fa\u5b9a\u3057\u3066\u3044\u308bCDN\u724811.2.10\u306e\u5b50\u30c6\u30fc\u30de\u3078\u306e\u5c0e\u5165\u306f\u3001\u3053\u306e\u516c\u958b\u898b\u672c\u3068\u306f\u5225\u306e\u78ba\u8a8d\u304c\u5fc5\u8981\u3067\u3059\u3002<\/p>

\"WAZA\u516c\u958b\u898b\u672c\u306e2\u756a\u76ee\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u30021\u679a\u76eeC\u3092\u9078\u629e\u3057\u305f\u30b5\u30e0\u30cd\u30a4\u30eb\u3068\u3001\u305d\u306e\u4e0b\u306e1\u679a\u3060\u3051\u306e\u901a\u5e38\u30ae\u30e3\u30e9\u30ea\u30fcE\u3002\"
2026\u5e7410\u67082\u65e5\u64ae\u5f71\u3002SWELL 2.19.0\u540c\u68b1\u306eSwiper 7.0.6\u3001390px\u5e45\u30022\u3064\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u72ec\u7acb\u64cd\u4f5c\u3057\u305f\u72b6\u614b\u3002<\/figcaption><\/figure>

\u8cbc\u308a\u4ed8\u3051\u5148\u3068\u9069\u7528\u7bc4\u56f2<\/h2>

\u5b50\u30c6\u30fc\u30de\u306b waza-gallery.js \u3068 waza-gallery.css \u3092\u4f5c\u6210\u3057\u3001\u4e0b\u306eJS\u30fbCSS\u3092\u305d\u308c\u305e\u308c\u4fdd\u5b58\u3057\u307e\u3059\u3002functions.php\u306b\u306fPHP\u4f8b\u3092\u4e00\u5ea6\u3060\u3051\u8ffd\u52a0\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u65e2\u5b58\u306eSwiper\u8aad\u307f\u8fbc\u307f\u30b3\u30fc\u30c9\u3068\u65e7carousel\u7528\u30b3\u30fc\u30c9\u306f\u4f75\u7528\u305b\u305a\u3001\u5c0e\u5165\u524d\u306b\u30d5\u30a1\u30a4\u30eb\u3092\u30d0\u30c3\u30af\u30a2\u30c3\u30d7\u3057\u307e\u3059\u3002PHP\u958b\u59cb\u30bf\u30b0\u306e\u5185\u5074\u3078\u8cbc\u308a\u3001\u958b\u59cb\u30bf\u30b0\u3092\u91cd\u8907\u3055\u305b\u306a\u3044\u3067\u304f\u3060\u3055\u3044\u3002<\/p>

\u30ae\u30e3\u30e9\u30ea\u30fc\u30d6\u30ed\u30c3\u30af\u306e\u300c\u9ad8\u5ea6\u306a\u8a2d\u5b9a \u2192 \u8ffd\u52a0CSS\u30af\u30e9\u30b9\u300d\u306b waza-gallery-slider u-lb-off<\/code> \u3092\u5165\u529b\u3057\u307e\u3059\u3002\u753b\u50cf\u30ea\u30f3\u30af\u306f\u300c\u306a\u3057\u300d\u306b\u3057\u307e\u3059\u3002u-lb-off\u306fSWELL\u306e\u753b\u50cf\u62e1\u5927\u3092\u6b62\u3081\u308b\u30af\u30e9\u30b9\u3067\u3059\u3002\u3053\u306e\u4f8b\u306f\u753b\u50cf\u5c02\u7528\u3067\u3001\u30ad\u30e3\u30d7\u30b7\u30e7\u30f3\u3084\u753b\u50cf\u30ea\u30f3\u30af\u3092\u30b9\u30e9\u30a4\u30c0\u30fc\u3078\u5f15\u304d\u7d99\u304e\u307e\u305b\u3093\u3002\u901a\u5e38\u306e\u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u3092\u5bfe\u8c61\u3068\u3057\u3001Pjax\u3084\u5f8c\u304b\u3089\u8ffd\u52a0\u3059\u308b\u30d6\u30ed\u30c3\u30af\u306f\u5bfe\u8c61\u5916\u3067\u3059\u3002<\/p>

Swiper\u3068\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080PHP<\/h2>

\u3053\u306e\u4f8b\u3067\u306fSwiper 11.2.10\u3092\u56fa\u5b9a\u3057\u3066\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002CDN\u3078\u306e\u30a2\u30af\u30bb\u30b9\u304c\u5fc5\u8981\u3067\u3059\u3002\u30c6\u30fc\u30de\u3084\u5225\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u304cSwiper\u3092\u4f7f\u3046\u30da\u30fc\u30b8\u3067\u306f\u4e8c\u91cd\u8aad\u307f\u8fbc\u307f\u306e\u5f71\u97ff\u3092\u691c\u8a3c\u3057\u3001\u5fc5\u8981\u306a\u3089\u65e2\u5b58\u306e\u4f9d\u5b58\u95a2\u4fc2\u3078\u7d71\u5408\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>

add_action('wp_enqueue_scripts', function () {\n    if (!is_singular()) return;\n    wp_enqueue_style('waza-swiper', 'https:\/\/cdn.jsdelivr.net\/npm\/swiper@11.2.10\/swiper-bundle.min.css', array(), '11.2.10');\n    wp_enqueue_script('waza-swiper', 'https:\/\/cdn.jsdelivr.net\/npm\/swiper@11.2.10\/swiper-bundle.min.js', array(), '11.2.10', true);\n    wp_enqueue_style('waza-gallery', get_stylesheet_directory_uri() . '\/waza-gallery.css', array('waza-swiper'), '1.0');\n    wp_enqueue_script('waza-gallery', get_stylesheet_directory_uri() . '\/waza-gallery.js', array('waza-swiper'), '1.0', true);\n});<\/code><\/pre><\/div>
\u30ae\u30e3\u30e9\u30ea\u30fc\u3054\u3068\u306b\u521d\u671f\u5316\u3059\u308bJavaScript<\/h2>
(() => {\n  function start() {\n    if (typeof window.Swiper !== 'function') return;\n    document.querySelectorAll('.wp-block-gallery.waza-gallery-slider').forEach((gallery, galleryIndex) => {\n      if (gallery.dataset.wazaReady) return;\n      const sources = [...gallery.querySelectorAll('figure.wp-block-image img')];\n      if (sources.length < 2) return;\n      const root = document.createElement('section');\n      root.className = 'waza-gallery-view u-lb-off';\n      root.setAttribute('aria-label', `${galleryIndex + 1}\u756a\u76ee\u306e\u753b\u50cf\u30ae\u30e3\u30e9\u30ea\u30fc`);\n      const stage = document.createElement('div');\n      stage.className = 'swiper';\n      const wrapper = document.createElement('div');\n      wrapper.className = 'swiper-wrapper';\n      const thumbs = document.createElement('div');\n      thumbs.className = 'waza-gallery-thumbs';\n      const buttons = [];\n      const makeButton = label => {\n        const b = document.createElement('button'); b.type = 'button'; b.textContent = label; return b;\n      };\n      sources.forEach((source, index) => {\n        const img = new Image();\n        img.src = source.getAttribute('data-lazy-src') || source.currentSrc || source.src;\n        img.alt = source.alt; img.loading = 'eager'; img.setAttribute('data-luminous', 'off');\n        const slide = document.createElement('div'); slide.className = 'swiper-slide'; slide.append(img);\n        wrapper.append(slide);\n        const b = makeButton(String(index + 1));\n        b.setAttribute('aria-label', `${index + 1}\u679a\u76ee\u3092\u8868\u793a`);\n        const thumb = img.cloneNode(); thumb.alt = ''; b.replaceChildren(thumb);\n        thumbs.append(b); buttons.push(b);\n      });\n      stage.append(wrapper);\n      const controls = document.createElement('div'); controls.className = 'waza-gallery-controls';\n      const prev = makeButton('\u524d\u306e\u753b\u50cf'), next = makeButton('\u6b21\u306e\u753b\u50cf');\n      const status = document.createElement('span'); status.setAttribute('aria-live', 'polite');\n      controls.append(prev, status, next); root.append(stage, controls, thumbs); gallery.before(root);\n      let slider;\n      try {\n        slider = new Swiper(stage, { slidesPerView: 1, spaceBetween: 16, loop: false,\n          speed: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300,\n          a11y: { enabled: true, slideLabelMessage: '{{index}} \/ {{slidesLength}}' } });\n        const sync = () => {\n          const i = slider.activeIndex;\n          status.textContent = `${i + 1} \/ ${sources.length}`;\n          prev.disabled = i === 0; next.disabled = i === sources.length - 1;\n          buttons.forEach((b, j) => b.setAttribute('aria-pressed', String(i === j)));\n        };\n        prev.addEventListener('click', () => slider.slidePrev());\n        next.addEventListener('click', () => slider.slideNext());\n        buttons.forEach((b, i) => b.addEventListener('click', () => slider.slideTo(i)));\n        slider.on('slideChange', sync); sync();\n        gallery.dataset.wazaReady = '1'; gallery.hidden = true;\n      } catch (error) {\n        if (slider) slider.destroy(true, true);\n        root.remove(); console.warn('\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u901a\u5e38\u8868\u793a\u306b\u623b\u3057\u307e\u3057\u305f\u3002', error);\n      }\n    });\n  }\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once: true });\n  else start();\n  window.addEventListener('load', start, { once: true });\n})();\n<\/code><\/pre><\/div>
\u3053\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3060\u3051\u306b\u9069\u7528\u3059\u308bCSS<\/h2>
.wp-block-gallery.waza-gallery-slider[hidden] { display: none !important; }\n.waza-gallery-view { max-width: 100%; margin-block: 1.5em; }\n.waza-gallery-view .swiper { width: 100%; overflow: hidden; }\n.waza-gallery-view .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 \/ 9; object-fit: contain; }\n.waza-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 12px; }\n.waza-gallery-view button { min-height: 44px; padding: 8px; border: 1px solid currentColor; background: #fff; color: #222; cursor: pointer; }\n.waza-gallery-view button:disabled { opacity: .45; cursor: default; }\n.waza-gallery-view button:focus-visible { outline: 3px solid #865d00; outline-offset: 2px; }\n.waza-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 5px; }\n.waza-gallery-thumbs button { flex: 0 0 72px; }\n.waza-gallery-thumbs img { display: block; width: 100%; height: 40px; object-fit: cover; }\n.waza-gallery-thumbs [aria-pressed="true"] { border: 3px solid #865d00; }\n<\/code><\/pre><\/div>
\u78ba\u8a8d\u3068\u623b\u3057\u65b9<\/h2>
PC\u30fb\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u5e45\u3067\u753b\u50cf\u3068\u30dc\u30bf\u30f3\u3092\u78ba\u8a8d\u3057\u3001Tab\u3067\u30b5\u30e0\u30cd\u30a4\u30eb\u3078\u79fb\u52d5\u3057\u3066Enter\u307e\u305f\u306fSpace\u3092\u62bc\u3057\u307e\u3059\u3002\u8907\u6570\u30ae\u30e3\u30e9\u30ea\u30fc\u3092\u7f6e\u304f\u5834\u5408\u306f\u305d\u308c\u305e\u308c\u304c\u72ec\u7acb\u3057\u3066\u5207\u308a\u66ff\u308f\u308b\u3053\u3068\u3082\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u52d5\u304d\u3092\u6e1b\u3089\u3059\u8a2d\u5b9a\u3067\u306f\u5207\u308a\u66ff\u3048\u6642\u9593\u30920\u306b\u3057\u307e\u3059\u3002<\/p>
\u623b\u3059\u5834\u5408\u306f\u30ae\u30e3\u30e9\u30ea\u30fc\u306ewaza-gallery-slider\u30af\u30e9\u30b9\u3068\u4eca\u56de\u8ffd\u52a0\u3057\u305fPHP\u3092\u5916\u3057\u307e\u3059\u3002\u5143\u306e\u753b\u50cf\u30d6\u30ed\u30c3\u30af\u306f\u4fdd\u6301\u3057\u3066\u3044\u307e\u3059\u3002\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u66f4\u65b0\u3057\u3066\u901a\u5e38\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u306b\u623b\u3063\u305f\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>
\u8a18\u4e8b\u30ab\u30fc\u30c9\u3092\u4e26\u3079\u308b\u30b9\u30e9\u30a4\u30c0\u30fc\u306f\u3001\u6b21\u306e\u8a18\u4e8b\u3092\u53c2\u7167\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>
\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044<\/span>\n\t\t\t\t\t
\"\"<\/figure><\/div>\t\t\t\t\t
\n\t\t\t\t\t\tSWELL\u2502Swiper\u3067\u8a18\u4e8b\u3092\u30b9\u30e9\u30a4\u30c0\u30fc\u8868\u793a\u3059\u308b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/a>\n\t\t\t\t\t\tSWELL\u3067\u3001\u304a\u3059\u3059\u3081\u8a18\u4e8b\u3092\u81ea\u5206\u3067\u9078\u3073\u3001\u6307\u5b9a\u3057\u305f\u9806\u756a\u306e\u307e\u307e\u30b9\u30e9\u30a4\u30c0\u30fc\u306b\u4e26\u3079\u308b\u65b9\u6cd5\u3067\u3059\u3002 \u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9\u306b\u8a18\u4e8bID\u3092\u5165\u529b\u3057\u3001SWELL\u304c\u8aad\u307f\u8fbc\u3080Swiper\u3067\u524d\u5f8c\u306b\u9001\u308c\u308b\u3088\u3046\u306b\u3057…<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>
\u5b9f\u88c5\u306e\u53c2\u7167\u5148\uff1aSwiper API<\/a>\u3001WordPress\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u8aad\u307f\u8fbc\u307f<\/a>\u3002\u65e7GitHub\u30b5\u30f3\u30d7\u30eb\u306f\u4eca\u56de\u306e\u4fee\u6b63\u3068\u540c\u671f\u3057\u3066\u3044\u306a\u3044\u305f\u3081\u3001\u3053\u306e\u30da\u30fc\u30b8\u306e\u30b3\u30fc\u30c9\u3092\u4f7f\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>