WordPressのビジュアルエディターにスタイルを追加（Advanced Editor Tools）

技術ブログ

WordPressのビジュアルエディターにスタイルを追加（Advanced Editor Tools）

2023.04.17

WordPressで本文入力する際、特定のタグやクラスなどを簡単に追加できたらと思いませんか？

今回はWordPressのビジュアルエディター（Advanced Editor Tools）をより使いやすくするため、独自のスタイルを追加する方法をご紹介します。

準備（プラグイン）

プラグインインストール

まず以下のプラグインをインストール、有効化します。

Advanced Editor Tools (旧名 TinyMCE Advanced)
Classic Editor

プラグイン設定

デフォルトのビジュアルエディターは以下のようになっていて、スタイルボタンがありません。

スタイルボタンを追加します。
設定 > Advanced Editor Tools > 旧エディター (TinyMCE)
「スタイル」が使用しないボタン内にあります

「スタイル」をクラシックエディター用ツールバー内にドラッグ&ドロップで追加します。
「変更を保存」をクリックします。

スタイルボタンが追加されます

設定

編集するファイル

独自のスタイルを追加するためには、WordPressの以下のファイルに設定を記述します。

function.php

記述内容

function.phpには、追加したいスタイルを配列で設定します。

以下のコードが雛形です。


<?php
function initialize_tinymce_styles($init_array) {
  //追加するスタイルの配列を作成
  $style_formats = array(
    array(
      'title' => '赤字',
      'inline' => 'span',
      'classes' => 'red'
    ),
    array(
      'title' => 'div',
      'block' => 'div',
      'classes' => 'success'
    ),
    array(
      'title' => 'div(wrap)',
      'block' => 'div',
      'classes' => 'success02',
      'wrapper' => true
    ),
    array(
      'title' => 'クラス',
      'selector' => 'p',
      'classes' => 'p_class'
    ),
    array(
      'title' => 'クラス（複数）',
      'selector' => 'p,h5',
      'classes' => 'p_h5_class'
    ),
    array(
      'title' => 'クラス（全て）',
      'selector' => '*',
      'classes' => 'all_class'
    ),
  );
  //JSONに変換
  $init_array['style_formats'] = json_encode($style_formats);
  return $init_array;

}
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);
?>

<?php

function initialize_tinymce_styles($init_array) {

//追加するスタイルの配列を作成

$style_formats = array(

array(

'title' => '赤字',

'inline' => 'span',

'classes' => 'red'

array(

'title' => 'div',

'block' => 'div',

'classes' => 'success'

array(

'title' => 'div(wrap)',

'block' => 'div',

'classes' => 'success02',

'wrapper' => true

array(

'title' => 'クラス',

'selector' => 'p',

'classes' => 'p_class'

array(

'title' => 'クラス（複数）',

'selector' => 'p,h5',

'classes' => 'p_h5_class'

array(

'title' => 'クラス（全て）',

'selector' => '*',

'classes' => 'all_class'

);

//JSONに変換

$init_array['style_formats'] = json_encode($style_formats);

return $init_array;

}

add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

title

配列の ‘title’ で指定した値が、ビジュアルエディターのスタイルの選択肢として追加されます。

title以下のパラメータ

‘title’ 以下に記述されている ‘inline’ や ‘classes’ などの記述は、変更を加える際の仕様を設定しています。

inline
実行した際に使われるラッパーを指定します。spanなどのインライン要素を指定できます。
block
実行した際に使われるラッパーを指定します。h1などのブロック要素を指定できます。
選択範囲が既に別のブロック要素で囲まれている場合は、指定したブロック要素に置き換えられます。（wrapperがfalseの場合）
selector
実行した際に影響を与える要素を指定します。p,h1,h2,h3ul,ol,liなどの要素名を指定できます。
classes
要素に追加されるクラス名を指定します。任意のクラス名を指定できます。
wrapper
trueにすることで、選択した要素の親要素としてラップします。デフォルト値はfalseです。
falseでの動作は’block’を参照ください。

スタイル適用前と適用後

実際にスタイルを適用する前と後で変化を見てみましょう。

適用前

スタイルを適用したい箇所を選択します。

適用前の状態をビジュアルエディターからテキストエディターに切り替えて確認しておきます。

ビジュアルエディターに戻り、スタイルから「赤字」を例に適用します。

適用後

テキストエディターで確認すると、スタイルが適用されて指定した設定に変更されています。

「赤字」の設定は以下でしたので、inline要素のspanで囲まれ、redというクラスが付与されています。


//赤字の設定
array(
　'title' => '赤字',
　'inline' => 'span',
　'classes' => 'red'
),

//赤字の設定

array(

　'title' => '赤字',

　'inline' => 'span',

　'classes' => 'red'

CSSによる装飾

付与されたクラスをCSSで装飾してデザインを整えることで、ビジュアルエディターから独自のスタイルを反映することができます。

今回ご紹介した方法を使えば、自分で作成したスタイルを追加することが出来るので、記事投稿する時にデザインの幅がぐっと広まります！

参考記事

WordPressのビジュアルエディター（TinyMCE）に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ

ツイートする
シェアする
URLとタイトルをコピーする