TinyMCEに自作のモーダルウィンドウを実装する

注意

下記のやり方でもモーダルウィンドウは機能しますが、モーダルウィンドウは1ページに1個しか設定できません。

モーダルウィンドウが複数設定されても動く為には下記ドキュメントの利用をお勧めします。

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

このドキュメントはモーダルウィンドウの基本形としてご利用ください。

1.自作のモーダルウィンドウを使った事例

Bootstrapと同様なコンテンツを自作のモーダルウィンドウで作成しました。下記のリンクをクリックしてください。

2.上記を実現する手順

2-1.functions.phpにショートコードを追加します。

自作のモーダルウィンドウのひな形を呼び出すショートコードを追加します。

【my-modal】：自作のモーダルウィンドウを呼び出します。

2-2.my_editor-style.cssの設定

ここでは、モーダルウィンドウを編集する各種設定を追加します。

2-3.css￥editor-style.cssの設定

my_editor-style.cssの設定を一部修正して、http表示させる為の設定を行います。

2-4.jqueryの設定

jqueryでモーダルウィンドウの制御を行います。

具体的な設定は下記になります。

3.モーダル機能を実現する設定

functions.phpの設定
my_editor-style.cssの設定
css￥editor-style.cssの設定
jquery

functions.phpには、モーダルウィンドウのひな形を表示するショートを設定します。

function my_scode($postarr) {
　/* 他のショートコードの設定は省略***********/
　/* 自作のモーダルウィンドウ********************/
　$search = '【my-modal】';
　$replace= 
　　'<div id="my-modal-btn"><a class="btn btn-default">自作モーダルウィンドウ</a></div>
　　<div class="my-modal color1">
　　　<article class="my-modal-data width50">
　　　　<p>モーダルウィンドウに表示するコンテンツです。</p>
　　　　<p>幅と背景色はスタイルから選択して下さい。</p>
　　　　<p>初期値　幅：50% 背景色：color1(超薄い黒)</p>
　　　</article>
　　</div>';
　$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );				
　/* 終了処理 ***************************/
　return $postarr;}
add_filter('wp_insert_post_data', 'my_scode');

※1.階層構造を<div><article><p>にしているのはスタイルで<div>クラスと<article>クラスを使い分ける為です。

※2.<div>クラスではモーダルウィンドウの背景色を選択可能にしています。
具体的にはCSSの項をみて下さい。

※3.<article>クラスではコンテンツエリアの表示幅を選択可能にしています。
具体的にはCSSの項をみて下さい。

my_editor-style.cssの設定でモーダルウィンドウを編集できるCSSを設定している。

/*****************************/
/* 自作モーダルウィンドウ */
/*****************************/
.____modal_________{}
div.my-modal{
　display:flex;
　align-items:center;
　margin-top:5px;
　padding:5px 0;
　width:100%;height:auto;}
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%;}

※1.モーダルウィンドウの構造は背景(.my-modal)と表示するBOX(.my-modal-data)からなっています。

※2.背景(.my-modal)は画面全体でなくBOXを囲むエリアに限定している。
また背景は黒ベースの膜で透過度を0.1～0.6をスタイルで変更可能としている。

※3.背景の中に表示するBOX(.my-modal-data)は白で表示幅を50%～80%をスタイルで変更可能としている。

css￥editor-style.cssの設定は基本的にmy_editor-style.cssと同じだが、背景部分は画面全体になる為、変更している。

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

※1.赤字部分がmy_editor-style.cssと異なる部分

※2.赤字部分は画面固定で画面サイズ一杯を背景にしている。またz-index:2；は通常画面より前面に書くことを指示している。

最後にJqueryでクライアント側の操作を記述します。

/* 自作モーダルウィンドウ制御 */
$(function(){
　$('.my-modal').css('display','none');
　$("#my-modal-btn").click(function(){
　　$(".my-modal").fadeIn() ;
　});
　$(".my-modal").click(function(e){
　if(!$(e.target).closest('.my-modal-data').length){
　　$(".my-modal").fadeOut();}
　});  
});

※1.始めにモーダルウィンドウ(.my-modal)を非表示にしている。

※2.次にボタン(#my-modal-btn)がクリックされたら、モーダルウィンドウ(.my-modal)をフェードイン(fadeIn())している。
画面を上から下にスライドダウンさせるならfadeIn()でなくslideDown()でも良い。

※3.最後に終了処理だがモーダルウィンドウ(.my-modal)がクリックされた時はクリックされた場所がデータ部(.my-modal-data)か否か？を判断し、データ部以外の時はモーダルウィンドウを終了させている。

4.具体的な使い方

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

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

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

※1.灰色の所が背景です。

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

③背景色を選択します

コンテンツエリアをクリック後、スタイルから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)

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

④表示幅を選択します。

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

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