Intereting Posts
WordPress – обновлять все существующие сообщения одновременно Пользователи Добавление раскрывающегося шаблона публикации в WP-Admin Как добавить медиафайлы из внешнего интерфейса в существующее сообщение и изменить название файла Алфавитно упорядоченная категория в WordPress Как я могу обрабатывать все запросы для данного каталога в URL-адресе с моим плагином? Как работает шаблон плагина woocommerce и buddypress? Правило WordPress rewrite_rules_array не работает должным образом Как опубликовать сообщение с двумя или более авторами? Как удалить только последнюю липкую запись из цикла Вставить изображение в WordPress с помощью HTML5 <figure> tag и caption function Добавление первого и последнего класса в меню только на верхнем уровне Привилегия для восстановления поврежденных сообщений Как узнать, хочет ли пользователь показывать полный пост или выдержку? Как я могу перенаправить пользователя после ввода неправильного пароля?

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

Я решил переустановить один виджет и решил добавить к нему некоторые пользовательские настройки.

Внешний вид измененного контролируется функцией javascript (я использую там слайдер слайдера, который, возможно, настраивается через настройки виджета)

Итак, вот класс виджета: (в качестве примера здесь http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-wordpress-widget/ )

<?php // Creating the widget class wpb_widget extends WP_Widget { function __construct() { parent::__construct( // Base ID of your widget 'wpb_widget', // Widget name will appear in UI __('WPBeginner Widget', 'wpb_widget_domain'), // Widget description array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), 'customize_selective_refresh' => true, ) ); // Enqueue style if widget is active (appears in a sidebar) or if in Customizer preview. if ( is_active_widget( false, false, $this->id_base ) || is_customize_preview() ) { add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); } } // Creating widget front-end public function widget($args, $instance) { $title = apply_filters( 'widget_title', $instance['title'] ); // before and after widget arguments are defined by themes echo $args['before_widget']; if (! empty( $title )) { echo $args['before_title'] . $title . $args['after_title']; } // This is where you run the code and display the output echo __( 'Hello, World!', 'wpb_widget_domain' ); echo("<div id='customId'>TEST</div>"); echo $args['after_widget']; } // Widget Backend public function form($instance) { if (isset( $instance[ 'title' ] )) { $title = $instance[ 'title' ]; } else { $title = __( 'New title', 'wpb_widget_domain' ); } // Widget admin form ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" /> </p> <?php } public function enqueue_scripts() { $randomParameter = random_int(1, 100); $dataToBePassed = array( 'someParameter' => $randomParameter ); wp_enqueue_script( 'customjs', get_template_directory_uri() . '/js/customwidget.js', array( 'jquery','customize-preview' ), '', true ); wp_localize_script('customjs', 'settings', $dataToBePassed); } // Updating widget replacing old instances with new public function update($new_instance, $old_instance) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } } // Class wpb_widget ends here 

вот пример привязанных js:

 (function ($) { console.log("custom widget js init"); var configureCustomWidget = function(){ var me = this, conf = settings || {someParameter:5}; $('#customId').html("<h1>"+conf.someParameter+"</h1>"); } configureCustomWidget(); // Short-circuit selective refresh events if not in customizer preview or pre-4.5. if ('undefined' === typeof wp || !wp.customize || !wp.customize.selectiveRefresh) { return; } // Re-load widgets when a partial is rendered. wp.customize.selectiveRefresh.bind('partial-content-rendered', function (placement) { debugger; }); // Refresh a moved partial containing wp.customize.selectiveRefresh.bind('partial-content-moved', function (placement) { debugger; }); })(jQuery); 

При предварительном просмотре все в порядке с этим, но проблема в том, что хотя я и сделал, как рекомендовал здесь https://make.wordpress.org/core/2016/03/22/implementing-selective-refresh-support-for-widgets /

это просто не получается из-за того, что в момент, когда скрипт инициализирован по какой-либо причине, wp.customize.selectiveRefresh не определен.

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

Итак, любые идеи о том, как я могу переключить привязанный виджет javascript на изменение настроек?

PS

Это просто упрощение exapmle, будут дополнительные опции, и я хочу изменить, скажем, только текстовые поля, named'customId '. И при изменении я хочу, чтобы он вносил изменения в html, например, редактирование некоторых вещей стиля или т. Д.

UPD :

(история)

Прежде всего, я создаю тему для сайта wordpress.

Эта тема должна содержать некоторые виджеты.

Один из виджетов, предположительно, должен быть расширен из woocommerce категорий товаров woocommerce . Но список категорий продуктов по умолчанию получил результат, как простой маркированный список с деспирпитоном и фотографией.

Поэтому, чтобы сделать его более привлекательным, я решил сделать его похожим на слайдер. Решил использовать для этого небольшую библиотеку js, названную Slick

И дело в том, что оно действительно гибкое и может быть настроено, например, следующим образом:

 $('.myCustomSlider').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true }); 

Итак, я решил добавить к моим параметрам виджета, как вы можете видеть здесь в js-объекте, поэтому Slides to show Slides to scroll , Slides to scroll и т. Д.

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

(реализация)

Чтобы не сделать этот вопрос очень широким – полный код здесь

Итак, в первую очередь, в моей теме я переопределил виджет product category умолчанию, изменения были простыми – только добавленные пользовательские настройки уже существуют & называются скриптом слайдера на крючке:

  public function __construct() { $extraSettings = array( 'slidesCount' => array( 'type' => 'number', 'step' => 1, 'min' => 1, 'max' => '', 'std' => 3, 'label' => __( 'Slides count per page', 'woocommerce' ), ) ); parent::__construct(); $this->settings = array_merge($this->settings, $extraSettings); // To call script for the slider. if ( is_active_widget( false, false, $this->id_base ) || is_customize_preview() ) { add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); } } 

также, изменил <ul> на <div class="product-categories slider"> как это

 echo '<div class="product-categories slider">'; wp_list_categories( apply_filters( 'woocommerce_product_categories_widget_args', $list_args ) ); echo '</div>'; 

Я также переопределил виджет по умолчанию для виджета (но только что внес изменения в вывод html файла), например <li> to <div class='slide'>

И тогда есть мои пользовательские js с привязкой к событиям, упомянутым здесь .

Он работает при загрузке. Но когда я что-то меняю, это просто никакой реакции. И причина такая же, как я описал выше – wp.customize.selectiveRefresh не определен.

Но главный вопрос: как обновить клиентскую часть после обновления настроек пользовательского / переопределенного виджета?

Надеюсь, он сделал некоторые вещи ясными 🙂

Solutions Collecting From Web of "Как обновить предварительный просмотр, когда пользовательские настройки изменились в моем пользовательском виджете"

В роли большого пальца вы не должны расширять виджеты, которые вы не контролируете, если только их автор не дал указания относительно того, как это сделать. Расширение несколько проще на стороне PHP, но трудно (er) расширить интерфейс с JS, если средства не были установлены заранее.

Более безопасный (по крайней мере, с легкостью перспективы развития) способ «разветвить» код виджета. Возьмите код, внесите необходимые изменения и вызовите новое имя виджета, или в зависимости от ваших потребностей вы можете переопределить «официальное» имя (отмените регистрацию оригинала и зарегистрируйте свое имя под тем же дескриптором).

Это будет означать, что с каждой новой версией WC вам нужно будет убедиться, что вам не нужно обновлять свой код, чтобы отразить изменение в «оригинальном» виджетах, но, скорее всего, вам нужно было бы это сделать, даже если бы вы были просто «расширяется».