エンティティとデコード用プラグイン「Entity Decode Button」を作成しました


投稿日:2016年1月27日
  • 0
  • 0



WordPressのテキストエディタにentityとdecodeボタンを追加します

edb_plugin

<>」を「&lt;&gt;」にエンティティー化したい。

そんなときに役立つプラグイン「Entity Decode Button」を作成しました。
<>」といったHTMLで解釈される文字だけでなく「@や©、-(ハイフン)」などもエンティティ化することができます。

また、エンティティ化だけでなく、デコードボタンで元に戻すこともできます。


Entity Decode Buttonの機能

プラグインを有効にするとテキストエディタに3つのボタンが追加されます。

screenshot-1

「entity_char」ボタン

文字を選択した状態で「entity_char」ボタンをクリックすると実体参照化します。HTMLでタグとして解釈される文字列のみを変換するのに向いています。(<>&など)
PHPのhtmlspecialcharsに相当します。

例)「entity_char」ボタンの変換

<div> → &lt;div&gt;

「entity_num」ボタン

entity_num」ボタンは10進数数値文字参照化(文字参照)します。@や©、2つのハイフン「--」など、すべての文字をエンティティ化することができます。(改行も変換するので複数行実行する場合は注意)
PHPのmb_encode_numericentityに相当します。

例)「entity_num」ボタンの変換

<div> → &#60;&#100;&#105;&#118;&#62;
@©-- → &#64;&#169;&#45;&#45;

「decode」ボタン

decode」ボタンは実体参照・文字参照の両方をデコードして文字に戻します。

例)「decode」ボタンの変換

&lt;div&gt; → <div>
&#60;&#100;&#105;&#118;&#62; → <div>
&#64;&#169;&#45;&#45; → @©--

以上3つのボタンを追加するプラグインです。
ビジュアルエディタとテキストエディタを移動してタグが勝手にエンティティ化されたり、ハイフンを2つ繋げた場合にエンダッシュになってしまう、というストレスを解消するために作成しました。

これでエンティティ文字の一覧とにらめっこする必要がなくなります。

エンティティ処理についてはこちらのサイトで詳しく解説されています。参考にどうぞ。

余談ですが、WordPressのプラグイン解説画面はreadme.txtファイルで作りますが、どのようにエンティティしても強制的に文字に変換されるようです。&lt; や &amp;lt; としても強制的に < に変換される。 そのため解説ページでのサンプルの掲載はあきらめて、このページに掲載しています。


現在のページを共有する



現在のページに関連する記事

エンティティとデコード用プラグイン「Entity Decode Button」を作成しました Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法
エンティティとデコード用プラグイン「Entity Decode Button」を作成しました WordPressのショートコードを利用してSNSのVertical Balloonを設置する方法
エンティティとデコード用プラグイン「Entity Decode Button」を作成しました Apacheで拡張子が「.html」のファイル内でPHPを実行する方法
公式TweetボタンでURLが化ける 公式TweetボタンでURLが化ける
エンティティとデコード用プラグイン「Entity Decode Button」を作成しました 公式ドキュメントよりも詳しいTinyMCEの使い方(応用編)
エンティティとデコード用プラグイン「Entity Decode Button」を作成しました Firefox機能拡張のポップアップとコンテンツスクリプトについて
ロリポップで404.htmlを変える ロリポップで404.htmlを変える

おすすめの記事

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設定をしよう

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設…

作業効率を飛躍的に向上させる!実務で使うIllustratorのショートカット一覧

作業効率を飛躍的に向上させる!実務で使うIllustratorのショー…

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

本気で作りたい人向け、WordPressプラグインの作成方法

本気で作りたい人向け、WordPressプラグインの作成方法

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり!

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

初めてでも理解できるようになる「Google Chrome機能拡張の開発」

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表示する方法

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表…


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。