Thêm tập lệnh jquery và tùy chỉnh vào chủ đề Wordpress

Question

Thực hiện một số tìm kiếm thông qua Google, tôi đã xem lại cùng một lúc mã lệnh để thêm jQuery vào một chủ đề Wordpress từ đầu.

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

Tôi đã thêm mã này vào file functions.php của tôi, và tôi đã tạo ra một thư mục js và tạo ra một tập tin theme.js sử dụng cú pháp sau đây trong nó:

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

Khi tôi làm mới trang WP của tôi, tệp theme.js dường như không được gọi. Trong các công cụ Chrome Dev, nó không được liệt kê trong số các tệp js đang được hiển thị.

Tôi có đang sử dụng phương pháp đã lỗi thời không? Làm thế nào tôi có thể tạo tập tin /js/theme.js của tôi, sử dụng jquery, làm việc cho chủ đề của tôi?

Answer 1

Đầu tiên, wp_enqueue_scripts chỉ chạy trên giao diện người dùng, vì vậy bạn không cần séc is_admin().

Thứ hai, chỉ hủy đăng ký jQuery mặc định (đi kèm với WP) if you really know what you are doing. Trong ví dụ của bạn, bạn đang tải một phiên bản lỗi thời từ Google (hiện tại là 1.8.3, không phải 1.7.1). Ngoài ra, hãy xem: Don’t Dequeue WordPress’ jQuery

Thứ ba, bạn nên sử dụng get_stylesheet_directory_uri, đó là chức năng chính xác sẽ được tính cho thư mục chủ đề của cha mẹ và con.

Cuối cùng, mã này hoạt động ok trong /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 
    ); 
} 

Và mã jQuery của bạn trong theme.js nên được đóng gói như:

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