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

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

説明

テキストエディタ(投稿ページの「テキスト」タブのエディタ)に標準では備わっていない機能を追加する自作プラグイン「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

お勧め

comment_text(2018年5月27日 更新)

void comment_text( )
現在のコメント文を表示する。

is_main_site(2018年5月27日 更新)

bool is_main_site( int $site_id = null )
サイトがメインサイトか調べる。

get_the_author_meta(2018年5月27日 更新)

string get_the_author_meta( [ string $field = '' [ , mixed $user_id = false ] ] )
投稿者情報を取得する。

single_cat_title(2018年5月27日 更新)

string single_cat_title( [ string $prefix = '' [ , bool $display = true ] ] )
アーカイブページのカテゴリー名を取得し、パラメータ$displayがtrueならば表示する。$displayがfalseの場合は、文字列として返す。

get_users(2017年11月27日 更新)

array get_users( [ array $args = array() ] )
ユーザー情報を取得する。