Comment transmettre des données PHP et des chaînes à JavaScript dans WordPress

meilleures pratiques pour passer des données PHP à JavaScript: une comparaison de wp_localize_script et wp_add_inline_script

Le stockage des données dans les chaînes statiques dans vos fichiers PHP est une pratique recommandée. Si ces données sont nécessaires dans votre code JavaScript, l'incorporer directement dans votre HTML en utilisant wp_localize_script ou wp_add_inline_script est la meilleure approche.

La méthode traditionnelle impliquée en utilisant wp_enqueue_scripts. Examinons son successeur, wp_localize_script, et la méthode plus récente et préférée, wp_add_inline_script.

wp_localize_script Fonction

Cette fonction offre un moyen structuré de transmettre des données à votre javascript. Voici sa syntaxe:

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

• $handle: la poignée enregistrée de votre fichier javascript (par exemple, «my_js_library»).
• $objectName: le nom de l'objet JavaScript qui contiendra vos données.
• $arrayOfValues: un tableau associatif tenant les données à passer.

Exemple d'implémentation dans votre 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 );

dans votre javascript (myLibrary.js), accédez aux données comme ceci: php_vars.home et php_vars.pleaseWaitLabel. Cette méthode élimine le besoin de code dans header.php.

wp_add_inline_script Fonction

Cette fonction plus récente fournit une approche rationalisée. Sa syntaxe est:

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

• $handle: la poignée enregistrée de votre fichier javascript.
• $data: une chaîne contenant le code JavaScript à ajouter. Cela devrait inclure les données que vous souhaitez passer.
• $position: Spécifie où ajouter le script en ligne («avant» ou «après» le script).

Exemple dans votre 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' );

Votre javascript peut accéder aux données via php_vars.home et php_vars.pleaseWaitLabel. Cette méthode simplifie votre code et maintient header.php plus propre.

Conclusion

wp_add_inline_script est généralement préféré pour sa simplicité et son efficacité. Cependant, wp_localize_script reste une option valide, en particulier si vous préférez une approche plus structurée pour gérer vos données. Choisissez la méthode qui convient le mieux à votre style de codage et à vos besoins de projet. Cette clarté et efficacité améliorées font de ces fonctions des outils précieux pour tout développeur WordPress.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!