WordPressでjQueryを使おうとしてうまくいかないときの対処方法

現在、WordPressのAjaxをhijiriworldさんの記事で勉強中です。

WordPressでAjaxを使う方法の解説 | hijiriworld Web

この勉強中、WordPressで”$”のついたjQueryを使おうとしてエラーがおこったのでその解決方法をメモしておきます。

＊たまたま、最底辺プログラマ雑記さんも同じ問題に遭遇しておられたので記事にしました。

エラーがおこったソース

エラーが発生したjQueryのソースはこちら。

以前にもWordPressのjQueryがそのまま動かない問題は経験していたのですが、久しぶりに遭遇するとすっかり忘れていたのでまた１からググることになりました。

$( '#submit' ).on( 'click', function(){
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
            'action' : 'view_sitename',
        },
        success: function( response ){
            alert( response );
        }
    });
    return false;
});

まずはChrome開発者ツールでエラーを確認しよう

WordPress jQueryでググるといろいろ出てくるのですが、エラーチェックしてから対処するということをしておけば、理解も深まるのでその流れですすめます。

その為に、まずはChromeの開発者ツールを使いましょう。

右クリック→検証

Macの場合は、Command + Option + I で表示されます。

すると、

Uncaught TypeError: $ is not a function at n001.js?ver=1.0:1

タイプエラーで、$はファンクションじゃないよというメッセージがでました。

この$をなんとかすればよさそうです。

$をそのままjQueryに置き換え

正直、私もよく理解していません。

ただググると$のところをjQueryにすればよさげなので、とりあえず、そのまま $のところをjQueryにしてみます。

jQuery( '#submit' ).on( 'click', function(){
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
            'action' : 'view_sitename',
        },
        success: function( response ){
            alert( response );
        }
    });
    return false;
});

結果は…

書き換えてリロード。

先程赤く表示されたエラーは、今回は出ていません。

”VIEW SITENAME”というボタンを押すと、サイト名がAjaxで表示されるはずなので、押して見ます。

やった、無事にjQueryの問題もクリアして、Ajaxでサイト名を表示することができました。

jQueryのカプセル化

hijiriworld Webさんの記事に、こちらのjQueryもありました。これは、そのままWordPressで動きます。

(function($){
 
    $( '#submit' ).on( 'click', function(){
         
        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {
                'action' : 'my_ajax_get_posts',
            },
            success: function( response ){
                jsonData = JSON.parse( response );
                $.each( jsonData, function( i, val ){
                    alert( val['post_title'] );
                    alert( val['permalink'] );
                });
            }
        });
        return false;
    });
 
})(jQuery)

これがjQueryのカプセル化と呼ばれる方法。もともとのコードの上に “(function($){“を、下に”})(jQuery);”を書くことで、元のコードを変更せずに利用することができます。

(function($){

// もともとのコードをここに書く
})(jQuery);

ちなみに、先程のコードで、$をjQueryに置き換えたのはこちら。

    jQuery( '#submit' ).on( 'click', function(){

        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {
                'action' : 'my_ajax_get_posts',
            },
            success: function( response ){
                jsonData = JSON.parse( response );
                jQuery.each( jsonData, function( i, val ){
                    alert( val['post_title'] );
                    alert( val['permalink'] );
                });
            }
        });
        return false;
    });

長いコードの場合は、ひとつひとつを書き換えるよりも、カプセル化の方が変更するところが少なくてよいかもしれません。

まとめ

WordPressの場合は進化が早いので、この問題の解決方法がもしかしたら変わったのか？とおもいきやそうでもなかったようです。

また、これまで正解だった方法が、そうでなくなっていることもあるので、基本はエラーを確認して、そのエラーを解決していくという方法を見に付けておくと、今後も同様の問題に遭遇した時に、うまく解決できると思います。