[小ネタ] WordPress の投稿記事で onClick 属性が消えてしまう問題を即席解決！

2023年5月18日

本ページはこんな方におすすめ

WordPress 投稿で onClick を使いたい
WordPress 投稿で data-* データ属性を使いたい

WordPress の投稿記事に onClick 属性つけても自動で消されてしまう

小ネタですが、WordPress で投稿記事を作成し、その中で onClick 属性を使った場合の不具合対策です。
例えば、テキストのリンクにクリックイベントを入れたいような時です。

当サイトの場合は、使用テーマは Affinger Action、PHP のバージョンは 7.4.33 です。
記事作成は、クラシック・エディターを使用しています。

その条件下で、以下のデモページを普通に投稿しようとしたときに、うまくいきませんでした。

onClick のテスト

: ［サンプル］CSS3 アニメと JavaScript でぐるぐる回転

動画を使わずにぐるぐる回転の演出をする例普通の速度少し速く速くより速くもっと速く ineters ...

続きを見る

ベタな例

 css
<button onclick="alert(new Date())">現在日時をポップアップ</button>

というコードを、WordPress のテキストエディタに入れて表示させると、

 css
<button>現在日時をポップアップ</button>

というコードになってしまいます。
つまり、JavaScript が（一部）機能しないページができてしまいます。

このエラーは、実は認識していましたが、党の昔に解消されたものと思い込んでおりました。
当方、「ACTION（AFFINGER6）」使いであるため、というか昔ながらの記事の書き方をしているため、WordPress のプラグインか何かが（まだ）悪さをしているのだとすぐに気付きました。

TinyMCE というプラグインが悪さをしているらしいですが、確かに私も Classic Editor と合わせて Advanced Editor Tools やら TinyMCE テンプレートなどを使っています。

プラグインを消せば解決するのかもしれませんが、私の頭が頭なもので、旧式エディタの方が落ち着く、書きやすいというのがあり、完全に新しい環境に移行していまうのは躊躇があります。

ということで、応急処置です。

正当な対応策

巷では、以下の処置が行われているようです。

Classic Editor と TinyMCE をあきらめる
onclick をショートコードの中に入れて使う
button は id を使って onclick イベントハンドラを割り当てる

上の方法は、確かにその通りですが、手間もかかり、コードもあわせて書き換えるとなると、それに対応した IQ も必要になりそうです。つまりコスト高に感じます。

特に、ずぼらな私はあまり気が進まないですので、定番のズルで対処します。

即席な対応策

WordPress テーマの子テーマを編集して対応します。

\wp-content\themes\affinger-child

にある functions.php を直接編集します。

親テーマの

\wp-content\themes\affinger\functions.php

を直接編集するのもいいですが、アップデートの時になんか起きる可能性があるので、小テーマで対応します。
一番末尾に、以下のコードを追加します。

 css
// onClick を自動削除させない設定
function custom_editor_settings( $initArray ){
	$initArray['body_id'] = 'primary';
	$initArray['body_class'] = 'post';
	$initArray['extended_valid_elements'] = '*[*]';
	$initArray['valid_children'] = '+body[style],+div[span],+span[span]+button[onClick],+input[onClick],+button[data-*]';
	$initArray['verify_html'] = false;
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

$initArray['valid_children'] は TinyMCE 内のリスト名になります。
プラグインから自動削除させない要素をこの中に列挙しておきます。例で示した設定だと、body タグ内の style、div タグ中の span、span タグの中の span や onClick の付いた button、onClick の付いた input などの要素を消さないで表示するようになります。

以上、コード削除の原因が、TinyMCE プラグイン関係の場合のお話です。