どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズ

      2015/11/07


TinyMCE Templatesは記事内容や定型文、決まったJavaScript等をテンプレートとして登録しておく事で、作業効率化を図ってくれるプラグインです。
TinyMCE Templatesを使い込んでいればいる程、テンプレートの数はかさんでいき、テンプレートを挿入するときのリストがどんどん大きくなっていってしまうので、「あまりテンプレートには追加できないなぁ・・・」なんて思ってはいませんか?

 
テンプレートを挿入時に検索できるようにして、テンプレートの一覧を自分が使いたいものだけに絞る事が出来れば、例え定型文を沢山追加しても、記事内容を沢山投稿したとしても、必要な物を検索するだけで目的のテンプレートをすぐに探す事が出来ます。

 
TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズについて簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズ
 

 

TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズとは

TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズとは、記事投稿・編集画面に追加される「テンプレートを挿入」ボタンを押して開かれる「テンプレート挿入」画面にテキストの検索ボックスと検索ボタンを追加し、更にプラグインに検索処理を追加する事で、テンプレートを挿入するタイミングで自分の目的のテンプレートを検索できるようにするカスタマイズです。

 
TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズでは、「TinyMCE Templates」にパッケージされているPHPファイル、JSファイルを修正し、カスタマイズをしていきます。

 
このカスタマイズを行う事で、TinyMCE Templatesでは次のような変化があります。

  • 「テンプレートを挿入」画面に検索テキストボックス・検索ボタンが追加される
  • 検索テキストボックスに入力した文字を含むタイトルのテンプレートの一覧が、テンプレート一覧に表示される
  • 何も検索条件を入力しなかった場合はテンプレート一覧に、全てのテンプレートが表示される
  • 検索条件に一致するテンプレートが無かったら「no_result」とテンプレートの一覧に表示される
  • 検索時は複数の単語で検索が可能で、検索する文字をスペースで区切って追加する事で、更に絞込みが出来る
  • 検索時は大文字、小文字を区別せずに検索する事が出来る

 
TinyMCE Templatesはカスタマイズをしないと「テンプレートを挿入」画面を開いたとき、予め登録しておいたテンプレートの一覧(リストボックス)と、テンプレートのプレビュー、テンプレートの挿入ボタンしかありません。

 
定型文などの登録しているテンプレートが少ないうちは良いのですが、沢山の定型文を用意しているうちにテンプレートの一覧(リストボックス)だけでは使い勝手が悪くなってきます。

なので、TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズを使う事で、テンプレートを挿入画面に、テンプレートの一覧の検索機能を持たせる事で、テンプレートが多くなったとしても検索で探せるようにしていきます。

 

 

 

 

TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズ

TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズでは、プラグインのファイルを修正してカスタマイズしていきます。
今回、TinyMCE Templatesのテンプレート挿入時の検索機能を追加する上で、編集するファイルは次の通りです。

  • tinymce-templates/tinymce-templates.php
  • tinymce-templates/js/tinymce-templates.js

 
「tinymce-templates/tinymce-templates.php」では、Wordpressの管理画面からいける記事投稿の画面のHTML出力を修正して、検索テキストボックス・検索ボタンを追加します。また、検索ボタンが押された時の実際の検索機能についても処理を追加します。

 
「tinymce-templates/js/tinymce-templates.js」では、検索ボタンが押された時のjQueryの処理を追加していきます。

 
TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズの修正を流れで説明すると次の流れでカスタマイズしていきましょう。
これらすべての修正を行う事でTinyMCE Templatesのテンプレート挿入するときに検索が出来るようになるのです。

 

  • テンプレートを挿入画面の検索テキストボックス・検索ボタンを追加する
  • テンプレート一覧を検索する処理(関数)を追加する
  • テンプレート一覧を取得するフィルターフックに関数を追加する
  • 検索ボタンが押された時のjQuery処理を追加する

 
一つ一つは「難しいんじゃないか?」という事で不安になるかと思いますが、基本的にこのページからコピーでカスタマイズできるようにしているので、コピー・貼り付けの場所やカスタマイズ漏れが無いように注意してくださいね。

 
では、実際にカスタマイズしていきましょう。

 

 

 

