Paramètres et commandes d'un jeu de couleurs dans le personnaliseur de thème

Ce que vous allez créer

Le personnalisateur de thème est un excellent outil pour permettre à vos utilisateurs plus de liberté de modifier un thème sans avoir à modifier le code. Mais si vous voulez laisser vos utilisateurs changer les couleurs de leur site, les choses peuvent devenir compliquées. L'ajout d'un contrôle pour chaque élément modifiable rend les choses plus lourdes et les utilisateurs risquent de se retrouver avec un site qui ressemble à un gâchis criard..

Au lieu d’ajouter de nombreux contrôles pour tous les éléments que vous souhaitez que les utilisateurs puissent modifier, vous pouvez simplement créer un jeu de couleurs permettant aux utilisateurs de sélectionner quelques couleurs, puis de les appliquer à une plage d’éléments du thème..

Dans ce tutoriel, je vais vous expliquer la première partie de ce processus, à savoir la configuration des contrôles du personnalisateur de thème. Dans la partie suivante, je vais vous montrer comment relier ces contrôles à votre thème afin que, lorsque les utilisateurs sélectionnent des couleurs, ils soient transférés au thème..

Le point de départ

Commencez par installer le thème de départ et l'activer. Le personnalisateur de thème ressemblera à ceci:

Après avoir terminé le tutoriel, votre personnaliseur aura deux sections supplémentaires.

Configuration du personnalisateur de thème

La première étape consiste à créer un fichier dans votre thème pour contenir les fonctions de personnalisation. Je vais travailler avec un thème de départ de base, basé sur le thème créé lors de ma série sur la création d'un thème WordPress à partir de HTML statique. J'ai apporté quelques modifications à celui-ci pour qu'il fonctionne avec les fonctions de jeu de couleurs. Par conséquent, si vous souhaitez suivre ce didacticiel, je vous suggère de télécharger le thème de départ..

Dans le dossier principal de votre thème, créez un dossier appelé inc et en cela, créez un fichier appelé customizer.php.

Ouvrez votre functions.php fichier et ajoutez ce qui suit, qui inclura le nouveau fichier que vous venez de créer:

include_once ('inc / customizer.php');

Maintenant dans votre customizer.php fichier, ajoutez cette fonction:

function wptutsplus_customize_register ($ wp_customize)  add_action ('personnaliser_register', 'wptutsplus_customize_register');

Cela crée une fonction qui contiendra tous vos paramètres et contrôles, et la raccordera à la personnaliser_enregistrement crochet d'action. Votre thème est prêt à partir!

Création de paramètres et de contrôles de palette de couleurs

La première étape consiste à ajouter les paramètres et les contrôles pour votre jeu de couleurs. Vous allez ajouter des contrôles pour quatre sélecteurs de couleurs, la couleur principale, la couleur secondaire et deux couleurs de lien.

Ajout d'une nouvelle section

Dans la fonction que vous venez de créer, ajoutez les éléments suivants:

