Nouveautés du customizer dans WordPress 4.0

La mise  à jour 4.0 de WordPress a apporté de nombreuses modifications au “customizer”, l’outil de personnalisation de thème intégré au core. je vous propose de faire un tour d’horizon de ces changements.

Les panneaux de personnalisation

Il était jusque là possible de grouper des contrôles dans une section, il est maintenant possible de grouper des sections dans un panneau. Cela permet de mieux catégoriser et organiser les différentes options, et de conserver une interface claire. Cliquer sur un panneau ne le fera pas se dérouler vers le bas comme une section, mais glissera sur la droite pour afficher les sections qu’il contient.

Voici le code à ajouter pour créer un nouveau panneau :

$wp_customize->add_panel( 'panel_id', array(
	'priority' => 10,
	'capability' => 'edit_theme_options',
	'theme_supports' => '',
	'title' => '',
	'description' => '',
) );

Et pour ajouter une section à un panneau, un nouveau paramètre a été ajouté à la méthode add_section :

$wp_customize->add_section( 'section_id', array(
	'priority' => 10,
	'capability' => 'edit_theme_options',
	'theme_supports' => '',
	'title' => '',
	'description' => '',
	'panel' => 'panel_id',
) );

Ci-dessous une démo de ce que ça donne, avec le nouveau panneau dédié aux widgets.

Les nouveaux contrôles et paramètres inclus

Le customizer inclut enfin par défaut les zones de texte (textarea), pour lesquelles il fallait créer un contrôle personnalisé auparavant. Pour les input, il est maintenant possible de spécifier leur type, ce qui permet d’étendre le support aux types url, email, etc, de la spécification HTML5. Un exemple :

$wp_customize->add_control( 'setting_id', array(
	'type' => 'url',
	'priority' => 10,
	'section' => 'title_tagline',
	'label' => 'URL Field',
) );

D’autres paramètres ont été ajoutés à la méthode add_control :

• description : pour ajouter du texte d’aide pour chaque contrôle
• input_attrs : un tableau qui permet d’ajouter à un champ autant d’attributs que nécessaire. Cela peut-être des attributs spécifiques type range, min, max, number, mais aussi une classe par exemple. Là encore plus besoin de contrôle personnalisé, tout est configurable directement.

Un exemple avec un input type range :

$wp_customize->add_control( 'setting_id', array(
	'type' => 'range',
	'priority' => 10,
	'section' => 'title_tagline',
	'label' => 'Range',
	'description' => 'This is the range control description.',
	'input_attrs' => array(
		'min' => 0,
		'max' => 10,
		'step' => 2,
		'class' => 'test-class test',
		'style' => 'color: #0a0',
	),
) );

Ce qui donne dans le customizer :

Pour finir, les contrôles peuvent être dorénavant affichés et masqués de façon contextuelle. Ainsi, vous pouvez décider de n’afficher un contrôle que sur la page d’accueil. Pour cela, il faut rajouter le paramètre active_callback à add_control

$wp_customize->add_control( 'front_page_greeting', array(
	'label'      => __( 'Greeting' ),
	'type' => 'textarea',
	'section' =>
	'title_tagline',
	'active_callback' => 'is_front_page',
) );

Il est possible d’utiliser les functions conditionnelles intégrées à WordPress (comme ici is_front_page), ou une fonction personnalisée ou encore de passer par le filtre customize_control_active.

Une nouvelles capacité “customizer”

Auparavant le customizer utilisait la capacité edit_theme_options pour définir les droits d’accès à son interface. Il utilise maintenant customizer, ce qui permet à la fois de découpler le customizer des options de thème, et permet aux utilisateurs non-administrateurs de l’utiliser. Cela sera utile pour les évolutions prévues, notamment l’utilisation du customizer comme outil d’édition “en direct” des contenus.

Exemple pour permettre aux utilisateurs avec les droits “edit_posts” d’utiliser le customizer :

function allow_users_who_can_edit_posts_to_customize( $caps, $cap, $user_id ) {
        $required_cap = 'edit_posts';
        if ( 'customize' === $cap && user_can( $user_id, $required_cap ) ) {
                $caps = array( $required_cap );
        }
        return $caps;
}
add_filter( 'map_meta_cap', 'allow_users_who_can_edit_posts_to_customize', 10, 3 );

Évolutions futures du customizer

Comme indiqué juste avant, le plan actuel pour le customizer est d’agrandir son champ d’action, en ne le limitant plus à la configuration des options de thèmes, mais en l’utilisant en tant que framework pour l’édition des contenus du site en direct (le plugin front-end editor est en cours de réécriture avec ce principe).

Un autre projet est en cours pour remplacer la gestion actuelle des menus par un système de gestion reposant sur le customizer, ce qui permettrait de voir les changements en direct : https://make.wordpress.org/core/tag/menu-customizer/

Il devrait donc dans le futur prendre une place centrale dans l’utilisation au quotidien de WordPress, et j’ai hâte de voir tout ce qu’il va être possible de faire grâce à lui. Et vous, utilisez-vous le customizer ?

source principale pour la rédaction de cet article : https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/