wp enqueue inline script karena ketergantungan

Apakah ada cara untuk menggunakan wp_enqueue_script () untuk skrip inline?

Saya melakukan ini karena skrip inline saya bergantung pada skrip lain dan saya ingin fleksibilitas memasukkannya setelah dimuat.

Juga, Ini skrip inline karena saya meneruskan variabel php ke javascript (seperti jalur tema, dll)

Terima kasih sebelumnya.

Ya, Anda memiliki wp_localize_script (), tetapi itu hanya untuk mengirimkan data.

Jika tidak, Anda dapat melakukan ini:

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' );

Idenya adalah bahwa Anda tidak harus bergantung pada skrip inline Anda yang dicetak tepat setelah skrip itu tergantung, tetapi kemudian.

Hanya saja, jangan menjadikannya skrip inline dan meneruskan parameter dinamis sebagai variabel. Otto telah menulis panduan hebat tentang cara melakukan ini secara efektif.

WordPress 3.3 juga akan membuat ini lebih kuat: https://core.trac.wordpress.org/ticket/11520

Solusi ini mirip dengan jawaban @ scribu , tetapi mengikuti bentuk wp_enquque_script(), dan akan menempatkan skrip di header jika dependensinya termasuk dalam header.

/**
 * 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'));

Catatan: ini menggunakan penggunaan fungsi anonim, tetapi untuk versi PHP sebelum 5.3 ini dapat dengan mudah dikonversi ke kelas.

Sejak WordPress 4.5 Anda dapat menggunakan 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' );
}

Cara yang lebih baik yang saya temukan adalah menggunakan wp_localize_script(), seperti yang disarankan @scribu.

Biasanya, saya memutuskan untuk menggunakan Javascript in-line karena saya perlu menyediakan beberapa variabel PHP ke skrip saya. Ini dapat diatasi dengan wp_localize_script(). Saya akan memberikan contoh:

Anda memiliki larik $aFoodengan beberapa opsi dan harus meneruskannya ke skrip.

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

Menggunakan skrip sebaris:

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

Menggunakan 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' );    

Maka, pathToScript/script.jsakan menjadi:

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

Dengan cara ini Anda tidak perlu skrip in-line lagi.

scribu benar sekali. Lagi pula, saya ingin menambahkan beberapa info:

Saya ingin fungsi saya menghasilkan skrip sekali, tidak peduli seberapa sering disebut. Ini adalah fungsi yang berhubungan dengan konten, jadi saya tidak bisa menunggu kait. Saya menggunakan info scribus dan bacaan inti WP untuk menghasilkan ini:

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);

Dengan menggunakan metode ini saya dapat mencetak skrip inline satu kali. Dalam kasus saya, saya memiliki fungsi yang menciptakan tombol berbagi dan membutuhkan satu skrip untuk dieksekusi untuk semua tombol. Tapi hanya sekali.