WordPressのビジュアルエディタで、JavaScriptが消える

WordPressのビジュアルエディタとっても便利に使っています。

Wordのような感覚で文字の大きさ、色を変更していけます。

ただ、HTMLのタグを書いている人、JavaScriptを利用したい人にとってはちょっと厄介な機能があります。ビジュアルエディタを利用するとせっかく書いたJavascriptが勝手に整形されて消えてしまうのです。

これにはまりました。

最初は、なんで消えてしまうのかも意味が分からず。

テキストエディタから、ビジュアルエディタに切り替え、さらにテキストエディタに切り替えた時にやっと分かりました。

本当に困った。

私はJavaScriptとCSSはなぜか相性が悪くて。

回避方法

ビジュアルエディタで消されてしまう元のコード

<a href="javascript:download();">ダウンロード</a>

※このjavascript:download();へ消えてしまう

buttonに、idを割り振る

<button id="button01">ダウンロード</button>

idを使ってbuttonにonclickのイベントハンドラを割り当てる

<script type="text/javascript">
    window.onload = function () {
        document.getElementById('button01_ID').onclick = function () { 
　　　　　　download();  };
    }

    function button_click_func() {
    }
</script>

とする事で消されずにすむようになりました。

それから、注意点として、ボタンごとに

<script type=”text/javascript”>

を書いてはいけません。正しくボタンが動作しなくなるので、一つにまとめます。

<script type="text/javascript">
    window.onload = function () {
        document.getElementById('button01').onclick = function () { 
　　　　　　download() };
        document.getElementById('button02').onclick = function () { 
　　　　　　download(); };
        document.getElementById('button03').onclick = function () { 
　　　　　　download(); };
        document.getElementById('button04').onclick = function () { 
　　　　　　download();  };
        document.getElementById('button05').onclick = function () { 
　　　　　　download(); };
        document.getElementById('button06').onclick = function () { 
　　　　　　download(); };
        document.getElementById('button07').onclick = function () { 
　　　　　　download(); };

    }

    function button_click_func() {
    }
</script>