HOME  /WordPress(応用)
 /ビジュアルエディタにBootstrapのモーダルウィンドウを実装する
2020年04月01日

ビジュアルエディタに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のコラップス機能を実装するを参照してください。

 メモ

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

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

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

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


<関連記事一覧>

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

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

    とアンオーダーリスト

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

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

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

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

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。