みてみたでご紹介させて頂いているプラグインのバージョンは其々最新のものです。WordPress 4.5.3で動作確認済です。🔌

Sponsor Link

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

html-entities-button

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

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

WordPress–記事を投稿する前に変更したい事&追加プラグイン①
WordPress–記事を投稿する前に変更したい事&追加プラグイン① WordPress–私的初期設定–自分が使いやすいように環境整備 *Part 1* この***

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

Sponsor Link

HTML entities button の概要

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

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

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

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

因みに「HTMLエンティティ」について

≫ *****HTMLエンティティについてちょっと覗いてみる


HTMLの記号をそのまま記載してもブラウザーで正しい表示をしません。
HTMLの記号を正しくブラウザーで見せる必要がある時は
わざわざエンティティコードというものを書かなくてはなりません。

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

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

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

≫ ****覗いてみたので閉じる

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

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

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

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

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

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

HTML entities button の使い方

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さんのページでも書かれていますし、

WordPressリファレンス)WordPressのコラム: HTML entities button:プラグイン作ってみました - さまざまな特殊文字をすばやく挿入する

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

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

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

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

html-entities-button_image-1

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

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

特殊文字変換(HTMLエンティティ変換)

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

エンティティ変換すると「&lt;center&gt;中央寄せタグ&lt;/center&gt;」となります。

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

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

html-entities-button_image-2

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

特殊文字を挿入

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

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

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

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

html-entities-button_image-4

選択するだけ😄

以下は「&」の入力例

html-entities-button_image-5

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

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

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

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

顔文字・絵文字を挿入

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

html-entities-button_image-6

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

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

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

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

≫ キャプチャーではなく、実際の表示を見たい場合はここをクリック

種類が多いので一部ですが、実際の表示です。font-sizeを36pxで表示しています。
💕💖🙇💬💀👤👓👗👘👚🚴🎊🌰🍉🍔🍙🍮🍳🌴🎃🎄🚂⛺💈💩🔰🎤📢📌🍴

≫ ****閉じる

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

html-entities-button_image-7-2 html-entities-button_image-7-4 html-entities-button_image-7-6 
html-entities-button_image-7-8 html-entities-button_image-7-10  

凄く充実していますし、
バラエティーに富んでますので、どんなブログにも可愛いアクセントになる事うけあい~。

因みに・・・超余談ですが、
私のサイトで多用させて頂いているのが、この顔文字・絵文字達。
基本の絵文字の方が、Custom Smilies  を削除した後から、使えなくなってしまったんです。

≫ *****Custom Smilies の抑止記事を参考までにみてみる

【抑止記事】好きな絵文字を使いたかったCustom Smiliesは望みを叶えてくれそーだった・・・
【抑止記事】好きな絵文字を使いたかったCustom Smiliesは望みを叶えてくれそーだった・・・ 好きな絵文字・アイコンやオリジナルの絵文字を使いたかっただ***

≫ ****閉じる


しかも、TinyMCE Advancedでビジュアルエディタで挿入可能な筈のスマイリーも使えなくなった。
ビジュアルエディタで絵文字を入れる事は無いのですが、これは残念😩

スマイル達は鯖側からみると残っているので、変な話なのですが、
何かしらのイタズラをしつつ去っていったのでしょう😤

基本のスマイル達を使わなくても新しいスマイル達で事足りているので、
原因探求までに至っていません。被っている絵文字ですし。種類多!ですし😄
その内、突き止めてやります😈

過去の投稿ページのリンクを挿入

これも簡単に入力できます。

過去に書いた記事を投稿記事にリンクしたい時、ポチットすればOKです。

html-entities-button_image-8

Simplicity1.8.7から1.9.0 にアップグレードした途端、
ブログカードが機能するようになったので、
ここ数日は嬉しくてブログカードを使っていますが、

Simplicity1.9.0 シェア数 非表示 機能追加 されたらしいけど・・・
今日は腹痛で一日家なので、PCを開き昨日から気になっていた、 Simplicity1.9.0 のバージョンアップについて、みてみた👀 s***

この機能は便利且つ、楽でいいですよ。

標準装備されているリンクボタンでもクリックすると窓下の方に
「最近の項目を表示しています。」と出てくるので
機能的には重複しているものではありますが、投稿日だけでなく、投稿時間まで表示されています。

まとめ

如何でしたでしょうか。

テキストエディタで記事を書いている人には勿論、
ビジュアルエディタでHTMLタグを学びながら勉強過程を記事にしたりする方にも、
もってこいなプラグインだと思います。

作業効率UP間違いなしですよ。

どのプラグインも言えますが、便利さや利便性というのは、
使い方次第だし、使う頻度にも因るものだと思いますが、
HTML entities buttonは、入れておいて損はないツールです。👍

因みにこの1.7.0バージョンが公開されたのは、2015年9月9日だそう。
私がWordPressで再開を始めたのが同月10日です。

大袈裟ですが、良いタイミングでこんなに意に叶うプラグインに出逢えるなんて。。。
運命すら感じます😌

締め括りはお礼で。

tmatsuurさん、
本当に×10、ありがとうございます🙏
助かっています😊