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

は書けない

document.write('<script type="text/javascript" language="javascript" src="' + 'https://technical.live-on.net/js/hanako.js?'+(new Date().getTime())+'"></script>');

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

なので

document.write('<scr'+'ipt type="text/javascript" language="javascript" src="' + 'https://technical.live-on.net/js/hanako.js?'+(new Date().getTime())+'"></scr'+'ipt>');

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

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

function convertAbsUrl( src ){
   return $("").attr("href", src).get(0).href;
}

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

function convertAbsUrl( src ){
   return jQuery("").attr("href", src).get(0).href;
}

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

js03.jpg
 

今まで試した中で、JavaScriptや、CSSを動かすにはプラグインを利用するのがとっても便利です。テーマの中のPHPなどに直接書き込むと、テーマの更新の際に消えてしまう事もあります。

関連記事

関連コンテンツ