Web技術トピック&コラム

Script Topic 2015.11.09 (Mon)

WordPressを4.3にアップデートしたらエディタの表示切替が出来なくなってしまった

WordPressを4.3にアップデートした際、投稿画面のエディタの「ビジュアル」と「テキスト」との切り替えができなくなってしまいました。
調べたところ、「PS Disable Auto Formatting」プラグインが原因と分かりました。
「PS Disable Auto Formatting」はHTMLの自動整形を停止させるプラグインで、WordPressをインストールする際には必ず入れている、必須と言えるプラグインなので困ってしまいました。

そこで、代替プラグインを探したところ、「TinyMCE Advanced」に同じような機能があることが分かりました。
インストールして、設定画面で「Stop removing the and tags when saving and show them in the Text editor」にチェックを入れ、保存すれば完了!
…と思ったのですが、確かにエディタの方は自動的にHTMLの整形はされなくなり、切り替えもできるのですが、表示側の自動整形は相変わらずされる状態…。
それに、これだけのために「TinyMCE Advanced」をインストールするのは、サイズも大きいのでちょっと抵抗が...。

ということで、「TinyMCE Advanced」の必要な部分だけを使わせてもらい、functions.phpに自動整形を停止させるコードを書くことにしました。

まず、「TinyMCE Advanced」プラグインから必要な下記JSファイルだけをコピーして任意の場所に置きます。

tinymce-advanced/mce/wptadv/plugin.min.js

次に、このJSファイルを読み込むよう、functions.phpにコードを記述します。

add_filter('mce_external_plugins', '_mce_external_plugins', 999);
if(!function_exists('_mce_external_plugins')) :
	function _mce_external_plugins($external_plugins) {
		$external_plugins['wptadv'] = 'path/to/plugin.min.js';
		return $external_plugins;
	}
endif;

加えて、エディタ側の自動整形を停止させるよう、functions.phpにコードを記述します。
ついでに要素のクリーンアップ機能(verify_html)も停止させておきます。

add_action('tiny_mce_before_init', '_tiny_mce_before_init', 999);
if(!function_exists('_tiny_mce_before_init')) :
	function _tiny_mce_before_init($mceInit) {
		$mceInit['wpautop'] = false;
		$mceInit['tadv_noautop'] = true;
		$mceInit['verify_html'] = false;
		return $mceInit;
	}
endif;

最後に、表示側の自動整形を停止させるよう、functions.phpにコードを記述します。

add_action('init', '_init', 999);
if(!function_exists('_init')) :
	function _init() {
		remove_filter('the_title', 'wptexturize');
		remove_filter('the_content', 'wptexturize');
		remove_filter('the_excerpt', 'wptexturize');
		remove_filter('the_title', 'wpautop');
		remove_filter('the_content', 'wpautop');
		remove_filter('the_excerpt', 'wpautop');
		remove_filter('the_editor_content', 'wp_richedit_pre');
	}
endif;

これでエディタの表示切替問題に対応しつつ、HTMLの自動整形を停止することができました。

追記(2015/11/10)

プラグイン化したものをGitHubに上げました。
何故か<br />の後に「改行+半角スペース」が入ってしまうので、「改行」のみになるよう、JSに変更を加えています。

Web技術トピック&コラムの一覧へ