<head>. Mặc dù điều này vẫn hoạt động tốt, nhưng có một cách WordPress để làm điều này: bằng cách xếp hàng các tập lệnh và kiểu từ. functions.phpXếp hàng các tập lệnh và kiểu có nghĩa là bạn có thể xác định chi tiết nơi tệp được tải, tức là trong đầu trang hoặc trong chân trang, cho dù phụ thuộc vào nó trên một hoặc nhiều tệp khác do đó cần được gọi sau khi phụ thuộc của nó, v.v.
Xác định chức năng
Để xếp hàng các bảng định kiểu CSS, chúng tôi sẽ sử dụng và để xếp hàng các JavaScrip, chúng tôi sẽ sử dụng .wp_enqueue_style()wp_enqueue_script()
function butter_scripts_and_styles() { // enqueue the main style.css stylesheet wp_enqueue_style( 'main-styles', get_stylesheet_uri() );// enqueue a stylesheet that depends on the main stylesheet
wp_enqueue_style( ‘typography-styles’, get_template_directory_uri() . ‘/css/typography.css’, array( ‘main-styles’), ‘1.0’ );
// enqueue main JavaScript file
wp_enqueue_script( ‘butter-main-scripts’, get_template_directory_uri() . ‘/js/main.js’, array( ‘jquery’ ), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘butter_scripts_and_styles’ );
Lưu ý rằng chấp nhận 5 thông số: , , , , và . Ví dụ: đối với biểu định kiểu, hãy lưu ý rằng chúng tôi đang bao gồm biểu định kiểu trước đó làm phụ thuộc và chúng tôi cũng đang lập phiên bản cho biểu định kiểu.
wp_enqueue_style()$handle$src$deps$ver$mediatypography.cssmain-styles
Các main.js tập tin phụ thuộc vào jQuery. Cách WordPress hiện nay là không hủy đăng ký phiên bản jQuery do WordPress cung cấp và đăng ký phiên bản mong muốn của chúng tôi. Nếu một tập lệnh phụ thuộc vào jQuery, như của chúng tôi, WordPress sẽ tải phiên bản do lõi cung cấp cho chúng tôi.
Cũng lưu ý rằng bằng cách chỉ định ‘true’ cho $in_footer tham số của , chúng tôi đang hướng dẫn WordPress tải tập lệnh này ở chân trang thay vì đầu trang.wp_enqueue_script()
Để tăng tốc độ tải trang, tốt nhất bạn nên tải JavaScripts của bạn ở chân trang. Vì vậy, càng nhiều càng tốt, hãy đặt giá trị $in_footer trong giá trị là ‘true’ trừ khi nó dành cho một tệp như modernizr.js cần tải trước ở đầu trang.wp_enqueue_script()
Đặt hàng có điều kiện
Trên các trang đơn lẻ mà chúng tôi có thể có nhận xét, chúng tôi muốn WordPress tự động tải JavaScript chịu trách nhiệm về hành vi trả lời nhận xét cho các nhận xét theo chuỗi.Để làm như vậy, chúng tôi điều chỉnh chức năng trước đó để bao gồm một lệnh gọi JavaScript trả lời nhận xét. Như vậy:
function butter_scripts_and_styles() {
// previously enqueued and styles
...
// enqueue the comment-reply JavaScript
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'butter_scripts_and_styles' );Lưu ý rằng trước khi xếp hàng chờ tập lệnh, trước tiên chúng ta sẽ kiểm tra xem chúng ta đang ở trong một trang duy nhất cho phép nhận xét và các nhận xét đó được phân thành chuỗi.
Phong cách cho IE
Giả sử bạn muốn xếp hàng một biểu định kiểu giải quyết tất cả các vấn đề khó khăn phát sinh khi xem trang web / chủ đề của bạn trên các phiên bản Internet Explorer cũ hơn IE9. Làm thế nào bạn sẽ đi về điều đó? Bước đầu tiên khá giống với cách sắp xếp các bảng định kiểu thông thường. Từ bên trong hàm, sắp xếp tập lệnh.function butter_scripts_and_styles() { // previously enqueued styles ...// enqueue the IE-specific stylesheet
wp_enqueue_style( ‘butter-for-ie’, get_template_directory_uri() . ‘/css/styles-for-ie.css’, array( ‘butter-styles’, ‘typography’ ), ‘1.0’ );
// previously enqueued scripts
...
}
add_action( ‘wp_enqueue_scripts’, ‘butter_scripts_and_styles’ );
Lưu ý rằng trong mảng các phụ thuộc, chúng tôi chỉ định rằng biểu định kiểu IE phụ thuộc vào biểu định kiểu đã xếp trước đó của chúng ta , là biểu định kiểu chính ( ) cũng như biểu định kiểu kiểu chữ. Điều này đảm bảo rằng nó sẽ tải sau chúng.
butter-stylesstyle.css
Tiếp theo, chúng ta cần hướng dẫn WordPress gói biểu định kiểu được liên kết này trong một câu lệnh điều kiện khi nó được in ra trong đầu.
function butter_scripts_and_styles() {
// previously enqueued styles
...
// enqueue the IE-specific stylesheet
wp_enqueue_style( 'butter-for-ie', get_template_directory_uri() . '/css/styles-for-ie.css', array( 'butter-styles', 'typography' ), '1.0' );
wp_style_add_data( 'butter-for-ie', 'conditional', 'lt IE 9' );
// previously enqueued scripts
...
}
add_action( 'wp_enqueue_scripts', 'butter_scripts_and_styles' );wp_head và wp_footer
Với chức năng đó, tất cả những gì bạn cần làm bây giờ là đảm bảo rằng bạn có trong , ngay trước khi kết thúc và ngoài ra, để đảm bảo rằng các tập lệnh tải trong phần chân trang tải đúng cách, đồng thời đảm bảo bao gồm ngay trước thẻ.<?php wp_head(); ?>header.php</head><?php wp_footer(); ?></body>
Đó là nó!