Trong WP_Dependencieslớp tồn tại một phương thức có tên add_data. Hàm này thêm dữ liệu vào các tập lệnh / kiểu đã được xử lý trong quá trình tải WordPress. Một cách sử dụng thường được trích dẫn cho chức năng này là thêm một điều kiện khi thêm các bảng định kiểu được nhắm mục tiêu vào các phiên bản IE khác nhau. Ví dụ: để nhắm mục tiêu IE8 trở xuống:
function test_wp_print_styles() {
global $wp_styles;
wp_enqueue_style( 'test-style', get_template_directory_uri() . '/css/test.css', array(), 1, 'all' );
$wp_styles->add_data( 'test-style', 'conditional', 'lte ie8' );
}
add_action( 'wp_print_styles', 'test_wp_print_styles' );Điều này sẽ hiển thị như:
<!--[if lte ie8]>
<link rel='stylesheet' id='test-style-css' href='http://trunkosaurus.dev/wp-content/themes/twentyeleven/css/test.css?ver=1' type='text/css' media='all' />
<![endif]--> Khi tôi xem qua Core, tôi thấy một số nơi sử dụng phương pháp này:
WP_Styles->add_inline_style(): thêm kiểu nội tuyến sau biểu định kiểu được tham chiếu (thực hiện quaWP_Styles->print_inline_style())WP_Scripts->localize(): thêm một đối tượng được mã hóa json (được bao bọc bởiwp_localize_script()chức năng "công khai" hơn )wp_plupload_default_settings(): thêm đối tượng được mã hóa json (được tạo từ một mảng nhiều chiều) cho tập lệnh 'wp-plupload' (lưu ý rằng điều này sẽ xuất hiện trong 3.4)Khi đăng ký / liệt kê tập lệnh và kiểu Thêm dữ liệu cho tập lệnh mặc định (
wp-includes/script-loader.php)
Từ việc đọc qua các sử dụng của phương thức, nó dường như không có trường hợp sử dụng cụ thể. Trong wp_plupload_default_settings, nó dường như cho phép tiêm dữ liệu tùy ý. Trong wp_register_script, nó dường như được sử dụng để phân biệt giữa các kịch bản đầu trang và chân trang. Trong add_inline_styleđó, nó được sử dụng để biểu thị kiểu nội tuyến nên được thêm vào sau khi biểu định kiểu được chỉ định được xử lý.
Một ứng dụng tuyệt vời cho chức năng này sẽ là một cái gì đó giống như đoạn mã sau đây khi bạn đang mê hoặc một tập lệnh bên ngoài nhưng cần gửi cho nó một số vars cấu hình, một số trong số đó đến từ DB:
function zdt_enqueue_add_this() {
global $wp_scripts;
wp_enqueue_script( 'zdt-add-this', 'http://s7.addthis.com/js/250/addthis_widget.js#pubid=myidhere' );
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );
}
add_action( 'wp_enqueue_scripts', 'zdt_enqueue_add_this' );Điều này sẽ dẫn đến:
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>Lưu ý rằng điều này không thể được thực hiện wp_localize_scriptbởi vì addthis_shaređối tượng có các thuộc tính trong các thuộc tính ( tôi đã viết về một cách hơi khó hiểu xung quanh điều này trước đây ).
EDIT: Tôi đã sai khi nói điều này. wp_localize_scriptxử lý các mảng đa chiều tốt.
Phương pháp này dường như hoạt động thực sự tốt vì những lý do sau:
- Nó cho phép bạn đính kèm dữ liệu vào phần xử lý tập lệnh để nó luôn được xử lý đúng với tập lệnh. Hơn nữa, nó sẽ là thông minh về việc chỉnh sửa kịch bản, thứ tự kịch bản và vị trí kịch bản.
- Nó cho phép bạn sử dụng PHP để gửi vars tới JS.
- Có vẻ như có tổ chức hơn là sử dụng
wp_print_stylesđể in ra một số tập lệnh tùy ý được thực hiện sau đó bởi một tập lệnh bị mê hoặc.
Có một số điều không hoạt động như mong đợi làm tôi lo lắng về phương pháp này. Một vấn đề như vậy là nếu bạn sử dụng wp_localize_scriptcùng với $wp_scripts->add_data, bạn có thể nhận được kết quả không mong muốn. Ví dụ:
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );
wp_localize_script( 'zdt-add-this', 'addthis_share', array( 'var' => 'val' ) );Sản xuất:
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
var addthis_share = {"var":"val"};
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>Trong khi đó kịch bản này:
// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();
$js = "var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "' } };\n";
$js .= 'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };';
wp_localize_script( 'zdt-add-this', 'addthis_share', array( 'var' => 'val' ) );
$wp_scripts->add_data( 'zdt-add-this', 'data', $js );Sản xuất:
<script type='text/javascript'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: '{{title}} {{url}} (by @tollmanz' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere'></script>Các dataphím được thiết lập bởi wp_localize_scriptlà cuối cùng ghi đè bởi các cuộc gọi đến $wp_scripts->add_data, trong khi nếu bạn gọi wp_localize_scripthai lần cho cùng một kịch bản, chuỗi sẽ được nối đúng cách.
Mặc dù tất cả điều này là một cách thực sự tiện dụng để in tập lệnh tùy ý để sử dụng với tập lệnh bị mê hoặc, nó khiến tôi nghĩ rằng nó không nên được sử dụng rộng rãi vì có khả năng xảy ra xung đột. Tôi chắc chắn có thể thấy một đối số cho việc sử dụng điều này trong các dự án cá nhân nơi mã sẽ không được sử dụng trong các plugin / chủ đề cộng đồng.
Tôi cũng đã xem Core Trac để xem liệu có bất kỳ manh mối nào về mục đích của chức năng này không. Tôi đã tìm thấy một vé (http://core.trac.wordpress.org/ticket/11520) (một bản anh hùng ca ở đó) đã khám phá những cách khác để thêm JS tùy ý. Vì vậy, có vẻ như có mối quan tâm trong việc tạo ra một cách tốt hơn để thêm JS tùy ý, nhưng không chắc chắn chính xác nếu add_datalà một phần của quy trình.
Câu hỏi chính của tôi là: các nhà phát triển có nên sử dụng chức năng này không? Trong một số trường hợp (ví dụ wp_register_script:), có vẻ như chức năng "riêng tư" mà bên thứ 3 không nên sử dụng; tuy nhiên, trong các trường hợp khác (ví dụ wp_plupload_default_settings:), có vẻ như là một cách hoàn toàn hợp lý để tiêm JS tùy ý trước một tập lệnh được xử lý.
Tôi không tưởng tượng có một câu trả lời "chính xác" cho vấn đề này, nhưng tôi rất thích nghe những nhà phát triển khác nghĩ gì. Tôi cũng tưởng tượng rằng có những mảnh ghép trong câu đố này mà tôi đã hoàn toàn bỏ qua và rất thích nghe những gì người khác nói về nó.