WordPress のビジュアルエディターは、手軽にブログの文字を入力するには便利なんですが、いろいろと強制的にフォーマットされたり、改行タグ、その他のタグが消えてしまうので注意が必要です。
今回、遭遇した問題は、onclick が削除されるらしいです。
さて、どうしたら解決できるんでしょうか。
ワードプレス (WordPress)で onclick が消える現象
たとえば、こんなコードをWordPressの
テキスト エディター
で書いたとします。
|
1 2 3 4 5 6 7 8 9 |
<div> <button onclick="button_click()">クリックのテスト</button> </div> <script type="text/javascript"> function button_click() { alert("クリックされた"); } </script> |
このまま、テキストエディターで保存して、ブラウザから表示してみたら、ちゃんとボタンのクリックのテストが出来ます。
ところが、いったん、このコードを
ビジュアルエディター
に変更すると、中身は以下のように書き換わります。
↓↓↓↓↓↓
↓↓↓↓↓↓
|
1 2 3 4 5 6 7 |
<div><button>クリックのテスト</button></div> <script type="text/javascript"> function button_click() { alert("クリックされた"); } </script> |
おやおや？
onclick="button_click()"
が消えた！？
どうやらこれ、WordPressのビジュアルエディタのデフォルトの仕様のようです。
解決策1：自動整形を止める？
この問題の解決策として、自動整形を止めるというのがあると思います。
おそらく、以下の通り、wpautopを止めてしまうのが一つの方法です。
Enterキーで改行すると行間が空きすぎるので「シフト + Enter」で狭く改行 (Windows Live Writer)
Windows Live Writerで普通にEnterで改行すると
こんな風に
大きく間が
空いてしまいます。
このように大きく改行される原因を調べてみました。
ウィンドウズライブライターについては以下をご覧ください...
urashita.com
2014.08.22
ただ、ビジュアルエディタの自動整形は便利なときもあるので、他に何かいい方法ないんでしょうか？
解決策2：onclick を JavaScript にもってくる
運用上、安全で勧められるのが
「onclick を JavaScript にもってくる」っていう解決策です。
具体的には、以下の通りです。
|
1 2 3 4 5 6 7 |
<div><button id="button1_ID">クリックのテスト</button></div> <script type="text/javascript"> jQuery('#button1_ID').on('click',function(){ alert("クリックされた"); }); </script> |
これなら、ビジュアルエディタで、勝手に消されることはありません。
なんか難しいな。
WordPressのおすすめ本
↓WordPressのおすすめ本はコチラ
コメント
[…] […]