SWELLでのポップアップといえば画像のときに使われているLuminousというライブラリですが、これは画像でしかつかえません。
画像だけでなく、ブログパーツもポップアップできたら面白そうと思って作ってみました。
既存のポップアップ見本（今回の改訂コードとの動作一致は未確認）
その備忘録です。
SWELLでブログパーツをポップアップ表示にする方法
今回はLuminousではなくMicroModalというライブラリを使用しています。
軽量でオプションもいろいろあるので、カスタマイズしやすいです。
ブログパーツの用意
公開してよい内容だけでブログパーツを作ります。例は公開済み・パスワードなしのパーツに限定し、モーダル内に別のポップアップを入れる構成は対象外です。同じパーツを複数置く場合は、パーツ内のHTMLのidが重複しないよう確認してください。
表示したい場所にショートコードを設置
ブログパーツのIDを文言を入れるだけです。
[popup_blog_parts id="26955" label="詳細を見る"]あとはコードを書くだけです。
コードの挿入
バックアップ後、以下3つのPHP例を子テーマのfunctions.php内またはCode Snippetsの一方へ追加します。PHP開始タグを重ねず、旧版の読み込み・初期化・ショートコードとCSSは置き換えてください。
Micromodal
MicroModal 0.4.10を固定して読み込みます。同じページで別実装がMicroModalを読み込んでいる場合は二重登録を避け、統合してから使ってください。この例は個別投稿・固定ページ等を対象にします。
add_action( 'wp_enqueue_scripts', function () {
if ( ! is_singular() ) return;
wp_enqueue_script( 'waza-micromodal',
'https://cdn.jsdelivr.net/npm/micromodal@0.4.10/dist/micromodal.min.js',
array(), '0.4.10', true );
} );JavaScript
次にJavaScript。
オプションでポップアップの細かい設定ができます。
初期化は依存スクリプトの直後に登録します。独自の開閉属性で他のモーダルと区別し、モーダル本体をbody直下へ移します。初期フォーカスを有効にし、アニメーション待ちは使いません。
add_action( 'wp_enqueue_scripts', function () {
if ( ! is_singular() ) return;
wp_add_inline_script( 'waza-micromodal', <<<'JS'
(function () {
function initialize() {
if (typeof window.MicroModal === 'undefined') return;
document.querySelectorAll('.waza-modal').forEach(function (modal) {
document.body.appendChild(modal);
});
MicroModal.init({
openTrigger: 'data-waza-modal-open',
closeTrigger: 'data-waza-modal-close',
disableScroll: true,
disableFocus: false,
awaitOpenAnimation: false,
awaitCloseAnimation: false
});
document.querySelectorAll('[data-waza-modal-open]').forEach(function (button) {
button.disabled = false;
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initialize, {once: true});
} else {
initialize();
}
}());
JS
, 'after' );
}, 20 );最後にショートコードの中身です。
この記事だけ読みたい方は単品購入、ほかの有料記事も読みたい方は購読プランをご確認ください。
購読対象の記事・料金は、下のプラン案内で確認できます。
役に立った記事を、ブログやSNSで紹介しませんか？
紹介制度の対象記事・購読プランを購入した方は、codocで専用リンクと報酬条件を確認できます。
専用リンク経由で購入されると、設定された紹介報酬が発生します。
購読プランの紹介報酬は初回課金のみが対象です。
紹介時は、広告・PRであることが読者に分かるように明記してください。
