WordPress : Le personnalisateur `active_callback` ne fonctionne pas sur le contrôle avec la méthode de transport `postMessage`
J’ai 4x paramètres personnalisés dans 2x sections personnalisées, le deuxième paramètre de chaque section s’appuyant sur un active_callbackpour l’afficher/le masquer.
Dans les deux cas, la active_callbackvérification de la valeur du premier paramètre personnalisé de cette section fonctionnait parfaitement jusqu’à ce que je commence à utiliser transport => postMessagele premier paramètre (tous les paramètres ci-dessous, car il est plus facile de les montrer que de les expliquer).
Il n’y a pas d’erreurs JS, donc je suppose que cela doit avoir quelque chose à voir avec la façon dont le rappel actif est déclenché (c’est-à-dire peut-être que ce n’est pas quand il postMessageest utilisé).
Bien que je puisse ajouter quelques JS supplémentaires pour couvrir mes besoins, je serais curieux de savoir s’il s’agit ou non d’un comportement attendu, et si c’est le cas, s’il existe ou non un moyen de résoudre mon problème.
Voici les paramètres (enregistrés à l’aide de l’ customize_registeraction hook)…
/**
* 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'
));
}
Et voici le rappel actif…
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');
}
Mise à jour
J’aurais dû l’ajouter en premier lieu, mais voici le JS que j’utilise pour mettre à jour les paramètres ci-dessus via postMessage–
(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);
Solution n°1 trouvée
Parce postMessagequ’il utilise entièrement JavaScript, aucun PHP active_callbackne sera appelé à moins que l’aperçu ne soit actualisé (par exemple via wp.customize.previewer.refresh()). Donc, ce que vous devez faire est d’implémenter le activerappel en JavaScript à la place, comme ceci :
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 );
} );
} );
} );
Assurez-vous que ce script est mis en file d’attente dans le volet Customizer et non dans l’aperçu Customizer. En d’autres termes, mettre en file d’attente le JS à l’ customize_controls_enqueue_scriptsaction.
0 commentaire