Dans la partie 1 de la série WordPress Theme Customizer, j’ai mentionné que pour interagir avec Theme Customizer, vous devez charger $wp_customize objet, qui est une instance de WP_Customize_Manager classer. Pour ce faire, vous devez utiliser customiser_enregistrer crochet d’action:
add_action( 'customize_register', 'my_theme_customize_register' );
function my_theme_customize_register( $wp_customize ) {
// Interacting with $wp_customize object
}
Vous pouvez placer ce code dans le fichier functions.php de votre thème ou dans un fichier qui en est inclus.
Ajout ou suppression d’éléments de personnalisation de thème (sections, paramètres et commandes)
Une fois que vous avez chargé $wp_customize objet, vous pouvez utiliser n’importe laquelle de ses méthodes pour ajouter, obtenir ou supprimer des paramètres, des contrôles et des sections (add_setting, get_setting, remove_setting, add_control… vous obtenez le point).
Alors, si vous voulez avoir ou supprimer une section, un contrôle ou un paramètre, vous n’avez besoin que de son ID. Cette ligne supprimera la section Colors (placez-la dans la fonction my_theme_customize_register du premier extrait de code) :
$wp_customize->remove_section( 'colors' );
L’ajout d’une section, d’un contrôle ou d’un paramètre est légèrement différent car cela nécessite des paramètres supplémentaires. Je ne les passerai pas tous en revue ici pour deux raisons :
- Ce n’est pas vraiment le but de cette série, nous allons créer un passe-partout de personnalisation de thème que vous pouvez simplement insérer dans votre thème à la place
- Alex Mansfield l’a déjà couvert dans son monstre de 6000 mots d’un Tutoriel de personnalisation de thème que chaque développeur de thème WordPress doit lire puis tweeter (sérieusement, si vous ne l’avez pas déjà fait, allez le lire maintenant).
Mais tout de même, examinons comment vous pouvez ajouter votre propre paramètre avec un contrôle dans une nouvelle section Personnaliseur de thème, ainsi que certains des arguments. Puisqu’il est beaucoup plus facile de travailler avec des exemples réels, voici ce que nous recherchons :
- Une nouvelle section, intitulée « Layout »
- Un nouveau paramètre qui stocke la mise en page de votre thème
- Une nouvelle radiocommande avec deux options – barre latérale à gauche et barre latérale à droite
La première chose à ajouter à Theme Customizer est la section « Mise en page » :
$wp_customize->add_section(
// ID
'layout_section',
// Arguments array
array(
'title' => __( 'Layout', 'my_theme' ),
'capability' => 'edit_theme_options',
'description' => __( 'Allows you to edit your theme's layout.', 'my_theme' )
)
);
N’essayez pas encore de le voir dans le personnalisateur, une section ne sera pas affichée à moins qu’un paramètre et un contrôle ne lui soient ajoutés. Ajoutons donc les deux :
$wp_customize->add_setting(
// ID
'my_theme_settings[layout_setting]',
// Arguments array
array(
'default' => 'right-sidebar',
'type' => 'option'
)
);
$wp_customize->add_control(
// ID
'layout_control',
// Arguments array
array(
'type' => 'radio',
'label' => __( 'Theme layout', 'my_theme' ),
'section' => 'layout_section',
'choices' => array(
'left-sidebar' => __( 'Left sidebar', 'my_theme' ),
'right-sidebar' => __( 'Right sidebar', 'my_theme' )
),
// This last one must match setting ID from above
'settings' => 'my_theme_settings[layout_setting]'
)
);
En supposant que vous lisiez le didacticiel d’Alex et/ou les pages Codex, il n’y a qu’un seul paramètre dans le tableau d’arguments add_setting – ‘type’ – sur lequel j’aimerais me concentrer. Vous avez ici deux possibilités, ‘option’ et ‘theme_mod’ et vous pouvez les récupérer en utilisant obtenir_option et get_theme_mod, respectivement. J’utilise toujours « option » simplement parce qu’il vous permet de sérialiser les valeurs de vos paramètres de thème en leur donnant des identifiants tels que my_theme_settings[setting_1], my_theme_settings[setting_2] etc. De cette façon, toutes les valeurs seront stockées comme une seule entrée de base de données dans votre table wp_options.
Et enfin, après avoir ajouté ces deux extraits de code à la fonction à laquelle vous vous êtes connecté customiser_enregistrer crochet d’action (premier extrait de code dans cet article), Theme Customizer a été personnalisé :
Utilisation des valeurs des paramètres du personnalisateur de thème dans votre thème
Après avoir donné à vos utilisateurs la possibilité de stocker ce paramètre, vous pouvez saisir sa valeur, vous connecter à classe_corps filter hook et ajoutez-le au tableau des classes de corps existantes :
add_filter( 'body_class', 'my_theme_body_classes' );
function my_theme_body_classes( $classes ) {
/*
* Since we used 'option' in add_setting arguments array
* we retrieve the value by using get_option function
*/
$my_theme_settings = get_option( 'my_theme_settings' );
$classes[] = $my_theme_settings['layout_setting'];
return $classes;
}
Cela ajoutera .left-sidebar ou .right-sidebar au tableau de classes de corps dans votre thème. En utilisant ces deux classes dans le fichier style.css de votre thème, vous pourrez créer deux mises en page différentes. Par example:
/* Sidebar on the right is default layout */
#content {
float: left;
width: 60%;
}
#sidebar {
float: right;
width: 30%;
}
/* Using .left-sidebar class to override default layout */
.left-sidebar #content {
float: right;
}
.left-sidebar #sidebar {
float: left;
}
Mieux encore, grâce à WordPress Theme Customizer, les utilisateurs peuvent prévisualiser les deux mises en page avant d’enregistrer quoi que ce soit. Prenez ça, pages de paramètres de thème !
Résumé et lectures complémentaires
La version TL ; DR de ce message ressemblerait à ceci : Vous pouvez obtenir l’objet $wp_customize, puis y ajouter quelque chose (section, paramètre ou contrôle) ou le supprimer. Tout le reste se résume à des paramètres de réglages.
La troisième partie est l’endroit où cette série devient intéressante, car nous allons commencer à automatiser l’ensemble du processus et à travailler sur la personnalisation de thème que vous pouvez insérer dans votre thème et commencer à utiliser immédiatement. Restez à l’écoute!