Comment créer des contrôles personnalisés pour le personnalisateur de thème WordPress
Publié: 2015-06-17La fonctionnalité WordPress Theme Customizer (également appelée « Customizer ») donne aux développeurs la possibilité de personnaliser l'apparence de leur thème, et même de les aider à prévisualiser les modifications apportées au thème en temps réel. À l'ère d'aujourd'hui, où la course pour attirer les clients vers un site Web s'intensifie, vous ressentirez souvent le besoin de personnaliser la conception de votre site Web. Et grâce au personnalisateur de thème, vous pouvez économiser beaucoup de votre temps précieux en prévisualisant en direct les modifications apportées à votre conception WordPress.
Le personnalisateur de thème WordPress a été introduit dans le cadre de l'API de personnalisation de thème (qui a été introduite dans la version 3.4 de WordPress. Si vous souhaitez modifier les paramètres de votre thème, vous devrez utiliser les contrôles personnalisés fournis avec le thème. personnalisateur comme une case à cocher, un champ de texte, une radio et quelques autres Mais, que se passe-t-il si vous souhaitez ajouter vos propres contrôles personnalisés à votre thème WordPress ?
Pour vous aider à comprendre comment vous pouvez créer et ajouter des contrôles adaptés à vos besoins spécifiques, nous allons vous montrer comment créer trois contrôles personnalisés pour apporter quelques modifications au pied de page de notre thème. Cependant, pour commencer le processus, vous devez d'abord vous familiariser avec la classe WP_Customizer_Control.
Apprendre à connaître la classe "WP_Customizer_Control"
Afin de générer un contrôle personnalisé, vous devez créer une nouvelle classe et l'étendre à l'aide de la classe WP_Customizer_Control. Cette classe utilise la méthode "$wp_customize->add_control()" pour ajouter votre propre contrôle personnalisé à l'écran de personnalisation du thème de votre site WordPress. De plus, pour accéder à cette méthode, vous devez utiliser l'objet $wp_customize disponible dans le hook d'action : customize_register.
Prenons un exemple qui illustre comment vous pouvez ajouter un contrôle personnalisé existant à votre section de thème (dans le hook d'action 'customize_register') comme suit :
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
Dans l'exemple ci-dessus, nous créons un contrôle qui donnera aux utilisateurs la possibilité de choisir une nouvelle image d'en-tête.
Exemples de démonstration : comment créer davantage de contrôles personnalisés ?
Cette section est divisée en trois étapes différentes, dans lesquelles chaque étape contient du code qui générera un contrôle personnalisé pour la zone de texte de votre personnalisateur de thème. Nous ajouterons le code dans le fichier footer.php du thème WordPress, afin d'apporter des modifications au pied de page via les nouveaux contrôles de zone de texte.
Étape 1 : Création d'un contrôle de zone de texte simple
Comme nous l'avons vu ci-dessus, afin de créer un nouveau contrôle personnalisé, nous devons définir une classe qui sera utilisée pour étendre la classe WP_Customize_Control. Essentiellement, cette classe est utilisée avec l'API de personnalisation de thème WordPress pour ajouter un contrôle d'entrée (c'est-à-dire un contrôle personnalisé) sur l'écran de personnalisation du thème. Regardons le code pour implémenter cette tâche :
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
Dans ce code, le hook d'action customer_register est utilisé pour informer WordPress de la fonction personnalisée que nous avons créée avec le nom : theme_footer_customizer. Comme vous le savez peut-être, la classe WP_Customize_Manager aide à contrôler WordPress Theme Customizer, et donc le contrôle personnalisé fera partie de cette classe. Cependant, pour accéder à votre contrôle, vous devrez utiliser l'objet "wp_customize" qui est une instance du crochet customize_register.
Dans notre cas, l'objet wp_customize est utilisé pour définir une nouvelle section de pied de page qui sera incluse dans la zone de texte. Ainsi, tout ce que vous saisirez dans la section "zone de texte" du pied de page s'affichera dans le pied de page de votre thème, comme indiqué dans la capture d'écran ci-dessous :
Dans cette capture d'écran, vous pouvez voir qu'une nouvelle "section de texte de pied de page" est ajoutée à votre thème. Le texte écrit dans cette section sera affiché dans le pied de page de votre thème.
Étape 2 : Ajout d'un contrôle personnalisé pour modifier la couleur d'arrière-plan
Ainsi, maintenant que nous avons créé un contrôle de zone de texte, vous pouvez y ajouter de nombreux contrôles personnalisés différents. Dans cet exemple, nous ajouterons un contrôle personnalisé à notre nouvelle section de texte de pied de page qui aidera à changer la couleur d'arrière-plan du pied de page. Pour ce faire, ajoutez simplement l'extrait de code suivant dans le fichier footer.php de votre thème :
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
Comme vous pouvez le faire dans la capture d'écran ci-dessus, en choisissant une couleur appropriée dans le "Réglage de la couleur du pied de page", la couleur d'arrière-plan du pied de page est devenue grise.
Étape 3 : Ajout d'un contrôle personnalisé pour ajouter un logo
Un autre contrôle que nous ajoutons à la section de texte du pied de page est "Logo du pied de page". Comme son nom l'indique, le contrôle 'Footer Logo' aidera à ajouter un logo au pied de page. Pour ajouter ce contrôle, vous devrez inclure l'extrait de code ci-dessous dans le fichier footer.php :
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
Résumons !
Vous trouverez peut-être que le processus de création de contrôles personnalisés prend un peu de temps. Mais, vous ne pouvez pas négliger le fait que plus vous ajouterez de meilleurs contrôles à l'écran de personnalisation du thème de votre site Web, plus vos utilisateurs pourront gagner du temps, ce qui améliorera l'expérience utilisateur. Donc, si vous envisagez de créer vous-même des contrôles personnalisés à ajouter au personnalisateur de thème WordPress, cet article s'avérera un guide ingénieux pour vous.
