WordPress – どこからでも自由にモーダル画面を表示できるようにする！

皆さん、こんにちはこんばんは。

WordPressの管理画面でモーダル画面を表示させたいな〜と思い、せっかくならどこの画面からでも呼び出せるようにしたいと思ったので、
今回はWordpressでどこからでもモーダル画面を表示できるような実装をご紹介したいと思います。

想定するパターン
jsの処理を実装
WordPressに用意したjsとcssを読み込ませる、エンドポイントを作る
最後に

想定するパターン

まずモーダル画面を表示させるのに想定しているパターンとしては、以下の通りです。

静的コンテンツを表示させる

動的コンテンツを表示させる

上記2パターンを想定したモーダル画面の実装を行なっていきたいと思います。
内容としては静的コンテンツはjsでそのまま作ったhtmlを表示させる方法で、動的コンテンツはサーバーからhtmlデータを取得し表示させる方法となります。

どちらにも対応できるような仕組みを作っていきます。

jsの処理を実装

モーダル画面の実装のメインとなるjsの処理を作っていきます。

document.addEventListener('DOMContentLoaded', () => {
	const $ = jQuery
	const modalObj = {
		d_options: {
			endpoint: '/wp-admin/admin-ajax.php',
			query: new URLSearchParams(),
			content: null,
			btn_success: true,
			btn_success_text: 'OK',
			btn_success_cb: (el) => {},
			close_cb: () => {}
		},
		options: {},
		opt: {},
		open: async (options, cb) => {
			Object.assign(modalObj.options, modalObj.d_options)
			modalObj.opt = Object.assign(modalObj.options, options)
			if(modalObj.opt.content) {
				// 静的のコンテンツがある場合はそちらを優先する
				const body = document.body
				$(body).append('<div id="modal-background" class="modal-background"></div>')
				$(body).append('<div id="modal-content" class="modal"><div id="modal-container" class="modal-container"><div id="modal-content">'+modalObj.opt.content+'</div><div id="modal-footer" class="d-flex"><button id="modal-close" class="button btn">閉じる</button></div></div></div>')
			} else {
				// 静的のコンテンツがない場合はAPIでコンテンツを取得する
				const html = await fetch(modalObj.opt.endpoint+'?'+modalObj.opt.query.toString()).then((res) => {
					if(res.ok) {
						return res.json()
					}
					return {result: false}
				}).then((json) => {
					if(json.result) {
						return json.html
					}
					return null
				}).catch((e) => {
					console.log(e.message)
					throw new Error('Error...')
				})
				if(html) {
					const body = document.body
					$(body).append(html)
					if(typeof cb === 'function') {
						cb(body.querySelector('#modal-content'))
					}
				}
			}
			if(modalObj.opt.btn_success) {
				$('#modal-footer').append('<button id="btn-success" class="button button-primary button-modal-success">'+modalObj.opt.btn_success_text+'</button>')
				$('#modal-footer').find('#btn-success').on('click', () => {
					modalObj.opt.btn_success_cb(document.body.querySelector('#modal-content'))
				})
			}
			// 閉じるイベントを付与する
			$('#modal-content').find('#modal-close').on('click', modalObj.close)
		},
		close: () => {
			$('#modal-background').remove()
			$('#modal-content').remove()
			modalObj.opt.close_cb()
		}
	}

	window.modalObj = modalObj
})

