web-dev-qa-db-fra.com

Le Customizer de thème ne charge pas JS pour l'aperçu en direct

Je travaille actuellement sur l'ajout d'options au personnalisateur de thème. Depuis deux heures, j'essaie de faire fonctionner l'aperçu en direct et j'essaie de comprendre pourquoi mon thème ne charge pas le fichier theme-customizer.js nécessaire à l'aperçu en direct.

Toutes les options que j'ai ajoutées au thème-personnaliseur fonctionnent si je l'enregistre, puis actualise la page. Donc, je sais que ce n'est pas un problème avec les paramètres.

J'ai actuellement le raccordement pour appeler le fichier JS dans le fichier customize.php avec tous les paramètres du personnaliseur. J'ai aussi un theme-enqueue.php séparé où je mets en file d'attente les autres fichiers JS pour mon thème.

Voici un exemple du hook que j'essaie d'appeler le fichier JS à partir de mon fichier customize.php:

function mytheme_customize_preview_js() {
wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

Lorsque je vérifie les fichiers javascript chargés dans chrome, il semble charger tous ceux dont j'ai besoin, à l'exception de celui-ci. Quelqu'un peut-il nous éclairer sur la situation?

theme-developmentfunctionsjavascripthookstheme-customizer
1
user1632018

je pense que votre script est chargé correctement, la même fonction est utilisée dans vingt-douze (mais votre script est à l'intérieur de l'iframe) mais je peux me tromper (je ne sais pas comment votre thème est construit, c'est peut-être un problème lié au chemin d'accès avec plusieurs include)

enter image description here

pour voir le changement sans actualisation, vous devez utiliser les arguments 'transport' dans add_setting et get_setting dans votre fonction personnaliser_register

$wp_customize->add_setting( 'my_setting', array( 'default' => 'setting_value', 'transport' => 'postMessage', ) );

Cela peut être 'actualiser' (par défaut) ou 'postMessage'. Ne définissez cette option sur 'postMessage' si vous écrivez du code Javascript personnalisé pour contrôler l'aperçu en direct du thème.

$wp_customize->get_setting( 'my_setting' )->transport = 'postMessage';
1
Tribalpixel

Probablement parce que vous l'appelez depuis le hook init ou admin_init Wordpress, alors que vous devriez l'appeler depuis le hook after_setup_theme.

Par exemple:

function mytheme_customize_preview_js() {
    wp_enqueue_script( 'mytheme-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20120187', true );
}
function my_after_setup_theme(){
    add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );
}

add_action( 'after_setup_theme', 'my_after_setup_theme' );
0
Mauro Colella

Ce n'est peut-être pas la réponse exacte au problème. Mais cela m'a aidé à résoudre le problème même dont nous discutons.

En utilisant 'transport' => 'postMessage', je ne pouvais pas voir les aperçus animés. J'ai donc créé de nouveaux fichiers en utilisant le code suivant sur Github

Je viens de copier ce code collé. Vérifié et ensuite modifié selon mes besoins. Je sais que ce n’est pas la solution, mais c’était la meilleure disponible pour moi.

Merci à Tom McFarlin pour le code.

0
JDP