string(11) "3.239.76.25"
 
HOME  /WordPress(応用)
 /ビジュアルエディタにモーダルウィンドウ機能を実装する
2020年04月08日

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

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

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

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

 

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

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

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

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%

 

⑤ボタンの色やサイズを決める。

この操作は下記を参照してください。

 ビジュアルエディタでボタンを表示させる方法

 

⑥最後にコンテンツエリアの編集を完成させて下さい。

このエリアは段落変更、図、表等が自由に使えます。

 

以上でビジュアルエディタでモーダルウィンドウを使ったコンテンツが書けるようになりました。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「tinymce」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。