設計WordPress主題或插件開發時,常會需要使用jQuery,WordPress其實很貼心的已經載入jQuery,但實際使用時發現,原本可以跑的jQuery程式,放進WordPress卻不能跑了,才知道原來WordPress的jQuery要這樣寫。
WordPress 頁面中,確實看到 jQuery 已載入
<script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script> <script type='text/javascript' src='https://yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
頁面中加入一段測試碼
<script> $( document ).ready(function() { alert("hello"); }); </script>
理論上應該是會順利看到 hello 對話框,但是沒有
解決方法:
主要是jQuery寫法的問題,選擇器不能使用習慣的簡碼 $ 符號,而要用下面這兩種寫法,
順利看到hello 對話框
jQuery( document ).ready( function( $ ) { alert("hello"); } );
或
( function( $ ){ alert("hello"); } )( jQuery );