La partie 3 de la série Theme Customizer vous a présenté la Boilerplate de Theme Customizer 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 tableau de champs d’options et le passe-partout se chargera d’enregistrer les sections, les paramètres et les commandes du personnalisateur 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 le personnalisateur de thème, cet article vous montre comment vous pouvez 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 copiez 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 filtres et de crochets d’action.

Accrocher à la plaque chauffante du personnalisateur de thème

Il y a plusieurs crochets d’action et de filtre dans le Boilerplate du personnalisateur de thème WordPress. Vous pouvez vous connecter à n’importe lequel d’entre eux à partir du fichier functions.php de votre thème en utilisant add_action et add_filter 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-passe-partout’ – 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 «Personnalisateur de thème» et vous pouvez modifier le texte en utilisant le 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 dans laquelle les valeurs de vos paramètres de 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 changez-le en quelque chose qui contient votre nom de thème.
  • ‘thsp_cbp_options_array’ – Filtrer le crochet défini dans options.php, vous DEVEZ vous y accrocher 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, mettre en gras et le souligner: ETVous devez vous y accrocher 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 accrochant, 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 crochets 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ètre) pour supprimer certaines des sections, contrôles ou paramètres intégrés.

Remarque: alors que nous sommes à 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 (core) fonctionne. Et je ne pourrais pas remercier Pomme reinette et le sien des articles assez pour avoir cette idée dans ma tête.

Contrôles personnalisés

La version mise à jour de Theme Customizer (que vous venez de vérifier, n’est-ce pas?) A 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 parcourirai pas tous ici, mais jetons un coup d’œil à l’un d’entre eux (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 génère le contrôle dans l’écran du personnalisateur de thème.

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 est les “ types ” que vous devez utiliser pour chacun:

  • Champ numérique – ‘nombre’
  • Champ Textarea – ‘textarea’
  • Images qui agissent comme des boutons radio – ‘images_radio’, voici un exemple de ce contrôle dans une prochaine version gratuite Thème Cazuela:

Connaissant les noms de ces nouveaux types de contrôles, il est facile d’en ajouter un. Voici comment vous pouvez ajouter un contrôle de champ numérique au 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 ceci, consultez la section «Utilisation du tableau d’options pour ajouter des sections, des paramètres et des commandes de personnalisation» de la troisième partie 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 hook 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' );

Il s’agit d’un simple crochet d’action WordPress qui vous permet d’ajouter vos propres contrôles personnalisés sans modifier les fichiers de la boîte à outils du personnalisateur de thème. Pourquoi voudriez-vous éviter de les modifier? Parce que si vous vous connectez 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 par rapport à l’écriture d’un plugin, à l’édition d’un thème ou à la création d’un thème enfant, etc.

Si jamais 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 que vous préfixez votre classe de contrôle personnalisée avec quelque chose d’unique, afin que son nom ne soit pas en conflit avec une autre classe. J’ai utilisé ‘CBP_’ (Customizer Boilerplate) – puisque vous utilisez le passe-partout dans un thème, le nom de votre thème a beaucoup de sens et devrait bien fonctionner pour vous.

Personnalisateur de thème: et ensuite?

Maintenant que le Boilerplate du personnalisateur de thème WordPress est extensible via des crochets, nous allons jeter un coup d’œil 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 du personnalisateur de thème désencombré.

Que pensez-vous de Customizer Boilerplate jusqu’à présent? Envisagez-vous de l’utiliser dans vos thèmes? Des idées sur la manière de l’améliorer? Vos commentaires sont toujours les bienvenus.

Share: