スライダー設定

slider.phpの以下をincに配置して、functions.phpで以下で取り込み

/* ============================================================
 * スライダー機能を外部ファイルから読み込み
 * ============================================================ */
require_once get_template_directory() . '/inc/slider.php';
<?php

/**
 * slider.php
 * トップページスライダーの設定とJS連携
 */

/* ============================================================
 * カスタマイザー：スライダー画像設定
 * ============================================================ */
function lesson_customize_register($wp_customize)
{
    $wp_customize->add_section('lesson_slider_section', array(
        'title'    => 'トップページスライダー',
        'priority' => 40,
    ));

    for ($i = 1; $i <= 5; $i++) {
        $wp_customize->add_setting("lesson_slide{$i}", array('default' => ''));
        $wp_customize->add_control(new WP_Customize_Image_Control(
            $wp_customize,
            "lesson_slide{$i}",
            array(
                'label'    => "スライド画像 {$i}",
                'section'  => 'lesson_slider_section',
                'settings' => "lesson_slide{$i}",
            )
        ));
    }
}
add_action('customize_register', 'lesson_customize_register');

/* ============================================================
 * カスタマイザー：スライドテキスト設定
 * ============================================================ */
function lesson_slider_text_customize_register($wp_customize)
{
    $wp_customize->add_section('lesson_slider_text_section', array(
        'title'       => 'スライドテキスト設定',
        'priority'    => 42,
    ));

    for ($i = 1; $i <= 5; $i++) {
        $wp_customize->add_setting("lesson_slide_title_{$i}", array(
            'default'   => "スライド {$i} のタイトル",
            'transport' => 'refresh',
        ));
        $wp_customize->add_control("lesson_slide_title_{$i}_control", array(
            'label'       => "スライド {$i}：メインテキスト",
            'section'     => 'lesson_slider_text_section',
            'settings'    => "lesson_slide_title_{$i}",
            'type'        => 'text',
        ));

        $wp_customize->add_setting("lesson_slide_caption_{$i}", array(
            'default'   => "スライド {$i} のサブテキスト",
            'transport' => 'refresh',
        ));
        $wp_customize->add_control("lesson_slide_caption_{$i}_control", array(
            'label'       => "スライド {$i}：サブテキスト",
            'section'     => 'lesson_slider_text_section',
            'settings'    => "lesson_slide_caption_{$i}",
            'type'        => 'text',
        ));
    }
}
add_action('customize_register', 'lesson_slider_text_customize_register');

/* ============================================================
 * カスタマイザー：スライダー動作設定
 * ============================================================ */
function lesson_slider_js_options_customize_register($wp_customize)
{
    $wp_customize->add_section('lesson_slider_js_options_section', array(
        'title'       => 'スライダー動作設定',
        'priority'    => 43,
    ));

    $wp_customize->add_setting('slider_interval', array('default' => 5));
    $wp_customize->add_control('slider_interval_control', array(
        'label'       => 'スライド切替間隔（秒）',
        'section'     => 'lesson_slider_js_options_section',
        'settings'    => 'slider_interval',
        'type'        => 'number',
    ));

    $wp_customize->add_setting('slider_fade_time', array('default' => 1));
    $wp_customize->add_control('slider_fade_time_control', array(
        'label'       => 'フェード時間（秒）',
        'section'     => 'lesson_slider_js_options_section',
        'settings'    => 'slider_fade_time',
        'type'        => 'number',
    ));

    $wp_customize->add_setting('slider_autoplay', array('default' => true));
    $wp_customize->add_control('slider_autoplay_control', array(
        'label'    => '自動再生を有効にする',
        'section'  => 'lesson_slider_js_options_section',
        'settings' => 'slider_autoplay',
        'type'     => 'checkbox',
    ));

    $wp_customize->add_setting('slider_random', array('default' => false));
    $wp_customize->add_control('slider_random_control', array(
        'label'    => 'スライド順をランダムにする',
        'section'  => 'lesson_slider_js_options_section',
        'settings' => 'slider_random',
        'type'     => 'checkbox',
    ));

    $wp_customize->add_setting('slider_effect', array('default' => 'fade'));
    $wp_customize->add_control('slider_effect_control', array(
        'label'    => 'スライド切替アニメーション',
        'section'  => 'lesson_slider_js_options_section',
        'settings' => 'slider_effect',
        'type'     => 'select',
        'choices'  => array(
            'fade'        => 'フェード',
            'slide-left'  => '左スライド',
            'slide-right' => '右スライド',
        ),
    ));
}
add_action('customize_register', 'lesson_slider_js_options_customize_register');

