Cocoon のフィルターフックでビジュアルエディターをカスタマイズ

ビジュアルエディターを変更するCocoonのフィルターフック

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

WordPress テーマの Cocoon には、多くのテーマ独自のフィルターフックが用意されています。

このフィルターフックを使えば、自由自在にカスタマイズが可能。

中でも多くの方に役に立ちそうなのが、ビジュアルエディターをカスタマイズできる 2 つのフィルターフック。

この 2 つのフィルターフックの解説です。

ビジュアルエディターに独自の「スタイル」を追加

関数
apply_filters( 'tinymce_style_formats', $style_formats )
記載ファイル
lib / admin-tinymce-qtag.php

ビジュアルエディターの「スタイル」に、独自のスタイルを追加できるフィルターフックがあります。

それが tinymce_style_formats です。

「スタイル」の追加だけではなく、既存の全ての「スタイル」の書き換えも可能。

例として、下記の 2 グループ・計 4 つのスタイルを追加してみます。

  • 背景色が紫色のグラデーションのボックス
  • 背景色が黄色のグラデーションのボックス
  • 最初の 1 文字目が大きく、かつ背景色がオレンジ
  • 最初の 1 文字目が大きく、かつ背景色が緑

完成図は、こんな感じです。

スタイル追加後の完成図

カスタマイズは、たったの 2 ステップ。

まず、子テーマの functions.php に、下記のコードを追加します。

add_filter( 'tinymce_style_formats', function( $style_formats ) {
  
  // 背景がグラデーションのボックス
  $style_formats[] = array(
    'title' => 'ボックス(グラデーション)',
    'items' => array(
      array(
        'title'   => '紫',
        'block'   => 'div',
        'classes' => 'purple-gradation gradation-box'
      ),
      array(
        'title'   => '黄',
        'block'   => 'div',
        'classes' => 'yellow-gradation gradation-box'
      )
    )
  );
  
  // 最初の 1 文字目が大きい
  $style_formats[] = array(
    'title' => '大きな1文字目',
    'items' => array(
      array(
        'title'   => 'オレンジ',
        'inline'  => 'span',
        'classes' => 'first-letter-orange first-letter'
      ),
      array(
        'title'   => '緑',
        'inline'  => 'span',
        'classes' => 'first-letter-green first-letter'
      )
    )
  );
  
  return $style_formats;
});

'block' => 'div''inline' => 'span' がポイント。

<div> や <p> などのブロック要素は、block を使います。

<span> などのインライン要素は、inline を使います。

そして、子テーマの style.css に CSS を追加します。

/* 背景がグラデーションのボックス */
.gradation-box {
  margin: 40px 0;
  padding: 16px 24px;
}

.purple-gradation {
  background: linear-gradient(32deg, #6002ee, #8600ee, #a400ee, #be00ee, #d602ee);
  color: #fff;
}

.yellow-gradation {
  background: linear-gradient(32deg, #ffeb3b, #eff035, #ddf532, #c8fa34, #b1ff3b);
}

/* 最初の 1 文字目が大きい */
.first-letter {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  font-size: 34px;
  height: 56px;
  justify-content: center;
  margin-right: 4px;
  width: 56px;
}

.first-letter-orange {
  background: #ff8d00;
}

.first-letter-green {
  background: #90ee02;
}

これで終わりです。

ビジュアルエディターで確認してみます。

WordPress 5.0 で採用された Gutenberg の場合には、「スタイル」は下記の手順で使えます。

  1. 「ブロック追加」を選択
  2. 「フォーマット」を選択
  3. 「クラシック」を選択

「スタイル」をクリックすると、1 番下に「ボックス(グラデーション)」と「大きな1文字目」が追加されています。

また、「ボックス(グラデーション)」には「紫」と「黄」が。

追加された「ボックス(グラデーション)」の紫と黄

「大きな1文字目」には「オレンジ」と「緑」が追加されています。

追加された「大きな1文字目」のオレンジと緑

それぞれ使ってみると、独自のスタイルのできあがり。

独自スタイルを追加したカスタマイズ例

好きなだけ、独自の「スタイル」を追加できます。

ビジュアルエディターを独自仕様に変更

関数
apply_filters( 'tinymce_init_array', $init_array )
記載ファイル
lib / admin-tinymce-qtag.php

Cocoon のフィルターフックには、tinymce_init_array もあります。

これは、ビジュアルエディターの TinyMCE(WordPress 5.0 からはクラシック) を独自の仕様にするためのもの。

大雑把に言うと、WordPress デフォルトで備わっているフィルターフックの tiny_mce_before_init と同じような使い方ができます。

参考tiny_mce_before_init

例として、フォーマットに <div> を追加し、かつ <h1> の見出しを削除してみます。

add_filter( 'tinymce_init_array', function( $init_array ) {
  
  // フォーマットに div を追加、かつ h1 の見出しを削除
  $init_array['block_formats'] = '段落=p; グループ=div; 見出し2=h2; 見出し3=h3; 見出し4=h4; 見出し5=h5; 見出し6=h6; 整形済みテキスト=pre';
  
  return $init_array;
});

参考WordPressのビジュアルエディタをカスタマイズする : フォーマットのh1,h2を削除する

すると、フォーマットに <div> を挿入する「グループ」が追加されました。

カスタマイズ後のフォーマットの例

また、「見出し1」がなくなり、<h1> が挿入できなくなりました。

よく使うタグを予め登録しておけば、快適に文章が書けます。

使いたくないタグを削除しておけば、間違って使うことを防げます。

特に、投稿者が何人かいるようなサイトで、このフィルターフックを使う機会が多いかもしれません。


Cocoon には、デフォルトで豊富な「スタイル」が用意されています。

けれど、「このスタイルに、この色も欲しい。」と思われる方もいらっしゃるでしょう。

また、「ネット上で見つけたスタイルを簡単に使えるようにしたい」と希望される方もいらっしゃるはずです。

その願いは、フィルターフックを使ってカスタマイズすることで叶います。

せっかく用意されているフィルターフック。思う存分に使われてはいかがでしょうか。