テンプレートを挿入画面の検索テキストボックス・検索ボタンを追加する

TinyMCE templatesの「テンプレートを挿入」のダイアログ画面に「検索ボックス」と「検索ボタン」を追加していきましょう。
修正するのは「tinymce-templates/tinymce-templates.php」で、修正箇所は「admin_footer」関数の中です。

 
ブラウザの検索機能で「public function admin_footer()」と検索すると目的の関数を見つける事が出来ます。

 
この関数では、「テンプレートを挿入」ダイアログ画面を表示するHTMLを作成しているので、HTMLの中に「検索ボックス」と「検索ボタン」を追加していきます。
次のHTMLを追加して「検索ボックス」と「検索ボタン」を追加していきます。

 
実際に追加した「admin_footer」関数が次の処理です。追加する箇所は、テンプレート一覧のリストボックスの<select id=”tinymce-templates-list”></select>」と、テンプレートのプレビューの「<iframe id=”tinymce-templates-preview”></iframe>」の間に追加します。このまま関数ごとコピーして、上書きしても使う事が出来ます。

 

 

 

 

 

テンプレート一覧を検索する処理(関数)を追加する

次に、テンプレート一覧から「検索(Search Template)」ボタンが押された時の、Wordpress側の検索処理を追加します。
修正するのは「tinymce-templates/tinymce-templates.php」です。

 
今回は新しい関数を追加するので、新しい関数は「tinymce-templates/tinymce-templates.php」の一番下に追加しましょう。「} // end class tinymceTemplates
」と書かれている行よりも前に関数は追加してください。

 
テンプレート一覧を検索する処理(関数)は次の処理を「tinymce-templates/tinymce-templates.php」に記述してください。この関数は先ほども言った通り、「tinymce-templates/tinymce-templates.php」の一番下に追加しましょう。「} // end class tinymceTemplates
」と書かれている行よりも前にコピーして貼り付けましょう。

 

 
この検索処理では、テンプレートの一覧を引数として受け取り、検索テキスト画面から送信されてきた時に、検索テキストを条件にテンプレートの「タイトル」を確認して、検索文字を含むテンプレートを一覧として返却する関数です。

 
この関数は、あとで紹介するフィルターフックに追加する事で、テンプレート一覧のデータを取得するタイミングで、検索処理を実現してくれるようになります。

 

 

 

テンプレート一覧を取得するフィルターフックに関数を追加する

テンプレート一覧を取得する時に追加されているフィルターフックに、先ほど作成したテンプレート一覧を検索する関数を追加しましょう。

 
修正するのは「tinymce-templates/tinymce-templates.php」で、修正箇所は「plugins_loaded」関数の中です。

 
ブラウザの検索機能で「public function plugins_loaded()」と検索すると目的の関数を見つける事が出来ます。
この関数では、プラグインの初期化処理を行っていて、アクションフックやフィルターフックなどの定義を行っているので、ここにテンプレート一覧を取得するときに追加されているフィルターフックに対して、検索関数をフックさせます。

 
TinyMCE Templatesはテンプレート一覧を取得するタイミングで「tinymce_templates_post_objects」というフィルター用意しているので、このフィルターに対して先ほど作成した関数をフックさせるのです。

 
実際に、「tinymce_templates_post_objects」に検索関数をフックさせる処理を追加するのが次のコードです。このコードは「plugins_loaded」関数のなかであればどこに追加しても良いのですが、わかりやすいように関数の一番下に追加するのがお勧めです。

 

 
テンプレート一覧を取得するフィルターフックに関数を追加するコードを追加した「plugins_loaded」関数は次のようなコードになります。
この関数はコピーして、関数を上書きして使う事もできます。元の関数は残さないように注意してください。

 

 

 

検索ボタンが押された時のjQuery処理を追加する

検索ボタンが押された時のjQuery処理を追加していきましょう。
このカスタマイズでは「tinymce-templates/js/tinymce-templates.js」のJavaScriptの外部ファイルを編集します。

 
jQuery処理は次の処理を追記していきます。

  • 検索ボタンが押されるのを待ち・検知する処理を追加
  • 検索ボタンが押された時のJavaScript側の処理を追加

 
