HOME  /WordPress(応用)
 /TinyMCEに自作のモーダルウィンドウを実装する
2023年09月14日

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%

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

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

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

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

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

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

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

WordPressからメールを送る為に下記の様な色々なプラグインを利用してきました。 ①WP Mail SMTP ■昔は簡単なプラグインだったが機能が拡張された時に障害が発生した段階で使用を断念。 ②Gmail SMTP […]

SynologyでWordPressを運用している時に、遅い!と感じる状況に遭遇しました。対策は①All in One SEOと②WP Mail SMTPの廃止です。この経緯を説明しています。

ここではWordPressからGmailのSMTPを介してメールを送る為に「Gmail SMTPプラグイン」を利用する方法を解説しています。このプラグインは「SMTP認証にOAuth2.0プロトコル」を利用するので、Gmailのセキュリティを守る事ができます。

WordPressサイトの公開後のプログラム変更は、サイトダウン等の危険性があるので難しくなります。そこで、私が行っているSyonologyを2台使った開発環境構築事例を紹介しています。

WordPressのメジャーアップデート(5.5や5.6)ではWordpressの更新が失敗する事があります。このような時にサイトを修復する方法を解説しています。

ここでは「WP-Mail-SMTP」プラグインと「Gmail API」を使ってWordPressからメールを送る方法を解説します。特徴はGoogleのセキュリティ審査で警告は出ないが、設定と運用が面倒な事です。

ここでは「WP-Mail-SMTP」プラグインと「Googleのアプリパスワード」を使ってWordPressからメールを送る方法を解説します。特徴は簡単で運用が簡単だがGoogleのセキュリティ審査で警告がでます。

Wordpressのセキュリティ強化の方法として「SiteGuard WP Plugin」と「Google Authenticator」の使い方を解説しています。

ここでは、SynologyのNASの中でWordPressがどの様に稼働するか?を解説しています。

「PHP7.0」から「PHP7.3」に変更したや、画面が途中で表示されないという問題が発生しました。この時に対応した内容を紹介しています。

「PHP Compatibility Checker」で「File has mixed line endings; this may cause incorrect results」の警告が出た時の対処方法を解説しています。

Jqueryでコントロールするページネーションです。
デバイスに全リストを送り、Jquryで何処を表示するか?のコントロールをします。

PHPでコントロールするページネーションを投稿ページ等に配置すると動作しない事があります。
これを解決する方法を解説しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

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

ここでは引用

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

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

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

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

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & […]

WP Mail SMTP等でGMAILのSMTPサーバを利用する場合は、「アプリパスワード」又は「Google Cloud Platform」を利用する必要があります。ここでは「アプリパスワード」の設定方法を解説しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

SynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。

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

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

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

このコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。

PHPプログラムでコントロールするページネーションです。
やり方はWordPressのページネーションからデータを取得し、それをBootstrapのページネーションフォーマットで出力しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

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

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

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

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。またFlexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

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

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

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

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

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

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

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

    とアンオーダーリスト

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

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

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

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapとFlexboxが挙げられます。ここでは両者の特徴と違いを解説しています。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

ここでは整形済みテキスト(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画面やビジュアルエディタで使う方法を解説しています。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

SynologyのNASのphpmyadminのセキュリティ対策として2要素認証を利用する方法を解説しています。尚、スマホを紛失した時の対応方法も解説しています。