wp_add_inline_script không phụ thuộc

11

Tôi có một đoạn mã javascript mà tôi muốn đưa vào phần cuối trang. Đó là mã theo dõi, giả sử tương tự như Google Analytics. Nó không có phụ thuộc, nó là một đoạn độc lập.

Tôi có thể làm một cái gì đó như thế này

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

Có vẻ hơi ngu ngốc (dummy.js là một tệp trống), nhưng hoạt động. Có cách nào để bỏ qua sự phụ thuộc?

javascript wp-enqueue-script

— jimlongo
nguồn

13

`wp_add_inline_style()` - không phụ thuộc

Có wp_add_inline_style()thể được sử dụng mà không cần một phụ thuộc tập tin nguồn.

Đây là một ví dụ từ @Flix:

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

nơi chúng ta sẽ nối cái này vào wp_enqueue_scriptshành động.

`wp_add_inline_script()` - không phụ thuộc

Theo vé # 43565 , tương tự sẽ được hỗ trợ wp_add_inline_script()trong phiên bản (cảm ơn @MarcioDuarte, @ dev101 và @DaveRomsey để xác minh trong nhận xét):~~4.9.9~~ 5.0

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

sẽ hiển thị như sau trong tiêu đề , giữa các <head>...</head>thẻ:

<script type='text/javascript'>
console.log( "header" );
</script>

Để hiển thị nó ở chân trang :

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

Mặc định của $positionđối số đầu vào wp_add_inline_script()là 'after'. Các 'before'giá trị in nó trên 'after'.

— bạch dương
nguồn

Việc wp_add_inline_script()không phụ thuộc vẫn đang được xem xét cho 4.9.9, điều đó không nhất thiết có nghĩa là nó sẽ được thêm vào. Vì vậy, thật khôn ngoan khi chờ xác nhận trước khi sử dụng tính năng này.

— Marcio Duarte

1

Chúng tôi rất tốt để đi như WP 5.0 .

— Dave Romsey

Ai đó đã xóa nhận xét của tôi từ đây (Tôi đã xác nhận câu trả lời của birgire rằng nó thực sự hoạt động trong WP 5.0+), và một tháng sau tôi thực sự cần mã này một lần nữa, googled, tìm thấy câu trả lời này, lướt qua, không tìm thấy bình luận của tôi và di chuyển vào kết quả khác. Chỉ sau một giờ, tôi trở lại đây, nhận ra rằng đây là câu trả lời tôi đang tìm kiếm! Đối với người điều hành: vui lòng KHÔNG xóa các nhận xét hữu ích của tôi, chúng phục vụ ME cũng như các tài liệu tham khảo và nhắc nhở trong tương lai, không chỉ cho người khác. Cảm ơn bạn.

— dev101

Thật không may tôi phải gắn bó với Phiên bản 4.9.x.

— Lucas Vendramini

5

Cập nhật: WordPress đã thêm hỗ trợ để thêm các tập lệnh và kiểu nội tuyến mà không phụ thuộc vào phiên bản 5.0. Xem câu trả lời của @ birgire để triển khai.

Khi sử dụng wp_add_inline_script(), WP_Scripts::print_inline_script()cuối cùng sẽ được sử dụng để xuất các tập lệnh nội tuyến. Theo thiết kế, print_inline_script()đòi hỏi một sự phụ thuộc hợp lệ $handle,.

Vì không có sự phụ thuộc trong trường hợp này, wp_add_inline_script()không phải là công cụ phù hợp cho công việc. Thay vì tạo tệp phụ thuộc giả mạo (và yêu cầu HTTP bổ sung không mong muốn), hãy sử dụng wp_headhoặc wp_footerđể xuất tập lệnh nội tuyến:

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

Nói chung, JavaScript nên được thêm vào một .jstệp và sử dụng wp_enqueue_script()trên wp_enqueue_scriptshook. Dữ liệu có thể được cung cấp cho tập lệnh bằng cách sử dụng wp_localize_script(). Đôi khi vẫn có thể cần phải thêm một tập lệnh nội tuyến.

— Dave Romsey
nguồn

0

Một cách để làm điều này là tạo một hàm lặp lại tập lệnh của bạn bên trong <script>thẻ và nối nó với wp_print_footer_scriptshành động. Bạn nên cẩn thận để thoát khỏi bất cứ điều gì bạn không kiểm soát chặt chẽ, nhưng đây là phương pháp thường an toàn và dễ dàng.

Ví dụ:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );

— Morgan Estes
nguồn

wp_add_inline_script không phụ thuộc

wp_add_inline_style() - không phụ thuộc

wp_add_inline_script() - không phụ thuộc

`wp_add_inline_style()` - không phụ thuộc

`wp_add_inline_script()` - không phụ thuộc