ゲームやアニメの情報だけでなくたまには、技術情報を載せようかと思います。
このブログはワードプレスを使用して作成しておりますがJavaScriptのOnclickを
使用してちょっとしたギミックを作って見たくなりました。
やりたかったのは、画像クリック時に画像を切り替えるという動作としてはごく単純なものです。
はじめに投稿ページのビジュアルにimgソースを貼り付けました。
プレビューで結果確認したら動作しません。
ワードプレスのソース貼り付け場所は投稿ページのテキスト欄なんですね。
テキスト欄を開き、ソースを貼り付けました。
今度は動作しました。
動作イメージは下記です。クリックすると画像が変わります。
ただ、今回の方法だと画像1→画像2だけで
画像1→画像2→画像1へのループができないんですよね。
ここからは、変数が必要なのでJavaScriptを使用します。
みんな大好き、Hellow Worldですね。
プレビューで動作確認したところ動作しました。
テキストの編集をしたくて1回、ビジュアルでテキスト追加してテキストに戻ってきました。
そしたらプレビューで動作したら動作しなくなりました。
ソースを見たらなぜか書き換わっています。
状態は下記です。
調べたらワードプレスでのJavaScriptの書き方は
<script></script>ではなく、<div><script></script></div>
ということだったので書き換えたのですがなぜかうまくいかない。
そこから先は、簡単なプログラムでも動作しないは
なぜか投稿ページのビジュアルからテキストに画面変異するだけで
ソースが書き換わるとさんざんでした。
ワードプレスはdocument.writeなどのごく基本的なコードも推奨されていないので
動作したりしかったりするので
代替コードをワードプレスの公式サイトから探す必要があります。
私は英語読めないので無理です。
結論としては、ワードプレスでのJavaScriptの使用は推奨されていない。
<img>タグなどの1行で動作するonclickは動作する。
ワードプレスのJavaScript動作には独自ルールがあり、理解するのが非常にしんどい。
初心者はプラグインを使用するのがよいかと思います。
私は動作はちょっと違いますがImage Hoverというプラグインで妥協しました。
