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.

Lire également:  Le site Wordpress ne se connecte pas aux feuilles de style

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.

Lire également:  Manière correcte d'utiliser wp_get_attachment_image() dans wordpress

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

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

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