ビジュアルエディタにモーダルウィンドウ機能を実装する

コラップスとはアコーディオンのようにコンテンツを開閉できる機能です。

これはコラップスのサンプルです

これは私が図書館に通う為に使っている自転車です。

一方、モーダルウィンドウは、コンテンツを新しいウィンドウで表示し、特定の操作なしには元の画面に戻らない機能です。

ここではこの「モーダルウィンドウ」をビジュアルエディタの中で利用する方法を解説します。

1.モーダルウィンドウを作成するショートコードを作成する

functions.phpに「モーダルウィンドウ」を作成するショートコードを追加します。

/**************************************************/
/* TinyMCE Advancedにショートコードを追加 */
/**************************************************/
function my_scode($postarr) { 
	/*************************************
	 他のショートコードの設定(ここではその設定を省略します)
	 *************************************/
	/***********************************/
	/* モーダルウィンドウ      *********/
	/***********************************/
	$search = '【modal]';
	$replace= 
		'<div class="my-modal">
			<div class="my-modal-btn"><button class="btn btn-primary">モーダルウィンドウ</button></div>
			<div class="my-modal-background color1">
				<article class="my-modal-data width50">
					<p>モーダルウィンドウに表示するコンテンツエリアです。</p>
					<p>幅と背景色はスタイルから選択して下さい。</p>
					<p>初期値　幅：50% 背景色：color1(超薄い黒)</p>
					<p style="text-align:right;"><button class="btn btn-primary">閉じる</button></p>
				</article>
			</div>
		</div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );	
/* モーダルウィンドウ終了 *********/
return $postarr;} 
add_filter('wp_insert_post_data', 'my_scode');

■ショートコードは複数登録されるので、上記には「モーダルウィンドウ」に関するショートコードのみを記述しています。

■モーダルウィンドウの構造は、「my-modal」の中にボタンの「my-modal-btn」、背景の「my-modal-background 」、データ部の「my-modal-data」から構成されます。

■尚、「my-modal-data」を「div」でなく「article」にしてあるのは、「div」要素に付ける背景色と、「article」に付けるコンテンツエリアの幅を同一カーソル点から指定できる様にする為です。

■上記のプログラムをコピーする時は【】を[]に置き換えて利用して下さい。

2.CSSを設定する

2-1.ビジュアルエディタのCSSに下記を追加します。

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

ブロックエディタ時代にビジュアルエディタを使う方法

親テーマが「editor-style.css」の時のスタイル機能の使い方

＜my-editor-style.cssの設定＞

下図を表現するCSSを定義していきます。

