ビジュアルエディタにエンティティ化したメールアドレスを表示する

2018/10/11

ビジュアルエディタにエンティティ化したメールアドレスを表示する際にどうやって入力してもらおうかなといろいろ考えたメモ。

サンプルメールアドレスはexample@example.comですすめます。

1 挿入したいコード
2 ショートコードにする
3 プラグインを使って更に楽をする
- 3.1 ビジュアルの入力画面を確認する

挿入したいコード

<a href="&#109;&#97;i&#108;&#116;o&#58;&#101;&#120;&#97;&#109;pl&#101;&#64;exampl&#101;&#46;&#99;&#111;&#109;">e&#120;am&#112;&#108;&#101;&#64;e&#120;a&#109;&#112;le&#46;&#99;o&#109;</a>

普通の、メールアドレスが表示してあって、クリックしたらメーラーが立ち上がるやつです。
自分でなら適当にやるんだけど、これを毎回入力いただくのがめんどください。
ビジュアル←→テキストと投稿画面切り替えるとせっかくエンティティ化しても戻ったりするしね！めんどい！

ショートコードにする

入力したいコードが決まっているならショートコードにしてしまうのが早いなとfunctions.phpに下記記載

function show_email_func() {
    return '<a href="&#109;&#97;i&#108;&#116;o&#58;&#101;&#120;&#97;&#109;pl&#101;&#64;exampl&#101;&#46;&#99;&#111;&#109;">e&#120;am&#112;&#108;&#101;&#64;e&#120;a&#109;&#112;le&#46;&#99;o&#109;</a>';
}
add_shortcode('show_email', 'show_email_func');

これでビジュアルエディタで

[show_email]

と入力するだけでいつでもメーラーが立ち上がるリンクができた。

プラグインを使って更に楽をする

毎回ショートコード入力するのもめんどくさくない？？ということで、ビジュアルエディタにオリジナルのボタンを追加できるVisual Editor Custom Buttonsを使用する。
Visual Editor Custom Buttonsという名前がついてるけどテキストエディタにもオリジナルのボタンが追加できます。

Single Blockを選択してショートコードをはりつけます。
ボタンをつけるエディタを選んで（サンプルはビジュアル、テキスト両方）
ビジュアルの方はアイコンを選択し、テキストの方はボタンのラベル名を入力します。