Thème personnalisé WordPress : mélanger php et javascript ?

Je construis un thème wordpress personnalisé et j’essaie d’ajouter des fonctions JavaScript. La fonction principale que je veux ajouter est une div qui change de couleur au fil du temps. Les couleurs qu’il change sont définies par les paramètres de couleur du thème dans le registre Personnaliser. J’ai ajouté ces boîtes de paramètres de couleur comme indiqué ci-dessous via mon functions.php :

 $wp_customize->add_setting('color1', array('default' => '#000000', 'transport'=>'refresh',));
 $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'color1_CNTL', array(
        'label'     => __('Color 1', 'myTheme'),
        'section'   => 'colors',
        'settings'  => 'color1',)));

tout cela fonctionne bien et je peux l’utiliser dans le registre de personnalisation sur ma page d’administration. Maintenant, la seule chose que je me demande, c’est comment utiliser la valeur de la couleur 1 dans mon code javaScript ? Je sais que si je voulais l’utiliser en css, je n’aurais qu’à utiliser

<?php echo get_theme_mod('color1'); ?>

mais cela ne fonctionne pas en JavaScript. Des idées?

Solution n°1 trouvée

problème

var myvariable='<?php echo get_theme_mod("color1");?>';  //note the surrounding ''!

si vous rencontrez des problèmes pour accéder à la variable, déclarez-la globale.

Solution n°2 trouvée

La « façon WordPress » serait de localiser le script.

Utiliser wp_localize_script

Aperçu:

1. Enregistrez un script dans votre thème (généralement dans votre fichier functions.php). Voir ici : wp_enqueue_script
2. Localiser le script
3. Ensuite, accédez à cette valeur via votre javascript.

Exemple complet minimal (compilé à partir de WP docs):

PHP :

add_action('wp_enqueue_scripts', 'my_theme_scripts');

function my_theme_scripts() {
    // Register the script first.
    wp_register_script( 'some_handle', 'path/to/myscript.js' );

    // Now we can localize the script with our data.
    $color_array = array( 'color1' => get_theme_mod('color1'), 'color2' => '#000099' );
    wp_localize_script( 'some_handle', 'object_name', $color_array );

    // The script can be enqueued now or later.
    wp_enqueue_script( 'some_handle' );
}

Javascript (dans votre fichier ‘myscript.js’);

// Access the color via the object name defined in localize_script
var color = object_name.color1;