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