WordPress-plugin-HTML entities button 優秀プラグイン!

以前の記事↓で絶賛していた

WordPress　記事を投稿する前に変更したい事＆追加プラグイン①AddQuicktag PS Disable Auto Formatting TinyMCE Advanced Simple Tags WordPress Yoast SEO (SEO by Yoast) Table of Contents Plus　HTML entities button PS Auto Sitemap Category Order Custom Field Template Crayon Syntax Highlighter

WordPressのプラグイン、HTML entities button　について
お薦めプラグインとしてレビューしたいと思います。

このページのメニュ

HTML entities button の概要
HTML entities button の使い方
1. HTML entities buttonをダウンロードして有効化する
2. 有効化後のテキストエディタ画面
まとめ

HTML entities button の概要

HTML entities buttonとは、WordPress 私的マニュアルと言うサイトを
運営されているtmatsuurさんが作られたプラグインです。

私のサイトでは大変重宝しており、
テキストエディターで毎日使用させて頂いている、ありがたーい、神プラグインなんです。😀

どんなプラグインかと言うと、以下のように書いてあります。（作者tmatsuurさんの文言引用）

HTML編集モードに特殊文字（HTMLエンティティ）を挿入できるボタン、顔文字・絵文字を挿入できるボタン、
過去の投稿ページのリンクを挿入できるボタンを追加するプラグインを作ってみました。
HTML編集モードの作業効率を向上させるプラグインです。
HTML編集モードをメインに使用されている方は、お試しあれ。

