Hinzufügen von jquery und benutzerdefinierten Skripts zu einem Wordpress-Theme

Question

Bei der Suche in Google stieß ich immer wieder auf den gleichen Code, um jQuery zu einem Wordpress-Theme von Grund auf hinzuzufügen.

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); 
} 

Ich habe diesen Code in meiner functions.php-Datei hinzugefügt, und habe ich eine theme.js Datei mit folgenden Syntax in einem js Ordner und gemacht:

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

Wenn ich auffrischen Meine WP-Site scheint die theme.js-Datei nicht aufgerufen zu haben. In Chrome Dev-Tools ist es nicht unter den gerenderten js-Dateien aufgeführt.

Benutze ich einen veralteten Ansatz? Wie kann ich meine /js/theme.js-Datei mithilfe von jquery für mein Theme verwenden?

Answer 1

Erstens, wp_enqueue_scripts läuft nur auf dem Frontend, so dass Sie nicht die is_admin() überprüfen müssen.

Zweitens, nur die Standard-jQuery (im Paket mit WP) deregistrieren. In Ihrem Beispiel laden Sie eine veraltete Version von Google (aktuell ist 1.8.3, nicht 1.7.1). Siehe auch: Don’t Dequeue WordPress’ jQuery

Drittens sollten Sie get_stylesheet_directory_uri verwenden, die die richtige Funktion ist, die für übergeordneten und untergeordneten Themenordner zählen wird.

Schließlich arbeitet dieser Code ok in /themes/my-theme/functions.php:

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 
    ); 
} 

Und Ihre jQuery-Code in theme.js sollte wie eingekapselt werden:

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