【無料配布付き】Swiperをブロックエディタで利用できるようする

2022 3/02

2022年3月2日 2022年3月2日

質問者

Snow MonkeyでSwiperを使うとMy Snow Monkeyの中で画像のURLとかを直接変えないといけないからめんどうなんだよな
何か良い方法はありませんか？

いっぺえ

自分も思ってました・・・
ということでSwiperをブロック化したので紹介します！！！

Snow MonkeyでSwiperを使うとスライダーのアレンジが効きますが、一方でスライダーで表示したい画像のURLやテキストをMy Snow Monkeyのphpファイルに書く必要がありました。
そのため納品後、クライアントさん自身で画像やテキストを変えたいとなると作業が困難になることが予想されます。

そこで今回はSwiperをカスタムブロック化することで画像やテキスト、そしてボタンの表示までを編集画面上でできるようにしました。

今回作成したブロックは無料配布するので最後まで見ていってください！

この記事を読めばわかること

Lazy Blockというプラグインが何かわかる
Swiperをブロックエディター上で利用できる

配布サイト

早速ですが、Swiperブロックを無料プレゼント！！

Google Driveに上げたのでダウンロードしてください。
案件等で使用しても問題ありませんが、自己責任でお願いします。
また二次配布は禁止とします。

Google Drive

Lazy Blocks - Google ドライブ

ブログ作成時の動作条件です。
・Snow Monkey：16.1.2
・Snow Monkey Blocks：14.1.0
※Snow Monkey Blocksのボタンを使っていますので必ずインストールしてください！！

プラグインのインストール

Lazy Blocks

カスタムブロックを作成するために必要なプラグインです。
コーディングでもカスタムブロックは作成できますが、今回は簡易的にプラグインで実装していきます。

「プラグイン」→「新規追加」から「Lazy Blocks」と検索し、インストールします。

プラグインが有効化になると、管理画面に「Lazy Blocks」が追加されます。

My Snow Monkey

Swiperを使うために必要なプラグインです。
インストール方法は別の記事で紹介したことがあるので、そちらで確認してください。

Swiperの設定

プラグインのインストールが完了したら、Swiperの設定をしていきます。
My Snow Monkeyの各ファイルにコードを追加していきます。

my-snow-monkey.php

Swiperを読み込む必要があるので、公式ドキュメントを参考に以下のコードを追加していきます。

/* swiper.css読み込み */
wp_enqueue_style(
    'swiper_css',
	'https://unpkg.com/swiper@7/swiper-bundle.min.css'
);

/* swiper.js読み込み */
wp_enqueue_script(
    'swiper_js',
    'https://unpkg.com/swiper@7/swiper-bundle.min.js'
);

/* My Snow Monkeyのstyle.cssの読み込み */
wp_enqueue_style(
	'msm_style',
	MY_SNOW_MONKEY_URL . '/style.css',
	[],
	filemtime(MY_SNOW_MONKEY_PATH . '/style.css')
);

/* main.js読み込み */
wp_enqueue_script(
	'main_scripts',
	MY_SNOW_MONKEY_URL . '/scripts/main.js',
	['jquery'],
	filemtime(MY_SNOW_MONKEY_PATH . '/scripts/main.js'),
	true
);

/* Lazy Blockで自動で表示されるdivを非表示 */ 
add_filter( 'lazyblock/swiper/frontend_allow_wrapper', '__return_false' );

24,26行目のmain.jsのパスは適宜変更してください。
31行目はLazy Blocksで作ったカスタムブロックに自動的にdivタグで追加されてしまうため、それを削除するコードです。

これでSwiperを読み込む準備ができたので、他のファイルも設定していきましょう。

main.js

Swiperの動作を設定をしていきます。今回は以下の設定にしました。

const mySwiper = new Swiper('.swiper', {
    loop: true,
    effect: 'slide',
    centeredSlides: true,
    slidesPerView: 1,
    speed: 1000,
    autoplay: {
        delay: 9000,
        disableOnInteraction: false,
    }
})

設定を変更したい場合は以下のサイトから探してみてください。

style.css

style.cssに書いていますが、カスタマイズにある追加CSSでも構いません。

.swiper{
    height: 70vh;
    overflow: hidden;
}

.swiper-slide {
    position: relative;
}

.swiper-slide .main-visual {
    width: 100%;
    height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 9s ease;
    transition: -webkit-transform 9s ease;
    transition: transform 9s ease;
    transition: transform 9s ease, -webkit-transform 9s ease;
}
.swiper-slide-active .main-visual {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.swiper-slide-active .slide__content {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 1;
}

.slide__content {
    position: absolute;
    top: 30%;
    left: 50%;
    color: #fff;
    text-align: center;
    width: 90vw;
    -webkit-transform: translate(-50%, 20px);
    transform: translate(-50%, 20px);
    -webkit-transition: opacity 1.2s ease 1.5s, -webkit-transform 1.2s ease 1.5s;
    transition: opacity 1.2s ease 1.5s, -webkit-transform 1.2s ease 1.5s;
    transition: opacity 1.2s ease 1.5s, transform 1.2s ease 1.5s;
    transition: opacity 1.2s ease 1.5s, transform 1.2s ease 1.5s, -webkit-transform 1.2s ease 1.5s;
    z-index: 1;
    opacity: 0;
}

.slide__content h2 {
    font-size: 36px;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8);
    line-height: 2em;
}

.swiper-slide .slide__content .wp-block-snow-monkey-blocks-buttons{
    margin-top: 30px;
}

.swiper-slide .slide__content .wp-container{
    margin-top: 30px;
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    align-items: center;
    align-items: center;
    justify-content: center
}

これでSwiperに関する準備が完了したので、次はいよいよSwiperブロックを有効化していきます。

【参考】HTMLの確認

今回のブロックが出力するHTMLを確認しておきましょう。
ボタンはSNOW MONKEY BLOCKSのボタンブロックを使用しています。
※今後バージョンアップで構造が変わる可能性があるためご注意ください。

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="slide__content">
                <h2><span></span></h2>
                <div class="wp-block-snow-monkey-blocks-buttons smb-buttons is-content-justification-center">
                    <div class="wp-block-snow-monkey-blocks-btn smb-btn-wrapper">
                        <a class="smb-btn" href=""  target="_blank" rel="noopener noreferrer"</a>
                            <span class="smb-btn__label"></span>
                        </a>
                    </div>
                </div>
            </div>   
            <img src="" alt="" class="main-visual">
        </div>
    </div>
</div>