WordPressのビジュアルエディターにフォントサイズ変更機能を付けるカスタマイズ方法

WordPressのビジュアルエディター(TinyMCE)にフォントサイズ変更機能を付加する方法を最近知りました。

今回紹介するカスタマイズを行えば、ビジュアルエディターからテキストを選択して、フォントサイズを変更できる以下のような機能を取り付けることができます。

ビジュアルエディターにフォントサイズ変更機能を追加

この方法は、フォーラムでみきさんに教えていただきました。良い機会なので、カスタマイズメモとしてまとめておきたいと思います。

スポンサーリンク
レクタングル(大)広告

主な手順

今回のカスタマイズを行うのに必要な主な手順は、たったこれだけです。

  1. functions.phpにコードを追加する

個別に設定を変更しない限りは、コピペ一発で行うことができます。

functions.phpにコードを追加する

WordPressのビジュアルエディター(TinyMCE)のツールバー一段目に「フォントサイズ変更」機能を付加するには、以下のコードをfunctions.phpに貼り付けます。

//ビジュアルエディターのフォントサイズ変更機能の文字サイズ指定
add_filter( 'tiny_mce_before_init', function ($settings) {
    //フォントサイズの指定
  $settings['fontsize_formats'] =
      '10px 12px 14px 16px 18px 20px 24px 28px 32px 36px 42px 48px';
  //$settings['fontsize_formats'] = '0.8em 1.6em 2em 3em';
  //$settings['fontsize_formats'] = '80% 160% 200% 300%';
  return $settings;
} );

//Wordpressビジュアルエディターに文字サイズの変更機能を追加
add_filter('mce_buttons', function ($buttons){
    //フォントサイズ変更機能を追加
  array_push($buttons, 'fontsizeselect');
  return $buttons;
});
無名関数を利用しているので、PHP5.4以上で利用する必要があります。

フォントサイズの変更

フォントサイズは、tiny_mce_before_initフックの部分で、自由に変更することができます。

例えば以下のようなコード指定したピクセルサイズで変更することができます。

$settings['fontsize_formats'] =
      '10px 12px 14px 16px 18px 20px 24px 28px 32px 36px 42px 48px';

pxサイズでフォントサイズ変更

次のように、emなんかで指定することも可能です。

$settings['fontsize_formats'] = '0.8em 1.6em 2em 3em';

emサイズでフォントサイズを変更

もちろん%サイズで指定することも可能です。

$settings['fontsize_formats'] = '80% 160% 200% 300%';

%サイズでフォントサイズを変更

上記のように、$settings[‘fontsize_formats’]に対して半角スペース区切りの文字サイズを指定することによって、自由に「好みのサイズ項目」を追加することができます。

フォントサイズ変更機能の追加位置

コードに記述したadd_filterで「mce_buttons」をフックすることによって、ビジュアルエディターのツールバーの一段目に追加されます。

mce_buttonsだとToolbarの一段目に追加

「mce_buttons_2」をフックすることによって、ツールバーの2段目に追加されます。

mce_buttons_2だとツールバーの二段目に追加

「mce_buttons_3」をフックすることによって、ツールバーの3段目に追加されます。

mce_buttons_3だとツールバーの三段目に追加

「mce_buttons_4」を利用することによって、4段目まで利用することができます。

その他にも、左右の挿入位置を入れ替える方法もありますが、割愛。詳しくは以下を参照してください。

参考 [WordPress] プラグインを使わずにビジュアルエディタへボタンを追加/削除したり、オリジナルの並びにしたりする方法 | memocarilog

まとめ

このような感じで、特にサイズなどを変更しない限りは、コピペ一発と非常に手軽に「フォントサイズ変更」機能を追加することができます。

ただ、この機能を使用すると以下のようなstyle属性を用いてインラインスタイルで指定されます。

<span style="font-size: 32px;">私はその人を常に先生と呼んでいた</span>

ですので、AMPページなどを表示している場合は、style属性を取り除く処理等をしないとバリデーションエラーになるので注意が必要です。

というわけで「ビジュアルエディターから自由にフォントサイズを変更したい」とか「よく利用するフォントサイズをビジュアルエディター自体に登録しておきたい」なんて場合には、便利なカスタマイズかと思います。

『WordPressのビジュアルエディターにフォントサイズ変更機能を付けるカスタマイズ方法』へのコメント

  1. 名前:みき 投稿日:2016/10/17(月) 19:24:37 ID:d92150f41

    おっ!
    まさか寝ログのほうにも書いていただけるとは・・・
    この記事を見てお役に立っている方がいましたら
    うれしいです!!

  2. アバター画像 名前:わいひら 投稿日:2016/10/17(月) 22:21:02 ID:993a5b3d8

    教えていただいたことを参考に、記事のネタにまでさせていただきました。
    ビジュアルエディターは、意外と表示されていない機能があらかじめあるんですね。
    いろいろと、教えていただきありがとうございます。

  3. 名前:みき 投稿日:2016/10/18(火) 00:54:15 ID:4c89ad9dc

    WordPress側で設定されているんですかね?

  4. アバター画像 名前:わいひら 投稿日:2016/10/18(火) 12:16:14 ID:b35db8e67

    単にあれだけの記述で機能を追加できるので、Wordpressにあらかじめ機能が用意されていたんだと思います。多分。

  5. 名前:manabujp 投稿日:2017/08/31(木) 10:22:48 ID:55431a09b

    フォントサイズの変更でいろいろなブログを読んで願い叶わず意気消沈してましたが、このコードは一発でした。
    ありがとうございました。

  6. アバター画像 名前:わいひら 投稿日:2017/09/01(金) 11:16:30 ID:a56c186d7

    記事がお役に立てたようで嬉しいです。
    書き込みありがとうございます!