STINGER7/PLus：投稿エディタで TinyMCE のフォントサイズを追加する方法

WordPressの投稿機能（ビジュアルエディタ）を便利にしてくれるプラグイン「TinyMCE Advanced」はWordPressユーザーはほとんどの方が使っているかと思います。

拡張機能の１つとして「フォントサイズ」が変更できるようになりますが、STINGER7/Plusだと8px〜18pxまでしか選択することができません。

もっと大きい文字も使いたい！という方のために、STINGER7/Plusでフォントサイズを追加する方法をご紹介します。

STINGER7とPlusでは同じ方法で動作確認していますので参考にどうぞ。

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7：テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7：親テーマの任意のファイルを子テーマで編集する方法

functions.phpを編集

STINGERでは親テーマの functions.php でフォントサイズが指定されています。
デフォルトだと8px〜18pxとなっていると思いますので、新たに子テーマの functions.php でフォントサイズを指定し直しましょう。

下記のコードを functions.php に追加してください↓

if (!function_exists('st_tiny_mce_before_init')) {
  /**
   * オリジナルタグ登録
   */
  function st_tiny_mce_before_init( $init_array ) {
  //書式プルダウンメニューのカスタマイズ
  $init_array['block_formats'] = '段落=p;見出し2=h2;見出し3=h3;見出し4=h4;見出し5=h5;見出し6=h6';
  $init_array['fontsize_formats'] = '8px 10px 12px 14px 16px 18px 24px 36px 48px';
  //自作クラスをプルダウンメニューで追加
  $style_formats = array (
    array( 'title' => '太字', 'inline' => 'span', 'classes' => 'huto' ),
    array( 'title' => '太字（赤）', 'inline' => 'span', 'classes' => 'hutoaka' ),
    array( 'title' => '大文字', 'block' => 'p', 'classes' => 'oomozi' ),
    array( 'title' => '吹き出し', 'block' => 'p', 'classes' => 'h2fuu' ),
    array( 'title' => 'はてな', 'block' => 'span', 'classes' => 'hatenamark' ),
    array( 'title' => '注意', 'block' => 'span', 'classes' => 'attentionmark' ),
    array( 'title' => 'チェックマーク', 'block' => 'span', 'classes' => 'checkmark' ),
    array( 'title' => 'メモマーク', 'block' => 'span', 'classes' => 'memomark' ),
    array( 'title' => '黄色ボックス', 'block' => 'div', 'classes' => 'yellowbox' , 'wrapper' => true ),
    array( 'title' => '薄赤ボックス', 'block' => 'div', 'classes' => 'redbox' , 'wrapper' => true ),
    array( 'title' => 'グレーボックス', 'block' => 'div', 'classes' => 'graybox' , 'wrapper' => true ),
    array( 'title' => '引用風ボックス', 'block' => 'div', 'classes' => 'inyoumodoki' , 'wrapper' => true ),
    array( 'title' => 'table横スクロールボックス', 'block' => 'div', 'classes' => 'scroll-box' , 'wrapper' => true ),
    array( 'title' => 'imgインラインボックス', 'block' => 'span', 'classes' => 'inline-img' , 'wrapper' => true ),
    array( 'title' => 'width100%リセット', 'block' => 'span', 'classes' => 'resetwidth' , 'wrapper' => true ),
    array( 'title' => '装飾なしテーブル', 'block' => 'div', 'classes' => 'notab' , 'wrapper' => true ),
    );
  $init_array['style_formats'] = json_encode( $style_formats );
  $init['style_formats_merge'] = false;
  return $init_array;
  }
}
add_filter( 'tiny_mce_before_init', 'st_tiny_mce_before_init' );

if ( !function_exists( 'st_tiny_mce_style_select' ) ) {
  /**
   * TinyMCEにスタイルボタンを追加
   *
   * @param string[] $buttons ボタン
   *
   * @return string[] ボタン
   */
  function st_tiny_mce_style_select( $buttons ) {
    $position = 2;    // 表示する位置 (1〜)

    $button = 'styleselect';

    unset( $buttons[ $button ] );

    $button_count = count( $buttons );

    // 最後
    if ( $button_count === 0 || $button_count < $position ) {
      $buttons[] = $button;

      return $buttons;
    }

    // 1番目
    if ( $position === 1 ) {
      array_unshift( $buttons, $button );

      return $buttons;
    }

    // その他
    $index   = $position - 1;
    $before  = array_slice( $buttons, 0, $index );
    $after   = array_slice( $buttons, $index );
    $buttons = array_merge( $before, array( $button ), $after );

    return $buttons;
  }

}

8行目がフォントサイズを指定する場所になっていますので、使いたいサイズを追加してください。

これでエディタにも反映されていると思います↓

大きい文字を使うとリズムが生まれる？

せっかくなので追加した文字サイズを使ってみます。

これが24px

これは36px

48pxデカすぎ(笑)

という感じでかなりインパクトが強くなるんですが、ここぞという時に使っていけば記事にリズムが出るんじゃないでしょうか。

赤文字もそうですけど使い過ぎるとゴチャゴチャした感じになってしまうので、バランス感覚は大事だと思いますけどね。

STINGERをお使いの皆さんでフォントサイズを増やしたいかたは参考にしてみてください。

ではまた〜♪