Der Customizer `active_callback` arbeitet nicht mit der` postMessage` Transportmethode

Ich habe 4x benutzerdefinierte Einstellungen in 2x benutzerdefinierten Abschnitten, wobei die zweite Einstellung in jedem Abschnitt auf ein active_callback , um es active_callback / auszublenden.

In beiden Fällen überprüft der active_callback den Wert der ersten benutzerdefinierten Einstellung aus diesem Abschnitt, und es funktionierte einwandfrei, bis ich für die erste Einstellung transport => postMessage (alle Einstellungen unten), da es einfacher ist, sie zu zeigen, als sie erklären ).

Da es keine JS-Fehler gibt, nehme ich an, dass es etwas damit zu tun hat, wie der aktive Callback ausgetriggers wird (das ist es vielleicht nicht, wenn postMessage verwendet wird).

Während ich einige zusätzliche JS hinzufügen kann, um meine Anforderungen zu erfüllen, wäre ich neugierig zu wissen, ob dies erwartetes Verhalten ist, und wenn ja, ob es eine Möglichkeit gibt, mein Problem zu beheben.

Hier sind die Einstellungen (registriert mit dem customize_register ) …

 /** * Create the custom 'Archive Pages' section and register settings */ function register_settings_archive_template($wp_customise){ $wp_customise->add_section('section_template_archive' , array( 'title' => __('Archive Pages', TEXT_DOMAIN), 'priority' => 60 )); /** * Link tile size (overrides General setting) */ $wp_customise->add_setting('archive_link_tile_size', array( 'default' => 'default', 'transport' => 'postMessage' )); $wp_customise->add_control('archive_link_tile_size', array( 'label' => __('Link tile size', TEXT_DOMAIN), 'section' => 'section_template_archive', 'type' => 'radio', 'choices' => array( 'default' => __('Default', TEXT_DOMAIN), 'large' => __('Large', TEXT_DOMAIN), 'small' => __('Small', TEXT_DOMAIN) ), 'description' => __('The size of link tile that you wish to dsipay on archive pages.', TEXT_DOMAIN), )); /** * Show 'More...' link */ $wp_customise->add_setting('archive_show_more_link', array( 'default' => false, 'transport' => 'postMessage' )); $wp_customise->add_control('archive_show_more_link', array( 'label' => __('Show link to Link/Post', TEXT_DOMAIN), 'section' => 'section_template_archive', 'type' => 'checkbox', 'description' => __('Whether or not to show the \'More...\' link underneath a large link tile on archive pages. Note that links cannot be displayed in conjunction with \'Small\' Link Tiles.', TEXT_DOMAIN), 'active_callback' => '_check_is_link_tile_size_large' )); } /** * Create the custom 'Search Results' section and register settings */ function register_settings_search_template($wp_customise){ $wp_customise->add_section('section_template_search' , array( 'title' => __('Search Results', TEXT_DOMAIN), 'priority' => 60 )); /** * Link tile size (overrides General setting) */ $wp_customise->add_setting('search_link_tile_size', array( 'default' => 'default', 'transport' => 'postMessage' )); $wp_customise->add_control('search_link_tile_size', array( 'label' => __('Link tile size', TEXT_DOMAIN), 'section' => 'section_template_search', 'type' => 'radio', 'choices' => array( 'default' => __('Default', TEXT_DOMAIN), 'large' => __('Large', TEXT_DOMAIN), 'small' => __('Small', TEXT_DOMAIN) ), 'description' => __('The size of link tile that you wish to dsipay on the search results page.', TEXT_DOMAIN) )); /** * Show 'More...' link */ $wp_customise->add_setting('search_show_more_link', array( 'default' => false, 'transport' => 'postMessage' )); $wp_customise->add_control('search_show_more_link', array( 'label' => __('Show link to Link/Post', TEXT_DOMAIN), 'section' => 'section_template_search', 'type' => 'checkbox', 'description' => __('Whether or not to show the \'More...\' link underneath a large link tile on the search results page. Note that links cannot be displayed in conjunction with \'Small\' Link Tiles.', TEXT_DOMAIN), 'active_callback' => '_check_is_link_tile_size_large' )); } 

Und hier ist der aktive callback …

 public function _check_is_link_tile_size_large($control){ $control_id = $control->id; switch($control_id): case 'archive_show_more_link' : $validation_setting = 'archive_link_tile_size'; break; case 'search_show_more_link' : $validation_setting = 'search_link_tile_size'; break; endswitch; return ($control->manager->get_setting($validation_setting)->value() === 'large'); } 

