この記事は最後に更新してから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

お勧め

add_post_meta(2018年5月27日 更新)

bool add_post_meta( int $post_id, string $meta_key, mixed $meta_value [ , bool $unique = false ] )
投稿情報にカスタムフィールド情報を追加する。

get_post_format_string(2011年9月11日 更新)

string get_post_format_string( [ string $slug ] )
投稿フォーマット名を取得する。

wp_playlist_scripts(2014年4月20日 更新)

void wp_playlist_scripts( string $type )
playlistショートコードのHTML向けのスクリプトを出力予約する。

wp_kses_no_null(2012年4月25日 更新)

string wp_kses_no_null( string $string )
文字列からNULL文字を取り除く。

get_the_terms(2016年2月13日 更新)

mixed get_the_terms( mixed $id = 0, string $taxonomy )
投稿記事のタクソノミー情報を取得する。