因みに「HTMLエンティティ」について
[show_more more=”*****HTMLエンティティについてちょっと覗いてみる” less=”****覗いてみたので閉じる” color=”#2098a8″ list=”≫”]
HTMLの記号をそのまま記載してもブラウザーで正しい表示をしません。
HTMLの記号を正しくブラウザーで見せる必要がある時は
わざわざエンティティコードというものを書かなくてはなりません。

この記号変換をWEBで簡単にやってくれるツールを
公開されている方々が沢山いますので興味がある方は一度試してみて下さい。
以下のサイトでHTMLエンティティ生成が簡単に変換可能です。

HTMLエンティティ化 | Web制作小物ツール - dounokouno.com

昔、私もよくやっていたのが、メールアドレスの HTML エンティティ化。
HPやブログでメールアドレスを公開すると、アドレス収集ソフトに簡単に拾われてしまって
バンバンスパムメールが嵐のように届く事になってしまいます。

アドレス収集ソフト対策の一環としてメールアドレスを
エンティティコードに変えて記載するとブラウザーで普通に見えてても
アドレス収集ソフトに引っ掛かりにくくなるんです。
[/show_more]

“ちょっと覗いてみる”を覗いてくれた方には、少し被った書き方ですが、
HTMLの記号やタグを正しくブラウザーで表示させる必要がある時は
わざわざエンティティコードというものを書かなくてはなりませんし、

例えばソースコードを表示される為のプラグイン、
Crayon Syntax Highlighter等をいれたりとか、
短いコードを記載する時でも何かと面倒だったりします。

この面倒な事を解消してくれるのが、HTML entities button。

テキストエディタで記事を書く際にHTMLエンティティをオート変換・挿入してくれます。
しかも、私の大好きな絵文字挿入も、記号文字もボタン一つでポンポン挿入してくれるんです。

もうね、手放せなくなってしまっています。

この便利なプラグインを是非是非試して頂きたいです😘

HTML entities button の使い方

HTML entities button

HTML entities buttonをダウンロードして有効化する

https://ja.wordpress.org/plugins/html-entities-button/
上記ページでバージョン 1.7.0 をダウンロードし
ZIPファイルをWordpressに上げて有効化します。

ダッシュボードプラグイン新規追加プラグインのアップロード
参照でファイルを選択し ZIPファイルをアップロード。
この流れで有効化するか、
ダッシュボードプラグイン新規追加
プラグインの検索（画面右上）で「HTML entities button」と入力、
検索で上がってきたものをインストールし有効化します。

設定～という設定は無し。デス😏　有効化するだけです。

主な使用方法は、作者tmatsuurさんのページでも書かれていますし、

HTML entities button：プラグイン作ってみました

以前投稿した「HTML編集モードに定型文ボタンを追加する」をアレンジして、HTML編集モードに特殊文字（HTMLエンティティ）を挿入できるボタン、顔文字を挿入できるボタン、過去の投稿ページのリンクを挿入できるボタンを追加するプラグインを作ってみました。HTML編集モードの作業効率を向上させるプラグインです。2.1.0で***

そもそも解説の必要がない程、簡単に使えますから必要ないかも知れませんが、
(若しかして、ビジュアルエディタをメインで使っている人の方が多いのかな…?)
使い方について詳しく記事にされているサイトが見当たらないので、
ファンとしては熱弁をふるうしかないでしょう😅

では、項目別に例を挙げてみます。

有効化後のテキストエディタ画面

有効化し、記事編集画面のテキストエディタに切り替えます。
すると以下のようにボタンが増えている筈です。

有効化で挿入ボタンが増える

この新しく増えたボタン達がテキストエディタ内で活躍してくれます。😌

特殊文字変換（HTMLエンティティ変換）

例えば、中央寄せを行うHTMLタグ<center>中央寄せタグ</center>
と書いてWEB表示させたい場合。

エンティティ変換すると「<center>中央寄せタグ</center>」となります。

これをHTML entities buttonで変換させます。

変換方法は以下の画像のように、<center>中央寄せタグ</center>と書いた部分をペーストし、
ボタンをクリックするだけです。

<center>中央寄せタグ</center>と書いたそのままをWEB表示させたい場合。

特殊文字を挿入

特殊文字って皆さんどうやって書いていますか?
例えば「&」は「あんど」とタイプして変換するとか、
「きごう」とタイプして変換すると思います。

「←↑→↓」こうした「矢印」はどうでしょう。
「やじるし」とタイプして変換してますよね?

HTML entities buttonはボタンをクリックしマウス選択で特殊文字(記号)を挿入してくれます。
だから、＆でも、↓でも簡単挿入～

_{⇐このボタンをクリック。ボタンの初期状態は「<」になっています。}
すると、挿入出来る特殊文字や記号が出てきますから、

選択するだけ😄

以下は「&」の入力例

挿入可能な特殊文字は48通り。

<	>	«	»	“	©	®	™
&	±	×	÷	√	≅	≈	≠
∝	∞	∠	°	¢	£	€	¥
µ	§	¶	¡	¿	∴	…	↵
¼	½	¾	¹	²	³	←	↑
→	↓	↔	⇐	⇑	⇒	⇓	⇔

実用性のある特殊文字をチョイスされているのだと思います。

タグ開始・終了を < > と書くときにもボタン一つですから、楽ですよ😉

顔文字・絵文字を挿入

顔文字・絵文字を挿入する方法も特殊文字を入れる時と同じです。
表示させたい顔文字・絵文字をクリックするだけ。

絵文字を変更したくない場合は、スマイリーの横の「▼」をクリックします。

以下のような顔文字・絵文字が記事編集画面のテキストエディタ内から挿入できるのです。
🐀🐂🐅🐇🐈🐉🐍🐎🐏🐒🐓🐕🐖🐘🐣

絵文字なので、フォントサイズを変えれば、勿論大きさも好きな大きさにできます。
🐣これは28PX 🐣これは12PX

沢山の顔文字・絵文字がありますので、とりあえずキャプチャーで掲載しておきます。

[show_more more=”キャプチャーではなく、実際の表示を見たい場合はここをクリック” less=”****閉じる” color=”#2098a8″ list=”≫”] 種類が多いので一部ですが、実際の表示です。font-sizeを36pxで表示しています。
💕💖🙇💬💀👤👓👗👘👚🚴🎊🌰🍉🍔🍙🍮🍳🌴🎃🎄🚂⛺💈💩🔰🎤📢📌🍴[/show_more]

画像が其々でかいので、ちっこいサムネです。
画像をクリックするとテキストエディタ内での実物表示で開きます。