wp enqueue สคริปต์แบบอินไลน์เนื่องจากการพึ่งพา

มีวิธีใช้ wp_enqueue_script () สำหรับสคริปต์แบบอินไลน์หรือไม่

ฉันทำเช่นนี้เพราะสคริปต์แบบอินไลน์ของฉันขึ้นอยู่กับสคริปต์อื่นและฉันต้องการความยืดหยุ่นในการแทรกหลังจากที่โหลดแล้ว

นอกจากนี้ยังเป็นสคริปต์แบบอินไลน์เนื่องจากฉันส่งตัวแปร php ไปยังจาวาสคริปต์ (เช่นเส้นทางธีม ฯลฯ )

ขอบคุณล่วงหน้า.

คุณมี wp_localize_script () แต่มีไว้สำหรับส่งข้อมูลเท่านั้น

มิฉะนั้นคุณสามารถทำสิ่งนี้:

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

ความคิดคือการที่คุณไม่ควรพึ่งพาสคริปต์แบบอินไลน์ของคุณจะถูกพิมพ์ว่าหลังจากสคริปต์มันขึ้นอยู่กับ แต่ภายหลัง

อย่าทำให้มันเป็นสคริปต์แบบอินไลน์จากนั้นส่งพารามิเตอร์แบบไดนามิกไปเป็นตัวแปร อ็อตโตได้เขียนคำแนะนำที่ดีเกี่ยวกับวิธีการทำสิ่งนี้อย่างมีประสิทธิภาพ

WordPress 3.3 จะทำให้สิ่งนี้มีประสิทธิภาพยิ่งขึ้น: https://core.trac.wordpress.org/ticket/11520

วิธีการแก้ปัญหานี้คล้ายกับคำตอบของ @ scribu แต่เป็นไปตามรูปแบบของwp_enquque_script()และจะวางสคริปต์ในส่วนหัวหากการพึ่งพารวมอยู่ในส่วนหัว

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

หมายเหตุ: นี่ใช้การใช้งานฟังก์ชั่นที่ไม่ระบุชื่อ แต่สำหรับรุ่น PHP ก่อนหน้า 5.3 นี้สามารถแปลงเป็นคลาสได้อย่างง่ายดาย

ตั้งแต่ WordPress 4.5 คุณสามารถใช้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' );
}

วิธีที่ดีกว่าที่ฉันพบคือใช้ wp_localize_script()ตามที่บอกไว้ @ @

โดยปกติฉันตัดสินใจใช้จาวาสคริปต์ในบรรทัดเพราะฉันต้องการให้ตัวแปร PHP บางอย่างแก่สคริปต์ของฉัน สิ่งนี้สามารถแก้ไขได้ด้วยwp_localize_script()นี้สามารถแก้ไขได้ด้วยฉันจะให้ตัวอย่าง:

คุณมีอาร์เรย์ที่$aFooมีตัวเลือกบางตัวและจำเป็นต้องส่งไปยังสคริปต์

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

ใช้สคริปต์ในบรรทัด:

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

การใช้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' );    

จากนั้นpathToScript/script.jsจะเป็น:

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

ด้วยวิธีนี้คุณไม่จำเป็นต้องใช้สคริปต์ในบรรทัดอีกต่อไป

scribu ถูกต้องอย่างแน่นอน อย่างไรก็ตามฉันต้องการเพิ่มข้อมูลบางส่วน:

ฉันต้องการให้ฟังก์ชันของฉันส่งออกสคริปต์หนึ่งครั้งไม่ว่าจะถูกเรียกบ่อยแค่ไหน มันเป็นฟังก์ชั่นที่เกี่ยวข้องกับเนื้อหาดังนั้นฉันจึงอดใจรอไม่ได้ ฉันใช้ scribus infos และการอ่าน WP core เพื่อหาสิ่งนี้:

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

ใช้วิธีนี้ฉันสามารถพิมพ์สคริปต์แบบอินไลน์ได้หนึ่งครั้ง ในกรณีของฉันฉันมีฟังก์ชั่นที่สร้างปุ่มแชร์และต้องการสคริปต์หนึ่งตัวที่จะเรียกใช้งานสำหรับปุ่มทั้งหมด แต่เพียงครั้งเดียว