wp_add_inline_script โดยไม่ต้องพึ่งพา

11

ฉันมีข้อมูลโค้ด javascript ที่ฉันต้องการแทรกลงในส่วนท้ายของหน้า เป็นรหัสติดตามสมมติว่าคล้ายกับ Google Analytics ไม่มีการอ้างอิงเป็นข้อมูลโค้ดแบบสแตนด์อโลน

ฉันสามารถทำอะไรเช่นนี้

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

ดูเหมือนโง่เล็กน้อย (dummy.js เป็นไฟล์เปล่า) แต่ใช้งานได้ มีวิธีข้ามการพึ่งพาหรือไม่

javascript wp-enqueue-script

— jimlongo
แหล่งที่มา

13

`wp_add_inline_style()` - โดยไม่ต้องพึ่งพา

wp_add_inline_style()สามารถนำมาใช้โดยไม่ต้องพึ่งพาแฟ้มแหล่งที่มา

นี่คือตัวอย่างจาก @Flix:

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

ที่ที่เราจะขอสิ่งนี้ไปสู่การwp_enqueue_scriptsปฏิบัติ

`wp_add_inline_script()` - โดยไม่ต้องพึ่งพา

ตามตั๋ว# 43565จะรองรับwp_add_inline_script()เวอร์ชั่นที่คล้ายกัน(ขอบคุณ @MarcioDuarte, @ dev101 และ @DaveRomsey สำหรับการตรวจสอบในความคิดเห็น):~~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" );' );

ที่จะแสดงต่อไปนี้ในส่วนหัวกล่าวคือระหว่าง<head>...</head>แท็ก:

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

หากต้องการแสดงในส่วนท้าย :

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

ค่าเริ่มต้นของ$positionการโต้แย้งการป้อนข้อมูลในการมีwp_add_inline_script() ค่าพิมพ์เหนือ'after''before''after'

— birgire
แหล่งที่มา

การwp_add_inline_script()ไม่พึ่งพานั้นยังคงถูกพิจารณาสำหรับ 4.9.9 ไม่ได้แปลว่ามันจะถูกเพิ่มเข้ามา ดังนั้นควรรอการยืนยันก่อนใช้คุณสมบัตินี้

— Marcio Duarte

1

เราจะดีไปเป็นของWP 5.0

— Dave Romsey

มีคนลบความคิดเห็นของฉันจากที่นี่ (ฉันยืนยันคำตอบของ birgire ว่าใช้งานได้จริงใน WP 5.0+) และอีกหนึ่งเดือนต่อมาฉันต้องใช้รหัสนี้อีกครั้ง googled พบคำตอบนี้กวาดได้อย่างรวดเร็วไม่พบความคิดเห็นของฉัน เพื่อผลลัพธ์อื่น ๆ เพียงไม่กี่ชั่วโมงฉันก็กลับมาที่นี่โดยตระหนักว่านี่เป็นคำตอบที่ฉันกำลังมองหา! ถึงผู้ดำเนินรายการ: โปรดอย่าลบความคิดเห็นที่เป็นประโยชน์ของฉันพวกเขาให้บริการฉันเช่นเดียวกับการอ้างอิงและการแจ้งเตือนในอนาคตไม่ใช่เพียงเพื่อผู้อื่น ขอบคุณ.

— dev101

โชคร้ายที่ฉันต้องติดกับเวอร์ชัน 4.9.x

— Lucas Vendramini

5

ปรับปรุง: WordPress เพิ่มการสนับสนุนสำหรับการเพิ่มสคริปต์และสไตล์แบบอินไลน์โดยไม่ต้องพึ่งพาใน v5.0 ดูคำตอบของ @ birgire สำหรับการนำไปใช้งาน

เมื่อใช้wp_add_inline_script()งานWP_Scripts::print_inline_script()จะใช้สคริปต์เอาต์พุตแบบอินไลน์ในท้ายที่สุด จากการออกแบบprint_inline_script()ต้องการการพึ่งพาที่ถูกต้อง, $handle.

เนื่องจากไม่มีการพึ่งพาในกรณีนี้wp_add_inline_script()จึงไม่ใช่เครื่องมือที่เหมาะสมสำหรับงาน แทนที่จะสร้างไฟล์การอ้างอิงปลอม (และการร้องขอ HTTP เพิ่มเติมที่ไม่พึงประสงค์) ใช้wp_headหรือwp_footerส่งออกสคริปต์แบบอินไลน์:

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

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

โดยทั่วไปแล้วจาวาสคริปต์ควรถูกเพิ่มลงใน.jsไฟล์และจัดให้มีการใช้งานwp_enqueue_script()บนwp_enqueue_scriptshook wp_localize_script()ข้อมูลที่สามารถให้บริการแก่สคริปต์ที่ใช้ บางครั้งอาจจำเป็นต้องเพิ่มสคริปต์แบบอินไลน์

— Dave Romsey
แหล่งที่มา

0

วิธีหนึ่งในการทำเช่นนี้คือการสร้างฟังก์ชั่นที่สะท้อนสคริปต์ของคุณภายใน<script>แท็กและเชื่อมโยงกับการwp_print_footer_scriptsกระทำ คุณควรระมัดระวังที่จะหลบหนีสิ่งที่คุณไม่ได้ควบคุมอย่างเข้มงวด แต่นี่เป็นวิธีที่ปลอดภัยและง่ายโดยทั่วไป

ตัวอย่างเช่น:

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

— มอร์แกนเอสเตส
แหล่งที่มา

wp_add_inline_script โดยไม่ต้องพึ่งพา

wp_add_inline_style() - โดยไม่ต้องพึ่งพา

wp_add_inline_script() - โดยไม่ต้องพึ่งพา

`wp_add_inline_style()` - โดยไม่ต้องพึ่งพา

`wp_add_inline_script()` - โดยไม่ต้องพึ่งพา