WordPress の ビジュアルエディタ TinyMCE の機能を拡張するプラグインとして、TinyMCE Advanced が有名です。この TinyMCE Advanced、バージョンが 4.0 以上になってから更に使いやすくなり、挿入されるタグも非推奨タグが少なくなってきたように思います。まだ一部テーブル関連で非推奨属性が残っていますが。

この設定方法や使い方は、数々のブログ等で山ほど紹介されていますのでここでは書きませんが、ブロック要素の選択肢とフォントサイズの選択肢をもう少し踏み込んで設定するうえで、あまり情報が無かった以下の2件のカスタマイズ方法を紹介します。

  • ブロック要素（見出し）の選択肢を、投稿タイプによって切り替える
  • フォントサイズの選択肢を、ラベルを px、値を % で定義する

ブロック要素（見出し）の選択肢を、投稿タイプによって切り替える

ブロック要素の選択肢をカスタマイズする方法はいくつかのブログ等で紹介されていますが、古い記述方法が書かれている記事も多く、WordPress 3.9 以降は記述方法が変わっていますので注意が必要です。3.9 以降は以下のような感じで functions.php に書きます。

function custom_editor_settings($initArray){
  $initArray['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4';
  return $initArray;
}
add_filter('tiny_mce_before_init', 'custom_editor_settings');

このようにブロック要素の選択肢をカスタマイズすることができますが、例えば、固定ページはページタイトルが h1 なので、本文内は h2 から使用するけど、お知らせなどの投稿はコンテンツ名が h1 で記事タイトルが h2、本文内は h3 から使用するといった場合があると思います。（このサイトもそうです）

この場合、次のようにして投稿タイプによって選択肢を変更することができます。

function custom_editor_settings($initArray){
  global $current_screen;
  switch ($current_screen->post_type){
    case 'page':
      $initArray['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4';
      break;
    case 'post':
      $initArray['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';
      break;
  }
  return $initArray;
}
add_filter('tiny_mce_before_init', 'custom_editor_settings');

これで、固定ページは “段落 見出し2 見出し3 見出し4” が、投稿は “段落 見出し3 見出し4” が選択肢として表示されます。

なお、複数の投稿タイプを指定する場合は case 'post': case 'blog': のように記述します。

因みに、選択肢の定義を区切っている ;（セミコロン）の後に半角スペースを入れると、ラベルが日本語に変換されません。

フォントサイズの選択肢を、ラベルを px、値を % で定義する

TinyMCE Advanced で追加することができるフォントサイズの選択肢、デフォルトは “8pt 10pt 12pt 14pt 18pt 24pt 36pt” ですが、TinyMCE Advanced の設定で Replace font size settings を有効にすると、“8px 10px 12px 14px 16px 20px 24px 28px 32px 36px” となります。

これらのフォントサイズの単位 pt や px は分かりやすいですが、Internet Explorer では文字のサイズを変更することが出来なくなり、アクセシビリティ上の問題があります。そのため、フォントサイズの単位には % や em を使うのが望ましいです。

そのカスタマイズ方法は下記のような感じです。

function custom_editor_settings($initArray){
  $initArray['fontsize_formats'] = '80% 90% 100% 110% 125% 150% 175% 200%';
  return $initArray;
}
add_filter('tiny_mce_before_init', 'custom_editor_settings');

しかし、pt や px のように直感的ではないですし、80% や 90％ などキリのいい数値に設定するとブラウザ間で差が出る場合があります。

そこで、選択肢のラベルは px で表示して、実際にはできるだけ正確な % で設定されるよう、以下のように記述します。

function custom_editor_settings($initArray){
  $initArray['fontsize_formats'] = '12px=75% 14px=87.5% 16px=100% 18px=112.5% 21px=131.25% 24px=150% 28px=175% 32px=200%';
  return $initArray;
}
add_filter('tiny_mce_before_init', 'custom_editor_settings');

このようにすると、例えば “テキスト” という文字列にフォントサイズから 21px を選択したら <span style="font-size: 131.25%;">テキスト</span> と設定されます。

注意点として、先のブロック要素の選択肢は ;（セミコロン）で区切りますが、フォントサイズの選択肢は半角スペースで区切ります。

なお、以上のブロック要素の選択肢とフォントサイズの選択肢の両方を設定する場合、あるいはスタイリング用クラスの設定など、その他のカスタマイズも合わせて設定する場合は、

function custom_editor_settings($initArray){

と、

  return $initArray;
}
add_filter('tiny_mce_before_init', 'custom_editor_settings');

の間に纏めて記述します。