Bất kỳ lợi thế nào của việc sử dụng wp_scripts và is_IE khi xử lý các tập lệnh


7

Tôi đã đọc trên các tài liệu WP, trong đó chỉ ra ý chính này rằng cách chính xác để chinh phục các kiểu cho IE là bằng cách sử dụng $wp_styles. Tôi đoán rằng điều này cũng đúng với các kịch bản.

Lấy những ví dụ này chẳng hạn ...

Tùy chọn Một - Sử dụngwp_scripts

add_action('wp_print_scripts', function() {
    global $wp_scripts;
    wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
    $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
} );

Tùy chọn Hai - Sử dụng wp_scriptscùng vớiis_IE

add_action('wp_print_scripts', function() {
    global $wp_scripts, $is_IE;
    if($is_IE) {
        wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
        $wp_scripts->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
    }
} );

Tùy chọn ba - Chỉ cần lặp lại nó trong đầu:

add_action('wp_head', function(){
    echo '<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->' . "\n";
});

Lựa chọn thứ tư - Enqueue nó vào đầu:

add_action('wp_print_scripts', function(){
        wp_enqueue_script( 'html5shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', array( 'bootstrap' )  );
});

Tùy chọn thứ hai. Có vẻ mát mẻ vì nó trông gọn gàng hơn trên các trình duyệt không phải IE. Nhưng tôi không chắc liệu nó thực sự có lợi thế về tốc độ hay nếu kiểm tra một mình làm chậm nó nhiều hơn. Ngoài ra, tôi dường như không thể tìm ra bất kỳ lý do nào tại sao tùy chọn một tốt hơn tùy chọn 3 hoặc 4.


Lý do cho câu hỏi này

Tôi đang sử dụng khung Genesis và chúng bao gồm HTML5shiv như ví dụ bên dưới mà dường như không đúng với tôi:

add_action( 'wp_head', 'genesis_html5_ie_fix' );
/**
 * Load the html5 shiv for IE8 and below. Can't enqueue with IE conditionals.
 */
function genesis_html5_ie_fix() {
    if ( ! genesis_html5() )
        return;
    echo '<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->' . "\n";
}

Câu trả lời:


5

Để mở rộng đề xuất @gmazzap về việc không sử dụng toàn cầu khi bạn có thể sử dụng wp_scripts(), có một phím tắt wp_scripts()để thêm nhận xét có điều kiện được gọi wp_script_add_datavà tương tự wp_style_add_datacho các kiểu có điều kiện.

Vì vậy, cách chính xác để sử dụng các điều kiện như trong Wordpress 4.2 là như sau:

/**
 * IE enqueue HTML5shiv with conditionals
 * @link http://tiny.cc/html5shiv
 */
function wpse_213701_enqueue_html5shiv()  {
    wp_enqueue_script( 'html5shiv',
        'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',
        array(),
        false,
        false
    );
    wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
}
add_action('wp_enqueue_scripts', 'wpse_213701_enqueue_html5shiv');

Tuy nhiên, ví dụ trên đang sử dụng HTML5shiv , đây là một tình huống duy nhất. Vì nó phải được tải vào đầu, bạn có thể làm một cái gì đó như ví dụ tiếp theo này nếu bạn lo lắng về một plugin như Roots Soil xóa tất cả các tập lệnh khỏi đầu.


Nhiều khả năng bạn sẽ không gặp phải tình huống như thế này. Đó là một điều rất không ổn định để làm vì rất nhiều tập lệnh được yêu cầu tải trong đầu. Đặt các tập lệnh trong phần chân trang nên được thực hiện bằng cách đặt $in_footerbiến thành đúng khi ghi các tập lệnh. Vì vậy, nếu bạn sử dụng root hoặc bất kỳ plugin bộ đệm nào cho vấn đề đó, đừng lập kế hoạch cho mọi thứ hoạt động chính xác như bạn muốn ngay lập tức.

Đây là một ví dụ xấu về những gì bạn có thể làm:

