Intereting Posts

Как я могу добавить значок короткого кода редактирования в редакторе WordPress без использования выборочного обновления?

Ниже мой код, который добавляет раздел цветов в предварительном просмотре

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

Вот контроль и настройка

 $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', ) ) ); 

Теперь мне нужен только значок ярлыка редактирования рядом с элементом. Я применяю этот режим темы

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

введите описание изображения здесь

Теперь единственный способ добавить этот значок, используя выборочное обновление, см. Ниже.

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

Но поскольку я использую свой собственный javascript, мне не нужна функция выборочного обновления, я просто нуждаюсь в том, что значок, который при щелчке должен идти по желаемой настройке. Вот мой код 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 ); 

Что вам нужно сделать, так это реализовать пользовательский Partial в JS, который применяет настраиваемое поведение refresh изменяя background-color вместо того, чтобы извлекать частично обработанную часть с сервера. Таким образом, это частичные части с ярлыками редактирования, но без выборочного обновления на стороне сервера.

Например, запустите следующий JS в предварительном просмотре customizer с зависимостью 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 ); 

Затем, когда вы зарегистрируете свое частичное, убедитесь, что вы предоставили type background_color для подключения частичной части PHP с JavaScript partialConstructor , например:

 $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', ) ); 

Автономный плагин, демонстрирующий технику: https://gist.github.com/westonruter/e8cf3c1c5abdbd123b65459fdaa74b5e

Демо-видео:

Скриншот частичного и управления