SWELLでのポップアップといえば画像のときに使われているLuminousというライブラリですが、これは画像でしかつかえません。
画像だけでなく、ブログパーツもポップアップできたら面白そうと思って作ってみました。
ポップアップのサンプル
その備忘録です。
目次
SWELLでブログパーツをポップアップ表示にする方法
今回はLuminousではなくMicroModalというライブラリを使用しています。
軽量でオプションもいろいろあるので、カスタマイズしやすいです。
ブログパーツの用意
ポップアップの中身を適当に用意します。
表示したい場所にショートコードを設置
ブログパーツのIDを文言を入れるだけです。
[popup_blog_parts id="26955" label="詳細を見る"]あとはコードを書くだけです。
コードの挿入
functions.phpにコードを挿入しましょう。
Micromodal
まずはMicromodalライブラリの読み込みです。
// Micromodal読み込みと初期化
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'micromodal',
'https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js',
[],
null,
true
);
});JavaScript
次にJavaScript。
オプションでポップアップの細かい設定ができます。
もちろん記事下にJSを配置してもOK
add_action('wp_footer', function () {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (typeof MicroModal !== "undefined") {
MicroModal.init({
disableScroll: false,
awaitOpenAnimation: true,
awaitCloseAnimation: true,
disableFocus: true,
});
} else {
console.warn("Micromodal not found.");
}
});
</script>
<?php
});最後にショートコードの中身です。
