テキストエディタの文字を変更する

説明

テキストエディタ(投稿ページの「テキスト」タブのエディタ)に標準では備わっていない機能を追加する自作プラグイン「html entities button」がほぼ1年ぶりにアップデート。ここではバージョン2.0.0で追加したテキストエディタのフォント切り替え機能について紹介する。

小さい文字が見難い

これまではテキストエディタの文字については無頓着というかあまり気にしていなかったのだが、最近になって「小さくて見難い」と感じることがある。テキストエディタのフォントは、WordPress標準ではフォントファミリーが「Consolas,Monaco,monospace」、サイズが「13px」。使用しているパソコン・ブラウザ環境によると思うが、これらを変更すれば見やすくなるのではと考えたのが、お盆の頃だった。新しいプラグインを作ってもよかったのだが、ツールバーの拡張による実装ということで自作プラグイン「html entities button」を機能拡張することにした。追加するのは「ボタン」じゃないけどね。

フォントサイズの切り替えはnumberタイプのinput要素でいいとして、フォントファミリーはちょっと悩ましかったのだが、最終的に設定ページで切り替え可能なフォントファミリーを事前に登録し、テキストエディタのツールバーにはselect要素(プルダウンメニュー)を配置することにした。管理画面で「設定」-「html entities button」を選択すると次のような内容が表示される。

バージョン2.0.0で追加されたフォントファミリーとフォントサイズの2要素

「フォントファミリー」と「フォントサイズ」の2要素をチェックし、フォントファミリーセットに好みのフォントを指定。フォントファミリーセットは最大3つまで登録可能となっており、ここではセット名を「Meiryo」、その内容として「Meiryo,メイリオ」を設定している。セット名が、ツールバーのプルダウンで表示される内容になるので、利用者がわかりやすいものにするとよいだろう。

ユーザー別にフォント指定を保存

投稿画面に切り替えてフォントを変更してみる。

標準設定(上)とフォント変更後(下)

上部がWordPress標準の表示内容で、下部がフォントファミリーを「Meiryo」、フォントサイズを「16px」に切り替えたものになる。「フォントファミリー」および「フォントサイズ」はどちらも変更と同時にテキストえてぃたの内容が切り替わり、その設定内容はユーザー別に保存される仕組みにした。

それにしても寄る年波には勝てぬってことですかね、とほほ。


最終更新 : 2018年05月27日 10:44

お勧め

restore_previous_locale(2018年11月21日 更新)

string | bool restore_previous_locale()
直前のロケールへ戻す。

is_email(2017年11月28日 更新)

mixed is_email( string $email [, bool $deprecated = false ] )
文字列がメールアドレス形式か調べる。

is_rtl(2015年8月26日 更新)

bool is_rtl( )
現在のロケールが右書き(文字を右から左へ書き進めること)か調べる。

get_parent_theme_file_path(2018年5月27日 更新)

string get_parent_theme_file_path( string $file = '' )
親テーマ内にあるファイルのパス名を取得する。

is_page(2018年7月4日 更新)

bool is_page( [ mixed $page = '' ] )
要求されているページが、ページか調べる。