WordPressのビジュアルエディター（TinyMCE）にスタイルセレクトボックスを追加・カスタマイズする方法

WordPress

Posted at 2024-10-22

WordPressのビジュアルエディターは、記事やページの編集をWYSIWYG（What You See Is What You Get）形式で行えるため、多くのユーザーに愛用されています。しかし、デフォルトの状態では利用できる書式設定が限られているため、より高度なスタイリングを行いたい場合には機能が不足していると感じることがあります。

今回は、WordPressのビジュアルエディター（TinyMCE）にスタイルセレクトボックスを追加し、カスタマイズする方法について詳しく解説します。

tinymce-custom.php
https://gist.github.com/sarap422/1d0e7d153c732b02801c686b2906878a

スタイルセレクトボックスとは

スタイルセレクトボックスとは、ビジュアルエディターのツールバーに追加される書式設定メニューです。このメニューを使用することで、テキストやブロック要素に対して、あらかじめ定義されたスタイルを簡単に適用することができます。

カスタマイズのメリット

作業効率の向上
- よく使用するスタイルをワンクリックで適用可能
- HTMLやCSSの知識がなくても、一貫性のあるデザインを実現
- コピー＆ペーストの手間を削減
デザインの一貫性確保
- サイト全体で統一されたスタイルを維持
- 誤ったクラスの適用を防止
- ブランドガイドラインに沿ったデザインの実装が容易
保守性の向上
- スタイルの一元管理が可能
- CSSの変更だけで全体のデザインを更新可能
- 複数の編集者がいても統一されたスタイルを維持

実装方法

1. 基本的な実装

まず、functions.phpまたはカスタムプラグインに以下のコードを追加します：

// TinyMCEにスタイルセレクトボックスを追加
function add_styles_to_tinymce_buttons($buttons) {
  // スタイルセレクトボックスが既に存在する場合は削除
  $buttons = array_diff($buttons, array('styleselect'));
  
  // スタイルセレクトボックスを先頭に追加
  array_unshift($buttons, 'styleselect');
  
  return $buttons;
}
add_filter('mce_buttons', 'add_styles_to_tinymce_buttons');

2. スタイルの定義

次に、スタイルセレクトボックスに表示するスタイルを定義します：

if (!function_exists('initialize_tinymce_styles')) :
  function initialize_tinymce_styles($init_array) {
    $style_formats = array(
      // フォントファミリー
      array(
        'title' => 'フォントファミリー',
        'items' => array(
          array('title' => 'ゴシック体', 'selector' => '*', 'attributes' => array('lang' => 'ja-GP')),
          array('title' => '明朝体', 'selector' => '*', 'attributes' => array('lang' => 'ja-MP')),
        ),
      ),
      
      // ボタンスタイル
      array(
        'title' => 'ボタン',
        'items' => array(
          array('title' => 'プライマリーボタン', 'inline' => 'a', 'classes' => 'button is-primary'),
          array('title' => 'セカンダリーボタン', 'inline' => 'a', 'classes' => 'button is-secondary'),
        ),
      ),
      
      // その他のスタイル定義...
    );
    
    $init_array['style_formats'] = json_encode($style_formats);
    return $init_array;
  }
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

カスタマイズ可能な主な要素

インライン要素
- テキストの装飾（太字、斜体、下線など）
- フォントサイズ
- テキストカラー
ブロック要素
- 見出し（h1〜h6）
- 段落スタイル
- マージン・パディング
特殊要素
- ボタン
- アラート
- 引用
- カスタムブロック

実装時の注意点

優先順位の設定
- フィルターのプライオリティ値（上記例では10000）を適切に設定
- 他のプラグインとの競合を避ける
パフォーマンスへの配慮
- 必要最小限のスタイルのみを定義
- 複雑すぎる条件分岐を避ける
メンテナンス性
- コメントを適切に記述
- 命名規則の統一
- モジュール化を心がける

まとめ

WordPressのビジュアルエディターをカスタマイズすることで、コンテンツ作成の効率を大幅に向上させることができます。特に、複数の編集者が存在する環境や、デザインの一貫性が重要なプロジェクトでは、スタイルセレクトボックスの活用が有効です。

ただし、カスタマイズを行う際は、ユーザビリティとメンテナンス性のバランスを考慮することが重要です。必要以上に複雑なカスタマイズは避け、実際のユーザーのニーズに基づいた実装を心がけましょう。

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up