Comment puis-je ajouter une icône de shortcode de modification dans le personnalisateur wordpress sans utiliser le rafraîchissement sélectif?

Question

Voici mon code qui ajoute une section de couleurs dans l'aperçu du personnalisateur

$wp_customize->add_section( 'cd_colors' , array(
        'title'      => 'Colors',
        'priority'   => 30,
    ) );

Voici le contrôle et le réglage

$wp_customize->add_setting( 'background_color' , array(
        'default'     => '#43C6E4',
        'transport'   => 'postMessage',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
        'label'        => 'Background Color',
        'section'    => 'cd_colors',
        'settings'   => 'background_color',
    ) ) );

Maintenant, ce dont j'ai besoin est juste une icône de raccourci d'édition à côté de l'élément que j'applique ce mode de thème

<div id="bg-color">
    <?php echo get_theme_mod( 'background_color' ); ?>
</div>

  

Maintenant, la seule façon pour moi d'ajouter cette icône consiste à utiliser l'actualisation sélective, voir ci-dessous.

$wp_customize->selective_refresh->add_partial( 'background_color', array(
        'selector' => '#bg-color',
        'container_inclusive' => false,
      'render_callback' => 'dummy_function'
    ) );

Mais comme j'utilise mon propre javascript, je n'ai pas besoin de la fonctionnalité d'actualisation sélective, j'ai juste besoin de cette icône qui, lorsque vous cliquez dessus, devrait aller au réglage souhaité. Voici mon code javascript

( function( $ ) {

    // Update the site title in real time...
    wp.customize( 'background_color', function( value ) {
        value.bind( function( newval ) {
            $( '#bg-color' ).css( 'background-color', newval );
        } );
    } );

} )( jQuery );

Answer 1

Ce que vous devez faire est d'implémenter une variable Partial personnalisée dans JS, qui applique un comportement refresh personnalisé consistant à modifier le background-color au lieu d'extraire une partie partielle nouvellement rendue du serveur. Il s'agit donc de partiels avec des raccourcis d'édition mais sans aucune actualisation sélective côté serveur.

Par exemple, mettez en file d'attente le fichier JS suivant dans l'aperçu du personnaliseur avec une dépendance customize-selective-refresh:

wp.customize.selectiveRefresh.partialConstructor.background_color = (function( api, $ ) {
    'use strict';

    return api.selectiveRefresh.Partial.extend( {

        /**
         * Refresh.
         *
         * Override refresh behavior to apply changes with JS instead of doing
         * a selective refresh request for PHP rendering (since unnecessary).
         *
         * @returns {jQuery.promise} Resolved promise.
         */
        refresh: function() {
            var partial = this, backgroundColorSetting;

            backgroundColorSetting = api( partial.params.primarySetting );
            _.each( partial.placements(), function( placement ) {
                placement.container.css( 'background-color', backgroundColorSetting.get() );
            } );

            // Return resolved promise since no server-side selective refresh will be requested.
            return $.Deferred().resolve().promise();
        }
    } );
})( wp.customize, jQuery );

Ensuite, lorsque vous enregistrez votre partiel, assurez-vous de fournir la type de background_color pour connecter le partiel enregistré en PHP avec la JavaScript partialConstructor, comme suit:

$wp_customize->selective_refresh->add_partial( 'wpse_282425_background_color', array(
    'type' => 'background_color', // ???? Key addition.
    'selector' => '#bg-color',
    'container_inclusive' => false,
    'render_callback' => 'dummy_function',
) );

Plugin autonome qui démontre une technique: https://Gist.github.com/westonruter/e8cf3c1c5abdbd123b65459fdaa74b5e

Vidéo de démonstration: