この記事は最後に更新してから1年以上経過しています。

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

さまざまな特殊文字をすばやく挿入する

説明

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

インストールおよび使用方法

1. HTML entities buttonアーカイブファイルを解凍し、フォルダごと /wp-content/plugins/ の中に入れてください。
最新のHTML entities buttonアーカイブファイルは、「wordpress.org（最新版は2.1.0: 約215KB）」からダウンロードしてください。
2. 管理ページのプラグインページで「HTML entities button」を有効にしてください。
プラグイン一覧にある「HTML entities button」の「有効化」をクリック管理者権限のアカウントでログインし、サイドナビの「プラグイン」をクリック。一覧の中から「HTML entities button」の「有効化」をクリックしてください。
3. 「投稿」ー「新規追加」などの投稿ページを開きます。「ビジュアル」モードの場合は「HTML」タブをクリックしてください。
「b」ボタンの左側に「HTML entities」ボタンが追加されたところツールバーの「b」ボタンの左側に「HTMLエンティティ」ボタンと「投稿リンク」ボタンが追加されている。「HTMLエンティティ」ボタンの初期状態は「<」です。
4. 試しに「<」ボタンをクリックしてください。
「<」をクリックすると、エディタに「<」が挿入されるエディタ内のカーソル位置に「<」のHTMLエンティティとして「<」が挿入される。
5. 特殊文字を変更する場合は「<」ボタン横の「▼」をクリックしてください。
「▼」をクリック「▼」をクリックすると、特殊文字の一覧が表示される。
6. 表示された特殊文字の一覧の中から目的の特殊文字をクリックしてください。
目的の特殊文字をクリックすると、その特殊文字のHTMLエンティティが挿入される目的の特殊文字をクリックすると、エディタ内のカーソル位置にその特殊文字のHTMLエンティティが挿入される。なお、特殊文字を変更しない場合は「▼」をクリックしてください。
7. 直前の投稿ページのリンクを挿入する場合は、「投稿リンク」ボタンをクリックしてください。
「投稿リンク」をクリックすると、エディタいに「直前に投稿したページのリンク」が挿入されるエディタ内のカーソル位置に「直前に投稿したページのリンク（aタグ）」が挿入される。
8. 投稿ページを選択する場合は「投稿リンク」ボタン横の「▼」をクリックしてください。
「▼」をクリック「▼」をクリックすると、過去の投稿ページの一覧が表示される。
9. 表示された投稿ページの一覧の中から目的の投稿ページタイトルをクリックしてください。
目的の投稿ページタイトルをクリックすると、その投稿ページのリンクが挿入される投稿ページの一覧は、それぞれ左側が投稿日時、右側がページタイトルになる。目的の投稿ページタイトルクリックすると、エディタ内のカーソル位置にその投稿ページのリンク（aタグ）が挿入される。なお、一覧表示を取り消す場合は「▼」をクリックしてください。
10. 顔文字を挿入する場合は「:)」ボタンをクリックしてください。
「:)」をクリックすると、エディタいに「:smile:」が挿入されるエディタ内のカーソル位置に顔文字のHTMLエンティティとして「:smile:」が挿入される。
11. 顔文字を変更する場合は「:)」ボタン横の「▼」をクリックしてください。
「▼」をクリック「▼」をクリックすると、顔文字の一覧が表示される。
12. 表示された顔文字の一覧の中から目的の顔文字をクリックしてください。
目的の顔文字をクリックすると、その顔文字のHTMLエンティティが挿入される目的の顔文字をクリックすると、エディタ内のカーソル位置にその顔文字のHTMLエンティティが挿入される。なお、顔文字を変更しない場合は「▼」をクリックしてください。
13. HTMLエンティティに変換したいテキストを選択し、「»&amp;」ボタンをクリックしてください。
変換したいテキストを選択してボタンをクリック、その中の特殊文字がHTMLエンティティに変換されるエディタ内の変換したいテキストを選択し、「»&amp;」ボタンをクリック。選択されていたテキスト内の特殊文字（&<>など）がHTMLエンティティに変換される。
14. 特殊文字に変換したいテキストを選択し、「& «」ボタンをクリックしてください。
エディタ内の変換したいテキストを選択し、「& «」ボタンをクリック。選択されていたテキスト内のHTMLエンティティが特殊文字（&<>など）に変換される。
15. バージョン4.2で追加された絵文字を使用する場合は、まず設定画面（プロパティページ）で対象をチェックしてください。
「設定」－「html entities button」をクリックして設定画面を表示。続いて「顔文字」の次にある「絵文字」をチェックして、設定内容を保存する。
16. 絵文字を変更する場合は「絵文字」ボタン横の「▼」をクリックしてください。
「絵文字」チェックして保存
17. 表示された絵文字の一覧の中から目的の顔文字をクリックしてください。
目的の絵文字をクリックすると、エディタ内のカーソル位置にその絵文字のHTMLエンティティが挿入される。絵文字はいくつかのカテゴリー別に分類されており、各カテゴリーを示すタブをクリックすることで切り替えできる。なお、絵文字を変更しない場合は「▼」をクリックしてください。

