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

質問者

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

いっぺえ

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

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

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

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

目次

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

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

配布サイト

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

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

あわせて読みたい

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

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

Lazy Blocks

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

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

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

My Snow Monkey

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

あわせて読みたい
【完全版】Snow Monkeyでカスタム3兄弟を実装する  Snow Monkeyでカスタム投稿ってどうやればいいんですか?やり方がわからなくて教えてください カスタム投稿はもちろんですが、一緒にカスタム3兄弟も攻略しちゃいましょ...

Swiperの設定

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

my-snow-monkey.php

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

Swiper
Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
/* 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,
    }
})

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

Swiper
Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

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>

カスタムブロックのインポート

各種ファイルの設定が完了したらいよいよカスタムブロックを使えるようにしていきます。

「Lazy Blocks」→「エクスポート/インポート」をクリックします。

画面右側のimportのファイル選択からダウンロードした「Swiper-with-SMBtn.json」を選択し、「import」ボタンをクリックします。

インポート正しくできた場合はメッセージが表示とブロックが追加できていることが確認できます。

これでブロックが使えるようになりました!
使えるか確認してみましょう!

インポートしたブロックを使ってみる

実際に編集画面にブロックが追加され、正しく動作するか試してみます。
固定ページを新規作成し、「+」からブロックを確認しましょう。
「LAZY BLOCKS」にインポートしたブロックが追加されていますね。

追加したボタンを選択すると、スライダー1と表示されました。
スライダーの設定をするためにスライド1をクリックします。

スライダーで設定できるのは以下の項目です。

  • スライダーの画像
  • スライダーに表示するテキスト
  • 画像のalt
  • ボタンのテキスト
  • ボタンのリンク先
  • ボタンをクリックしたときに新しいタブ開くか

ボタンは「ボタンのリンク」と「URL」が入力されている時のみ表示されます。
「ボタンのリンク」か「URL」のどちらかしか入力されていない場合はボタンが表示されません。

設定できる項目がわかったら実際にスライダーの設定をしていきましょう。

1枚目のスライダーの設定

1枚目は

  • スライダーの画像
  • スライダーのテキスト
  • ボタンのテキスト
  • ボタンのリンク先

を設定していきます。
入力ができたら「スライドを追加」をクリックして2枚目のスライドの設定をしていきましょう。

2枚目のスライダーの設定

2枚目は

  • スライダーの画像
  • スライダーのテキスト

を設定します。

これで設定が完了しました!

作成したスライダーを確認する

最後にスライダーが正しく表示されるか確認してみましょう。

CSSでテキストの位置やボタンの色は調整してみてください。

【補足】スライダーの順番を変更する

スライダーの順番はスライドの左側の点々をドラッグ&ドロップすれば簡単に変更できます。

参考サイト

もともとはSwiperをブロックエディターにできないと思っていましたが、OleinさんのブログでLazy Blocksを知りました。
こちらを参考にして、Swiperを作成してみました。
非常にわかりやすいので一緒にご確認ください。

オレインデザイン
WordPress でカスタムブロックを手軽に作れる Lazy Blocks の詳解 | オレインデザイン - 岐阜県岐阜市のホ... WordPress 5.0 から導入されたブロックエディターでは、独自にブロックを制作して利用することができるようになりました。 しかし、それまで主にPHPで WordPress を扱うこ...

まとめ

ブロックエディターでSwiperを使えれば良いなと思い、今回作成しました!
本当ならプラグインで提供できるのがベストですが、一方でプラグインで簡単にオリジナルブロックが作成できるのは非常に便利ですね。
みなさんも何度も使い回すものがあったらオリジナルブロックに挑戦してみましょう!

不具合やこういうブロックが欲しいというのがあれば、ご連絡ください!
可能であれば修正・作成してみます!

この記事を読んでもわからないことがあれば、TwitterのDMにてご連絡いただければ回答しますので、お気軽にご相談ください。

この記事が気に入ったら
フォローしてね!

目次
閉じる