【WordPress】ビジュアルモードでspanタグが消えたら、TinyMCEエディタの設定をしよう

【WordPress】ビジュアルモードでspanタグが消えたら、TinyMCEエディタの設定をしよう

どうも、イソップです。

WordPressで記事を編集中に、ビジュアルモードとテキストモードを切り替えることで、spanstyleなどのタグが自動で削除されることはないでしょうか。

なぜなら、WordPressのエディターで自動削除される設定になっているからです。
これはfunctions.phpに設定を追加することで回避できます。

<span class="">のように、class属性をつけると削除されないといった記事をよく見かけますが、

何を言ってんだお前らは。いちいち入力する手間がかかるし、HTMLが汚れるだろ

ということで、functions.phpへの設定方法を紹介します。

tiny_mce_before_initフィルターの設定を追加する

テーマディレクトリのfunctions.phpの最後に、次のコードを追加します。

function my_tiny_mce_before_init( $init_array ) {
    $init_array['valid_elements']          = '*[*]';
    $init_array['extended_valid_elements'] = '*[*]';

    return $init_array;
}
add_filter( 'tiny_mce_before_init' , 'my_tiny_mce_before_init' );

WordPressにはtiny_mce_before_initフィルターという仕組みがあるので、ここでTinyMCE(WordPressで使用されるテキストエディタ)の設定を渡してあげるとタグが削除されるのを回避できます。

設定内容は次のとおりです。

  • valid_elementsで全てのタグと属性値を許可
  • extended_valid_elementsで既存設定に追加されている全てのタグと属性値を許可

これで設定は完了です。

tiny_mce_before_initには他にも設定項目がたくさんあるので、気になる人は次のページも目を通してみると参考になります。
TinyMCE – WordPress Codex 日本語版
TinyMCE | Configure

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.