WordPress : Ajouter ou supprimer une classe HTML avec actualisation sélective ?

Publié par Jean-Michel le

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

Catégories : Wordpress

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *