Cách liên kết các tệp jQuery / Javascript bên ngoài với WordPress

Vì vậy, tôi đang sử dụng Starkers để dựa trên chủ đề WP tiếp theo của mình và tôi gặp phải một vấn đề nhỏ, tôi đã đưa phiên bản jQuery của riêng mình vào header.phptệp nhưng khi kiểm tra trang web của tôi bằng Fireorms, tôi nhận thấy jquery đã được tải xuống hai lần, tôi đã đào một chút và nhận thấy rằng tôi không chỉ bao gồm tập tin mà còn cả wp_head()chức năng.

Khi cố gắng khắc phục sự cố, tôi nhận thấy một nhận xét trong tệp tiêu đề, trong đó xuất phát từ chủ đề Twenty Ten:

/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head>, such 
 * as styles, scripts, and meta tags
 */

Vì vậy, đây là vấn đề của tôi, tôi có ấn tượng rằng tệp jQuery phải được đặt trước bất kỳ tệp nào khác muốn sử dụng và đó wp_head()là điều cuối cùng trong <head>phần tử, bây giờ tôi hơi bối rối vì tôi đang tự hỏi Tôi đặt lên wp_head()hàng đầu để tệp jQuery bao gồm WP sẽ được sử dụng cho tất cả các plugin của tôi, mặc dù nó nói không làm như vậy.

Tôi đã nhận xét dòng jQuery trong wp_head()hàm nhưng nó yêu cầu cho trang quản trị nên tôi phải đặt lại.

Tôi cũng muốn sử dụng (ít nhất là thử nghiệm) với việc sử dụng phiên bản Google CDN của jQuery, nhưng không muốn bao gồm hai lần!

Tôi hy vọng bạn hiểu những gì tôi đang cố gắng giải thích, bất kỳ đề xuất nào về cách tôi có thể giải quyết vấn đề này sẽ được đánh giá cao nhất. Tôi cũng đánh giá cao bất kỳ lời khuyên nào về cách bạn xử lý các tệp JavaScript của mình với tệp tiêu đề.

Cảm ơn!

— Ben Everard
nguồn

Điều này nên được đổi tên thành một cái gì đó như "Cách liên kết các tệp jQuery / Javascript bên ngoài với WordPress."

— MikeSchinkel

Tôi đồng ý, tôi không chắc nên gọi nó là gì vì tôi không quá quen thuộc với vấn đề tôi gặp phải :-)

— Ben Everard

Câu trả lời:

Từ cách diễn đạt câu hỏi của bạn, bạn phải thêm tập lệnh bằng cách viết <script>thẻ trong mẫu của bạn. Thêm các tập lệnh của riêng bạn thông qua wp_enqueue_script()trong mẫu của bạn functions.php, thiết lập một cách thích hợp các phụ thuộc vào jQuery và wp_head()sẽ thêm các tập lệnh cho bạn.

function my_scripts() {
    wp_enqueue_script( 'my-sweet-script', get_bloginfo('template_directory') . '/script.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Xem trang codex để biết thêm.

— Annika Backstrom
nguồn

Bạn đã đúng khi nghĩ rằng tôi đang thêm tập lệnh bằng cách sử dụng <script>thẻ, đây là lựa chọn thay thế mà tôi đang tìm kiếm, cảm ơn rất nhiều! :-)

— Ben Everard

Nếu bạn chỉ muốn thêm tập lệnh của mình vào giao diện người dùng, hãy nối vào 'template_redirect'thay vì 'init'.

— John P Bloch

Những thứ tốt, tôi sẽ cập nhật câu trả lời của tôi. Tôi gần như đề nghị gói enqueue trong is_admin().

— Annika Backstrom

Tôi thường liệt kê các tập lệnh trong tệp mẫu ở trên get_header(), thực hiện nó functions.phpsẽ ghi lại nó trên mỗi trang có thể không cần thiết. Nếu tôi có một cái toàn cầu, tôi sẽ gọi nó header.phptrước khi wp_head()được gọi. Theo cách đó, các cuộc chinh phục là nơi bạn mong đợi họ sẽ ở trong<head>

— Joe Hoyle

Đôi khi, tốt hơn là thêm các tập lệnh ở dưới cùng của trang. Đây là tham số cuối cùng của codex.wordpress.org/Function_Reference/wp_enqueue_script (5, $ in_footer), đặt nó thành đúng. Thông tin ít cho những người cần kiểm soát nhiều hơn.

— hakre

Tôi khuyên bạn nên xem 5 Mẹo để sử dụng jQuery với WordPress . Trong số những thứ khác, nó cho thấy mã cần thiết để tải jQuery từ thư viện của Google:

function my_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
        wp_enqueue_script('jquery');
    }
}
add_action('init', 'my_init');

Bạn cũng có thể kiểm tra plugin Sử dụng Thư viện Google .

— Travis Northcutt
nguồn

Đây thực sự là một câu trả lời tốt hơn, vì nó cho thấy cách xếp hàng phiên bản Google CDN của jQuery. Mặc dù, như John đã đề xuất ở nơi khác, nếu bạn chỉ muốn điều này ở mặt trước, hãy nối vào template_redirectthay vì init.

— EAMann

Điểm tốt về nơi nó tải. Mặc dù thực sự, khu vực quản trị cũng sử dụng jQuery, phải không? Dù bằng cách nào, cảm ơn vì đã chỉ ra cách kiểm soát nó.

— Travis Northcutt

Có, tôi vừa tìm thấy 5 lời khuyên cho bài đăng jquery / wp, cảm ơn câu trả lời của bạn :-)

— Ben Everard

5 Mẹo sử dụng jQuery với WordPress - liên kết không còn hoạt động nữa.

— hakre

LƯU Ý: Ví dụ bao gồm phiên bản jQuery "cũ hơn", phiên bản WP hiện tại (3.0.1) đang chạy jQuery 1.4.2 ...

— t31os

Mặc dù @tnorthcutt là chính xác, bạn nên xử lý đúng cách jquery riêng của WP nếu bạn muốn tự tải, nhưng bạn chắc chắn gặp phải sự cố khi bạn đang tải một phiên bản jquery khác mà lõi WP. Cả lõi và plugin đều dựa vào nó. Vì vậy, nếu bạn không cập nhật chủ đề của mình với jquery mới nhất mỗi khi WP được cập nhật, trang web của bạn có thể bị hỏng.

Đoạn mã sau sẽ đảm bảo chủ đề của bạn luôn tải đúng phiên bản jquery, bằng cách tìm kiếm phiên bản WP nào đang sử dụng và sau đó tải phiên bản đó từ Google:

$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');

— cjbj
nguồn