/* ============================================================
 * JSへ設定値を渡す
 * ============================================================ */
function lesson_slider_localize_script()
{
    $interval  = (float) get_theme_mod('slider_interval', 5) * 1000;
    $fade_time = (float) get_theme_mod('slider_fade_time', 1) * 1000;
    $autoplay  = get_theme_mod('slider_autoplay', true);
    $random    = get_theme_mod('slider_random', false);
    $effect    = get_theme_mod('slider_effect', 'fade');

    wp_localize_script('shisaku-slider', 'sliderOptions', array(
        'interval' => $interval,
        'fadeTime' => $fade_time,
        'autoplay' => $autoplay,
        'random'   => $random,
        'effect'   => $effect,
    ));
}
add_action('wp_enqueue_scripts', 'lesson_slider_localize_script');

slider.cssを配置


/* =====================================
   スライダー
===================================== */
.slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  z-index: 0;
}

.slider .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.slider .slide.active {
  opacity: 1;
  z-index: 2;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================
   スライダーテキスト
===================================== */
.slider-text {
  position: absolute;
  bottom: 20%;
  left: 10%;
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.slider-title {
  font-size: 2.5em;
  margin-bottom: 0.3em;
}

.slider-caption {
  font-size: 1.2em;
  width: 60%;
}

/* =====================================
   スライダーベース設定
===================================== */
#myslider {
  position: relative;
  overflow: hidden;
}

/* 全スライド共通 */
#myslider .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(0);
  transition: transform var(--slide-dur, 1s) ease,
    opacity var(--slide-dur, 1s) ease;
  z-index: 1;
  will-change: transform, opacity;
}

/* 表示中スライド（フェード用） */
#myslider .slide.is-visible {
  opacity: 1;
  z-index: 2;
}

slider.jsを配置

document.addEventListener(“DOMContentLoaded”, function () {
const slider = document.getElementById(“myslider”);
if (!slider) return;

let slides = Array.from(slider.querySelectorAll(“.slide”));
if (slides.length === 0) return;

const opts = typeof sliderOptions !== “undefined” ? sliderOptions : {};
const interval = Number(opts.interval ?? 5000);
const fadeTime = Number(opts.fadeTime ?? 1000);
const autoplay = opts.autoplay !== false;
const random = !!opts.random;
const effect = opts.effect || “fade”;

slider.style.setProperty(“–slide-dur”, `${fadeTime}ms`);

if (random) {
slides.sort(() => Math.random() – 0.5);
slides.forEach((s) => slider.appendChild(s));
}

let current = 0;
slides.forEach((s) => {
s.style.opacity = 0;
s.style.transform = “translateX(0)”;
s.classList.remove(“is-visible”);
});
slides[current].classList.add(“is-visible”);
slides[current].style.opacity = 1;

let timer = null;

function go(nextIndex) {
if (nextIndex === current) return;
const cur = slides[current];
const nxt = slides[nextIndex];
slides.forEach((s) => {
s.style.transition = “none”;
s.style.zIndex = 1;
});
nxt.style.zIndex = 3;
cur.style.zIndex = 2;

if (effect === “fade”) {
nxt.style.transform = “translateX(0)”;
nxt.style.opacity = 0;
void nxt.offsetWidth;
cur.style.transition = `opacity ${fadeTime}ms ease`;
nxt.style.transition = `opacity ${fadeTime}ms ease`;
requestAnimationFrame(() => {
cur.style.opacity = 0;
nxt.style.opacity = 1;
});
setTimeout(() => {
cur.style.opacity = 0;
nxt.style.opacity = 1;
current = nextIndex;
}, fadeTime);
} else if (effect === “slide-left” || effect === “slide-right”) {
const fromDir = effect === “slide-left” ? 100 : -100;
const toDir = effect === “slide-left” ? -100 : 100;
nxt.style.opacity = 1;
nxt.style.transform = `translateX(${fromDir}%)`;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
cur.style.transition = `transform ${fadeTime}ms ease`;
nxt.style.transition = `transform ${fadeTime}ms ease`;
nxt.style.transform = “translateX(0)”;
cur.style.transform = `translateX(${toDir}%)`;
});
});
setTimeout(() => {
cur.style.opacity = 0;
cur.style.transform = “translateX(0)”;
nxt.style.opacity = 1;
current = nextIndex;
}, fadeTime);
}
}

function scheduleNext() {
if (!autoplay) return;
clearTimeout(timer);
timer = setTimeout(() => {
const next = (current + 1) % slides.length;
go(next);
scheduleNext();
}, interval);
}

scheduleNext();
});

＼ 最新情報をチェック ／

コメント

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