どうしたらいいのNAVI

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

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

      2015/11/07


ブログの定型文や決まり文句、JavaScript等々、様々なものをテンプレートとして持ち、挿入する事が出来るTinyMCE Templates。
色々な定型文を登録し、呼び出すだけで定型文を登録する事が出来るので、とても便利なプラグインです。

 
しかし、TinyMCE Templatesをカスタマイズするとより便利に、より自分の使いたい形でTinyMCE Templatesを利用する事が出来ます。

 
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のテンプレート挿入時のHTML自動整形を停止する方法は次の流れで紹介します。

  • プラグインの編集から「TinyMCE Templates」を選択する
  • プラグインファイルの一覧から「tinymce-templates/tinymce-templates.php」を選択し編集画面を開く
  • HTML自動整形のコードを書き換える

 
プラグインの編集から「TinyMCE Templates」を選択する
まず、Wordpressの管理画面から「プラグイン」->「プラグイン編集」を選択し、編集するプラグインのリストから「TinyMCE Templates」を選択しましょう。
TinyMCE Templatesを選択したら、「選択」ボタンを押し、編集画面を開きます。

 
プラグインファイルの一覧から「tinymce-templatestinymce-templates.php」を選択し編集画面を開く
次に、プラグインファイルの一覧から「tinymce-templates/tinymce-templates.php」を選択し、編集画面を開きます。

 
「tinymce-templates/tinymce-templates.php」の編集画面を開いたら、実際にHTMLコードを自動整形している処理を改修します。
HTML自動整形のコードの修正個所は「public function get_templates()」の処理の中の処理で次のコードが記述された部分になります。

 

 
PHPファイルの行数で言うと何も改修を加えて居なければ「620行」の辺りが改修箇所の目安となります。
この処理をどのように書き換えるかというと、次のような形で改修する事で、TinyMCE Templatesのテンプレート挿入時のHTML自動整形を停止する事が出来ます。

 

 
TinyMCE Templatesのテンプレート挿入時にHTML自動整形を停止するカスタマイズについては「【TinyMCE Templates】テンプレート挿入時にHTML自動整形を停止するカスタマイズ」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

「テンプレートを挿入」で検索できるようにする

【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
テンプレート一覧に「定型文」で絞り込まれたテンプレート一覧が表示されました。

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

 

 

 

スポンサーリンク


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

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

 

 

 

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> </p><p>TinyMCE Tempatesにはテンプレートに定型文を登録する際に、ショートコードを利用する設定にしておく事で、ショートコードを使って定型文を記事に挿入することが出来ます。</p><p> <br /> ショートコードを利用して、定型文を挿入する事で、もしも定型文に修正があった場合に、テンプレートを修正するだけで、一括して定型文を変更する事が出来ます。<br /> ショートコードで定型文を挿入する方法は簡単です。</p><p> <br /> TinyMCE Templatesを使って定型文を挿入するには次の手順を行います。</p><ul><li>テンプレートを「ショートコードとして挿入」する設定にする</li><li>記事投稿画面でテンプレートを挿入する</li></ul><p> </p><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の真価はこんなものではありません。他プラグインとの連携や、オリジナルプラグインの連携をすればもっと作業を効率化し、それでいて使いやすくなっていきます。

 
また、新しいカスタマイズ方法など思いつきましたらこの記事を更新していくので是非またお立ち寄りください。

 
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】テンプレートを挿入で検索できるようにするカスタマイズ」で簡単でわかりやすく詳しく紹介しています。

 

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

スポンサーリンク





 - Wordpress ,

Message

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

  関連記事

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

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

【Head Cleaner】ブログを高速化するHead Cleanerのお勧めの設定
【Head Cleaner】ブログを高速化するHead Cleanerのお勧めの設定

WordPressでブログのパフォーマンス高速化の為に、Head Cleaner …

【Wordpress開発環境】XamppにWordpressを新規インストールする方法
【WordPress開発環境】XamppにWordPressを新規インストールする方法

WordPress開発環境を作成する上では、Xamppを利用してWordpres …

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

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

【W3 Total Cache】データベースキャッシュ(Database Cache)を設定しよう!
【W3 Total Cache】データベースキャッシュ(Database Cache)を設定しよう!

キャッシュ系プラグインとしてW3 Total Cacheを利用している人はデータ …

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

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

【Quick Adsense】Quick Adsenseの広告の掲載位置を設定する
【Quick Adsense】Quick Adsenseの広告の掲載位置を設定する

Googleアドセンスや忍者アドマックスの広告などの掲載の為、Wordpress …

【Wordpress】Wordpressの本体をダウンロードする方法
【WordPress】WordPressの本体をダウンロードする方法

ここではWordpress本体をダウンロードする方法を紹介しています。 &nbs …

【Wordpress】Head Cleanerの設定! Wordpressのブログを高速化!
【WordPress】Head Cleanerの設定! WordPressのブログを高速化!

WordPressでブログ運営を行っていると、ブログのパフォーマンスを気にしてい …

【Wordpress】ブログの定型文を簡単挿入! TinyMCE Templates
【WordPress】ブログの定型文を簡単挿入! TinyMCE Templates

WordPressでブログ記事を投稿していると、いつも使っている言い回しや、定型 …