document.addEventListener('DOMContentLoaded', () => {

const $ = jQuery

const modalObj = {

d_options: {

endpoint: '/wp-admin/admin-ajax.php',

query: new URLSearchParams(),

content: null,

btn_success: true,

btn_success_text: 'OK',

btn_success_cb: (el) => {},

close_cb: () => {}

options: {},

opt: {},

open: async (options, cb) => {

Object.assign(modalObj.options, modalObj.d_options)

modalObj.opt = Object.assign(modalObj.options, options)

if(modalObj.opt.content) {

// 静的のコンテンツがある場合はそちらを優先する

const body = document.body

$(body).append('<div id="modal-background" class="modal-background"></div>')

$(body).append('<div id="modal-content" class="modal"><div id="modal-container" class="modal-container"><div id="modal-content">'+modalObj.opt.content+'</div><div id="modal-footer" class="d-flex"><button id="modal-close" class="button btn">閉じる</button></div></div></div>')

} else {

// 静的のコンテンツがない場合はAPIでコンテンツを取得する

const html = await fetch(modalObj.opt.endpoint+'?'+modalObj.opt.query.toString()).then((res) => {

if(res.ok) {

return res.json()

}

return {result: false}

}).then((json) => {

if(json.result) {

return json.html

}

return null

}).catch((e) => {

console.log(e.message)

throw new Error('Error...')

})

if(html) {

const body = document.body

$(body).append(html)

if(typeof cb === 'function') {

cb(body.querySelector('#modal-content'))

}

if(modalObj.opt.btn_success) {

$('#modal-footer').append('<button id="btn-success" class="button button-primary button-modal-success">'+modalObj.opt.btn_success_text+'</button>')

$('#modal-footer').find('#btn-success').on('click', () => {

modalObj.opt.btn_success_cb(document.body.querySelector('#modal-content'))

})

}

// 閉じるイベントを付与する

$('#modal-content').find('#modal-close').on('click', modalObj.close)

close: () => {

$('#modal-background').remove()

$('#modal-content').remove()

modalObj.opt.close_cb()

}

window.modalObj = modalObj

})

実装はObject形式で設定をしており”modalObj”という変数をグローバル化させてどこからでも呼び出せるようにしておきます。
外部から”modalObj.open”や”modalObj.close”のメソッドをそれぞれ呼び出すとモーダル画面を表示させたり非表示にできます。
APIの処理には”fetch”を使っていますが、jQueryのajaxの方がやりやすい方はそちらで実装してもらっても同じことはできるようになります。

実際に呼び出す側の実装も行っていきます。

(() => {
	// 静的コンテンツのモーダル画面を表示する場合
	modalObj.open({
		content: '<p>静的コンテンツの表示ができます。</p>'
		close_cb: () => {}// モーダルが閉じられた場合にコールバックを呼び出せます。
	})

	// 動的コンテンツのモーダル画面を表示する場合
	const query = new URLSearchParams()
	query.append('nonce', 'your wp nonce')
	query.append('action', 'your wp action')
	query.append('your key', 'your value')
	modalObj.open({
		endpoint: 'your API endpoint',
		query: query,
		btn_success: true,// 閉じるボタンの他に有効なボタン表示を許可します。
		btn_success_text: '更新'// 有効なボタンのテキスト名を変更します。
		btn_success_cb: (modal) => {// 有効なボタンがクリックされた時にコールバックを呼び出せます。
			modalObj.close()// 現在表示しているモーダル画面を閉じます。
	})
})()

(() => {

// 静的コンテンツのモーダル画面を表示する場合

modalObj.open({

content: '<p>静的コンテンツの表示ができます。</p>'

close_cb: () => {}// モーダルが閉じられた場合にコールバックを呼び出せます。

})

// 動的コンテンツのモーダル画面を表示する場合

const query = new URLSearchParams()

query.append('nonce', 'your wp nonce')

query.append('action', 'your wp action')

query.append('your key', 'your value')

modalObj.open({

endpoint: 'your API endpoint',

query: query,

btn_success: true,// 閉じるボタンの他に有効なボタン表示を許可します。

btn_success_text: '更新'// 有効なボタンのテキスト名を変更します。

btn_success_cb: (modal) => {// 有効なボタンがクリックされた時にコールバックを呼び出せます。

modalObj.close()// 現在表示しているモーダル画面を閉じます。

})

})()

基本はオプションの中身を上書きする仕組みで動作させることができ、コールバックの仕組みも用意しているので柔軟性が高まります。

※サンプルコードでは動的コンテンツの場合レスポンスで返却する際は”html”プロパティを追加しそちらにhtmlデータを格納する必要があります。
ここはレスポンス形式をjsonではなくtextで返却してもらっても良いですし自分がやりやすいような形式にしてもらえればと思います。

ただ、これだけではページ下部にコンテンツが追加されるだけですのでcssを充ててしっかり画面上にモーダル画面を表示できるようにします。

.modal {
	position: fixed;
	width: 800px;
	max-width: 800px;
	height: auto;
	max-height: 600px;
	top: 50px;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #fff;
	z-index: 99999;
}

.modal-container {
	position: relative;
	box-sizing: border-box;
	margin: auto;
	width: 100%;
	height: 100%;
	padding: 30px;
	color: #000;
}

.modal-background {
	position: fixed;
	width: 100%;
	height: 150%;
	top: -50px;
	left: 0px;
	background-color: #000;
	z-index: 99990;
	opacity: 0.5;
}

.modal-container .button-modal-success {
	margin-left: auto !important;
}

.modal {

position: fixed;

width: 800px;

max-width: 800px;

height: auto;

max-height: 600px;

top: 50px;

left: 0;

right: 0;

margin: auto;

background-color: #fff;

z-index: 99999;

}

.modal-container {

position: relative;

box-sizing: border-box;

margin: auto;

width: 100%;

height: 100%;

padding: 30px;

color: #000;

}

.modal-background {

position: fixed;

width: 100%;

height: 150%;

top: -50px;

left: 0px;

background-color: #000;

z-index: 99990;

opacity: 0.5;

}

.modal-container .button-modal-success {

margin-left: auto !important;

}

最低限こちらのcssがあればしっかりモーダル画面の実装が行えるようになります。

これでモーダル画面を表示する処理は整いましたのでWordpressで読み込ませていきます。

WordPressに用意したjsとcssを読み込ませる、エンドポイントを作る

管理画面でどこからでもモーダル画面を表示できるようにすることが今回のメインテーマとなりますので、グローバルに読み込ませていきAPIのエンドポイントも作っておきます。

現在利用しているテーマの”functions.php”に以下の行を追加しましょう。

<?php
~
wp_enqueue_script('modal-js', '/path/to/modal.js');
wp_enqueue_style('modal-css', '/path/to/modal.css');

function get_modal() {
	$html = get_template_part('path/to');
	header('Content-Type: application/json; charset=utf8');
	echo json_encode(['result' => true, 'html' => $html]);
	exit;
}
add_action('wp_ajax_get_modal', 'get_modal');

<?php

wp_enqueue_script('modal-js', '/path/to/modal.js');

wp_enqueue_style('modal-css', '/path/to/modal.css');

function get_modal() {

$html = get_template_part('path/to');

header('Content-Type: application/json; charset=utf8');

echo json_encode(['result' => true, 'html' => $html]);

exit;

}

add_action('wp_ajax_get_modal', 'get_modal');

これで全てのページへアクセスした時に読み込まれるようになるのでどこからでもモーダル画面を表示させることができます。
“path/to”となっている箇所はプロジェクトに合わせて変更してください。

実際にモーダル画面を表示させるとこのようになります。

最後に

いかがでしたでしょうか。
モーダル画面を都度都度作るのって大変ですし時間も勿体無いですよね。このように1つにまとめてしまえばいつでも呼び出せたりどこでも使えるようになるのでかなり便利ですね。

また、こちらを応用すれば公開画面にも適用することが出来るのでUI向上にも繋がってくるのでみなさんも是非試してみてください。