WordPress で onclick が削除される問題(解決)

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

<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="width300pxheight300pxborder2px 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 をカスタマイズするための仕組みで、このファイルに各種の記述をすればカスタマイズ出来るようなのだが、ワテは初心者なのでまだ試したことが無い。

スポンサーリンク

ワテ流解決方法

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

<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>
<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を勉強する

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

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

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

シェアする

フォローする

スポンサーリンク