menu

information WordPress

HOMEWordPress swell 投稿ブロックをswiperにする方法

2024年07月26日

swell 投稿ブロックをswiperにする方法

1. functions.phpに下記記述を追記

wp_enqueue_script('swell_swiper');
wp_enqueue_style('swell_swiper');

追加場所は/* その他の読み込みファイルはこの下に記述 */の下

/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {
	
	$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
	wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );

	/* その他の読み込みファイルはこの下に記述 */
    
    wp_enqueue_script('swell_swiper');
    wp_enqueue_style('swell_swiper');
    
}, 11);

2. カスタムCSS & JSの「CSS用コード」に下記コードをコピペする

/* 共通 */
.swiper-postListWrap .p-postList {
	flex-wrap: nowrap;
	margin: 0;
}

/* カード型 */
.swiper-postListWrap .-type-card .p-postList__item {
	padding: 0;
}
.swiper-postListWrap .swiper-pagination-bullet {
    background: currentcolor;
    color: inherit;
}

/* サムネイル型 */
.swiper-postListWrap .-type-thumb .p-postList__item {
	padding: 0;
}
.p-postList.-type-thumb + .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
	bottom: -4.5px;
}

3. カスタムCSS & JSの「JS用コード」に下記コードをコピペする

// 親要素を選択
const elmPostListWrap = document.querySelector('.swiper-postListWrap');
const elmSwiper = elmPostListWrap.firstElementChild;

// 'swiper-postListWrap'の最初の子要素に'swiper-wrapper'クラスを追加
elmSwiper.classList.add('swiper-wrapper');

// 'swiper-wrapper'の全ての子要素に'swiper-slide'クラスを追加
Array.from(elmSwiper.children).forEach(child => {
    child.classList.add('swiper-slide');
});

// 'swiper-pagination', 'swiper-button-prev', 'swiper-button-next'要素を作成して追加
['swiper-pagination', 'swiper-button-prev', 'swiper-button-next'].forEach(className => {
    const element = document.createElement('div');
    element.classList.add(className);
    elmPostListWrap.appendChild(element);
});

// Swiperを初期化
const swiper = new Swiper('.swiper-postListWrap', {
    loop: true,
    slidesPerView: 1, // スライダーの枚数設定(SP)
    spaceBetween: 16, // スライド間の余白(SP)
    centeredSlides: true, // 対象のスライドを中央寄せするかどうか
    speed: 1500, // スライドのアニメーション速度
    breakpoints: { // レスポンシブ対応
        960: {
            slidesPerView: 3, // スライダーの枚数設定(PC)
            spaceBetween: 16 // スライド間の余白(PC)
        }
    },
    autoplay: {
        delay: 5000, // スライドが切り替わる間隔
        disableOnInteraction: false // スライダーを操作したときに自動再生を止める
    },
    pagination: { // ページネーションを表示する
        el: '.swiper-pagination',
        type: 'bullets', // ページネーションの種類
        clickable: true // ページネーションをクリックできるかできないか
    },
    navigation: { // 矢印ナビゲーションを表示する
        nextEl: '.swiper-button-next', // 次へボタン
        prevEl: '.swiper-button-prev' // 前へボタン
    },
});

4. 投稿ブロックのCSSに下記を追記

swiper swiper-postListWrap

会社案内はこちら

〒410-0822
静岡県沼津市下香貫宮脇200-3

055-935-1339

営業時間 9:00~18:00

お問い合わせ