Làm cách nào để bao gồm các tệp jQuery và JavaScript chính xác?


16

Tôi đang làm điều đó ngay bây giờ với đoạn mã sau:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

Điều này hoạt động, nhưng tôi nên làm điều này cho mọi người, như thế này hoặc cho tất cả mọi người trừ quản trị viên (để phụ trợ sử dụng phiên bản WordPress?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Phiên bản này hoàn toàn không hoạt động, tôi có phiên bản WordPress jQuery chứ không phải Google.

Do đó, tôi có nên hủy đăng ký jQuery được bao gồm trong WordPress không?

Ngoài ra, làm cách nào để thêm tập lệnh của riêng tôi (tập lệnh trượt, Modernizr và custom.js của riêng tôi) một cách chính xác? Tôi đoán tôi cũng nên làm điều này thông qua hàm.php. Không phải trong tiêu đề như tôi đang làm bây giờ, nhưng tôi không chắc chắn về cách tôi sẽ làm điều đó.

Câu trả lời:


20

Nguyên tắc đầu tiên: không hủy đăng ký tập lệnh lõi và thay thế bằng các phiên bản khác , trừ khi bạn hoàn toàn chắc chắn rằng không có Chủ đề, Plugin hoặc lõi nào bị hỏng do thay đổi phiên bản. Thực sự, trừ khi bạn thực sự cần một phiên bản thay thế của tập lệnh đóng gói lõi, chỉ cần sử dụng những gì được gói cùng với lõi.

Thứ hai, tôi thực sự khuyên bạn nên tham gia wp_enqueue_scriptsđăng ký và đăng ký kịch bản, thay vì init. (Nó hoạt động tại init, nhưng từ góc độ chơi độc đáo với người khác , tốt nhất là sử dụng móc chính xác nhất về mặt ngữ nghĩa.)

Thứ ba, để ghi lại các tập lệnh tùy chỉnh của riêng bạn, bạn sử dụng các phương pháp tương tự như trên:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

Chỉ cần thêm bất cứ kịch bản nào bạn cần để ghi danh.


4
+1 trên hoàn toàn cần thiết ! Quá nhiều chủ đề (thường là 'cao cấp') đăng ký một phiên bản lỗi thời của jQuery. Nó phá vỡ các plugin.
Stephen Harris

Việc thêm tập lệnh này vào tệp chức năng của tôi (không có khai báo php vì chúng đã có sẵn) mang lại cho tôi 'Lỗi-http 500 (Lỗi máy chủ nội bộ)'. Có lỗi ở đâu đó không?
Johan Dahl

Đúng; có lỗi cú pháp trong các wp_enqueue_script()cuộc gọi.
Chip Bennett

Cảm ơn bây giờ nó hoạt động! Tuy nhiên, nó vẫn được xuất ra trong tiêu đề. Nó không tốt hơn nếu nó ở chân trang? Nếu vậy, tôi có thể sửa đổi mã như vậy không?
Johan Dahl

Bạn chắc chắn có thể enqueue trong footer. Chỉ cần đặt $in_footertham số thành true trong cuộc gọi của bạn wp_enqueue_script().
Chip Bennett

4

Hy vọng điều này sẽ giúp, tìm kiếm codex wp_enqueue_scriptsđể biết thêm thông tin.

  1. Không sử dụng initđể enqueue . Sử dụng wp_enqueue_scriptscho công cụ front-end và admin_enqueue_scriptscho phía quản trị viên. Bạn có thể sử dụng initđể đăng ký tập lệnh mặc dù.
  2. Móc wp_enqueue_scriptschỉ bắn ở mặt trước (chứ không phải trên trang đăng nhập) - vì vậy bạn không phải kiểm tra is_admin().
  3. Trừ khi bạn có một lý do cụ thể để làm khác, tôi sẽ đề nghị đăng ký và xếp hàng các tập lệnh sử dụng functions.phpcho các chủ đề hoặc trong một trình cắm khác. Bạn chỉ cần đặt:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
  4. Nếu mục đích là để ghi lại một tập lệnh khi sử dụng shortcode, bạn có thể muốn sử dụng wp_enqueue_scripttrong hàm gọi lại shortcode để xếp hàng nó khi cần (điều này sẽ in nó ở chân trang kể từ 3.3 ).

  5. Bạn không nên đăng ký lại jQuery hiện có ở phía quản trị viên. Bạn có thể phá vỡ một cái gì đó: D.

  6. Các trình cắm không nên đăng ký lại jQuery hiện có.

  7. Bạn nên cân nhắc những ưu và nhược điểm của việc đăng ký lại jQuery. Chẳng hạn, nó có thể phá vỡ một số plugin nếu bạn đăng ký một phiên bản cũ (có thể không phải bây giờ, nhưng trong tương lai ...)


1
Quảng cáo 5) đăng ký lại không thực sự quan trọng. Đó là lý do tại sao chúng ta có chức năng đăng ký và đăng ký. :)
kaiser

