WordPress : WordPress Customizer : vérifiez la valeur du sélecteur CSS et remplacez-le
J’utilise le jquery suivant pour injecter des styles CSS dans une <style id="customizer-preview">balise dans la <head>fenêtre d’aperçu de Customizer :
wp.customize( 'site_title_color', function( value ) {
value.bind( function( newval ) {
if ( $( '#customizer-preview .site-title' ).length > 0 ) {
$( '#customizer-preview .site-title' ).remove();
}
$( '#customizer-preview' ).append( '.site-title { color: ' + newval + ' ; }' );
} );
} );
Cela fonctionne bien, sauf que les valeurs précédemment saisies ne sont pas supprimées et que les nouvelles valeurs sont juste ajoutées, encombrant le CSS. Les lignes 3 à 5 sont le problème. Fondamentalement, j’essaie de vérifier s’il y a déjà une valeur attribuée au selector .site-title. Si tel est le cas, effacez-le et remplacez-le par la nouvelle valeur.
Solution n°1 trouvée
Vous utilisez un sélecteur dans ceci :
if ( $( '#customizer-preview .site-title' ).length > 0 ) {
$( '#customizer-preview .site-title' ).remove();
}
C’est comme styliser la propriété CSS, si vous deviez ajouter cette règle à une feuille de style, cela ajouterait des styles pour l’élément #customizer-preview .site-titleAinsi, le code ci-dessus indique si un élément existe pour le sélecteur #customizer-preview .site-title, puis supprimez cet élément.
Puis avec ce code :
$( '#customizer-preview' ).append( '.site-title { color: ' + newval + ' ; }' );
Vous sélectionnez la feuille de style que vous avez mentionnée et qui a l’ID customizer-preview. Ensuite, vous ajoutez la chaîne de texte que vous avez créée pour le sélecteur .site-title et définissez une propriété de couleur à l’intérieur de cet élément.
Dans le contexte de la fenêtre d’aperçu personnalisée – il est beaucoup plus facile dans votre cas d’appliquer simplement le style directement au sélecteur .site-title lorsque la valeur est mise à jour, comme ceci :
wp.customize( 'site_title_color', value => {
value.bind( to => $( '.site-title' ).css( 'color', to ) );
} );
De cette façon, vous n’avez pas à vous soucier de vérifier les éléments car le style est appliqué en ligne et remplacera vos propriétés de feuille de style, qui, je suppose, sont créées en PHP lorsque le paramètre est enregistré dans votre cas. Lorsque le paramètre est modifié plusieurs fois, il continue simplement à écraser ce style en ligne. Cela donne à l’utilisateur un aperçu précis , ce à quoi sert le personnalisateur. Cela n’a pas beaucoup d’importance pour un utilisateur si cette sortie correspond à ce qui pourrait être une sortie pour le frontend, tant que les deux présentations sont identiques.
Sinon, si vous voulez vraiment – oui, il est tout à fait possible de faire ce que vous demandez. Vous aurez besoin de faire une analyse des règles de la feuille de style, votre exemple de code est assez facile à faire, mais peut devenir beaucoup plus complexe à mesure que vous avez de plus en plus de choses en cours. Voici à quoi cela ressemblerait :
wp.customize( 'site_title_color', value => {
value.bind( to => {
// Access stylesheet.
var css = document.getElementById( 'customizer-preview' ).sheet;
// Loop through stylesheet's CSS rules to find index of selector.
for ( var i = 0; i < css.cssRules.length; i++ ) {
// Check if there's a match for your selector.
if ( '.site-title' === css.cssRules[ i ].selectorText ) {
// Delete the rule from the stylesheet and exit loop.
css.deleteRule( i );
break;
}
}
// Insert new style rule at end using the sheet's cssRules length.
css.insertRule( '.site-title { color: ' + to + '; }', css.cssRules.length );
} );
} );
Comme ce code est commenté, il devrait être facile à comprendre. Évidemment, cela fonctionne bien pour votre question, mais si elle .site-titlecontient plus qu’une simple colorpropriété, vous voudrez plutôt mettre à jour la propriété color dans la règle, afin de conserver les autres propriétés définies dans la règle de la feuille de style pour .site-title.
0 commentaire