HOME  /WordPress(応用)
 /TinyMCEにBootstrapのモーダルウィンドウを実装する
2017年10月30日

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

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。

ここではBootstrapのモーダルウィンドウ機能を使う方法を解説しますが、これもコラップスの時と同様にビジュアルエディタで編集可能とする為にjqueryを利用します。

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

下記のリンクをクリックしてください。
このリンクはページ内の情報をモーダルウィンドウで表示します。

2.上記を実現する手順

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

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

【bt-modal】:Bootstrapのモーダルを呼び出します。

2-2.jqueryでbootstrapのモーダル制御を追加します。

 

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

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

functions.phpにはショートコードに対応するHTMLを記述します。

function my_scode($postarr) {
 /* その他のショートコードは省略*************************/
 /* Bootstrapのモーダルウィンドウ********************/
 $search = '【bt-modal】';
 $replace= 
  '<div id="bt-modal-btn"><a class="btn btn-default">モーダルウィンドウの呼び出し</a></div>
  <div id="bt-modal">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">ヘッダ</div>
     <div class="modal-body">本文</div>
     <div class="modal-footer"><a class="btn btn-default" data-dismiss="modal">閉じる</a></div>
    </div>
   </div>
  </div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );		
 /* 終了処理 ***************************/
 return $postarr;}
add_filter('wp_insert_post_data', 'my_scode');

※1.上記の【】は[]です。コピーする場合は注意してください。

jqueryでBootstrapのモーダルクラスをダイナミックに割り当てています。

/* Bootstrapのモーダルウィンドウ制御 */
$(function(){
 $('#bt-modal').css('display','none');
 $('#bt-modal').addClass("modal fade");
 $('#bt-modal-btn').click(function(){
  $('#bt-modal').modal({
   keyboard:true,
   backdrop:true,
  });
 });
});

※1.始めに#bt-modalをCSSで非表示にしています。

※2.次に#bt-modalにmodalとfadeのクラスを追加します。

※3.モーダルボタンがクリックされたら下記の条件でモーダルウィンドウを実行します。
keyboard:true:ESCキーでモーダルウィンドウを終了します。
backdrop:true:背景は灰色で、背景クリックでモーダルウィンドウを終了します。

4.具体的な使い方

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

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

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

ボタンの中の文字やコンテンツは自由に編集してください。

ヘッダやフッタを削除しても問題ありません。通常のdeleteキーで削除できます。

③ボタンのカラーを変更する

クラス 色やスタイル
a.btn-default 始めに表示されている色です 
a.btn-primary

a.btn-success

a.btn-info

a.btn-warning

a.btn-danger

a.btn-link

フッターにある「閉じる」ボタンも同様に色を変更できます。

④ボタンの大きさに関して

Bootstrapでは、タブレット用ボタン(btn-sm)、スマホ用ボタン(btn-xs)の機能がある。

しかしこの機能を使うよりは、ボタン文字をレスポンシブ対応にしておくとデバイスに応じたボタンサイズになる。

詳細はTinyMCEにBootstrapのコラップス機能を実装するを参照してください。