WordPressでJavascriptが動かない!苦労したので解説します!

プログラミング

  

まず大前提として、私はプログラムを組むスキルとしては、初心者に毛が生えたようなもので、なんとなく勉強はしてみたもののほとんどわかっていないような状況です。間違い等あれば教えてください。

 

WordPressで、データベースからランダムに文字や絵を表示させたい!

 

そう考えて色々調べていたのですが、Javascript を使う必要があるみたいです。見よう見まねでプログラムを組んでいたのですが、うんともすんとも言いませんでした。

 

ちなみにその時はこんな感じのプログラムを組みました。(組んだといってもほぼほぼパクリなのですが・・。)

 

 

 

 

もっと簡単な基本の動きをさせてみよう!

  

Javascript でいうと、こんな動かし方があります。(警告文をポップアップしてくれるものです。)

 

alert("Hello");

 

しかし、wordpressのブログ投稿画面に『alert(“Hello”);』のみを書いても、やっぱり動きません。写真右端の『:(これの3つのやつ)』をクリックして、『ビジュアルエディター』から『コードエディター』に変えてみます。

 

 

 

ここに動きを記述します。

  

うんとこしょ、どっこいしょ。

 

この画像には alt 属性が指定されておらず、ファイル名は image-46.png です

 

 

それでも表示がされません。

  

なんだよ・・・ツンデレだなぁ。調べましょう。こんなサイトがありました。ありがとうございます。

 

 

 

詳しくは見ていただくとして、こちらによると、タグで囲む必要があるみたいなんですね。コピペして、よいしょ!なんかいらんもんもくっついてくるので削除して、と

 

 

あとは、記入部分と書いてある間に 『alert(“Hello”);』 を記述します。

うんとこしょ、どっこいしょ。

 

この画像には alt 属性が指定されておらず、ファイル名は image-46.png です

 

まだまだ表示がされません。

 

心底ムカついて諦めかけましたが、心を落ち着けて色々調べてみます。よくよく書いたコードを見てみると、Javascript には必要のないコードが含まれていました。

 

そうです、『br』だの『p』だのっていう文字は、『Javascript』ではなく、『HTML』で使われるコードです。余計な箇所がコピペをすると勝手に含まれてしまうんですね。

 

仕方ないので『br』『p』タグを消していきます・・が、なんか勝手に復活してきます。WordPressの仕様なのでしょうか。

 

最終的には、こんな風に1列に並べてあげると、勝手に書き換えられなくなりました。

 

  

更新して、投稿を表示してみます。すると・・・

 

 

とうとう表示がされました!

    

 

最高の気分です。ここに来るまでに1時間半はかかったと思います。ちなみに調べていく過程でプラグインに『script n styles』というものがあり、簡単にJavascriptの記述ができる、とのことで有効化したのですが、自分は今一つやり方がわからずギブアップしました。

 

多分Body部分にコードを記入し『Update』ボタンで生成されるみたいなんですが、うんともすんともなので諦めました。

 

 

さて、これは下準備にすぎません。あくまで僕の目標は『WordPressで、データベースからランダムに文字や絵を表示させたい!』ということです。

 

次回、それをやっていきたいと思います。

 

コメント

タイトルとURLをコピーしました