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

注意

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

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

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

このドキュメントはあくまでもBootstrapのモーダルウィンドウの使い方の基本としてご利用ください。

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

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

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

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

2.上記を実現する手順

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

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

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

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

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

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

functions.phpへの設定
jqueryへの設定

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