Swiperを利用したヒーロースライダーの作り方

function pwcn_enqueue_swiper_assets() {
	// Swiper CSS
	wp_enqueue_style(
		'pwcn-swiper-css',
		'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css',
		array(),
		'11.0.0'
	);

	// Swiper JS
	wp_enqueue_script(
		'pwcn-swiper-js',
		'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js',
		array(),
		'11.0.0',
		true
	);
}
add_action('wp_enqueue_scripts', 'pwcn_enqueue_swiper_assets');

function pwcn_hero_slider_component_shortcode($atts) {
	$atts = shortcode_atts(array(
		'slide_ids'  => '',
		'content_id' => '',
		'speed'      => '1000',
		'delay'      => '5000',
		'effect'     => 'fade',
		'pc_height' => '600',
		'mobile_height' => '300',
	), $atts);

	// 属性のエスケープと値の取得
	$speed  = esc_attr($atts['speed']);
	$delay  = esc_attr($atts['delay']);
	$effect = esc_attr($atts['effect']);

	if(empty( $atts['pc_height'] )){
	$pc_height = absint(600);
	}else{
		$pc_height = absint($atts['pc_height']);
	}

	if(empty( $atts['mobile_height'] )){
		$mobile_height = absint(300);
	}else{
		$mobile_height = absint($atts['mobile_height']);
	}
    

	// data属性としてHTMLに埋め込む
	if( wp_is_mobile() ){
		$output = '<div class="hero-wrapper" data-speed="' . $speed . '" data-delay="' . $delay . '" data-effect="' . $effect . '" style="height:'.$mobile_height.'px; min-height:'.$mobile_height.'px;">';
	}else{
		$output = '<div class="hero-wrapper" data-speed="' . $speed . '" data-delay="' . $delay . '" data-effect="' . $effect . '" style="height:'.$pc_height.'px;">';
	}
    
    
	// 背景スライダー
	$output .= '<div class="swiper js-swiper-slider"><div class="swiper-wrapper">';
	$slide_ids = array_map('trim', explode(',', $atts['slide_ids']));
	foreach ($slide_ids as $img_id) {
		$output .= '<div class="swiper-slide">';
		$output .= wp_get_attachment_image($img_id, 'full', false, array('class' => 'hero-slide-img'));
		$output .= '</div>';
	}
	$output .= '</div></div>';

	// 固定コンテンツ（パターン）
	if (!empty($atts['content_id'])) {
		$pattern_post = get_post($atts['content_id']);
		if ($pattern_post && $pattern_post->post_type === 'wp_block') {
			$output .= '<div class="fixed-content">';
			$output .= do_blocks($pattern_post->post_content);
			$output .= '</div>';
		}
	}

	$output .= '</div>';

	return $output;
}
add_shortcode('pwcn_hero_slider_component', 'pwcn_hero_slider_component_shortcode');

/*** Heroスライダー ***/
document.addEventListener('DOMContentLoaded', function () {
	const sliderElements = document.querySelectorAll('.hero-wrapper');
    
	sliderElements.forEach(function (wrapperEl) {
		const sliderEl = wrapperEl.querySelector('.js-swiper-slider');
        
		// HTMLの data 属性から値を取得（指定がない場合はデフォルト値）
		const speed = parseInt(wrapperEl.dataset.speed, 10) || 1000;
		const delay = parseInt(wrapperEl.dataset.delay, 10) || 5000;
		const effect = wrapperEl.dataset.effect || 'fade';

		// Swiperオプションの構築
		const swiperOptions = {
			loop: true,
			speed: speed,
			effect: effect,
			autoplay: {
				delay: delay,
				disableOnInteraction: false,
			},
		};

		// フェードの場合の設定
		if (effect === 'fade') {
			swiperOptions.fadeEffect = { crossFade: true };
		}

		new Swiper(sliderEl, swiperOptions);
	});
});

/*** スライダー全体のレイアウト ***/
.hero-wrapper {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw !important;
	max-width: 100vw;
}

/* 背景スライダー */
.hero-wrapper .js-swiper-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-wrapper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 上に重ねる固定コンテンツ（縦方向の中央配置） */
.hero-wrapper .fixed-content {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0%, -50%);
	width: 100%;
	z-index: 10;
	pointer-events: none; /* マウス操作を後ろのスライドに抜かす */
}

/* 固定コンテンツ内のリンクやボタンはクリック可能にする */
.hero-wrapper .fixed-content a,
.hero-wrapper .fixed-content button {
	pointer-events: auto;
}

/***** 管理画面のサイドバーメニューに「パターン」リンクを追加 *****/
function pwcn_add_reuse_list_admin_menu() {
	add_menu_page( __('Pattern','hima-art-utility'), __('Pattern','hima-art-utility'), 'manage_options', 'edit.php?post_type=wp_block', '', 'dashicons-screenoptions', 6 );
}
add_action( 'admin_menu', 'pwcn_add_reuse_list_admin_menu' );