WordPressのビジュアルエディター(TinyMCE)にフォントサイズ変更機能を付加する方法を最近知りました。
今回紹介するカスタマイズを行えば、ビジュアルエディターからテキストを選択して、フォントサイズを変更できる以下のような機能を取り付けることができます。
この方法は、フォーラムでみきさんに教えていただきました。良い機会なので、カスタマイズメモとしてまとめておきたいと思います。
目次
主な手順
今回のカスタマイズを行うのに必要な主な手順は、たったこれだけです。
- 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; });
フォントサイズの変更
フォントサイズは、tiny_mce_before_initフックの部分で、自由に変更することができます。
例えば以下のようなコード指定したピクセルサイズで変更することができます。
$settings['fontsize_formats'] = '10px 12px 14px 16px 18px 20px 24px 28px 32px 36px 42px 48px';
次のように、emなんかで指定することも可能です。
$settings['fontsize_formats'] = '0.8em 1.6em 2em 3em';
もちろん%サイズで指定することも可能です。
$settings['fontsize_formats'] = '80% 160% 200% 300%';
上記のように、$settings[‘fontsize_formats’]に対して半角スペース区切りの文字サイズを指定することによって、自由に「好みのサイズ項目」を追加することができます。
フォントサイズ変更機能の追加位置
コードに記述したadd_filterで「mce_buttons」をフックすることによって、ビジュアルエディターのツールバーの一段目に追加されます。
「mce_buttons_2」をフックすることによって、ツールバーの2段目に追加されます。
「mce_buttons_3」をフックすることによって、ツールバーの3段目に追加されます。
その他にも、左右の挿入位置を入れ替える方法もありますが、割愛。詳しくは以下を参照してください。
参考 [WordPress] プラグインを使わずにビジュアルエディタへボタンを追加/削除したり、オリジナルの並びにしたりする方法 | memocarilog
まとめ
このような感じで、特にサイズなどを変更しない限りは、コピペ一発と非常に手軽に「フォントサイズ変更」機能を追加することができます。
ただ、この機能を使用すると以下のようなstyle属性を用いてインラインスタイルで指定されます。
<span style="font-size: 32px;">私はその人を常に先生と呼んでいた</span>
ですので、AMPページなどを表示している場合は、style属性を取り除く処理等をしないとバリデーションエラーになるので注意が必要です。
というわけで「ビジュアルエディターから自由にフォントサイズを変更したい」とか「よく利用するフォントサイズをビジュアルエディター自体に登録しておきたい」なんて場合には、便利なカスタマイズかと思います。
おっ!
まさか寝ログのほうにも書いていただけるとは・・・
この記事を見てお役に立っている方がいましたら
うれしいです!!