Aktualisieren

Ich hätte das an erster Stelle hinzufügen sollen, aber hier ist das JS, das ich verwende, um die obigen Einstellungen über postMessage zu aktualisieren –

 (function($){ var api = wp.customize; CustomiseArchivePages(); // Customise settings in the Archive Pages section CustomiseSearchResults(); // Customise settings in the Search Results section /** * Customise settings in the Archive Pages section */ function CustomiseArchivePages(){ /** Link Tile size */ api('archive_link_tile_size', function(value){ value.bind(function(newval){ PreviewLinkTile(newval, api.get().archive_show_more_link); }); }); /** Show/hide 'More...' button */ api('archive_show_more_link', function(value){ value.bind(function(newval){ PreviewLinkTile(api.get().archive_link_tile_size, newval); }); }); } /** * Customise settings in the Search Results section */ function CustomiseSearchResults(){ /** Search box placeholder text */ api('search_box_placeholder', function(value){ value.bind(function(newval){ $('input.s').attr('placeholder', newval); }); }); /** Link Tile size */ api('search_link_tile_size', function(value){ value.bind(function(newval){ PreviewLinkTile(newval, api.get().search_show_more_link); }); }); /** Show/hide 'More...' button */ api('search_show_more_link', function(value){ value.bind(function(newval){ PreviewLinkTile(api.get().search_link_tile_size, newval); }); }); } /** * Set the link tile size and show/hide the 'More...' button on link tiles * * @param required string linkTileSize The size of the link tiles that are being displayed * @param required string showMoreInfoButton Whether or not to show the 'More...' button */ function PreviewLinkTile(linkTileSize, showMoreInfoButton){ var linksContainer = $('#links-container'), // The links container linkTiles = $('.link-tile', linksContainer); // Every individual link tile linkTileSize = (linkTileSize !== 'default') ? linkTileSize : api.get().general_link_tile_size; // If the new size is default, grab the default size /** * Set the link tile size */ switch(linkTileSize){ case 'large' : /** Set the links container classes */ linksContainer.removeClass('uk-grid-width-1-2 uk-grid-width-small-1-3 uk-grid-width-medium-1-4 uk-grid-width-large-1-5') .addClass('uk-grid-width-1-1 uk-grid-width-small-1-1 uk-grid-width-medium-1-2 uk-grid-width-large-1-3'); /** Set the link tile class */ linkTiles.removeClass('link-tile-small') .addClass('link-tile-large'); break; case 'small' : /** Set the links container classes */ linksContainer.removeClass('uk-grid-width-1-1 uk-grid-width-small-1-1 uk-grid-width-medium-1-2 uk-grid-width-large-1-3') .addClass('uk-grid-width-1-2 uk-grid-width-small-1-3 uk-grid-width-medium-1-4 uk-grid-width-large-1-5'); /** Set the link tile class */ linkTiles.removeClass('link-tile-large') .addClass('link-tile-small'); break; default : console.log('An unexpected error occured when customising the Link Tile size: The new size could not be determined.'); break; } /** * Show/hide the 'More...' button */ if(showMoreInfoButton && linkTileSize === 'large'){ linkTiles.addClass('show-more-button'); } else { linkTiles.removeClass('show-more-button'); } } })(jQuery); 

Solutions Collecting From Web of "Der Customizer `active_callback` arbeitet nicht mit der` postMessage` Transportmethode"

Da postMessage vollständig JavaScript verwendet, wird PHP active_callback erst aufgerufen, wenn die Vorschau aktualisiert wird (z. B. via wp.customize.previewer.refresh() ). Also, was Sie tun müssen, ist den active callback in JavaScript zu implementieren, wie folgt:

 wp.customize.bind( 'ready', function () { wp.customize.control( 'archive_show_more_link', function( control ) { var setting = wp.customize( 'archive_link_tile_size' ); control.active.set( 'large' === setting.get() ); setting.bind( function( value ) { control.active.set( 'large' === value ); } ); } ); wp.customize.control( 'search_show_more_link', function( control ) { var setting = wp.customize( 'search_link_tile_size' ); control.active.set( 'large' === setting.get() ); setting.bind( function( value ) { control.active.set( 'large' === value ); } ); } ); } ); 

Stellen Sie sicher, dass dieses Skript in den Customizer-Bereich und nicht in die Customizer-Vorschau eingereiht wird. Mit anderen Worten, reihen Sie das JS in die Aktion customize_controls_enqueue_scripts .