WordPressのビジュアルエディターで、onclickが勝手に消える(削除される)？タグが消える解決策

WordPress のビジュアルエディターは、手軽にブログの文字を入力するには便利なんですが、いろいろと強制的にフォーマットされたり、改行タグ、その他のタグが消えてしまうので注意が必要です。

今回、遭遇した問題は、onclick が削除されるらしいです。

さて、どうしたら解決できるんでしょうか。

ワードプレス (WordPress)で onclick が消える現象
解決策1：自動整形を止める？
解決策2：onclick を JavaScript にもってくる
WordPressのおすすめ本

ワードプレス (WordPress)で onclick が消える現象

たとえば、こんなコードをWordPressの

テキストエディター

で書いたとします。

<div>
    <button>クリックのテスト</button>
</div>

<script type="text/javascript">
    function button_click() {
        alert("クリックされた");
    }
</script>

<div>

<button onclick="button_click()">クリックのテスト</button>

</div>

function button_click() {

alert("クリックされた");

}

</script>

このまま、テキストエディターで保存して、ブラウザから表示してみたら、ちゃんとボタンのクリックのテストが出来ます。

ところが、いったん、このコードを

ビジュアルエディター

に変更すると、中身は以下のように書き換わります。

↓↓↓↓↓↓

<div><button>クリックのテスト</button></div>

<script type="text/javascript">
    function button_click() {
        alert("クリックされた");
    }
</script>

<div><button>クリックのテスト</button></div>

function button_click() {

alert("クリックされた");

}

</script>

おやおや？

onclick="button_click()"

が消えた！？

どうやらこれ、WordPressのビジュアルエディタのデフォルトの仕様のようです。

解決策1：自動整形を止める？

この問題の解決策として、自動整形を止めるというのがあると思います。

おそらく、以下の通り、wpautopを止めてしまうのが一つの方法です。

Enterキーで改行すると行間が空きすぎるので「シフト + Enter」で狭く改行 (Windows Live Writer)

Windows Live Writerで普通にEnterで改行するとこんな風に大きく間が空いてしまいます。このように大きく改行される原因を調べてみました。ウィンドウズライブライターについては以下をご覧ください...

ただ、ビジュアルエディタの自動整形は便利なときもあるので、他に何かいい方法ないんでしょうか？

解決策2：onclick を JavaScript にもってくる

運用上、安全で勧められるのが

「onclick を JavaScript にもってくる」っていう解決策です。

具体的には、以下の通りです。

<div><button id="button1_ID">クリックのテスト</button></div>

<script type="text/javascript">
jQuery('#button1_ID').on('click',function(){
    alert("クリックされた");
});
</script>

<div><button id="button1_ID">クリックのテスト</button></div>

jQuery('#button1_ID').on('click',function(){

alert("クリックされた");

});

</script>

これなら、ビジュアルエディタで、勝手に消されることはありません。

なんか難しいな。

WordPressのおすすめ本

↓WordPressのおすすめ本はコチラ

WordPressのおすすめ本