具体的に修正してみましょう。

 

 

検索ボタンが押されるのを待ち・検知する処理を追加

検索ボタンが押されるのを待ち・検知する処理を追記していきます。追記するのは「init: function()」関数の中です。

 
PHP側のテンプレートを挿入する画面に追加した検索ボタンに「tinymce-templates-search」というIDを割り当てたので、そのIDがクリックされた時の処理について定義しています。

この処理を「init: function()」関数に追加してください。実際に追加した「init: function()」関数のコードは次の通りです。

 

 

 

検索ボタンが押された時のJavaScript側の処理を追加

jQueryが検索ボタンを押されたのを検知して動作するJavaScriptの処理を追加していきます。
この処理では、テンプレート一覧の取得に必要な検索テキストボックスの条件をパラメータに含めて、検索結果を表示する処理を関数として追加します。
関数は「tinymce-templates/js/tinymce-templates.js」の下方に「positionTop: function()」という関数があるので、その関数の次に追加するのが良いでしょう。

 

 

 

 

 

TinyMCE Templatesのテンプレートを挿入で検索してみよう

修正が完了したら実際にTinyMCE Templatesの「テンプレートを挿入」画面を開いて検索をしてみましょう。
まず、記事の投稿画面から「テンプレートを挿入」ボタンを押して、テンプレートを挿入ダイアログを開きます。
TinyMCE Templatesのテンプレートを挿入で検索してみよう-1
TinyMCE Templatesのテンプレートを挿入で検索してみよう-2

 
テンプレートを挿入ダイアログのテンプレート一覧とプレビューの間に検索テキストボックスと「Search Template」の検索ボタンが表示できました。
では実際に検索テキストボックスにテキストを入力し検索してみましょう。検索文字列に「定型文」と入力し「Search Template」ボタンを押します。
TinyMCE Templatesのテンプレートを挿入で検索してみよう-3

 
TinyMCE Templatesのテンプレートを挿入で検索してみよう-4
テンプレート一覧に「定型文」で絞り込まれたテンプレート一覧が表示されました。

 

 

 

 

スポンサーリンク


この記事を読むうえで知っておきたい知識

この記事を読む上で知っておきたい事について紹介します。
何かに困った時に他の方法を思いついたり、用語がわからなくて読みづらいと感じた場合は、これから紹介する事を参考にしてみてください。

 

 

 

