WordPress : Ajouter ou supprimer une classe HTML avec actualisation sélective ?
J’ai lu sur l’actualisation sélective et je le comprends. Il réécrit complètement l’élément ciblé par le spécifié selector. Par exemple:
$wp_customize->get_setting( 'nav_type' )->transport = 'postMessage';
$wp_customize->selective_refresh->add_partial( 'nav_type', array(
'selector' => '#container nav',
'render_callback' => 'change_body_class',
) );
Cela supprimera l’ <nav>intérieur d’un élément avec id containeret le remplacera par tout ce qui se passe dans la change_body_classfonction. Comme le nom de la fonction le suggère, cependant, je veux juste changer la classe de l’ <body>élément. Pourquoi? Eh bien, dans mon CSS, j’ai différentes dispositions pour la navigation qui sont basculées dans une <body>classe.
Question
Je souhaite une actualisation sélective qui affiche l’icône de raccourci à côté de l’élément A tout en modifiant la classe de l’élément B . Est-ce possible? Si oui, comment dois-je procéder ?
Solution n°1 trouvée
Oui. Cela peut être accompli en créant un type d’actualisation sélective personnalisé Partialet en remplaçant la refreshméthode dans la classe JavaScript.
Voici le JavaScript pertinent qui devrait être mis en file d’attente dans l’aperçu du Customizer, avec customize-selective-refreshcomme dépendance de script :
wp.customize.selectiveRefresh.partialConstructor.body_class = wp.customize.selectiveRefresh.Partial.extend({
/**
* Class name choices.
*
* This is populated in PHP via `wp_add_inline_script()`.
*
* @type {Array}
*/
choices: [],
/**
* Refresh partial.
*
* Override refresh behavior to bypass partial refresh request in favor of direct DOM manipulation.
*
* @returns {jQuery.Promise} Resolved promise.
*/
refresh: function() {
var partial = this, setting, body, deferred, className;
setting = wp.customize( partial.params.primarySetting );
className = setting.get();
body = $( document.body );
body.removeClass( partial.choices.join( ' ' ) );
body.addClass( className );
// Do good diligence and return an expected value from the function.
deferred = new $.Deferred();
deferred.resolveWith( partial, _.map( partial.placements(), function() {
return '';
} ) );
return deferred.promise();
}
});
Ensuite, vous pouvez utiliser ce type personnalisé lorsque vous enregistrez le partiel en PHP :
$wp_customize->selective_refresh->add_partial( 'nav_body_class', array(
'selector' => 'nav',
'type' => 'body_class',
) );
Voici un plugin fonctionnel complet qui illustre la technique : https://gist.github.com/westonruter/731e3106177ce2b067290ddbe602ce05
0 commentaire