wordpressでjqueryが読みこまれない動かない時の対処法

2020年12月1日

今回はwordpress(ワードプレス)でjqueryを読みこませる方法と実際に動かすまでの簡単なサンプル

また読みこまないや動かない繁栄されない場合の対処法も紹介したいと思います。

スポンサーリンク

wordpress(ワードプレス)jqueryの導入方法

ワードプレスは最初からjqueryが使えるので宣言さえ書けば使えるようになります。

headタグの中に<?php wp_enqueue_script('jquery’); ?>を書く

<?php wp_head(); ?>の前に書かないと動かない?

<?php wp_head(); ?>はjqueryを読みこむコードなのでヘッド内にこれがないと動かない

headタグ内の最上部にこの二つのコードを記述する

実際にjqueryで操作する時の最初に

<script type="text/javascript">

を記述する

以下の内容で動作を確認してください

 

 

wordpressでjqueryが読みこまれない動かない時の対処法

$になっている

jqueryの参考コードは基本$が使われていますが

ワードプレスのjqueryでは$が使えません。

本来のjqueryの記述のやりかたは

$(function(){

 

$( '.t3’ ) . text( 'ハローワールド’ );

 

 

$( '#sample’ ).css('color’,’red’) });

});

ですがワードプレスでは$が使えないので$をjQueryに変えないといけません。

なおjQuery(function($){と記述すれば()の中でのみ使える模様

誤字脱字している

基本的に誤字脱字などで動かない場合が多いです。

厳密にはしていないのですが最初の読み込みコードの宣言は極めてデリケート故

自分で書いたらなぜか動かないパターンが多いのでネットから

完璧に正解のコードを見つけてコピペさせてもらったほうが良いかもしれません

後からjqueryを読みこんだ

webページをhtmlとcssで大分作りこんだ後にjqueryを読みこむと上手く動作しない可能性があります。

一度バックアップを取り全て消してまっさらの状態で読みこませないとうまく動かない可能性があります。

その際はheadタグ内で動作確認を済ませた後にbodyタグ内で使っていく方が良いでしょう。

セミコロンを付けている

$(this).css(",");

()閉じの場合はセミコロンを付けますが

$function(){()});

{}閉じの場合{}内の()にセミコロンを付けると動作しません。

動作確認用