Cara Lulus Data dan String PHP ke JavaScript di WordPress

Amalan terbaik untuk lulus data PHP ke JavaScript: Perbandingan wp_localize_script dan wp_add_inline_script

Menyimpan data dalam rentetan statik dalam fail PHP anda adalah amalan yang disyorkan. Jika data ini diperlukan dalam kod JavaScript anda, memasukkannya terus ke HTML anda menggunakan wp_localize_script atau wp_add_inline_script adalah pendekatan terbaik.

Kaedah tradisional yang terlibat menggunakan wp_enqueue_scripts. Mari kita periksa penggantinya, wp_localize_script, dan kaedah yang lebih baru, pilihan, wp_add_inline_script.

wp_localize_script fungsi

Fungsi ini menawarkan cara berstruktur untuk lulus data ke JavaScript anda. Inilah sintaksnya:

wp_localize_script( $handle, $objectName, $arrayOfValues );

• $handle: pemegang berdaftar fail javascript anda (mis., 'My_js_library').
• $objectName: Nama objek JavaScript yang akan mengandungi data anda.
• $arrayOfValues: Arahan bersekutu yang memegang data untuk lulus.

Contoh pelaksanaan dalam functions.php:

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );

$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);

wp_localize_script( 'my_js_library', 'php_vars', $dataToBePassed );

Dalam javascript anda (), akses data seperti ini: myLibrary.js dan php_vars.home. Kaedah ini menghapuskan keperluan untuk kod dalam php_vars.pleaseWaitLabel. header.php

fungsi wp_add_inline_script

Fungsi yang lebih baru ini memberikan pendekatan yang diperkemas. Sintaksinya ialah:

wp_add_inline_script( $handle, $data, $position = 'after' );

• : pemegang berdaftar fail JavaScript anda. $handle
• : Rentetan yang mengandungi kod JavaScript untuk ditambah. Ini harus memasukkan data yang anda mahu lulus. $data
• : Menentukan di mana untuk menambah skrip inline ('sebelum' atau 'selepas' skrip). $position

Contoh dalam

anda: functions.php

wp_enqueue_script( 'my_js_library', get_template_directory_uri() . '/js/myLibrary.js' );

$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);

wp_add_inline_script( 'my_js_library', 'const php_vars = ' . json_encode( $dataToBePassed ), 'before' );

JavaScript anda boleh mengakses data melalui

dan php_vars.home. Kaedah ini memudahkan kod anda dan menyimpan php_vars.pleaseWaitLabel bersih. header.php

Kesimpulan

umumnya lebih disukai untuk kesederhanaan dan kecekapannya. Walau bagaimanapun, wp_add_inline_script tetap menjadi pilihan yang sah, terutamanya jika anda lebih suka pendekatan yang lebih berstruktur untuk menguruskan data anda. Pilih kaedah yang paling sesuai dengan gaya pengekodan dan keperluan projek anda. Kejelasan dan kecekapan yang lebih baik ini menjadikan fungsi -fungsi ini menjadi alat yang berharga untuk mana -mana pemaju WordPress. wp_localize_script

Atas ialah kandungan terperinci Cara Lulus Data dan String PHP ke JavaScript di WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!