add_action( 'wp_head', 'wpse_213701_check_html5shiv', 1 );
function wpse_213701_check_html5shiv() {
    remove_action( 'wp_head', 'genesis_html5_ie_fix' );
    if ( !has_filter( 'wp_head', 'wp_enqueue_scripts' ) && !wp_script_is( 'html5shiv', 'done' ) ) {
        add_action('wp_head', 'wpse_213701_echo_html5shiv');
        wp_dequeue_script('html5shiv');
    }
}
function wpse_213701_echo_html5shiv() {
    echo '<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]-->' . "\n";
}

Điều này là quá mức cần thiết và nó vẫn không đảm bảo rằng nó sẽ hoạt động. Trong 4 năm qua, html5shiv đã sử dụng nhiều tên khiến nó được đăng ký / ghi danh với một số cách xử lý khác nhau (html5, html5shiv, html5shim, themename-html5shiv, html5-eg-fix và html5-polyfill ). Ngoài ra, nó thường được đóng gói với Modernizr . Với ý nghĩ đó, nếu bạn nghĩ ví dụ trên là vô lý, thì bạn cũng nên thêm tập lệnh wp_headvào chủ đề con của mình vì trình xử lý plugin html5shiv rất có thể sẽ được đặt tên khác.

Cập nhật (Di chuyển tập lệnh đến chân trang với phương pháp này):

Điều này gây ra một số hành động trên trang Roots / Soil Github. Đây có lẽ là cách tốt nhất để làm điều này (như được đề xuất bởi @grappler ) và vẫn di chuyển các tập lệnh đến chân trang. Một cách tiếp cận tương tự đã được đăng trên blog của @ kaiser vài năm trước.

function grappler_move_js_to_footer() 
    $scripts = wp_scripts();
    foreach( $scripts->registered as $script ) {
        if ( 'html5' == $script->handle ) {
            wp_script_add_data( $script->handle, 'group', 0 );
        } else {
            wp_script_add_data( $script->handle, 'group', 1 );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'grappler_move_js_to_footer', 99 );

Đối với những gì Mark Kaplan đã đề xuất và những gì toscho đã đề cập ở đây , bạn không nên sử dụng phương thức $ is_IE của tùy chọn 2 . Rõ ràng, nếu tiêu đề HTTP Vary: User-Agent không được gửi, bạn sẽ gửi đầu ra sai cho người dùng đằng sau bộ đệm khiến nó bị hỏng cho những người dùng đó. Liên quan đến phát hiện phía trình duyệt ở đây là một chuỗi các ví dụ dài về cách điều đó có thể được thực hiện. Ngay cả phát hiện phía khách hàng cũng có những cạm bẫy.


Vào cuối ngày, có lẽ câu trả lời tốt nhất là không sử dụng bất kỳ phương pháp nào trong số này và quên đi các trình duyệt cũ vì Microsoft đã bỏ hỗ trợ cho chúng kể từ ngày 12 tháng 1 .


3
hãy quên các trình duyệt cũ vì Microsoft đã bỏ hỗ trợ cho chúng kể từ ngày 12 tháng 1 . Tôi nghĩ điều này sẽ không bao giờ xảy ra. Không còn chuyện tào lao phải hỗ trợ khủng long nữa, YEAH !!!!
Pieter Goosen

4

Và tùy chọn 5 là phát hiện ở phía máy khách nó là trình duyệt nào và tạo một phần tử tập lệnh cho tập lệnh của bạn trực tiếp vào dom, giống như google phân tích một SDK SDK làm.

Điều này có lợi thế là thực hiện phát hiện trình duyệt ở nơi duy nhất cần thực hiện, trình duyệt và chỉ tải các tập lệnh cụ thể của IE khi cần.

Về tinh thần, nó rất giống với lựa chọn thứ ba của bạn, chỉ chung chung hơn.

Sidenote: is_IEgiống như tất cả các phát hiện trình duyệt phía máy chủ khác nên tránh vì chúng sẽ phá vỡ bộ nhớ đệm.


4

Nói chung, kịch bản và kiểu không bao giờ được in trực tiếp lên trang.

Lý do là một plugin hoặc chủ đề khác có thể thêm cùng một tập lệnh và bạn nhận được cùng một tập lệnh được thêm 2 lần trở lên.

Nếu bạn enqueue tài sản theo cách thích hợp, nếu mã khác liệt kê lại cùng một tài sản, nó sẽ được thêm một lần.

Vì lý do này, bạn nên bỏ qua tùy chọn 3 và 4.

Về tùy chọn 2, như Mark Kaplun đã chỉ ra , nó sử dụng tính năng phát hiện trình duyệt phía máy chủ, không bao giờ rất hợp lý và thậm chí nếu có, đừng để bạn chọn phiên bản trình duyệt và trong trường hợp của bạn, nó sẽ bao gồm kịch bản ngay cả trong các phiên bản IE hiện đại, không cần nó.

Vì vậy, trên thực tế, tùy chọn 1 là tốt nhất trong số các tùy chọn bạn đề xuất.

Những thay đổi duy nhất tôi sẽ làm:

  • sử dụng 'wp_enqueue_scripts'hành động, thay vì'wp_print_scripts'
  • sử dụng wp_scripts()chức năng istead của truy cập toàn cầu

Cái gì đó như:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
       'html5shiv',
       'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',
       array( 'bootstrap' ),
       '3.7.2',
       false
    );
    wp_scripts()->add_data( 'html5shiv', 'conditional', 'lt IE 9' );
} );