/******************************************* Schéma de couleur **** ***************************************** / // ajoute la section contenant les paramètres $ wp_customize-> add_section ('textcolors', array ('title' => 'Schéma de couleurs',));

Cela crée une section vide pour vos contrôles de jeu de couleurs.

Définir des arguments pour vos couleurs

Immédiatement ci-dessous, ajoutez:

// couleur principale (titre du site, h1, h2, h4. h6, en-têtes de widget, liens de navigation, en-tête de pied de page) $ txtcolors [] = array ('slug' => 'color_scheme_1', 'default' => '# 000' , 'label' => 'Couleur principale'); // couleur secondaire (description du site, en-têtes de barre latérale, h3, h5, liens de navigation en survol) $ txtcolors [] = array ('slug' => 'color_scheme_2', 'default' => '# 666', 'label' = > 'Couleur secondaire'); // couleur du lien $ txtcolors [] = array ('slug' => 'link_color', 'default' => '# 008AB7', 'label' => 'Couleur du lien'); // couleur du lien (survol actif) $ txtcolors [] = array ('slug' => 'hover_link_color', 'default' => '# 9e4059', 'label' => 'Couleur du lien (survolé)');

Cela ajoute une nouvelle section au personnalisateur de thème appelée "Schéma de couleurs". Il configure ensuite les arguments des quatre couleurs avec lesquelles vous allez travailler: un slug, une valeur par défaut et un libellé. La valeur par défaut est la couleur utilisée dans le thème. Vous pouvez donc modifier les vôtres en couleurs de votre thème..

Création de paramètres de couleur

 Ensuite, vous devez créer des paramètres pour vos couleurs en utilisant les arguments que vous venez de définir. Sous le dernier bloc de code, tapez:

// ajoute les paramètres et les contrôles pour chaque couleur foreach ($ txtcolors en tant que $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'type' => 'option', 'capacite' => 'edit_theme_options')); 

Cela utilise un pour chaque instruction de travailler sur chacune des couleurs que vous venez de définir, en créant un paramètre pour chacune en utilisant les arguments que vous avez définis. Mais vous devez toujours ajouter des contrôles pour que les utilisateurs puissent interagir avec ces paramètres à l'aide du personnaliseur de thème..

Ajout de contrôles

À l'intérieur de pour chaque accolades et au-dessous de la add_setting () fonction que vous venez d'ajouter, insérez ce qui suit:

// CONTROLS $ wp_customize-> add_control (new WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug']], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'paramètres' => $ txtcolor ['slug'])));

Cela ajoute un sélecteur de couleur pour chacune de vos couleurs, en utilisant le WP_Customize_Color_Control () fonction, qui crée des sélecteurs de couleur pour le personnalisateur de thème.

L'ensemble de votre pour chaque déclaration va maintenant ressembler à ceci:

// ajoute les paramètres et les contrôles pour chaque couleur foreach ($ txtcolors en tant que $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'type' => 'option', 'capacite' => 'edit_theme_options')); // CONTROLS $ wp_customize-> add_control (new WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug']], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors', 'paramètres' => $ txtcolor ['slug']))); 

Vous pourrez maintenant voir votre nouvelle section lorsque vous ouvrez le personnalisateur de thème avec votre thème activé:

Et lorsque vous développez l'une des commandes, vous pourrez voir le sélecteur de couleur:

Pour le moment, rien dans votre thème que vous fassiez avec le sélecteur de couleur, car vous n'avez ajouté aucun CSS pour le faire fonctionner - nous y reviendrons dans la deuxième partie de cette série. Pour le moment, nous ajouterons une autre section pour donner aux utilisateurs un peu plus de contrôle sur leur palette de couleurs..

Création de paramètres et de contrôles d'arrière-plan solide

La section suivante ne permettra pas aux utilisateurs de choisir des couleurs, mais leur donnera la possibilité d'ajouter un arrière-plan solide à l'en-tête et / ou au pied de page de leur site. S'ils sélectionnent ceci, les couleurs de fond et de texte de ces éléments changeront.

Ci-dessous le code que vous venez d'ajouter, mais toujours dans votre wptutsplus_customize_register () fonction, ajoutez ce qui suit:

/ ************************************** Couleurs d'arrière-plan unies ******** ******************************** / // ajouter la section pour qu'elle contienne les paramètres $ wp_customize-> add_section ('background' , array ('title' => 'Fonds solides',)); // ajoute le paramètre pour le fond d'en-tête $ wp_customize-> add_setting ('header-background'); // ajoute le contrôle pour le fond de l'en-tête $ wp_customize-> add_control ('header-background', array ('label' => 'Ajoute un fond solide à l'en-tête?', 'section' => 'background', 'settings '=>' header-background ',' type '=>' radio ',' choices '=> array (' header-background-off '=>' no ',' header-background-on '=>' yes ' ,))); // ajoute le paramètre pour le fond du pied de page $ wp_customize-> add_setting ('pied du fond'); // ajoute le contrôle pour le fond du pied de page $ wp_customize-> add_control ('footer-background', array ('label' => 'Ajouter un fond solide au pied de page?', 'section' => 'background', 'settings '=>' footer-background ',' type '=>' radio ',' choices '=> array (' footer-background-off '=>' non ',' footer-background-on '=>' oui ' ,)));

Cela ajoute une deuxième nouvelle section intitulée «Arrière-plans solides», puis deux contrôles, qui sont tous deux des boîtes radio. Dans chaque cas, il y a deux choix: oui et non. Dans la deuxième partie de cette série, je vous montrerai comment définir des variables en fonction de ces choix et comment les utiliser pour modifier le code CSS dans le thème..

Vous pouvez maintenant voir la nouvelle section dans le personnaliseur de thème:

Encore une fois, rien ne se passera si vous sélectionnez l'une des cases d'option car vous ne l'avez pas encore lié au CSS du thème, mais cela viendra.

Résumé

Dans cette première partie, vous avez ajouté les paramètres et les commandes nécessaires à la création de l'interface de personnalisation de thème pour votre jeu de couleurs..

Dans la partie suivante, je vais vous montrer comment définir des variables en fonction des choix de vos utilisateurs dans le personnaliseur de thème, puis utiliser ces variables pour définir le code CSS..