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

説明

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

お勧め

flush_rewrite_rules(2015年9月24日 更新)

void flush_rewrite_rules( [ bool $hard = true ] )
リライトルールを更新する。

shortcode_atts(2018年5月27日 更新)

array shortcode_atts( array $pairs, array $atts )
ショートコードの無効な属性値を除外する。属性が省略されている場合は、デフォルト値を設定する。

the_weekday(2012年1月16日 更新)

void the_weekday( )
投稿日の曜日を表示する。

wp_loginout(2018年5月27日 更新)

void wp_loginout( [ string $redirect = '' ] )
閲覧者がログインしているかどうかを調べ、ログインしていなければログインページのリンクを、ログイン済みならばログアウトページのリンクを表示する。

has_term(2012年1月17日 更新)

bool has_term( [ mixed $term = '' [ , string $taxonomy = '' [ , mixed $post = null ] ] ] )
投稿記事にタクソノミーが付属しているか調べる。