/*****************************/
/* モーダルウィンドウ */
/*****************************/
.____modal_________{}                                /* スタイルの区切り記号 */
div.my-modal-background{                              /* 上図の灰色の背景色のスタイル */
	display:flex;
	align-items:center;
	margin-top:5px;
	padding:5px 0;
	width:100%;height:auto;
	border:1px solid #8b8682;}
div.color1{background-color:rgba(0,0,0, 0.1);} /* 上図の灰色の背景色の色 */
div.color2{background-color:rgba(0,0,0, 0.2);} /* 上図の灰色の背景色の色 */
div.color3{background-color:rgba(0,0,0, 0.4);} /* 上図の灰色の背景色の色 */
div.color4{background-color:rgba(0,0,0, 0.6);} /* 上図の灰色の背景色の色 */
article.my-modal-data{                                   /* 上図の白色のコンテンツエリアのスタイル */
	border-radius:5px;
	border:1px solid #8b8682;
	background:#fff; 
  	margin:5px auto;
  	padding:10px;}
article.width50{width:50%;}                          /* 上図の白色のコンテンツエリアの幅 */
article.width60{width:60%;}                          /* 上図の白色のコンテンツエリアの幅 */
article.width70{width:70%;}                          /* 上図の白色のコンテンツエリアの幅 */
article.width80{width:80%;}                          /* 上図の白色のコンテンツエリアの幅 */

■モーダルウィンドウ全体「my-modal」とボタン要素「my-modal-btn」はjqueryのコントロール用に設定したクラスなので、ここではCSSの設定はありません。

■背景の「my-modal-background 」の子供としてデータ部の「my-modal-data」があります。よって親に「display:flex; align-items:center;」を指定する事により、子をセンター配置にしています。

■div.cllor1～4は、div要素「my-modal-background 」の背景色指定の為の設定です。

■article.width50～width80は、article要素「my-modal-data」の幅指定の為の設定です。

2-2.style.cssは下記になります。

/*****************************/
/* モーダルウィンドウ */
/*****************************/
.entry-content div.my-modal-background{
 	display:flex;
 	align-items:center;
 	position:fixed;
 	top:0;left:0 ;
 	width:100%;height:100%;
 	z-index:2;}
.entry-content div.color1{background-color:rgba(0,0,0, 0.1);}
.entry-content div.color2{background-color:rgba(0,0,0, 0.2);}
.entry-content div.color3{background-color:rgba(0,0,0, 0.4);}
.entry-content div.color4{background-color:rgba(0,0,0, 0.6);}
.entry-content article.my-modal-data{
	border-radius:5px;
	border:1px solid #8b8682;
	background:#fff;
	margin:5px auto;
	padding:10px;}
.entry-content article.width50{width:50%;}
.entry-content article.width60{width:60%;}
.entry-content article.width70{width:70%;}
.entry-content article.width80{width:80%;}

■ピンク部分がmy_editor-style.cssと異なる部分

■変更箇所はモーダルウィンドウは画面固定で画面サイズ一杯を背景にしています。

■またz-index:2；は通常画面よりここで生成した画面は、前面に書くことを指示しています。

3.jqueryプログラムを作成する

最後はモーダルウィンドウの画面コントロールを行うjqueryプログラムです。

　jqueryプログラムとは

PHPプログラムはサーバのプログラムで、サーバ側で画面を生成しデバイス側に送ります。

よってサーバ側のプログラムにはユーザが画面をどの様に操作したか？は判りません。

一方、jqueryはユーザがどの様な操作をしたのか？を検知して処理するプログラムになります。

3-1.jqueryプログラムを作成する

①ルートディレクトリにJSフォルダを作成します。

②その中に「my-jquery.js」ファイルを作成し下記プログラムを登録します。

下記プログラムは1ページに複数のモーダルウィンドウが作成されても動くようにeachメソッドを使ったものになっています。

/************************************************/
/* モーダルウィンドウ制御 */
/************************************************/
$(function(){
	$('.my-modal').each(function(no,element){
		$(element).find('.my-modal-background').css('display','none');
		$(element).find(".my-modal-btn").click(function(){
				$(element).find(".my-modal-background").fadeIn();
		});
		$(element).find(".my-modal-background").click(function(elm){
			if($(elm.target).closest('.my-modal-data').length == 0){ 
			 $(".my-modal-background").fadeOut();}
		});
		$(element).find(".btn").click(function(){
			$(".my-modal-background").fadeOut();
		});
 	});  
});

■初期処理は「’.my-modal‘」を1個づつ探して、モーダルウィンドウ部「.my-modal-background」を非表示にします。

■次にボタン「.my-modal-btn」が挿入されたら「.my-modal-background」をフェードインで表示します。

■次に表示されたモーダルウィンドウの中でクリックイベントが起こった場合、下記の処理をします。

①クリックされた位置に親クラス「.my-modal-data」があった場合は「.length」に値が入るので、そのまま表示。しかし「.my-modal-data」以外でクリックされると「.my-modal-data」が無いので「.length」は0になるので、「.my-modal-background」をフェードアウトします。

②クリックされたのが「.btn」ならば、「.my-modal-background」をフェードアウトします。

3-2.jquryプログラムの利用宣言

＜header.php＞に上記のJqueryプログラムをロードします。

<head>
<!-- 他の設定は省略 -->
<!--自作jqueryプログラムの利用宣言-->
<script src='<?php echo get_stylesheet_directory_uri();?>/js/my-jquery.js'></script>
</head>

■子テーマフォルダの「js」フォルダにある「my-jquery.js」をデバイス側に送ります。

4.具体的な操作方法

①モーダルウィンドウを入れたい所で下記ショートコードを入れ更新ボタンを挿入ます

【modal】　注)【】は[]です。

②下記画面が表示されます。

■灰色の所が背景です。

■文字が書かれている所がコンテンツエリアです。

③背景色を選択します

コンテンツエリアをクリック後、スタイルからcolor1～calor4を選択します。

クラス	色	設定値
div.color1		rgba(0,0,0, 0.1)
div.color2		rgba(0,0,0, 0.2)
div.color3		rgba(0,0,0, 0.4)
div.color4		rgba(0,0,0, 0.6)

■「0,0,0」の所はRGB値です。よって黒ベースでない場合はここのRGB値を指定します。

④表示幅を選択します。

コンテンツエリアをクリック後、スタイルからwidth50～width80を選択します。

クラス	幅
article.width50	画面サイズの50%
article.width60	画面サイズの60%
article.width70	画面サイズの70%
article.width80	画面サイズの80%