wp_add_inline_script tanpa ketergantungan

11

Saya memiliki cuplikan javascript yang ingin saya masukkan ke bagian bawah halaman. Ini kode pelacakan, katakanlah mirip dengan Google analytics. Itu tidak memiliki dependensi, itu potongan mandiri.

Saya bisa melakukan sesuatu seperti ini

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

Tampaknya sedikit bodoh (dummy.js adalah file kosong), tetapi berfungsi. Apakah ada cara untuk melewati ketergantungan?

javascript wp-enqueue-script Jimlongo
sumber

Jawaban:

13

wp_add_inline_style() - tanpa ketergantungan

The wp_add_inline_style()dapat digunakan tanpa ketergantungan file sumber.

Berikut ini contoh dari @Flix:

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

di mana kita akan menghubungkan ini ke dalam wp_enqueue_scriptsaksi.

wp_add_inline_script() - tanpa ketergantungan

Menurut tiket # 43565 , yang serupa akan didukung wp_add_inline_script()dalam versi (terima kasih kepada @MarcioDuarte, @ dev101 dan @DaveRomsey untuk verifikasi dalam komentar):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" );' );

yang akan menampilkan berikut ini di header , di antara <head>...</head>tag:

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

Untuk menampilkannya di footer :

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

Default $positionargumen input dalam wp_add_inline_script()adalah 'after'. The 'before'nilai mencetaknya di atas 'after'.

birgire
sumber
The wp_add_inline_script()tanpa ketergantungan masih sedang dipertimbangkan untuk 4.9.9, itu tidak berarti bahwa itu akan ditambahkan. Jadi sebaiknya tunggu konfirmasi sebelum menggunakan fitur ini.
Marcio Duarte
1
Kami siap mulai dari WP 5.0 .
Dave Romsey
Seseorang menghapus komentar saya dari sini (saya mengkonfirmasi jawaban birgire bahwa itu benar-benar berfungsi di WP 5.0+), dan sebulan kemudian saya benar-benar membutuhkan kode ini lagi, googled, menemukan jawaban ini, melirik sekilas, tidak menemukan komentar saya, dan pindah ke hasil lainnya. Setelah satu jam, saya kembali ke sini, menyadari bahwa inilah jawaban yang saya cari! Kepada moderator: tolong JANGAN menghapus komentar saya yang bermanfaat, mereka melayani AKU serta referensi dan pengingat di masa depan, bukan hanya untuk orang lain. Terima kasih.
dev101
Sayangnya saya harus tetap menggunakan Versi 4.9.x.
Lucas Vendramini
5

Pembaruan: WordPress menambahkan dukungan untuk menambahkan skrip dan gaya sebaris tanpa ketergantungan pada v5.0. Lihat jawaban @ birgire untuk implementasi.

Saat menggunakan wp_add_inline_script(), WP_Scripts::print_inline_script()pada akhirnya akan digunakan untuk menghasilkan skrip inline. Secara desain, print_inline_script()membutuhkan ketergantungan yang valid $handle,.

Karena tidak ada ketergantungan dalam hal ini, wp_add_inline_script()bukan alat yang tepat untuk pekerjaan itu. Alih-alih membuat file ketergantungan palsu (dan permintaan HTTP tambahan yang tidak diinginkan), gunakan wp_headatau wp_footeruntuk menghasilkan skrip inline:

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

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

Secara umum, JavaScript harus ditambahkan ke .jsfile dan digunakan wp_enqueue_script()di wp_enqueue_scriptshook. Data dapat dibuat tersedia untuk skrip menggunakan wp_localize_script(). Kadang-kadang mungkin masih perlu menambahkan skrip inline.

Dave Romsey
sumber
0

Salah satu cara untuk melakukan ini adalah membuat fungsi yang menggema skrip Anda di dalam <script>tag, dan mengaitkannya ke wp_print_footer_scriptstindakan. Anda harus berhati-hati untuk melepaskan diri dari apa pun yang tidak Anda kontrol dengan ketat, tetapi ini metode yang umumnya aman dan mudah.

Sebagai contoh:

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