TinyMCE Templatesとは

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templatesとは、Wordpressのプラグインの一つで、保存しておいたプラグインを記事の投稿の際に呼び出し、テンプレートとして挿入してくれるプラグインです。 
テンプレートとして保存しておいた内容を執筆の際に使う事が出来るので、自分の良く使う言い回しや言葉等の定型文をテンプレートとして保存しておき、呼び出す事で、記事執筆にかかる負担を軽減する事が出来ます。 
定型文の挿入は良くあるプラグインでは、記事の最初と最後だけに挿入する物が多いと思いますが、TinyMCE Templatesでは記事の途中にも定型文を挿入する事が出来ます。 
TinyMCE TemplatesはWordpressのプラグインなので、新規のプラグイン追加の手順でWordpressにインストールすることが出来ます。
インストールした後はプラグインの有効化をする事を忘れないようにしましょう。 
TinyMCE Templatesのインストールは次の手順が主流です。<ul><li>Wordpressのプラグインの「プラグインを追加」の画面で「TinyMCE Templates」と検索する</li><li>検索で表示された「TinyMCE Templates」を「いますぐインストール」ボタンを押してインストール</li></ul><p> <br /> TinyMCE Templatesでは、煩わしい細かい設定はありません。<br /> 強いて言うなら、TinyMCE Templatesの設定と言えば予めテンプレートを作成しておく事だけです。</p><p> <br /> TinyMCE TemplatesはWordpressでブログを運営し、記事を投稿している人ならば直感的に使う事が出来るシンプルな使い方です。<br /> TinyMCE Templatesでは、次のような流れで、定型文をテンプレートとして保存し、記事の投稿の際に挿入する事が出来ます。</p><ul><li>テンプレートを新規追加する</li><li>記事投稿の際にテンプレートを呼び出す</li></ul><p> <br /> TinyMCE Templatesでテンプレートを新規追加では、あらかじめ良く使う定型文や言葉等をテンプレートとして保存しておく事で、記事の執筆の際に挿入するテンプレートとして保存しておく事が出来ます。</p><p> <br /> テンプレートの新規追加は次の手順で行えます。</p><ul><li>Wordpressの項目の中から「テンプレート」を選択</li><li>テンプレートの画面の「新規追加」を選択</li><li>テンプレートの新規追加画面にタイトル、内容を追加</li></ul><p> <br /> 記事投稿の際に、あらかじめ保存しておいたテンプレートを呼び出して定型文を挿入する事が出来ます。<br /> 記事の内容として定型文を挿入する流れは次のように行います。</p><ul><li>記事の内容でテンプレートを挿入したい場所を予め選択しておく</li><li>記事投稿画面の「テンプレートを挿入」ボタンを押す</li><li>挿入したいテンプレートを選択し、「テンプレートを挿入」ボタンを押す</li></ul><p> <br /><p>TinyMCE Tempatesにはテンプレートに定型文を登録する際に、ショートコードを利用する設定にしておく事で、ショートコードを使って定型文を記事に挿入することが出来ます。</p><p> <br /> ショートコードを利用して、定型文を挿入する事で、もしも定型文に修正があった場合に、テンプレートを修正するだけで、一括して定型文を変更する事が出来ます。<br /> ショートコードで定型文を挿入する方法は簡単です。</p><p> <br /> TinyMCE Templatesを使って定型文を挿入するには次の手順を行います。</p><ul><li>テンプレートを「ショートコードとして挿入」する設定にする</li><li>記事投稿画面でテンプレートを挿入する</li></ul></p><p> <br /><p><img width=
TinyMCE Templatesのテンプレート挿入時にHTML自動整形を停止するカスタマイズとは、TinyMCE Templatesに登録したテンプレートを投稿する内容として選択して挿入するときに<p>タグの挿入や<br />タグの追加、不要な改行の削除等のHTML自動整形を停止するカスタマイズのことです。

 
ビジュアルエディター(リッチエディター)で作業をする事がメインの人にとってはあまり気にする必要のないことだと思いますが、テキストをベースに作業をしている人にとっては、入力したテンプレートの内容が勝手に変更されてしまうのは、このプラグインを利用するかどうかを分ける程の死活問題となります。

 
TinyMCE Templatesのテンプレート挿入時のHTML自動整形を停止する方法では、プラグインのPHPファイルを改修して行います。

 

ブログの定型文を簡単挿入できるTinyMCE Templatesについては「【WordPress】ブログの定型文を簡単挿入! TinyMCE Templates」で簡単でわかりやすく、詳しく紹介しているのでチェックしていってください。

 

 

 

TinyMCE Templatesで出来る便利なカスタマイズ

【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ
TinyMCE Templatesで出来る便利なカスタマイズとは、TinyMCE TemplatesプラグインにパッケージされているPHPファイルやJSファイルなどをカスタマイズし、より便利で使いやすい形でTinyMCE Templatesを利用できるようにしていく事です。

 
TinyMCE Templatesで出来る便利なカスタマイズとしては次のような物があります。

  • テンプレート挿入時にHTML自動整形を停止する
  • テンプレートを挿入で検索できるようにする

 

【TinyMCE Templates】テンプレート挿入時にHTML自動整形を停止するカスタマイズ
TinyMCE Templatesのテンプレート挿入時にHTML自動整形を停止するカスタマイズとは、TinyMCE Templatesに登録したテンプレートを投稿する内容として選択して挿入するときに<p>タグの挿入や<br />タグの追加、不要な改行の削除等のHTML自動整形を停止するカスタマイズのことです。

 
ビジュアルエディター(リッチエディター)で作業をする事がメインの人にとってはあまり気にする必要のないことだと思いますが、テキストをベースに作業をしている人にとっては、入力したテンプレートの内容が勝手に変更されてしまうのは、このプラグインを利用するかどうかを分ける程の死活問題となります。

 
TinyMCE Templatesのテンプレート挿入時のHTML自動整形を停止する方法では、プラグインのPHPファイルを改修して行います。

 

【TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズ
TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズとは、記事投稿・編集画面に追加される「テンプレートを挿入」ボタンを押して開かれる「テンプレート挿入」画面にテキストの検索ボックスと検索ボタンを追加し、更にプラグインに検索処理を追加する事で、テンプレートを挿入するタイミングで自分の目的のテンプレートを検索できるようにするカスタマイズです。

 
TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズでは、「TinyMCE Templates」にパッケージされているPHPファイル、JSファイルを修正し、カスタマイズをしていきます。

 
このカスタマイズを行う事で、TinyMCE Templatesでは次のような変化があります。

  • 「テンプレートを挿入」画面に検索テキストボックス・検索ボタンが追加される
  • 検索テキストボックスに入力した文字を含むタイトルのテンプレートの一覧が、テンプレート一覧に表示される
  • 何も検索条件を入力しなかった場合はテンプレート一覧に、全てのテンプレートが表示される
  • 検索条件に一致するテンプレートが無かったら「no_result」とテンプレートの一覧に表示される
  • 検索時は複数の単語で検索が可能で、検索する文字をスペースで区切って追加する事で、更に絞込みが出来る
  • 検索時は大文字、小文字を区別せずに検索する事が出来る

 
TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズでは、プラグインのファイルを修正してカスタマイズしていきます。
今回、TinyMCE Templatesのテンプレート挿入時の検索機能を追加する上で、編集するファイルは次の通りです。

  • tinymce-templates/tinymce-templates.php
  • tinymce-templates/js/tinymce-templates.js

 
TinyMCE Templatesの「テンプレートを挿入」画面で検索できるようにするカスタマイズについては「【TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズ」で簡単でわかりやすく詳しく紹介しています。

 
TinyMCE Templatesで出来る便利なカスタマイズについては「【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズ あとがき

TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズについて解説・紹介しました。
私もTinyMCE Templates愛用者で、かなりのテンプレートを保持しているので、テンプレート一覧を何とかして検索できないものかとプラグインのPHPやJSファイルを眺めていました。

 
中の構造がわかれば後は芋づるのようにして検索機能を実装する事が出来たので、TinyMCE Templatesを今後も愛用できそうです。
テンプレートの新規登録の仕方やショートコードが使える等、正直相当使い勝手が私のなかでは神がかって良いので、やはりテンプレート挿入時の検索機能は必須の実現機能でした。。・゚・(ノД`)・゚・。

 
今後もモリモリと皆様に有益な情報を発信できるよういそしんでいきます。

 
TinyMCE Templatesのテンプレートを挿入するときに検索できるようにするカスタマイズを使って、作業効率の爆速化を目指してみてはいかがでしょうか。

 

 

 

 

TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズ まとめ

TinyMCE Templates】テンプレートを挿入で検索できるようにするカスタマイズとは、記事投稿・編集画面に追加される「テンプレートを挿入」ボタンを押して開かれる「テンプレート挿入」画面にテキストの検索ボックスと検索ボタンを追加し、更にプラグインに検索処理を追加する事で、テンプレートを挿入するタイミングで自分の目的のテンプレートを検索できるようにするカスタマイズです。

 
TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズでは、「TinyMCE Templates」にパッケージされているPHPファイル、JSファイルを修正し、カスタマイズをしていきます。

 
このカスタマイズを行う事で、TinyMCE Templatesでは次のような変化があります。

  • 「テンプレートを挿入」画面に検索テキストボックス・検索ボタンが追加される
  • 検索テキストボックスに入力した文字を含むタイトルのテンプレートの一覧が、テンプレート一覧に表示される
  • 何も検索条件を入力しなかった場合はテンプレート一覧に、全てのテンプレートが表示される
  • 検索条件に一致するテンプレートが無かったら「no_result」とテンプレートの一覧に表示される
  • 検索時は複数の単語で検索が可能で、検索する文字をスペースで区切って追加する事で、更に絞込みが出来る
  • 検索時は大文字、小文字を区別せずに検索する事が出来る

 
TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズでは、プラグインのファイルを修正してカスタマイズしていきます。
今回、TinyMCE Templatesのテンプレート挿入時の検索機能を追加する上で、編集するファイルは次の通りです。

  • tinymce-templates/tinymce-templates.php
  • tinymce-templates/js/tinymce-templates.js

 
「tinymce-templates/tinymce-templates.php」では、Wordpressの管理画面からいける記事投稿の画面のHTML出力を修正して、検索テキストボックス・検索ボタンを追加します。また、検索ボタンが押された時の実際の検索機能についても処理を追加します。

 
「tinymce-templates/js/tinymce-templates.js」では、検索ボタンが押された時のjQueryの処理を追加していきます。

 
TinyMCE Templatesのテンプレートを挿入で検索できるようにするカスタマイズの修正を流れで説明すると次の流れでカスタマイズしていきましょう。
これらすべての修正を行う事でTinyMCE Templatesのテンプレート挿入するときに検索が出来るようになるのです。

 

  • テンプレートを挿入画面の検索テキストボックス・検索ボタンを追加する
  • テンプレート一覧を検索する処理(関数)を追加する
  • テンプレート一覧を取得するフィルターフックに関数を追加する
  • 検索ボタンが押された時のjQuery処理を追加する

 
TinyMCE templatesの「テンプレートを挿入」のダイアログ画面に「検索ボックス」と「検索ボタン」を追加していきましょう。
修正するのは「tinymce-templates/tinymce-templates.php」で、修正箇所は「admin_footer」関数の中です。

 
ブラウザの検索機能で「public function admin_footer()」と検索すると目的の関数を見つける事が出来ます。

 
この関数では、「テンプレートを挿入」ダイアログ画面を表示するHTMLを作成しているので、HTMLの中に「検索ボックス」と「検索ボタン」を追加していきます。
次のHTMLを追加して「検索ボックス」と「検索ボタン」を追加していきます。

 
次に、テンプレート一覧から「検索(Search Template)」ボタンが押された時の、Wordpress側の検索処理を追加します。
修正するのは「tinymce-templates/tinymce-templates.php」です。

 
今回は新しい関数を追加するので、新しい関数は「tinymce-templates/tinymce-templates.php」の一番下に追加しましょう。「} // end class tinymceTemplates
」と書かれている行よりも前に関数は追加してください。

 
テンプレート一覧を検索する処理(関数)は次の処理を「tinymce-templates/tinymce-templates.php」に記述してください。この関数は先ほども言った通り、「tinymce-templates/tinymce-templates.php」の一番下に追加しましょう。「} // end class tinymceTemplates
」と書かれている行よりも前にコピーして貼り付けましょう。

 

 
テンプレート一覧を取得する時に追加されているフィルターフックに、先ほど作成したテンプレート一覧を検索する関数を追加しましょう。

 
修正するのは「tinymce-templates/tinymce-templates.php」で、修正箇所は「plugins_loaded」関数の中です。

 
ブラウザの検索機能で「public function plugins_loaded()」と検索すると目的の関数を見つける事が出来ます。
この関数では、プラグインの初期化処理を行っていて、アクションフックやフィルターフックなどの定義を行っているので、ここにテンプレート一覧を取得するときに追加されているフィルターフックに対して、検索関数をフックさせます。

 
TinyMCE Templatesはテンプレート一覧を取得するタイミングで「tinymce_templates_post_objects」というフィルター用意しているので、このフィルターに対して先ほど作成した関数をフックさせるのです。

 
実際に、「tinymce_templates_post_objects」に検索関数をフックさせる処理を追加するのが次のコードです。このコードは「plugins_loaded」関数のなかであればどこに追加しても良いのですが、わかりやすいように関数の一番下に追加するのがお勧めです。

 

 
検索ボタンが押された時のjQuery処理を追加していきましょう。
このカスタマイズでは「tinymce-templates/js/tinymce-templates.js」のJavaScriptの外部ファイルを編集します。

 
jQuery処理は次の処理を追記していきます。

  • 検索ボタンが押されるのを待ち・検知する処理を追加
  • 検索ボタンが押された時のJavaScript側の処理を追加

 
検索ボタンが押されるのを待ち・検知する処理を追記していきます。追記するのは「init: function()」関数の中です。

 
PHP側のテンプレートを挿入する画面に追加した検索ボタンに「tinymce-templates-search」というIDを割り当てたので、そのIDがクリックされた時の処理について定義しています。

この処理を「init: function()」関数に追加してください。

 
jQueryが検索ボタンを押されたのを検知して動作するJavaScriptの処理を追加していきます。
この処理では、テンプレート一覧の取得に必要な検索テキストボックスの条件をパラメータに含めて、検索結果を表示する処理を関数として追加します。
関数は「tinymce-templates/js/tinymce-templates.js」の下方に「positionTop: function()」という関数があるので、その関数の次に追加するのが良いでしょう。

 

 
修正が完了したら実際にTinyMCE Templatesの「テンプレートを挿入」画面を開いて検索をしてみましょう。
まず、記事の投稿画面から「テンプレートを挿入」ボタンを押して、テンプレートを挿入ダイアログを開きます。
TinyMCE Templatesのテンプレートを挿入で検索してみよう-1
TinyMCE Templatesのテンプレートを挿入で検索してみよう-2

 
テンプレートを挿入ダイアログのテンプレート一覧とプレビューの間に検索テキストボックスと「Search Template」の検索ボタンが表示できました。
では実際に検索テキストボックスにテキストを入力し検索してみましょう。検索文字列に「定型文」と入力し「Search Template」ボタンを押します。
TinyMCE Templatesのテンプレートを挿入で検索してみよう-3

 
TinyMCE Templatesのテンプレートを挿入で検索してみよう-4
テンプレート一覧に「定型文」で絞り込まれたテンプレート一覧が表示されました。

 

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Wordpress , , ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【Autoptimize】Autoptimizeの基本的な設定 初心者でも簡単!
【Autoptimize】Autoptimizeの基本的な設定 初心者でも簡単!

Autoptimizeはワードプレスのプラグインの一つで、設定について大きく分け …

【Wordpress】データベースをバックアップするWP Database Backup
【WordPress】データベースをバックアップするWP Database Backup

WordPressでデータベースのバックアップを簡単に行いたい場合がありますよね …

【Wordpress】Google Adsenseの広告を簡単掲載するプラグイン Quick Adsense
【WordPress】Google Adsenseの広告を簡単掲載するプラグイン Quick Adsense

WordPressでブログを運営し、Google Adsenseを使ってブログを …

【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定
【W3 Total Cache】ブラウザキャッシュのメディアファイルとその他のファイルの設定

W3 Total Cacheのブラウザキャッシュでは、画像や動画、音声ファイルと …

クイックタグを入力補助するボタンをエディタに追加するか-1
【Quick Adsense】エディタに追加されるクイックタグのボタン設定

WordPressのブログ運営でQuick Adsenseを使って広告掲載を行っ …

【TinyMCE Templates】テンプレート挿入時にHTML自動整形を停止するカスタマイズ
【TinyMCE Templates】テンプレート挿入時にHTML自動整形を停止するカスタマイズ

TinyMCE TemplatesはWordpressの投稿画面のようにテンプレ …

【Wordpressプラグイン自作】特定のイベント時に処理を実行させるアクションフック(add_action)
【WordPressプラグイン自作】特定のイベント時に処理を実行させるアクションフック(add_action)

WordPressのプラグインを自作するには自分のつくったプログラムがいつ実行さ …

【Autoptimize】JavaScriptを縮小化するAutoptimizeの高度な設定
【Autoptimize】JavaScriptを縮小化するAutoptimizeの高度な設定

Autoptimizeには基本設定と高度な設定があり、高度な設定については技術的 …

【Quick Adsense】Quick Adsenseの日本語の文字化け対応の方法
【Quick Adsense】Quick Adsenseの日本語の文字化け対応の方法

WordPressのブログ運営でマネタイズをする上でQuick Adsenseを …

【Head Cleaner】Google Ajax Libraries を使う設定!
【Head Cleaner】Google Ajax Libraries を使う設定!

Head Cleanerの設定にはGoogle Ajax Librariesを使 …