【WordPress】ビジュアルエディタで編集したいけどTinyMCEの自動整形をどうにかしたい
ご無沙汰しております。yamashitaです。
どの職業でも"瀬戸際"ってやつが想像以上に続くことってありますよね。
その辺見極める力は是非付けたいところです。
それはそれとしてWordPressで使用されているエディタ、TinyMCEの仕様に振り回されました。
日々コードを見て慣れている開発者としてはテキストエディタ側でHTMLを編集したい、
実際に運用する普段コードに慣れていない人は（あとからプレビューするとしても）ビジュアルエディタで実際の見た目に近い状態で編集したい
という当然の要望がありますよね。
しかし、ビジュアルエディタで編集すると意図して組んだHTMLが崩れてしまうということが多々あり、苦労しました。
検索すると多くの方が困っているようで、プラグイン（主にTinyMCE Advanced）を使ったり、使わなかったりと様々な方法で解決されているようでした。
それらを総合的に取り入れて自動整形がほぼない、きっと最適であろう設定を模索しましましたので紹介致します。
※WordPress5.3でClassic Editorを導入している状態です。
ソースコード
functions.phpに以下のコードを追加してください。
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
function my_format_TinyMCE($in)
{
global $allowedposttags;
$in['valid_elements'] = '*[*]';
$in['extended_valid_elements'] = '*[*]';
$in['valid_children'] = '+a[' . implode('|', array_keys($allowedposttags)) . ']';
$in['indent'] = true;
$in['wpautop'] = false;
$in['forced_root_block'] = false;
return $in;
}
add_filter('tiny_mce_before_init', 'my_format_TinyMCE');
解説
表示した時に余計なものを出力しない
以下のコードで実現しています。the_content()、the_excerpt()を使用するときにpタグが勝手に挿入されてしまう機能を制限しています。
remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');
エディタ操作時に余計な整形をしない
tiny_mce_before_initでフックして設定を変更します。
以下の設定でaタグやliの中身などが丸々消えてしまうのを防ぎます。
始めはこの辺りの設定が必要で調べ始めました。
$in['valid_elements'] = '*[*]';
$in['extended_valid_elements'] = '*[*]';
$in['valid_children'] = '+a[' . implode('|', array_keys($allowedposttags)) . ']';
$in['indent'] = true;
次に以下の設定が必要です。
上の設定だけだと、ビジュアルエディタ切り替え時や改行時に余計なタグの整形が入ってしまいます。（主にp）
wpautopをfalseにすることで、切り替え時にpが消えたりすることを防ぎます。
forced_root_blockは改行時にpタグが入ることを防ぎます。その際にbrが入ってしまいますが、pタグよりはデザインに大きな影響は及ぼすことはないと思います。
Enterでの改行とShift+Enterの改行を入れ替える設定のようなので、Shift+Enterでpタグが挿入されてしまいますが、わかってないとその操作をすることはないでしょう。
ここでforce_p_newlinesが利きそうな気がしますが、どうやらもう存在しないようです。この事実を早く知りたかった。
$in['wpautop'] = false;
$in['forced_root_block'] = false;
まとめ
これを言うと怒られそうですが、重要な設定を変えてしまうのは止めてほしいですね。
wptexturizeにはまだお世話になってないので記載していませんが、すぐ使うことになる思うので事前に動作確認はしておきたいです。
add_filter( 'run_wptexturize', '__return_false' );
すればいいだけ・・・・・・？
TinyMCEにはまだ見ぬ挙動がありそうで怖いので「この設定忘れてるぞ！」とかありましたら教えてください。
