dialog要素、または、その代替要素をワードプレスで使えるようにする。

最近、html5.2 dialog 要素を紹介する記事を見かけます。

WordPress(4.9.4)では　うまい事動いてくれません。

<dialog>
<h3>dialog</h3>
<p>これはモーダルダイアログです</p>
</dialog>

と記述する事は出来ますが、ブログ側で出力すると

<p><dialog></p>
<h3>dialog</h3>
<p>これはモーダルダイアログです</p>
<p></dialog></p>

として、出力されるためです。これは、管理者でログイン（html要素の制限のない状態）で書いてもこのような表示になります。

なにか、新しい事を始めようとすると課題はつきものです。気を取り直して乗り越えていきましょう。

投稿本文にフィルターを適用して、この余計なp要素を取り除きます。functions.phpにPHPコードを追加

add_filter( 'the_content', 'dialog_element_enabled', 11 );

function dialog_element_enabled( $content ) {

	$content= preg_replace( '!(<p>)?(</?dialog([^>]*)>)(</p>)?!', "$2", $content );

	return $content;
}

CSSで、表示する

ダイアログを開く

HTML

<div class="dialog-wrapper">
<input type="checkbox" id="open-checkbox"><label for="open-checkbox">ダイアログを開く</label>
<dialog tabindex="0"><h3>hello world</h3><p>これはモーダルダイアログです</p></dialog>
</div>

このテストは、Raindropsテーマ（CSSでのこのような操作を前提にして、input要素をpタグでラップしない仕組みがあるため）で行っています。他のテーマの場合、input要素は、p要素でラップされるケースが多いので表示できないかもしれません。
その場合は、WordPressのp要素で困ったときに - CSS noteの方法が簡単です。

CSS

dialog{
 display:block;
 z-index:3
}
dialog:not([open]) {
 display: none;
}
.dialog-wrapper{
 height:300px;
 margin-top:50px;
 border:1px solid #ccc;
 padding:1em;
}
.dialog-wrapper:focus-within{
 background:#aaa;
}
#open-checkbox:checked ~ dialog{
 display:block;
}
/*サポートしていないedge用のスタイルを追加*/
@raindrops .edge dialog {
 display: inline-block;
 position: absolute;
 left: 0px;
 right: 0px;
 width: 250px;
 height: 150px;
 color: black;
 margin: auto;
 border-width: initial;
 border-style: solid;
 border-color: initial;
 border-image: initial;
 padding: 1em;
 background: white;
}

dialogの開閉には、よくjavascriptを使う例が紹介されていますが、このように、CSSでも可能です。

いやいやそうはいっても、javascriptで操作

まずは、手書きでdialogの表示を行ってみます。

ダイアログを開く

HTML

<div class="dialog-wrapper">
<p class="open-jquery">ダイアログを開く</p>
<dialog tabindex="0">
<h3>hello world</h3>
<p>これはモーダルダイアログです</p>
</dialog>
</div>

jQuery

jQuery(function($){
	$('.open-jquery').click(function(){
		$(this).siblings().attr({'open':'open'});
		$(this).siblings().append('<span class="close">close</span>');
	});
	$('dialog').on('click','.close', function(){
		$(this).parents('dialog').removeAttr('open');
		$('.close').remove();
	});
});

WordPressに付属している、jquery-ui-dialogを使う

ここでは、dialog要素は使わずdiv要素を使います。
dialogでも、表示は出来ますが、スタイルなどが崩れるので

ダイアログの内容

HTML

<button id="opener">ダイアログを開く</button>
<div id="dialog" title="ダイアログのタイトル">ダイアログの内容</div>

jQuery

add_action( 'wp_enqueue_scripts', 'ui_dialog_enqueue' );

function ui_dialog_enqueue() {
 
	global $wp_scripts;

	wp_enqueue_script( 'jquery-ui-dialog' );
	wp_enqueue_style( 'jquery-ui-dialog-min-css', includes_url( 'css/jquery-ui-dialog.min.css' ) );

	$script= 'jQuery(function($){
				$( "#dialog" ).dialog({ autoOpen: false });
 	$( "#opener" ).click(function() {
 $( "#dialog" ).dialog( "open" );
			 });
			 $( "button" ).button();
			 });';
 

	$wp_scripts->add_data( 'jquery-ui-dialog', 'data', $script );
}

WordPressに付属している、thickboxを使う

functions.phpに以下を追加します。

add_action('init','add_thickbox');

これで準備は整いました。
メディアの追加から、画像を追加します。
リンク先は、メディア
サイズは、サムネール

以下の属性を追加します。

 class="thickbox"

以下の属性を追加すると、複数の画像を扱う事もできます。

rel="グループ名"

HTML

<a class="thickbox" href="https://tenman.info/labo/css/files/gorilla.jpg"><img class="alignnone size-thumbnail wp-image-7398" src="https://tenman.info/labo/css/files/gorilla-150x150.jpg" alt="" width="150" height="150" /></a>

View my inline content!

HTML

<div id="my-content-id" style="display:none;">
 <p>
This is my hidden content! It will appear in ThickBox when the link is clicked.
 </p>
</div>

<a href="#TB_inline?width=600&height=550&inlineId=my-content-id" class="thickbox">View my inline content!</a>

モーダルボックスを作成する方法は、いろいろあり　それぞれ、それほど難しい作業ではありませんが、実際に使用していこうとすると、レスポンシブでの表示とか、日本語化とか、それぞれの方法に難所は存在します。また、使いどころについても悩ましさはありそうですね

Can I use... Support tables for HTML5, CSS3, etc

最初は、ブラウザのサポートが薄すぎるなぁ、と思って始めました。この記事の最初の頃には、firefox edge　あれー動いてないよという状態でした。作り直したわけですが、意外と、firefox等でも、dialogのスタイルは準備されていたり、いろんな凸凹がありました。

その凸凹を発見して、平らにならしたりする作業は　ひどく面倒ですが、いつになっても、WEBの作業はそういう「気が付かなかった―」に悩まされます。

Photo by Nathan Dumlao on Unsplash

CSS note