【WordPress】ビジュアル・テキスト切り替えでタグが消える時の対処法（style,div,span,p,br等）

WordPressでカスタマイズ記事を書いていると、投稿画面でビジュアルとテキストを切り替えて行ったり来たりしますよね。

そんな時にタグが消えてしまったりしたことありませんか？

普通の文章を書いている時は問題ないんですが、「style,div,span,p,br」等のタグを手打ちした時に問題が起こります。

特にCSSの説明をしてる記事を書いている時に、切り替えの度に確実に発生してイライラしていました…。
この記事とか：CSSだけで吹き出し・バルーンを作る方法（SNS連携ボタンのアレ）

何かしらプラグイン入れれば対応できるんだろうな～と思って調べて見つけました。

PS Disable Auto Formattingは使えない

どうにかしないと！と思って探していた時に、見つけたプラグイン「PS Disable Auto Formatting」がありました。

あ、コレ入れればいいんや！と思って、暇を見つけて導入しようと考えてました。

そして、昨日入れてみたんです。

コレで安心だ！と思って切り替えようとしたら…。切り替えタブをクリックしても切り替わらない…。

バグっとる∑(ﾟДﾟ)ｶﾞｰﾝ

何か設定画面でもWarning吐いてるし(´・ω・｀)

どうやらWordPressの4.3バージョンアップで、切り替えができなくなる不具合が発生している模様。

PS Disable Auto Formattingが効かないエラーの修復方法！プラグイン改造でWordPressアップデート後も使える裏技！

一応、一行だけコメントアウトしたら動くようになるらしいです。

function __construct() {
	global $wp_version;

	if ( version_compare( $wp_version, '2.5', '>=' ) ) {
		add_action( 'init'                , array( $this, 'disable_auto_formatting_init' ) );
		add_action( 'admin_menu'          , array( $this, 'add_disable_formatting_setting_page') );
//		add_filter( 'print_scripts_array' , array( $this, 'rewrite_default_script' ) );
		add_filter( 'wp_insert_post_data' , array( $this, 'formatting_quickpress_post' ) );
		add_action( 'media_buttons'       , array( $this, 'check_edit_mode_and_add_richedit_pre' ), 9 );
		add_action( 'media_buttons'       , array( $this, 'delete_filtering_wp_richedit_pre' ) );
	} else {
		add_action('admin_notices'        , array( $this, 'version_too_old' ) );
	}
}

__construct()内の、print_scripts_arrayにフィルター足す所ですね。

確かに動くようにはなったけど、rewrite_default_scriptが働かなくなって正常に動くのかは不明。

今まで使っていたわけでもないし、何の愛着もないのでちゃんと調べる気はない！

そして、この状態で希望通りの動作をしてくれるのかチェックしてみる。

余裕で「style,div,span,p,br」タグとか全部消えますね(^q^)

というわけで、使わないことにしました！

TinyMCE Advancedも使えない

代替案を探してみると、TinyMCE Advancedに乗り換えた人が多いよう。

• WordPress4.3でPS Disable Auto Formattingを停止した理由
• WordPress4.3と「PS Disable Auto Formatting」プラグインは相性が悪い！

使ったこと無かったので、入れてみて、「Stop removing the <p> and <br /> tags when saving and show them in the Text editor」の項目にチェック入れてみる。

何か、過去記事開くと改行と段落が殆ど消えた状態で表示される。

確かにこの状態から自分で改行とか段落入れると、テキストタブの方で思った通りに表示されるようになる。

うん。悪くない！最初の<p>タグと、<br>タグも保持した状態からのスタートだったら申し分なかった…！

ありかな？と思ったんだけど、問題があった。

「style,div,span」タグは相変わらず消えてしまうのである…。

WordPressの投稿用エディタ「TinyMCE」

そもそもなんですが、WordPressの投稿画面であるエディタは「TinyMCE」というオープンソースのWebベースエディタを利用しているんですね。

WordPressが独自開発したものではないんです。

なので、それを拡張するプラグインとして「TinyMCE Advanced」があるわけです。

「TinyMCE」自体はオープンソースだし、コミュニティもしっかりしているので、使い方も色々載ってました。

TinyMCE公式ドキュメント（英語…。）

プラグインで出来無いなら自分で設定したらいい！

WordPressで「TinyMCE」の設定をいじくる場合は、「TinyMCE」が初期化される前に呼ばれる「tiny_mce_before_init」に設定用のデータを渡してあげます。

私は「STINGER5」のテーマを利用しているので、最初からfunction.phpに以下のような設定が入っていました。

function custom_editor_settings( $initArray ){
	$initArray['body_id'] = 'primary';	// id の場合はこれ
	$initArray['body_class'] = 'post';	// class の場合はこれ
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

既にあったので、これに追加する感じで足します。

function custom_editor_settings( $initArray ){
	$initArray['body_id'] = 'primary';	// id の場合はこれ
	$initArray['body_class'] = 'post';	// class の場合はこれ
	// styleや、divの中のdiv,span、spanの中のspanを消させない
	$initArray['valid_children'] = '+body[style],+div[div|span],+span[span]';
	// 空タグや、属性なしのタグとか消そうとしたりするのを停止。余計なことすんな！
	$initArray['verify_html'] = false;
	// []←ショートコードを[とかのままにしたかったけど出来なかった…。
	//$initArray['entity_encoding'] = 'raw';
	//$initArray['entities'] = '91,93';
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

これで消えたりしなくなる！

私は一番上（body）のstyleと、divの中のdiv,span、spanの中のspanが消えてしまって困っていたのでこの指定にしています。

他にも消えてしまって困っているというタグの種類があれば、「,」コンマ区切り、「|」パイプ繋ぎで、「valid_children」に追加してあげましょう。

先頭の「+」は消さないで、「-」にすると消す対象となります。タグの指定は「親[子]」です。

ショートコードをエスケープしたい

消えるタグ問題以外にも、[]←ショートコードで使うカッコもプラグインの説明などの記事で紹介することがありました。
【WordPressプラグイン】お問い合わせページ作成にはこれ！【Contact Form 7 】

エスケープするには[[hoge]]みたいに重ねることで、[hoge]と表示できます。

ただ、色んなプラグイン入れていると、この方法だとトラブる可能性があるので、[]を重ねるのではなく「&#91;&#93;」として保存したいという希望がありました。

ちょっと試行錯誤したんですが、やはりタブの切り替えで「&#91;&#93;」が[]になってしまう。

特に今のとこはトラブってないので、なんかでトラブったら本格的に調べることにします…。

もし対応方法知ってる方いたら、コメント等で教えて下さるとありがたいです！

終わりに

皆さんは「style,div,span」タグとか本文内で使ったりしませんか？

需要があるのは「p,br」くらいなんですかね(´・ω・｀)

そういう方は「TinyMCE Advanced」だけで間に合いそうですが、もしCSS講座とかする機会がありそうなら今回紹介した対応を入れておくことをオススメします！

結構凝ったレイアウトを記事内だけで実装することがある人も入れておいた方がいいです。

一生懸命書いたコードが気づいたら消えてる！というあの衝撃はたまりません…。

何度ディスプレイ叩き割りそうになったことか…。

さらばイライラ！それでは。

 - STINGER, WordPress PS Disable Auto Formatting, TinyMCE, TinyMCE Advanced