メインコンテンツまで移動する

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

  • 公開日
  • 更新日

Akira Web クリエイター

独自の「スタイル」を追加

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

それが 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文字目」には「オレンジ」と「緑」が追加されます。

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

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

独自の仕様に変更

Cocoon のフィルターフックには、ビジュアルエディターの TinyMCE（WordPress 5.0 からはクラシック） を独自の仕様にできるtinymce_init_array もあります。

大雑把に言えば、WordPress のデフォルトで備わっているフィルターフックの 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のビジュアルエディタをカスタマイズする | webOpixel

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

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

よく使うタグを予め登録しておけば、快適に文章が書けます。使いたくないタグを削除しておけば、間違って使うことを防げます。

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

フォローする