WordPress便利プラグイン AddQuicktagのHTMLエンティティ変換の使い方
WordPressの超便利プラグイン AddQuicktag HTMLタグはもちろんショートコードや定型文などを登録すれば投稿エディター上にボタン（クイックタグ）ができ、登録したコードなどを簡単にエディターに挿入できる便利なプラグイン。最早AddQuicktagなしでは記事が書けないという人も多いのでは。私は書けません。
そんな投稿編集に便利なプラグインAddQuicktagにHTMLエンティティ（htmlエスケープ変換）する拡張コードボタンがあることに今更気づいて使ってみたら簡単で便利だったのでAddQuicktagのHTML特殊文字変換の使い方についての備忘録。まあ簡単すぎて備忘録にするまでもないんですけどね。
HTMLエンティティ変換・HTMLエスケープ変換・HTML特殊文字変換てなんだ？
記事を書いてる時にhtmlタグやphpのソースコードをそのままブラウザに表示したいという場面があるとする、例えば<strong style="color:red;">「これは強調です。ストロングでぶっといヤツ」</strong>とそのまま投稿エディターに入力すると当然下のようにブラウザに表示される。
「これは強調です。ストロングでぶっといヤツ」
そのまま投稿エディターに<strong style="color:red;"></strong>と入力するとhtmlタグとして表示の仕方をブラウザに伝え、受け取ったブラウザは「はいはい、太い文字で赤い文字で表示すればいいのね」とモニターに表示するということ。
「htmlタグとしてじゃやなくてそのまま表示してほしいんだよなあ～」とブラウザに伝える場合に、HTMLエンティティ・HTMLエスケープ・HTML特殊文字変換の処理が必要になってくる。HTMLエンティティとは通り名みたいで正式には「文字参照」というらしいが、むずかしい話はわからないのでHTMLエンティティでいくとする。
AddQuicktagでHTMLエンティティできる
「Prism.js 軽量・簡単なJavaScriptシンタックスハイライターの使い方」でソースコードをPrismを使ってハイライトする際にHTMLエンティティ変換する必要があったので最初はウェブ上のHTMLエスケープツール、HTML特殊文字変換ツールでせっせと変換してたのだが何だか面倒になってきていろいろ探しているうちに、AddQuicktagにHTMLエンティティする拡張コードボタンがあるのを見つけた。結構長い間お世話になっているAddQuicktagなのに今更HTMLエンティティを見つけるとは情けない話だ。
AddQuicktagのHTMLエンティティ拡張コードボタンの使い方
AddQuicktagのHTMLエンティティの使い方と言っても本当に簡単。そして本当に便利。
AddQuicktagの設定にいく
htmlentitiesボタンにチェックを入れる
AddQuicktagの設定の下のほうの「拡張コードクイックタグボタン」に「htmlentities」というボタンがあるのでチェックを入れて変更を保存。
編集エディターの上にHTMLエンティティボタンができる
投稿の編集のエディターの上に「HTML Entities」と「Decode HTML」ボタンが現れる。
AddQuicktagでのHTMLエンティティ変換のやり方
実際にHTMLエンティティするのも簡単。HTMLエンティティしたあとに元に戻す（Decode HTML）こともできる。
HTMLエンティティ変換
HTMLエンティティ変換したいソースコードを選択し、「HTML Entities」をクリックする。
この様にHTMLエンティティされて、ブラウザにそのまま表示されるように特殊文字が変換されている。ちなみに上のHTMLソースは<head>部分のコードなので普通はブラウザに表示されることはない。実際にHTMLエンティティして表示してるのが下の部分。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>WordPress PC WEB あれこれ堂的備忘録</title>
<meta name=”description” content=”WordPressのカスタマイズやプラグイン、パソコン設定やアプリ、レンタルサーバーの設定やレビュー、ウェブ・ネット・SNSについてやアフィリエイトについての備忘録” />
</head>
元のHTNLソースコードに戻す（Decode HTML）
元のHTNLソースコードに戻す場合は、戻したい部分を選択し、「Decode HTML」をクリックする。
このように元のHTMLソースの状態に戻る。<head>部分のコードなので表示されることはない。
PrismでHTMLコードをハイライトしてみる
上のHTMLエンティティ変換されたHTMLソースをPrismでハイライト表示してみる。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>WordPress PC WEB あれこれ堂的備忘録</title>
<meta name=”description” content=”WordPressのカスタマイズやプラグイン、
パソコン設定やアプリ、レンタルサーバーの設定やレビュー、
ウェブ・ネット・SNSについてやアフィリエイトについての備忘録” />
</head>
https://f-af.kenji-s.com/prism-syntax-highlighter/やっぱりAddQuicktagて便利なWordPressプラグイン、ますます手放せなくなります。今のところはHTMLエンティティ拡張コードボタンを使っても重くなったりとか、不具合が出たということはない。