【ワレコの備忘録】WordPress で onclick が削除される問題（解決）

JavaScript

2018.03.16

この記事は約5分で読めます。

ワテの場合、WordPressを使ってこのウェブサイト（われこのサイト）にブログ記事を投稿している。

そのWordPressで困った問題に直面した。

それはWordPressをテキスト編集モードにしておいて、例えばこんな html と JavaScript を貼り付けると、

<div id="parent_div" style="width:300px;height:300px;border:2px solid red">
    <button onclick=" alert(new Date())">今の日時は？</button>
    <button onclick="button_click_func()">表示モード切替</button>
</div>
<script type="text/javascript">
    function button_click_func() {
    }
</script>

表示をビジュアル編集モードに切り替えた瞬間に button に設定している onclick などの記述が全部消え去る。

その結果、↑のコードは↓のように化けてしまう。

<div id="parent_div" style="width: 300px; height: 300px; border: 2px solid red;">
    <button>今の日時は？</button>
    <button>表示モード切替</button>
</div>
 
<script type="text/javascript">
    // <![CDATA[
    function button_click_func() { }
    // ]]>
</script>

あかんがな。

勝手に変更すんなよと思うのだが、ググってみたら、この問題に関しては沢山情報が見つかった。

WP Edit – Preventing WordPress from stripping out onclick Javascript (40 posts)

英語なので良く分からんが、対策の多くは functions.php と言うのを編集するなどの方法が書いてあるようだ。

確か functions.php と言うのは WordPress をカスタマイズするための仕組みで、このファイルに各種の記述をすればカスタマイズ出来るようなのだが、ワテは初心者なのでまだ試したことが無い。

当記事では、WordPressのonclick勝手に削除問題に対する解決方法を紹介したい。

では、本題に入ろう。

WordPressのonclick勝手に削除問題-ワテ流解決方法
WordPressを勉強する

WordPressのonclick勝手に削除問題-ワテ流解決方法

こうなったら、JavaScript コードを使って、button に onclick 属性を割り当てれば行けるだろうと思ってやったのが次のコードだ。

まず、buttonにonclickを追加しても削除されるので、onclickは入れない事ににした。

その代わりに、buttonなどの各要素に id を割り振る。

<div id="parent_div" style="width:300px;height:300px;border:2px solid red">
     <label id="labelID">自動で隠すモード</label><br />
     <button id="button1_ID">今の日時は？</button>
     <button id="button2_ID">表示モード切替</button>
</div>

そして、以下のJavaScriptのコードを実行するのだ。

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

<script type="text/javascript">
    window.onload = function () {
        document.getElementById('button1_ID').onclick = function () { 
　　　　　　alert(new Date()); };
        document.getElementById('button2_ID').onclick = button_click_func;
    }

    function button_click_func() {
    }
</script>

まあ、これで消え去った onclick イベントハンドラを再度割り当てたので、その結果、ボタンを押したら期待通りに関数が実行出来た。

jQuery でやるならこんな感じだ。

jQuery('#button2_ID').on('click',function(){
    button_click_func();
});

これでいいのか？

まあ、動いたし、良しとするかな。

この手法で作ったボタンの例がこのリンクにある。

CSSの !important の意味 – 初めて知ったわ

WordPressを勉強する

やっぱり教科書を買って勉強すべきだな。今年は、本を買って読んでみようと思っている。

いちばんやさしいWordPressの教本人気講師が教える本格Webサイトの作り方第2版 WordPress 4.x対応

インプレス

ほんまに一番やさしいのか？そこが気になる。

ソーテック社

ほんまに儲かるんか？そこが気になる。