WP Customizer API не работает редактирование в реальном времени. Как исправить?

Question

[astaxov81]

Здравствуйте.
Создал новую тему , добавил в нем поле для заполнения в Customize API:

add_action( 'customize_register', static function ( WP_Customize_Manager $wp_customize ) {
	if ( $panel_main_page = 'panel_main_page' ) {
		$wp_customize->add_panel(
			'panel_main_page',
			array(
				'title'    => 'Контента на главной странице',
				'priority' => 999,
			)
		);
		if ( $name_section = 'header_h1' ) {
			$wp_customize->add_section(
				$name_section,
				array(
					'panel'    => $panel_main_page,
					'title'    => 'Заголовок (h1) страницы',
					'priority' => 0,
				)
			);
			$wp_customize->add_setting(
				'header_h1',
				array(
					'transport' => WPTEST_GET_THE_MOD_DEFAULT
				)
			);
			$wp_customize->add_control(
				'header_h1',
				array(
					'section' => $name_section,
					'label'   => 'Текст заголовка',
					'type'    => 'text'
				)
			);
		}
	}
} );

Не работает режим редактирования в реальном времени. Само поле работает, то есть заполняю -> нажимаю опубликовать -> F5 и я вижу изменения.

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

Не подскажите, как пофиксить этот момент?

Comments

[Владимир Брумер]

режим реального времени это 'transport'=>'postMessage'
например для существующих опций названия и описания:

...
$customizer->get_setting('blogname')->transport='postMessage';
$customizer->get_setting('blogdescription')->transport='postMessage';
...
//$wp_customize->add_setting('header_h1',array('transport'=>'postMessage'));

js:

(function($){
	var api=wp.customize;
	api('blogname',function(value){value.bind(function(to){$('.site-title a').text(to);});});
	api('blogdescription',function(value){value.bind(function(to){$('.site-description a').text(to);});});
...

если не нужен 'transport'=>'postMessage', просто не пишем вообще ничего
$wp_customize->add_setting('header_h1');

[Владимир Брумер]

с Вашим кодом не все ясно, поэтому вот рабочий пример на основе Вашего без учета не ясного/лишнего)))

add_action( 'customize_register', 'hgjghjghj' );
function hgjghjghj($wp_customize){
    $wp_customize->add_panel(
      'panel_main_page',
      array(
        'title'    => 'Контент на главной странице',
        'priority' => 999,
      )
    );
		$wp_customize->add_section(
			'header_h1',
			array(
				'panel'    => 'panel_main_page',
				'title'    => 'Заголовок (h1) страницы',
				'priority' => 0,
			)
		);
		$wp_customize->add_setting(
			'header_h1',array('transport'=>'postMessage')
		);
		$wp_customize->add_control(
			'header_h1',
			array(
				'section' => 'header_h1',
				'label'   => 'Текст заголовка',
				'type'    => 'text'
			)
		);
}

js:

...
api('header_h1',function(value){value.bind(function(to){$('#qweqweqwe').text(to);});});
...
//подключаем js для превью через add_action('customize_preview_init','preview_customize_enqueue');
//либо пишем калбак функцию и пишем js в ней...

вывод в разметке:

echo '<div id="qweqweqwe">'.get_theme_mod('header_h1').'</div>';

[astaxov81]

Владимир Брумер, с дж я ещё не пробовал настраивать кастомайзера :), под изменением в реальном времени я понимал - стандартное поведение кастомайзера, то есть написал текст (прошло какой-то небольшое количество времени) страница сама обновилась и подставила введенное изменение.

Но вариант, который вы показали, то же прикольный, это прямо в режиме "реально-реального" времени :)

P.S. вынесли бы в ответ - с удовольствием отметил бы ответом, так как это тоже вариант решения))

[Владимир Брумер]

astaxov81, стоит задуматься о ('transport'=>'postMessage'). т.к. страница не перезанружается - обновляется лишь указаный участок разметки/стили (что гораздо быстрее)... просто потом, если опций будет много - переписывать не очень будет... впрочем решать разумеется Вам...

[astaxov81]

Владимир Брумер, совершенно верно, меня немного подбешивал перезагрузка страницы, а такой вариант идеален и так как тема почти пустая - перевести все на live JS preview думаю будет правильно и пользоваться таким вариантом - одно удовольствие :)

Answer 1

[Антон Литвиненко]

а что у вас делает эта строчка?
'transport' => WPTEST_GET_THE_MOD_DEFAULT
По умолчанию она должна стоять в refresh, что должно обновлять страницу при изменениях. А чтобы вообще прям сразу изменения то нужно писать js для этого

Comments

[astaxov81]

Виной было - моя опечатка, в константе записал 'refreh', и так как константы у меня лежат в отдельном файле, в глаза сразу не бросилось!

P.S. не прям в "реальном-реальном" не нужно, достаточно стандартного поведения кастомайзера.

Спасибо!

Answer 2

[Владимир Брумер]

режим реального времени это 'transport'=>'postMessage'
например для существующих опций названия и описания:

...
$customizer->get_setting('blogname')->transport='postMessage';
$customizer->get_setting('blogdescription')->transport='postMessage';
...
//$wp_customize->add_setting('header_h1',array('transport'=>'postMessage'));

js:

(function($){
	var api=wp.customize;
	api('blogname',function(value){value.bind(function(to){$('.site-title a').text(to);});});
	api('blogdescription',function(value){value.bind(function(to){$('.site-description a').text(to);});});
...

если не нужен 'transport'=>'postMessage', просто не пишем вообще ничего
$wp_customize->add_setting('header_h1');

с Вашим кодом не все ясно, поэтому вот рабочий пример на основе Вашего без учета не ясного/лишнего)))

add_action( 'customize_register', 'hgjghjghj' );
function hgjghjghj($wp_customize){
    $wp_customize->add_panel(
      'panel_main_page',
      array(
        'title'    => 'Контент на главной странице',
        'priority' => 999,
      )
    );
		$wp_customize->add_section(
			'header_h1',
			array(
				'panel'    => 'panel_main_page',
				'title'    => 'Заголовок (h1) страницы',
				'priority' => 0,
			)
		);
		$wp_customize->add_setting(
			'header_h1',array('transport'=>'postMessage')
		);
		$wp_customize->add_control(
			'header_h1',
			array(
				'section' => 'header_h1',
				'label'   => 'Текст заголовка',
				'type'    => 'text'
			)
		);
}

js:

...
api('header_h1',function(value){value.bind(function(to){$('#qweqweqwe').text(to);});});
...
//подключаем js для превью через add_action('customize_preview_init','preview_customize_enqueue');
//либо пишем калбак функцию и пишем js в ней...

вывод в разметке:

echo '<div id="qweqweqwe">'.get_theme_mod('header_h1').'</div>';