Régler la couleur d’un thème sans voir immédiatement le résultat obligerait à publier, vérifier, puis corriger en boucle. L’aperçu en direct évite cet aller-retour : chaque changement se répercute instantanément dans une prévisualisation du site, sans que rien ne soit encore visible des visiteurs réels.
Où on le retrouve dans WordPress
Le Personnaliseur historique affiche ainsi une prévisualisation du site à droite pendant que les réglages se modifient à gauche, grâce à du JavaScript qui met à jour le DOM sans recharger la page pour certains réglages (via l’API wp.customize.previewer), ou qui force un rechargement complet pour les autres. L’éditeur de site (basé sur les thèmes blocs) reprend le même principe pour les styles globaux : palette de couleurs, typographies et mises en page se prévisualisent en direct avant l’enregistrement.
Exemple avec l’API du Personnaliseur
wp.customize( 'blogname', function( value ) {
value.bind( function( newValue ) {
document.title = newValue;
} );
} );Ce fragment met à jour le titre de la page à chaque frappe dans le champ concerné, sans rechargement ni sauvegarde.
Bon à savoir
- L’aperçu en direct n’enregistre rien en base tant que l’utilisateur n’a pas cliqué sur « Publier » : fermer l’onglet abandonne les changements non validés.
- Certains réglages, notamment ceux touchant à des options complexes, nécessitent un rechargement complet de l’aperçu plutôt qu’une mise à jour instantanée, ce qui peut donner une impression de lenteur.
- Un thème mal codé peut ignorer les événements de prévisualisation et n’afficher les changements qu’après publication réelle, ce qui casse l’expérience attendue de l’aperçu en direct.