kịch bản nội tuyến wp enqueue do phụ thuộc

Có cách nào để sử dụng wp_enqueue_script () cho các tập lệnh nội tuyến không?

Tôi đang làm điều này bởi vì tập lệnh nội tuyến của tôi phụ thuộc vào tập lệnh khác và tôi muốn tính linh hoạt của việc chèn nó sau khi được tải.

Ngoài ra, đó là một tập lệnh nội tuyến vì tôi đang chuyển các biến php vào javascript (như đường dẫn chủ đề, v.v.)

Cảm ơn trước.

Chà, bạn có wp_localize_script (), nhưng đó chỉ là để truyền dữ liệu.

Nếu không, bạn có thể làm điều này:

function print_my_inline_script() {
  if ( wp_script_is( 'some-script-handle', 'done' ) ) {
?>
<script type="text/javascript">
// js code goes here
</script>
<?php
  }
}
add_action( 'wp_footer', 'print_my_inline_script' );

Ý tưởng là bạn không nên dựa vào tập lệnh nội tuyến của mình được in chính xác sau tập lệnh mà nó phụ thuộc, nhưng sau đó.

Chỉ cần không biến nó thành một tập lệnh nội tuyến và sau đó chuyển các tham số động cho nó dưới dạng các biến. Otto đã viết một hướng dẫn tuyệt vời về cách làm điều này một cách hiệu quả.

WordPress 3.3 cũng sẽ làm cho điều này mạnh mẽ hơn: https://core.trac.wordpress.org/ticket/11520

Giải pháp này tương tự như câu trả lời của @ scribu , nhưng nó tuân theo hình thức wp_enquque_script()và sẽ đặt tập lệnh vào tiêu đề nếu phần phụ thuộc của nó được bao gồm trong tiêu đề.

/**
 * Enqueue inline Javascript. @see wp_enqueue_script().
 * 
 * KNOWN BUG: Inline scripts cannot be enqueued before 
 *  any inline scripts it depends on, (unless they are
 *  placed in header, and the dependant in footer).
 * 
 * @param string      $handle    Identifying name for script
 * @param string      $src       The JavaScript code
 * @param array       $deps      (optional) Array of script names on which this script depends
 * @param bool        $in_footer (optional) Whether to enqueue the script before </head> or before </body> 
 * 
 * @return null
 */
function enqueue_inline_script( $handle, $js, $deps = array(), $in_footer = false ){
    // Callback for printing inline script.
    $cb = function()use( $handle, $js ){
        // Ensure script is only included once.
        if( wp_script_is( $handle, 'done' ) )
            return;
        // Print script & mark it as included.
        echo "<script type=\"text/javascript\" id=\"js-$handle\">\n$js\n</script>\n";
        global $wp_scripts;
        $wp_scripts->done[] = $handle;
    };
    // (`wp_print_scripts` is called in header and footer, but $cb has re-inclusion protection.)
    $hook = $in_footer ? 'wp_print_footer_scripts' : 'wp_print_scripts';

    // If no dependencies, simply hook into header or footer.
    if( empty($deps)){
        add_action( $hook, $cb );
        return;
    }

    // Delay printing script until all dependencies have been included.
    $cb_maybe = function()use( $deps, $in_footer, $cb, &$cb_maybe ){
        foreach( $deps as &$dep ){
            if( !wp_script_is( $dep, 'done' ) ){
                // Dependencies not included in head, try again in footer.
                if( ! $in_footer ){
                    add_action( 'wp_print_footer_scripts', $cb_maybe, 11 );
                }
                else{
                    // Dependencies were not included in `wp_head` or `wp_footer`.
                }
                return;
            }
        }
        call_user_func( $cb );
    };
    add_action( $hook, $cb_maybe, 0 );
}

// Usage
enqueue_inline_script('test','alert(\'enqueue inline script test\');',array( 'jquery'));

Lưu ý: điều này sử dụng các hàm ẩn danh, nhưng đối với các phiên bản PHP trước 5.3, điều này có thể dễ dàng chuyển đổi thành một lớp.

Kể từ WordPress 4.5, bạn có thể sử dụng wp_add_inline_script () :

add_action( 'wp_enqueue_scripts', 'cyb_enqueue_scripts' );
function cyb_enqueue_scripts() {
   wp_enqueue_script( 'myscript', 'url/to/myscript.js', array(), '1.0' );
   wp_add_inline_script( 'myscript', 'Your inline javascript code gos here' );
}

Cách tốt hơn mà tôi tìm thấy là sử dụng wp_localize_script(), như @ fouu đề xuất.

Thông thường, tôi quyết định sử dụng Javascript nội tuyến vì tôi cần cung cấp một số biến PHP cho tập lệnh của mình. Điều này có thể được giải quyết với wp_localize_script(). Tôi sẽ cung cấp một ví dụ:

Bạn có một mảng $aFoovới một số tùy chọn và cần chuyển nó vào một tập lệnh.

$aFoo = array( 'option1' => $option1Value, 'option2' => $option2Value ); 

Sử dụng tập lệnh nội tuyến:

<script> 
    var oFoo = {};
    oFoo.option1 = <?php echo $aFoo['option1'] ?>;  
    oFoo.option2 = <?php echo $aFoo['option2'] ?>;            
    //do some stuff with oFoo
</script>

Sử dụng wp_localize_script():

wp_register_script( 'script_name', 'pathToScript/script.js', array( 'jquery' )); //if jQuery is not needed just remove the last argument. 
wp_localize_script( 'script_name', 'object_name', $aFoo ); //pass 'object_name' to script.js
wp_enqueue_script( 'script_name' );    

Sau đó, pathToScript/script.jssẽ là:

var oFoo = {};
oFoo.option1 = object_name.option1;   
oFoo.option2 = object_name.option2;            
//do some stuff with oFoo (no PHP needed)

Theo cách này, bạn không cần các tập lệnh nội tuyến nữa.

Scribu là hoàn toàn chính xác. Dù sao, tôi muốn thêm một số thông tin:

Tôi muốn chức năng của mình xuất ra một tập lệnh một lần, bất kể nó được gọi thường xuyên như thế nào. Đây là một chức năng liên quan đến nội dung, vì vậy tôi không thể chờ đợi bất kỳ hook nào. Tôi đã sử dụng scribus infos và một số cách đọc lõi WP để đưa ra điều này:

function print_script_once() {
    if(!wp_script_is('my-handle', 'done')) {
        echo "<script>alert('once!');</script>";
        global $wp_scripts;
        $wp_scripts->done[] = 'my-handle';
    }
}
add_action('get_footer', print_script_once);

Sử dụng phương pháp này tôi có thể in một tập lệnh nội tuyến một lần. Trong trường hợp của tôi, tôi có một chức năng tạo nút chia sẻ và cần một tập lệnh được thực thi cho tất cả các nút. Nhưng chỉ một lần thôi.