WordPressでJavaScriptを動かす方法

WordPressでJavaScriptを動かす方法が分からずに、いろんなところにはまりながらやっと動き出しました。その時のメモです。

WordPressのエディタに直接

<script type=”text/javascript”>

と書いても動きません。divで囲むと動くというのを見たので試してみました。部分的には動くのですが、functionを動かしたいとなると、divで囲む方法はダメでした。

function.phpやheader.phpとかを編集する方法などもありましたが、そこまでやるのも面倒と思い、一番簡単にできる方法!という事で探していきました。

プラグインを利用する方法が一番簡単に実現できます。

Custom CSS and JavaScript

Simple Custom CSS and JS

の2つを試してみましたが、私はSimple Custom CSS and JSの方が使いやすく思った通りの動作をするようになりました。

Simple Custom CSS and JS

このプラグインを利用すると、JavaScript動きました。

js01.jpg

Add Custom JS

にて、internal Headerに、JavaScriptコードがくるよう配置しました。

js02.jpg

<script

は書けない

などを書きたい場合、<script と書くと、ここで、JavaScriptコードが終わったと判断されるらしく、ホームページを表示した時に、スクリプトが表示されてしまいます。

なので

として、わざと文字列を分割、結合して回避しました。

jQueryを利用する場合、[$]を利用できない

だと動かないので、このように変えてあます

Chrome上で、F12を押してデバッグコンソールを表示させます。エラーが出ると、コメントが出てくれるので、解決するヒントになります。

js03.jpg

1件のコメント

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です