Wordpressテーマにjqueryとカスタムスクリプトを追加する

Question

Googleを使って検索していますが、WordPressのテーマからjQueryを追加するために、同じコードを何度も繰り返し使いました。

私は私のfunctions.phpファイルにこのコードを追加した、と私はjsのフォルダを作成し、その中で次の構文を使用してtheme.jsファイルを作っ

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11); 
function my_jquery_enqueue() { 
    wp_deregister_script('jquery'); 
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null); 
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true); 
} 

：

jQuery(function ($) { 
    /* You can safely use $ in this code block to reference jQuery */ 
}); 

私が更新すると私のWPサイトでは、theme.jsファイルが呼び出されていないようです。 Chrome Devツールでは、レンダリングされるjsファイルの中には表示されません。

私は時代遅れのアプローチを使用していますか？ jqueryを使用して/js/theme.jsファイルを作成するにはどうしたらよいですか？

Answer 1

まず、wp_enqueue_scriptsはフロントエンドでのみ実行されるため、is_admin()のチェックは必要ありません。

第2に、デフォルトのjQuery（WPにバンドルされている）if you really know what you are doingの登録を解除するだけです。あなたの例では、古いバージョンをGoogleから読み込んでいます（現在は1.7.1ではなく1.8.3です）。また、参照：Don’t Dequeue WordPress’ jQuery

第3に、get_stylesheet_directory_uriを使用する必要があります。これは、親と子のテーマフォルダに含まれる正しい機能です。

最後に、このコードは/themes/my-theme/functions.phpで[OK]を動作します：

add_action("wp_enqueue_scripts", "my_js_so_14864221", 11); 

function my_js_so_14864221() 
{ 
    wp_enqueue_script( 
     'my_script', 
     get_stylesheet_directory_uri() . '/js/theme.js', 
     array('jquery'), 
     '1.0', 
     true 
    ); 
} 

そしてtheme.jsであなたのjQueryのコードは次のようにカプセル化する必要があります。

jQuery(document).ready(function($) { 
    // $('#your-stuff').animate().hide().whatever(); 
});