【JavaScript】WordPress編集時にonclickが動かない&消える問題の解決法

このページを閲覧しているということは、onclick要素が消えたりしている現象を実際に経験しているはずなので、現象については特に詳しく説明しません。この現象は実はプラグインが原因の「ありがた迷惑」だったのです。

WordPressのページ編集補助プラグインの “TinyMCE”（もしくは “the Classic Editor”）には、W3C^*1に準拠した書き方に自動的に編集してくれる機能が付いているのですが、ページ内に入れたタグがこれが親切にも発動して設定をいじるとバグの原因になるらしいので別の対策を考えます。

具体的には以下の方法が挙げられます。

• • テキストモードでonclick等を実装してからはビジュアルモードに移らない
  • id要素を割り当てる
  • function.phpを書き換える/追記する

管理人が以前この問題に遭遇したときはfunction.phpを編集する方法で解決しました。id要素を割り当てる方が簡単と言えば簡単ですが、function.phpをいじっておけば今後問題になることはないので、今回は後者の方法を紹介します。なお、スクリプト部分はjQueryで書いても書かなくても特に違いはありません。

●　　　●　　　●

まず、いつも使用しているfunction.phpの中にcustom_editor_settingsという関数が無いか確認して下さい。もし既に存在する場合は以下のように中身を書き換えて下さい。元々存在しない場合は（どこでも良いですが分かりやすいように）一番下に次のようなコードを追加します。

function custom_editor_settings( $initArray ){
	$initArray['body_id'] = 'primary';
	$initArray['body_class'] = 'post';
	$initArray['extended_valid_elements'] = '*[*]'; //すべてのタグを許可(削除防止のため)
	$initArray['valid_children'] = '+body[style],+div[div|span],+span[span]+button[onClick],+input[onClick]';        
	$initArray['verify_html'] = false;
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

“valid_children” はTinyMCE内のリスト名で、この中に消されたくない要素を書いておきます。この設定だと、divの中のdivやspan、spanの中のspanやonClickの付いたbutton、onClickの付いたinputなどの要素を消さないで表示してくれます（環境に依存するので必ず動作確認はして下さい）。

●　　　●　　　●

この他にもプラグインを利用するという選択肢が考えられますが、開発元の状況によっては最新バージョンのWordpressへのバージョンアップに対応していなかったりすることがあります。もしそうなると後で設定するのが色々と面倒ですし、導入するプラグインの数はできる限り少数に留めておいた方が良いことからも、あまり推奨できません。