WordPressでボタンを押したときに説明を重ねて表示するには、HTMLのdialog要素が使えます。
以下はライブラリを追加せず、閉じるボタン・Escキー・キーボード操作に対応する見本です。
SWELL以外のテーマでも、HTMLとJavaScriptを保存できる環境で使えます。
動く見本：ボタンで開いて閉じる
2つの見本はそれぞれ独立して開きます。
「長い説明を開く」では、モーダル内をスクロールして20番目の確認項目まで読めます。
ボタンはEnterキー・Spaceキーでも開けます。
開くと「閉じる」にフォーカスが移り、閉じた後は元のボタンへ戻ります。
背景クリックでは閉じない仕様です。
390px幅でも長文を開いた直後は先頭の「閉じる」と確認項目1が見えます。
モーダル内をスクロールすると確認項目20まで読め、Escで閉じると「長い説明を開く」へフォーカスが戻ります。
カスタムHTMLブロックに貼るコード
記事編集画面でカスタムHTMLブロックを追加し、以下をまとめて貼り付けます。
PHPではないのでfunctions.phpやPHPスニペットには貼りません。
まずプレビューを確認し、保存後の公開ページでも操作してください。
<div class="waza-dialog-example">
<button type="button" data-waza-open hidden>説明を開く</button>
<dialog class="waza-dialog" aria-labelledby="waza-dialog-title-1">
<button type="button" data-waza-close autofocus>閉じる</button>
<p id="waza-dialog-title-1"><strong>モーダルの説明</strong></p>
<p>ここに補足説明を入れます。閉じるボタンまたはEscキーで元の画面へ戻れます。</p>
</dialog>
<noscript><p>この見本の操作にはJavaScriptが必要です。</p></noscript>
</div>
<style>
.waza-dialog {
box-sizing: border-box;
width: min(36rem, calc(100% - 2rem));
max-height: 80vh;
max-height: 80dvh;
overflow: auto;
margin: auto;
padding: 1.5rem;
border: 0;
border-radius: .75rem;
color: #222;
background: #fff;
}
.waza-dialog::backdrop { background: rgb(0 0 0 / 55%); }
.waza-dialog-example button {
padding: .7em 1.2em;
border: 1px solid currentColor;
border-radius: .3em;
color: #222;
background: #fff;
cursor: pointer;
}
.waza-dialog-example button:focus-visible {
outline: 3px solid #1769aa;
outline-offset: 3px;
}
</style>
<script>
(() => {
const init = () => {
document.querySelectorAll('.waza-dialog-example').forEach(root => {
if (root.dataset.wazaReady) return;
const dialog = root.querySelector('dialog');
const open = root.querySelector('[data-waza-open]');
const close = root.querySelector('[data-waza-close]');
if (!dialog || !open || !close || typeof dialog.showModal !== 'function') return;
root.dataset.wazaReady = '1';
open.hidden = false;
open.addEventListener('click', () => {
if (!dialog.open) dialog.showModal();
});
close.addEventListener('click', () => dialog.close());
dialog.addEventListener('close', () => open.focus());
});
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init, { once: true });
} else {
init();
}
})();
</script>文章・デザイン・複数設置を変更する
モーダル内の2つのp要素を、自分の見出しと補足説明に置き換えます。
幅はCSSの36rem、内側の余白は1.5remで変更できます。
長文は画面内の高さに収めて内部をスクロールする指定です。
閉じるボタンを先頭に置くことで、開いた直後のフォーカス移動で末尾までスクロールされるのを防ぎます。
重要な情報をモーダルだけに置かず、本文にも要点を載せてください。
複数設置するときはdiv.waza-dialog-exampleの一式を複製し、2つ目のaria-labelledbyと対応するpのidを両方waza-dialog-title-2などの固有値に変更します。
CSSとJavaScriptはページ内で1回だけで足ります。
各ボタンは同じ囲み内のdialogを開きます。
掲載JavaScriptは初期化時に存在する囲みを探すため、ページ表示後にAjaxなどで追加されたモーダルを自動では初期化しません。
通常の本文に配置する例として使い、後から内容を読み込む構成では、その読み込み処理に合わせた初期化が別途必要です。
SWELLのブログパーツを入れる場合
SWELLでは説明文の代わりにブログパーツのショートコードを置けます。
[blog_parts id="123"]の123を自分の公開済みブログパーツIDへ変更してください。
これはSWELL固有の機能で、他テーマ共通のHTML機能ではありません。
コード表示用ブロックではなく、実際のdialogの中身へ置きます。
ブログパーツ内のフォーム・タブ・動画などは、非表示状態で初期化するとサイズや操作に影響する場合があります。
この見本はテキストだけで検証する基本例です。
複雑なパーツを入れた場合は、その操作とスマホでのスクロールを別途確認してください。
動かないときの確認と戻し方
保存後にボタンが見えない場合は、scriptが権限やセキュリティ設定で削除されていないか、JavaScriptの遅延・結合処理でエラーになっていないかを確認します。
ボタンは初期化が成功してから表示するため、JavaScriptが使えない環境では操作できません。
dialog.showModalに対応しない古いブラウザーも対象外です。
権限の制限を無効化せず、サイト管理者が許可したJSの設置方法を使ってください。
同じwaza-dialog-example内に、dialog、data-waza-open付きの開くボタン、data-waza-close付きの閉じるボタンがそろっているかも確認します。
掲載コードはどれかが欠けると初期化を中止するため、開くボタンのhiddenだけを外しても開閉できる状態にはなりません。
旧版の#custom-modal、#swell-modal-btn、.modal、.closeを使ったHTML・CSS・PHPとは混ぜないでください。
旧版を停止してから置き換えます。
今回の例を戻すときは、追加したカスタムHTMLブロックを削除するだけです。
CSSやJSを別の場所へ移した場合は、その追加分も取り除きます。
確認する操作
公開ページでマウス、Enter、Spaceによる開閉、Escによる終了、閉じた後のフォーカス復帰、スマホ幅での収まりを確認します。
読み上げ時の名前はaria-labelledbyが参照する説明見出しから付けます。
スクリーンリーダーや全ブラウザーでの確認は別途必要です。
仕様の根拠：MDNのdialog要素（2026年10月4日確認）。
旧GitHub例はこの改訂と同期していないため、本文のコードを使用してください。
よくある質問：WordPressでボタンを押してモーダルで表示するとき
ボタンを押してモーダルで表示するには、何を使いますか？
記事では、HTMLのdialog要素を使います。ライブラリを追加せず、閉じるボタン・Escキー・キーボード操作に対応する見本です。SWELL以外のテーマでも、HTMLとJavaScriptを保存できる環境で使えます。
コードは、どこに貼りますか？
記事では、記事編集画面でカスタムHTMLブロックを追加し、掲載コードをまとめて貼り付けます。PHPではないので、functions.phpやPHPスニペットには貼りません。まずプレビューを確認し、保存後の公開ページでも操作します。
モーダルの文章や幅は、どう変えますか？
記事では、モーダル内の2つのp要素を自分の見出しと補足説明に置き換えます。幅はCSSの36rem、内側の余白は1.5remで変更できます。長文は画面内の高さに収めて内部をスクロールする指定です。重要な情報をモーダルだけに置かず、本文にも要点を載せます。
同じページに、複数のモーダルを置けますか？
置けます。記事では、div.waza-dialog-exampleの一式を複製し、2つ目のaria-labelledbyと対応するpのidを両方、固有値に変更します。CSSとJavaScriptはページ内で1回だけで足ります。
SWELLのブログパーツを、モーダルの中に入れられますか？
入れられます。記事では、SWELLでは説明文の代わりにブログパーツのショートコードを置け、ブログパーツIDは自分の公開済みIDへ変更します。これはSWELL固有の機能で、他テーマ共通のHTML機能ではありません。フォーム・タブ・動画などは、非表示状態で初期化するとサイズや操作に影響する場合があるため、その操作とスマホでのスクロールを別途確認します。
ボタンが表示されない、動かないときは？
記事では、scriptが権限やセキュリティ設定で削除されていないか、JavaScriptの遅延・結合処理でエラーになっていないかを確認します。ボタンは初期化が成功してから表示するため、JavaScriptが使えない環境では操作できません。dialog.showModalに対応しない古いブラウザーも対象外です。
Ajaxで後から読み込んだモーダルにも使えますか？
自動では使えません。記事では、掲載JavaScriptは初期化時に存在する囲みを探すため、ページ表示後にAjaxなどで追加されたモーダルを自動では初期化しません。後から内容を読み込む構成では、その読み込み処理に合わせた初期化が別途必要です。
公開前に、何を確認しますか？
記事では、公開ページでマウス、Enter、Spaceによる開閉、Escによる終了、閉じた後のフォーカス復帰、スマホ幅での収まりを確認します。スクリーンリーダーや全ブラウザーでの確認は別途必要です。旧版の#custom-modalなどを使ったHTML・CSS・PHPとは混ぜず、旧版を停止してから置き換えます。戻すときは、追加したカスタムHTMLブロックを削除します。
