Đăng ký và liệt kê các tệp javascript có điều kiện (dành riêng cho trình duyệt)?


8

Cộng đồng WP.SE luôn khuyên bạn nên sử dụng wp_register_scriptwp_enqueue_scriptđể thêm các tập lệnh trong một chủ đề / mẫu (và tương tự, wp_register_stylewp_enqueue_stylecho các bảng định kiểu).


Đây là cách tôi đăng ký và ghi lại kịch bản của mình ...

Đầu tiên, tôi thêm một cái gì đó như thế này trong Hàm.php

add_action('init','wpse54189_register_script');
function wpse54189_register_script(){

    //Register scripts
    wp_enqueue_script( 'jquery' );
    wp_register_script( 'aahan_bootstrap_transition', get_template_directory_uri().'/js/bootstrap-transition.js');
    wp_register_script( 'aahan_bootstrap_carousel', get_template_directory_uri().'/js/bootstrap-carousel.js', array('aahan_bootstrap_transition'));    
    wp_register_script( 'wpse54189_ajax_comment', get_template_directory_uri().'/js/no-reload-comments.js');
}

sau đó gọi nó trong một tệp mẫu (giả sử, tiêu đề.php) như thế này

<?php wp_enqueue_script( 'aahan_bootstrap_carousel' ); ?>
<?php wp_enqueue_script( 'wpse54189_ajax_comment' ); ?>

Bây giờ, đến lúc, làm cách nào để tôi đăng ký và ghi danh "các tệp JavaScript có điều kiện" có sẵn để được các trình duyệt cụ thể nhận ra? Ví dụ:

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

Làm thế nào để tôi đăng ký và enqueue này đúng?

PS: Tôi sử dụng chủ đề Reddle , được phát triển bởi những người sắp xếp chủ đề tại Automattic. Và tiêu đề.php của chủ đề trực tiếp sử dụng mã vừa nêu trên - tức là nó không bị mê hoặc. Vì vậy, điều đó có nghĩa là, đó là cách duy nhất để làm điều đó?


Mặc dù gần một tuổi, câu hỏi tương tự đã được hỏi trước đây . Tôi đã không bắt gặp nó khi tôi tìm kiếm trước đó.
it_me

Câu trả lời:


13

WP_ScriptsWP_Stylescác lớp là phía sau wp_enqueue_scriptwp_enqueue_stylechức năng. Nếu bạn xem việc triển khai các lớp ( tập lệnhkiểu ) thì bạn sẽ thấy WP_Scriptslớp đó không hỗ trợ bất kỳ loại tập lệnh có điều kiện nào, nhưng! bạn có thể thấy điều WP_Stylesđó Vấn đề là wp_enqueue_stylekhông cho phép bạn thiết lập điều kiện.

Vì vậy, chúng tôi phải thực hiện một hack nhỏ:

add_filter( 'wp_enqueue_scripts', 'wpse2345_enqueue_scripts' );
function wpse2345_enqueue_scripts() {
    wp_enqueue_style( 'mystyle', 'url/of/my/style.css', array(), '1.0.0' );

    global $wp_styles;
    $wp_styles->registered['mystyle']->add_data( 'conditional', 'lt IE 9' );
}

Việc hack như vậy trở nên khả thi, bởi vì tất cả các kiểu đã đăng ký được lưu trữ trong registeredtrường của WP_Styleslớp. Mỗi kiểu đã đăng ký là một đối tượng của _WP_Dependencylớp, cho phép bạn thêm dữ liệu bổ sung.

Thật không may, hack này không hoạt động cho các kịch bản.

Thông tin bổ sung:
Tôi thực sự đã xem mã trong Chủ đề Tinh hoa của Aaron Campbell đêm qua và nhận thấy rằng anh ta đang gọi cả kịch bản và phong cách có điều kiện của trình duyệt.

/**
 * @var WP_Scripts
 */
global $wp_scripts;
// Conditionally load this only for IE < 9
$wp_scripts->add_data( 'html5', 'conditional', 'lt IE 9' );

/**
 * @var WP_Styles
 */
global $wp_styles;
// Conditionally load this only for IE < 8
$wp_styles->add_data( 'blueprint-ie', 'conditional', 'lt IE 8' );

Ngoài ra còn có một vé và bản vá nhưng nó chưa có trong cốt lõi . Rõ ràng tập lệnh có điều kiện sẽ không hoạt động mà không có bản vá nhưng một điều cần lưu ý là bạn có thể sử dụng phương thức add_data trực tiếp bên trong hàm của bạn được gắn vào wp_enqueue_scriptshành động.


1
Unfortunately this hack is not working for scripts.Ôi ... thật tệ! Có vẻ như cách duy nhất là như vậy. :( Cảm ơn bạn đã hack. :)
it_me

Có vẻ như chúng tôi có các tập lệnh có điều kiện bắt đầu từ 4.2 core.trac.wordpress.org/changeset/31223
lkraav
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.