【wordpress】テキストエディタのカスタマイズ

wordpressには、ビジュアルエディタとテキストエディタの二種類がある。

自分は主にテキストエディタの方を使っているのだが、これがまた読みにくいのだ。

もちろん、記事の方ではきちんと反映されているのだが、自分が編集するときに文字の見にくさが少し気になる。

そこで、テキストエディタのカスタマイズをfunctions.phpで行った。

テキストエディタのfontをメイリオに変える

最初に、wordpressの左バーの「外観」「テーマの編集」を選ぶ。

そうすると、最初はスタイルシート (style.css)が表示されるので、テーマのための関数 (functions.php)を表示させる。

このテーマのための関数 (functions.php)、重要なコードが多数記載されているので、最初に他の記事を見て、予めfunctions.phpの基本知識を身につけたほうがオススメだ。

このテーマのための関数 (functions.php)の一番下に、次のコードを追加する。

/*--------------------------------------
 エディタカスタマイズ
--------------------------------------*/
function change_editor_font(){
    echo'<style type="text/css">
        textarea#content.wp-editor-area {
        font-family: メイリオ;
        font-size:15px;
        line-height:1.6;
        color:#333;
        background: #fafafa;
        }
    </style>';
}
add_action('admin_head', 'change_editor_font');

文字の大きさが気に入らない場合、「font-size:15px;」を編集すればいい。

「15」を「14」にすると文字が小さくなり、「16」にすると文字が大きくなる。

「line-height:1.6;」では、行間の高さを変更できる。

「color:#333;」では、文字の黒さを変えることができる。

「333」を「000」にすると黒が濃くなり、「444」にすると文字が薄くなる。

もちろん、他の色、例えば赤色、青色、黄色にするのも可能だ。

他の色を調べたい場合は、「HTMLカラーコード」や「WEB色見本 原色大辞典 – HTMLカラーコード」を参考にしてほしい。

そうすれば、各色のソースコードを調べられる。

「background: #fafafa;」では、テキストエディタの背景色を変えられる。

これも、先ほどのソースコードを参考にしてほしい。

「font-family: メイリオ;」では、フォントを他のものに変えることができる。

今のコードが気に入らない場合、ソースコードを変えるのがお勧めだ。

テキストエディタを変えた感想

自分は主にテキストエディタを使うため、今までフォントが一番気になっていたのだが、これで記事の編集がしやすくなった。

今記事を書いているときでも、フォントがメイリオのため、とても記事が見やすい。

WordPressでブログを書いている方は、テキストエディタをカスタマイズしてみると効率が上がるかもしれない。

参考:「WordPress投稿画面 テキストエディタのフォントを変更したい | カゴブロ