2

Cảnh báo công bằng: việc hủy đăng ký phiên bản jQuery được đóng gói của WP có lợi cho chính bạn có thể gây ra sự cố, đặc biệt là nếu bạn không cẩn thận để đảm bảo rằng bạn thay đổi phiên bản mà bạn đang hướng tới mỗi khi WP cập nhật phiên bản của nó. Điều này đôi khi xảy ra đối với các plugin, thường (hoặc thường là ít nhất nên viết các plugin của chúng để tương thích tối đa với phiên bản WP của jQuery.

Điều đó nói rằng, phiên bản đầu tiên của bạn là chính xác - nó được nối với wp_enqueue_scripts. Chức năng thứ hai của bạn được nối với init, đó có thể là lý do tại sao nó không hoạt động đúng.

Thêm tập lệnh của riêng bạn theo cách tương tự:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

Tôi giả sử ở đây rằng bạn đang tải tập lệnh từ một jsthư mục trong thư mục chủ đề hiện tại của bạn; thay đổi tham số URI nếu điều đó không đúng. Tham số thứ ba array( 'jquery' )nói rằng bbg-scriptsphụ thuộc vào jquery, và do đó nên được tải sau đó. Xem https://codex.wordpress.org/Function_Reference/wp_enqueue_script để biết thêm chi tiết.


1
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Điều này sẽ không làm gì cả ... Tôi nghi ngờ ý bạn là

if (!function_exists('load_my_scripts')) {

Ví dụ của bạn sẽ chỉ tải hàm load_my_scripts nếu nó đã tồn tại (điều này không tồn tại và nếu không, nó sẽ tạo ra lỗi)


0

Nếu, vì lý do hiệu suất, bạn muốn tải jquery và các tệp js lõi khác từ CDN, hãy đảm bảo bạn đang tải cùng một phiên bản để ngăn chặn những điều khó chịu xảy ra với các chức năng lõi và plugin. Như thế này:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');

-2

Sau khi kiểm tra tất cả các phương pháp khác nhau để tải jquery (không chỉ trên bài đăng này), tôi nhận ra rằng không ai trong số họ làm tất cả những điều sau:

  1. Đăng ký (và có lẽ enqueue) jquery bằng cách sử dụng một hàm, vì vậy nó có thể được sử dụng bởi các plugin.
  2. Tải nó từ Google CDN với url giao thức tương đối.
  3. Dự phòng bản sao cục bộ nếu Google ngoại tuyến.

Có rất nhiều phiên bản thay thế thực hiện một số trong số này trong danh sách, nhưng không phải tất cả, vì vậy tôi đã viết phiên bản của mình và sửa đổi một số phương thức đã có sẵn. Đây là:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

Để tiết kiệm băng thông và không ping Google mỗi khi trang được tải lại, nó sẽ nhớ liệu Google CDN có trực tuyến hay không trong 5 phút bằng API tạm thời Wordpress.


Không được khuyến khích. Bây giờ bạn phải cập nhật tập lệnh sau mỗi lần cập nhật WordPress để khớp với phiên bản jQuery chính xác mà WordPress đang sử dụng. Ngoài ra, Google không gửi thư viện được nén trong một số trường hợp, vì vậy trang của bạn hiện đang tải chậm hơn.
fuxia

Tôi không sử dụng jpressery của wordpress. Vui lòng đọc mã. Tôi đang sử dụng phiên bản của chủ đề. Và nếu bạn không thích google, bạn có thể sử dụng một cdn khác.
nautilus7

Nhưng đó là điểm chính: Bạn nên sử dụng WordPress jQuery để đảm bảo phiên bản chính xác.
fuxia

Tôi không theo bạn. Tôi lấy bất kỳ phiên bản nào tôi cần từ google và tôi gói cùng một phiên bản với chủ đề của mình. Đó là cách mọi người đang làm điều đó. Wordpress có thể sử dụng (trong phần quản trị) bất kỳ phiên bản nào đi kèm.
nautilus7

1
Bạn có thể sử dụng phiên bản jQuery nào bạn muốn nhưng nếu bạn kết hợp nó với một chủ đề, bạn sẽ buộc nó vào người dùng của mình. Vài năm nữa, khi mọi người đang sử dụng jQuery 1.8.2, người dùng của bạn sẽ bị kẹt trên một phiên bản lỗi thời trừ khi họ luôn cập nhật chủ đề.
Chris_O
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.