Làm như vậy nếu một đoạn 'html5shiv'mã enqueue plugin khác một lần nữa, nó sẽ được thêm chỉ một lần.

Lưu ý rằng sử dụng đoạn trích ở trên, những gì được in trên trang là:

<!--[if lt IE 9]>
<script type='text/javascript' src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js'></script>
<![endif]-->

Điều kiện này được phân tích cú pháp bởi trình duyệt (phía máy khách) chứ không phải phía máy chủ, vì vậy nó có giá cả phải chăng và cho phép bạn thêm tập lệnh chỉ cho phiên bản IE bạn muốn nhắm mục tiêu.

Nếu bạn cần biết thêm về nền tảng máy khách (HĐH, loại màn hình và độ phân giải, phiên bản chi tiết cụ thể của trình duyệt ...) thì cách duy nhất là sử dụng một số javascript để đánh hơi chi tiết này và tự động thêm tập lệnh vào DOM (theo Đánh dấu giải pháp Kaplun ), nhưng nếu biết "họ trình duyệt" và phiên bản chính là đủ cho bạn, đề nghị của tôi là sử dụng giải pháp này.


Cảm ơn câu trả lời cũng được giải thích! Điều duy nhất tôi tự hỏi là lợi ích của wp_enqueue_scriptsnó là wp_enqueue_scriptsgì? Lý do duy nhất tôi sử dụng wp_print_scriptslà nó đã được tải sau đó, tương tự như cách bootstrap thực hiện nó.
Bryan Willis

1
@BryanWillis wp_enqueue_scriptslà móc tiêu chuẩn để thu hút tài sản. Khi wp_print_scriptscháy, tất cả các tập lệnh nên được xử lý và các plugin khác có thể cho rằng. Ví dụ: lấy github.com/roots/soil . Một trong các mô-đun của nó di chuyển tất cả các tập lệnh đến chân trang. Để làm điều đó, nó loại bỏ hoàn toàn wp_print_scriptshành động, giả sử tất cả các kịch bản được xử lý wp_enqueue_scripts. Mã của bạn sẽ không tương thích với plugin đó. Vì vậy, đặc biệt nếu bạn có kế hoạch chia sẻ / bán mã của mình, hãy luôn sử dụng các móc tiêu chuẩn để cải thiện khả năng tương thích.
gmazzap

Điều đó chắc chắn có ý nghĩa. Trớ trêu thay, nói về khả năng tương thích, đất là một trong những lý do tôi đã hỏi câu hỏi đó, bởi vì nó thực sự phá vỡ mã này bất kể. Để htm5shiv hoạt động bình thường, nó cần được tải ở bất cứ đâu giữa thẻ mở và đóng </head>. Cá nhân tôi đã sử dụng đất trong một vài năm nay, trừ đi sự soil-js-to-footerhỗ trợ chủ đề, bởi vì nó thường không gây ra vấn đề khi một kịch bản có nghĩa là được tải vào đầu.
Bryan Willis

Điều này vừa được đưa lên trong đất, rất thích nghe ý kiến ​​của bạn. github.com/roots/soil/issues/33
Bryan Willis
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.