La partie 3 de la série Theme Customizer vous a présenté le Theme Customizer Boilerplate qui vous permet de simplifier le code qui gère les options de votre thème. Tout ce que vous avez à faire est de passer un éventail de champs d’options et le passe-partout s’occupera d’enregistrer les sections, les paramètres et les commandes de personnalisation de thème pour vous dans les coulisses.
Jusqu’à présent, le passe-partout vous permettait d’utiliser des champs de texte, des cases à cocher, des boutons radio et des champs de sélection dans Theme Customizer, cet article vous montre comment l’étendre.
Remarque : avant de continuer, veuillez télécharger la dernière version de WordPress Theme Customizer Boilerplate à partir de son référentiel Github. J’y ai apporté quelques améliorations depuis le dernier tutoriel, et il est important que votre code soit à jour. Jetez un œil à l’article précédent pour plus de notes sur les modifications, mais en un mot, une fois que vous avez copié le passe-partout dans votre dossier de thème, vous n’avez pas du tout besoin de modifier ses fichiers – toute l’édition est effectuée à l’aide de crochets de filtre et d’action.
Accrochage à la plaque signalétique du personnalisateur de thème
Il existe plusieurs crochets d’action et de filtre dans le Boilerplate du personnalisateur de thème WordPress. Vous pouvez vous connecter à l’un d’entre eux à partir du fichier functions.php de votre thème en utilisant add_action et ajouter_filtre les fonctions:
- ‘thsp_cbp_directory_uri’ – Le crochet de filtre défini dans helpers.php, vous permet de changer l’emplacement de Customizer Boilerplate dans votre dossier de thème. Par défaut, le chemin passe-partout ressemble à ceci – get_template_directory_uri() . ‘/customizer-boilerplate’ – mais si vous préférez le déplacer vers un emplacement personnalisé, c’est le crochet qui peut vous aider.
- ‘thsp_cbp_menu_link_text’ – Le crochet de filtre défini dans helpers.php, vous permet de modifier le lien texte du menu. Boilerplate ajoute un lien sous Apparence dans le tableau de bord WordPress, permettant aux utilisateurs d’accéder facilement à Theme Customizer. Par défaut, ce lien indiquera « Theme Customizer » et vous pouvez modifier le texte à l’aide du crochet de filtre « thsp_cbp_menu_link_text ».
- ‘thsp_cbp_capability’ – Crochet de filtre défini dans helpers.php. Vous permet de modifier la capacité requise par défaut utilisée dans la méthode $wp_customize->add_setting.
- ‘thsp_cbp_option’ – Crochet de filtre défini dans helpers.php. Si vous utilisez ‘option’ dans vos arguments de paramètres, utilisez ce hook pour changer le nom de l’entrée sous laquelle les valeurs de paramètres de votre thème seront stockées dans la table wp_options. La valeur par défaut est ‘thsp_cbp_theme_options’, assurez-vous de vous connecter à celui-ci et de le remplacer par quelque chose qui contient le nom de votre thème.
- ‘thsp_cbp_options_array’ – Crochet de filtre défini dans options.php, vous DEVEZ vous y connecter et remplacer le tableau d’options par défaut (contenant des exemples d’options) par les options utilisées dans votre thème. Je vais le répéter, le mettre en gras et le souligner : OuiVous DEVEZ vous y connecter et remplacer le tableau d’options par défaut par les options utilisées dans votre thème.
- ‘thsp_cbp_custom_controls’ – Crochet d’action défini dans custom-controls.php, en vous y connectant, vous pouvez créer vos propres contrôles personnalisés, continuez à lire pour voir un exemple de la façon de le faire.
- ‘tshp_cbp_remove_sections’, ‘tshp_cbp_remove_controls’ et ‘tshp_cbp_remove_settings’ – Filtrer les hooks définis dans Customizer.php. Vous pouvez leur transmettre des tableaux d’ID de section intégrés (ou d’ID de contrôle ou d’ID de paramètres) pour supprimer certaines sections, contrôles ou paramètres intégrés.
Remarque : Bien que nous soyons à l’extensibilité et que nous créons vos propres crochets afin que d’autres développeurs puissent les utiliser pour étendre votre code, il est impossible d’exagérer à quel point cela est important. Après tout, c’est ainsi que WordPress (noyau) fonctionne. Et je ne pouvais pas remercier Pippin et ses articles assez pour me mettre cette idée en tête.
Contrôles personnalisés
La version mise à jour de Theme Customizer (que vous venez de vérifier, n’est-ce pas ?) contient quelques contrôles supplémentaires que vous pouvez utiliser : champ textarea, champ numérique HTML5 et champ images, qui est essentiellement une version sophistiquée des boutons radio.
Ces contrôles personnalisés sont définis dans custom-controls.php, je ne les passerai pas tous en revue ici, mais examinons-en un (champ numérique HTML5) pour voir comment tout cela fonctionne :
/**
* Creates Customizer control for input[type=number] field
*
* @since Theme_Customizer_Boilerplate 1.0
*/
class CBP_Customizer_Number_Control extends WP_Customize_Control {
public $type = 'number';
public function render_content() {
echo '<label>
<span class="customize-control-title">'. esc_html( $this->label ) .'</span>
<input type="number" '. $this->link() .' value="'. intval( $this->value() ) .'" />
</label>';
}
}
Comme vous pouvez le voir, tout ce que vous avez à faire est de définir un nouveau contrôle $type et sa fonction render_content qui affiche le contrôle dans l’écran Theme Customizer.
Utilisation des commandes personnalisées intégrées de Customizer Boilerplate
C’est la même chose que les champs simples couverts dans le didacticiel précédent, la seule chose dont vous devez être conscient sont les « types » que vous devez utiliser pour chacun :
- Champ numérique – ‘numéro’
- Champ de zone de texte – ‘zone de texte’
- Images qui agissent comme des boutons radio – ‘images_radio’, voici un exemple de ce contrôle dans un prochain gratuit Thème Cazuela:
Connaissant les noms de ces nouveaux types de contrôle, il est facile d’en ajouter un. Voici comment vous pouvez ajouter un contrôle de champ numérique à un tableau qui contient toutes vos options :
/*
* ============
* ============
* Number Field
* ============
* ============
*/
'new_number_field' => array(
'setting_args' => array(
'default' => '',
'type' => 'option',
'capability' => $thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array(
'label' => __( 'Number', 'my_theme_textdomain' ),
'type' => 'number', // Textarea control
'priority' => 8
)
)
Remarque : si vous ne savez pas où ajouter cela, consultez la section « Utilisation du tableau d’options pour ajouter des sections, des paramètres et des commandes de personnalisation » de la partie 3 de cette série. En outre, il existe un exemple pour chacun des contrôles personnalisés dans le fichier options.php.
Ajout de vos propres contrôles personnalisés
Revenons au crochet d’action ‘thsp_cbp_custom_controls’ que j’ai mentionné plus tôt :
/**
* Action hook that allows you to create your own controls
*/
do_action( 'thsp_cbp_custom_controls' );
C’est un simple crochet d’action WordPress qui vous permet d’ajouter vos propres contrôles personnalisés sans modifier les fichiers Boilerplate de personnalisation de thème. Pourquoi voudriez-vous éviter de les modifier ? Parce que si vous vous connectez plutôt au passe-partout, chaque fois que quelqu’un le met à jour, vous pouvez simplement récupérer la dernière version, la déposer dans votre thème et ne pas perdre les modifications que vous avez apportées. Pensez à éditer les fichiers principaux de WordPress plutôt qu’à écrire un plugin, à éditer un thème plutôt qu’à créer un thème enfant, etc.
Si vous avez besoin d’ajouter vos propres contrôles personnalisés, voici comment procéder :
function my_theme_add_customizer_boilerplate_control() {
/**
* Creates custom control to use with Theme Customizer Boilerplate
* Use a unique class prefix!
*
* @since Theme_Customizer_Boilerplate 1.0
*/
class CBP_Customizer_My_Control extends WP_Customize_Control {
public $type = 'my_type'; // Change this
public function render_content() {
// Control output goes here
}
}
}
add_action( 'thsp_cbp_custom_controls', 'my_theme_add_customizer_boilerplate_control' );
Assurez-vous de préfixer votre classe de contrôle personnalisée avec quelque chose d’unique, afin que son nom n’entre pas en conflit avec une autre classe. J’ai utilisé ‘CBP_’ (Customizer Boilerplate) – puisque vous utilisez un passe-partout dans un thème, le nom de votre thème a beaucoup de sens et devrait fonctionner correctement pour vous.
Personnalisateur de thème : quelle est la prochaine étape ?
Maintenant que WordPress Theme Customizer Boilerplate est extensible via des crochets, nous allons voir pour ajouter des «options de thème conditionnelles» – celles qui n’apparaîtront que si un certain plugin est actif et vous aideront à garder l’écran de Theme Customizer désencombré.
Que pensez-vous de Customizer Boilerplate jusqu’à présent ? Prévoyez-vous de l’utiliser dans vos thèmes ? Des idées sur la façon dont cela pourrait être amélioré? Vos commentaires sont toujours les bienvenus.