更新履歴

  • 2021.04.28 HTML entities button 2.2.0をリリース 一部の環境でボタンが表示されない不具合を修正。同時にWordPress 5.7以降向けにCSSとJavaScriptを調整しました。
  • 2017.12.17 HTML entities button 2.1.1をリリース（WordPress 4.9以降において設定ページがユーザの言語で表示されない不具合を修正）。
  • 2017.07.11 HTML entities button 2.1.0をリリース（管理画面でおなじみのDashicons挿入ボタンを追加）。
  • 2016.08.28 HTML entities button 2.0.0をリリース（フォントファミリーとフォントサイズを変更するツールを追加）。
  • 2015.09.09 HTML entities button 1.7.0をリリース（絵文字（wpemoji）を使用するオプションを追加し、「絵文字（新）」ボタンを追加）。
  • 2015.04.24 HTML entities button 1.6.0をリリース（旧絵文字を使用するオプションを追加）。
  • 2014.12.25 HTML entities button 1.5.2をリリース（サブメニュー追加時のパラメータを調整）。
  • 2014.06.03 HTML entities button 1.5.1をリリース（WordPress 3.9以降の幅782ピクセル以下で、ボタンの高さを調整）。
  • 2014.02.19 HTML entities button 1.5.0をリリース（プロパティページ、HTMLエンティティを特殊文字に変換するボタンを追加）。
  • 2013.12.17 HTML entities button 1.4.1をリリース（ボタンの見た目をWordPress 3.8に合わせた）。
  • 2012.02.24 HTML entities button 1.4.0をリリース（「特殊文字のHTMLエンティティ変換」ボタンを追加）。
  • 2012.01.04 HTML entities button 1.3.6をリリース（1.3.4のcss修正ミスとIE7の不具合対応）。
  • 2011.12.22 WordPress 3.3でボタン間隔が開き過ぎていたのを修正（cssが正しく適用されていなかった問題に対処）。
  • 2011.12.13 WordPress 3.3 日本語版で動作確認。
  • 2011.12.02 HTML entities button 1.3.3をリリース（フランス語リソースを追加）。
  • 2011.12.01 HTML entities button 1.3.2をリリース（IEで投稿リンクボタンを押した際にアラートメッセージが表示される問題に対処。WordPress 3.3 RC1で動作確認）。
  • 2011.11.29 HTML entities button 1.3.1をリリース（英語リソースを追加）。
  • 2011.11.14 HTML entities button 1.3.0をリリース（WordPress 3.3beta3の不具合を修正）。
  • 2011.07.12 HTML entities button 1.2.0をリリース（「顔文字」ボタンを追加）。
  • 2011.07.01 HTML entities button 1.1.1をリリース（IE7においてボタンの表示がおかしかったところを修正）。
  • 2011.06.30 HTML entities button 1.1.0をリリース（「投稿リンク」ボタンを追加）。
  • 2011.06.29 HTML entities button 1.0.0をリリースしました。

最終更新 : 2021年04月28日 10:34

関連

お勧め

delete_post_meta（2018年5月27日 更新）

bool delete_post_meta( int $post_id, string $meta_key [ , mixed $meta_value = '' ] )
投稿情報のカスタムフィールド情報を削除する。

wp_is_numeric_array（2018年5月27日 更新）

bool wp_is_numeric_array( mixed $data )
数値キーのみの配列か調べる。

get_tag_regex（2013年8月3日 更新）

string get_tag_regex( string $tag )
HTMLタグの正規表現パターンを取得する。

get_all_page_ids（2012年5月30日 更新）

array get_all_page_ids( )
全ページ（post_typeが'page'）の投稿IDを取得する。

the_post_thumbnail_caption（2018年5月27日 更新）

void the_post_thumbnail_caption( mixed $post = null )
投稿ページのサムネイル（アイキャッチ画像）キャプションを表示する。