どうしたらいいのNAVI

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

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

      2015/11/07


TinyMCE TemplatesはWordpressの投稿画面のようにテンプレートを作成でき、記事の投稿作業を大幅効率化してくれるプラグインで、記事の新規作成や編集作業を効率的に行いたい人に愛されています。

 
しかし、TinyMCE Templatesはテンプレートを挿入時に「HTMLが自動整形される」といった仕様があります。
TinyMCE Templatesからすれば、予め<p>タグ等を付けてあげた方がプラグイン利用者にとって親切であるという思いを感じ取る事が出来るのですが、正直エディターのテキストベースで編集している人からすれば、「かなりウザい」です。

 
テンプレートというのは何かしらの意味や用途を持ってその形式になっているわけですから、わざわざ自動整形なんてしてほしくないというのが正直なところ。
しかし、このTinyMCE Templatesに登録したテンプレートを投稿内容に挿入するときに動作するHTML自動整形は意外と簡単に停止する事が出来ます。

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

 

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

 

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

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

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

 
TinyMCE Templates自体がリッチエディタを使用してWordpressの投稿作業をする事を意識しているのかもしれませんが、私のようなテキストでガリガリと記事を書く人にとってはとても「自動整形なんてやめてや!」といった感じです。

 
なので、TinyMCE Templatesのテンプレート挿入時のHTML自動整形を停止してしまいましょう。

 

 

 

 

TinyMCE Templatesのテンプレート挿入時のHTML自動整形を停止する方法

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

 
TinyMCE Templatesのテンプレート挿入時のHTML自動整形を停止する方法は次の流れで紹介します。

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

TinyMCE Templateのテンプレート挿入時にはWordpressのPHPを経由し、Ajaxでテンプレートコンテンツの内容を受け取り、選択されたテンプレートを投稿内容に反映するといった大まかな流れがありますが、このうちの「WordpressのPHP」で行われているテンプレートコンテンツの出力時のHTML自動整形の機能を停止する事で実現します。

 
PHPの修正と言っても1行書き換えるだけなので、驚くほど簡単な修正で済みます。

 

 

 

プラグインの編集から「TinyMCE Templates」を選択する

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

 

 

 

プラグインファイルの一覧から「tinymce-templates/tinymce-templates.php」を選択し編集画面を開く

プラグインファイルの一覧から「tinymce-templatestinymce-templates.php」を選択し編集画面を開く
次に、プラグインファイルの一覧から「tinymce-templates/tinymce-templates.php」を選択し、編集画面を開きます。
今回のテンプレートファイルを投稿画面の挿入時にHTML自動整形されて表示される原因はこのPHPファイル内に記述された処理です。

 
「tinymce-templates/tinymce-templates.php」の編集画面を開くと、見出し画像のようなイメージになるかと思います。

 

 

 

HTML自動整形のコードを書き換える

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

 

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

 

 
念のため、元のソースコードをコメントアウトして、次の行に実際のコードを記述しました。
元のコードには「wpautop」関数が使われていて、この関数がテンプレートコンテンツをHTML自動整形していたので、この関数を利用しないようにコードを修正しました。

 
「public function get_templates()」関数全体のソースコードは修正後は次のような形になります。

 
実際に修正した後、テンプレートを追加してみたところ、次の画像のイメージのようにテンプレート挿入時にHTMLの自動整形は行われなくなりました。もちろん実際の記事をブラウザで表示してもテンプレートの部分がガタガタに崩れると言った事は起こりません。
HTML自動整形のコードを書き換える-1

 

 

 

 

スポンサーリンク


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

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

 

 

 

ブログの定型文を簡単挿入! 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でテンプレート挿入時にHTML自動整形を停止するカスタマイズ あとがき

TinyMCE Templatesでテンプレート挿入時にHTML自動整形を停止するカスタマイズについて紹介しました。
TinyMCE Templatesは、まるで記事投稿画面のような感覚でテンプレートを投稿する事が出来るので、私個人的にはとても重宝しています。

 
定型文をテンプレート化する他にも、広告等をテンプレートとして登録して置き、広告掲載支援のプラグインと併用する事で、更にテンプレートとしての価値を増してくれる事もあります。(この場合はショートコードを使った場合ですが)

 
TinyMCE Templatesはシンプルながら使い勝手が良いプラグインなので「HTML自動整形されちゃうし使うのやめようかなぁ・・・」なんて理由で利用しないのはとてももったいないと思います。

 
実際私自身もこのHTML自動整形機能のせいで「本当に使うのやめようか検討した」程だったのは内緒・・・。

 
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自動整形を停止する事が出来ます。

 

 

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

スポンサーリンク





 - Wordpress , , , ,

Message

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

  関連記事

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

TinyMCE Templatesは記事内容や定型文、決まったJavaScrip …

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

AutoptimizeはWordpressのプラグインで、CSSを縮小化する機能 …

【Wordpress開発環境】Wordpress初期設定で必要なデータベースの作成
【WordPress開発環境】WordPress初期設定で必要なデータベースの作成

WordPressはレンタルサーバーでブログ運営する場合、多くのレンタルサーバー …

【Wordpressプラグイン自作】管理画面の任意画面のヘッダー作成時に処理を実行する方法
【WordPressプラグイン自作】管理画面の任意画面のヘッダー作成時に処理を実行する方法

WordPressのプラグインを自作していて、Wordpressの管理画面の任意 …

【Quick Adsense】記事の最初に自動で広告を掲載するQuick Adsenseの設定
【Quick Adsense】記事の最初に自動で広告を掲載するQuick Adsenseの設定

Google Adsenseや忍者Admaxといった広告をブログで掲載している人 …

【Wordpress】記事作成や作業を効率化するおすすめのプラグイン
【WordPress】記事作成や作業を効率化するおすすめのプラグイン

ブログをWordpressで運営している人は多いですよね。 ブログをWordpr …

【Stinger5】PCで記事下に2つ横並びの広告を表示する方法
【Stinger5】PCで記事下に2つ横並びの広告を表示する方法

WordPressでブログを運営していて、Stinger5のテーマを利用している …

【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法
【Stinger5】Stinger5のサイドバーの新規記事一覧を消す方法

WordPressでブログを運営している人で、Stinger5を利用している人も …

【Autoptimize】Autoptimizeの高度な設定 より使えるようにする設定

AutoptimizeはHTMLやCSS,JavaScriptを縮小・最適化する …

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

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