閉じる

技術ブログ

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

2023.04.17
WP

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);
?>
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'
),
CSSによる装飾

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

 

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

 

参考記事