Share
WordPress fournit aux développeurs de thèmes un système puissant pour la création de systèmes d’options de thèmes faciles à utiliser via le Customizer. Bien que le personnaliseur fournisse un excellent système de prévisualisation en temps réel et une expérience utilisateur exceptionnelle, la définition de la sortie des options définies dans le personnalisateur peut s'avérer compliquée..
Dans ce tutoriel, je vais vous montrer comment simplifier l'obtention des options de couleur définies dans le personnalisateur dans CSS dans l'interface frontale. Ce système simple peut être adapté pour être utilisé avec d’autres propriétés CSS. Cela signifie que vous pouvez utiliser ces techniques pour utiliser des options définies via d'autres méthodes que le thème Customizer..
Trop souvent, l’obtention de couleurs et d’autres options dans Theme Customizer implique un code compliqué mélangeant PHP et CSS..
Par exemple:
Accentsconagua
add_action ('wp_head', 'slug_theme_customizer_css'); fonction slug_theme_customizer_css () ?> Le problème avec ce code n'est pas purement esthétique, ou qu'il est difficile à lire. C'est trop facile de faire une erreur. Par exemple, la fermeture des balises PHP, suivie de la fermeture de la déclaration CSS, aboutit à ceci:?>;, qui semble faux, mais qui est techniquement correct.
Bien que vous puissiez démarrer cette fonction en obtenant toutes les valeurs de couleur dont vous avez besoin dans des variables, vous devez tout de même ouvrir les balises PHP pour qu'elles correspondent à leurs valeurs dans le CSS. Pourtant, c'est un bon début. Bien entendu, la possibilité de définir des valeurs de couleur CSS dans des variables est l’un des nombreux avantages de l’utilisation d’un préprocesseur CSS..
Il est tout à fait possible d’ajouter un processeur Sass ou LESS complet à votre thème, et il existe des plugins pour le faire, ce qui est démesuré pour une tâche simple qui consiste à convertir quelques variables en valeurs hexadécimales. Au lieu de cela, je vais vous montrer comment créer un préprocesseur simple dans votre thème avec seulement quelques lignes de code..
Meilleur balisage CSS
La première chose à faire est de créer un fichier dans votre thème appelé customizer.css. Ce fichier peut vraiment avoir n'importe quelle extension, mais en lui donnant une css extension signifie que votre éditeur de code ou votre IDE le traitera comme un fichier CSS, ce qui facilitera son travail..
Dans customizer.css vous pouvez reformater ce code laid de l'exemple précédent en ceci:
h1.site-title a color: [site_title_color]; h3.site-description color: [site_description_color];
Comme vous pouvez le constater, vous pouvez maintenant écrire du CSS comme s'il s'agissait de CSS. Vous remplacez simplement les valeurs qui seront définies à partir du personnalisateur par le nom du theme_mod entre parenthèses. Notre préprocesseur remplacera ces chaînes par leur valeur provenant de la base de données. La chose la plus importante ici est que vous utilisiez le nom de vos mods de thème comme valeur de substitution dans le CSS non traité..
Construire votre pré-processeur
Le pré-processeur lui-même est incroyablement simple car il prend le contenu de votre customizer.css et utilise le PHP str_replace () fonction pour remplacer les valeurs entre parenthèses par les valeurs du personnaliseur.
L’ensemble du système implique une classe simple avec trois méthodes et une fonction en dehors de la classe, reliée à wp_head pour produire des CSS traitées et optimisées. Gardez à l'esprit que ce code présume que toutes les données dont nous avons besoin sont stockées dans des mods de thème, ce qui est la valeur par défaut pour le personnalisateur de thème. Vous devrez peut-être remplacer get_theme_mod () avec get_option () dans votre code, en fonction de vos besoins.
Cette classe utilise un pour chaque boucle dans chaque méthode. Si vous ne savez pas comment pour chaque boucles, je vous recommande de jeter un oeil à mon article sur le travail avec les boucles et les tableaux. De plus, si vous n'êtes pas familier avec les classes PHP ou PHP orienté objet (OOP) en général, vous devriez consulter la série d'introduction de Tom McFarlin sur la POO.
Pour commencer, dans votre functions.php ou dans un fichier inclus, créez une classe vide appelée slug_theme_customizer_output remplacer "slug" par le slug unique de votre thème. Ça devrait ressembler à ça:
classe Slug_Theme_Customizer_Output
La première méthode de la classe sera l'endroit où vous définissez les mods de thème que vous allez utiliser, ainsi que les valeurs par défaut pour chaque mod de thème. Vous définissez chacun dans un tableau sous la forme de theme_mod => par défaut. S'en tenir aux deux mêmes paramètres qu'auparavant, il aimerait ceci:
function theme_mods () return array ('site_title_color' => '# ff0000', 'site_description_color' => '# 000'); La prochaine étape consistera à obtenir la valeur actuelle de chaque theme_mod et mettre cela dans un tableau que nous pouvons utiliser dans notre pré-processeur actuel. Cette méthode obtient simplement chaque valeur de la theme_mods () méthode et passe la clé comme premier argument, c'est-à-dire le nom theme_mods get_theme_mods () en passant la valeur par défaut comme second argument, qui sera retourné s'il n'y a rien de défini dans ce mod de thème. Il ressemblera à ceci:
function prepare_values () $ colors = array (); // Récupère nos mods et valeurs par défaut. $ theme_mods = $ this-> theme_mods (); // Pour chaque thème mod, affiche la valeur du thème mod ou la valeur par défaut. foreach ($ theme_mods comme $ theme_mod => $ default) $ colors [$ theme_mod] = get_theme_mod ($ theme_mod, $ default); return $ colors;
Maintenant, nous avons un tableau sous la forme de 'theme_mod_name' => 'valeur à remplacer' et notre prêt à traiter le CSS dans la troisième et dernière méthode de cette classe.
dans le pour chaque Dans cette méthode, nous tirons parti de la possibilité offerte par PHP de traiter la clé et la valeur du tableau comme des variables distinctes. C'est une fonctionnalité vraiment puissante de PHP pour chaque boucles qui nécessitent un peu de planification dans la façon dont chaque tableau est structuré et rend la vie beaucoup plus facile.
La première étape sera d'utiliser file_get_contents () convertir le customizer.css fichier dans une chaîne et le stocker dans une variable. Puisque cette fonction causera une erreur fatale si elle ne trouve pas le fichier, nous devons envelopper tout le code de cette méthode dans un test si le fichier existe du tout..
Notez que ce code suppose que customizer.css est dans le même répertoire que la classe, vous devrez peut-être ajuster la structure de fichier de votre thème. Voici comment nous commençons cette méthode:
function process () $ css = "; // Modifiez ce nom de fichier et / ou cet emplacement en fonction de vos besoins. $ theme_customizer_file = trailingslashit (dirname (__FILE__)). 'theme_customizer.css'; // Assurez-vous que le fichier existe. if (file_exists ($ theme_customizer_file)) // Récupère le contenu du fichier. $ css = file_get_contents ($ theme_customizer_file);
Comme je l'ai dit précédemment, toute cette méthode est encapsulée dans une vérification de l'existence du fichier. Cela signifie qu'il va revenir faux si le fichier ne se charge pas. Gardez cela à l'esprit car nous devrons rendre compte de cette possibilité ultérieurement.
Maintenant que nous avons le CSS en tant que chaîne, nous devrons obtenir nos tableaux de valeurs de substitution du prepare_values () méthode. Encore une fois, nous allons utiliser la clé de tableau et la variable en tant que variables séparées dans le pour chaque boucle. Pour chaque theme_mod nous devons ajouter des crochets autour de cela, nous pourrons l'utiliser pour remplacer la chaîne de substitution dans le CSS par str_replace (), comme ça:
// Obtiens nos couleurs. $ colors = $ this-> prepare_values (); // Remplace chaque couleur. foreach ($ colors en tant que $ theme_mod => $ color) $ search = '['. $ theme_mod. ']'; $ css = str_replace ($ search, $ color, $ css);
Cette boucle nous donnera des CSS complètement valides avec tous nos noms de mod de thème entre crochets remplacés par les codes hexadécimaux corrects pour les couleurs. Il ne reste plus qu'à encapsuler le CSS traité dans les balises de style appropriées avant de le renvoyer:
// Ajouter des balises de style. $ css = ''; return $ css;
C'est tout le préprocesseur. La seule étape qui reste est de sortir notre CSS lui-même. Pour ce faire, nous pouvons utiliser une fonction, en dehors de la classe, qui initialise la classe et la sort dans l'en-tête du thème..
Cette fonction ressemble à ceci:
add_action ('wp_head', 'slug_theme_customizer_output'); function slug_theme_customizer_output () // Assurez-vous que notre classe existe. if (class_exists ('Slug_Theme_Customizer_Output'))) // Initialise la classe et obtient le css traité. $ class = new Slug_Theme_Customizer_Output (); $ css = $ class-> process (); // Pour plus de sécurité, assurez-vous que la méthode 'process' n'a pas renvoyé false ou autre chose qu'une chaîne. if ($ css && is_string ($ css)) echo $ css; Si vous vous en souvenez peut-être, la méthode processus() peut retourner false si le fichier CSS ne peut pas être chargé. Afin de tenir compte de cette possibilité, avant de faire écho à la valeur du processus() méthode, il est important de s’assurer qu’elle ne retourne pas false, ni tout ce qui n’est pas une chaîne.
Optimisation des bonus supplémentaires
Bien que nous puissions en rester là, j'aimerais rendre les choses un peu plus efficaces. Ce système fonctionne parfaitement, mais il effectue également de nombreux traitements répétitifs, avec éventuellement plusieurs requêtes de base de données à chaque chargement de page. Personnellement, je préférerais que toute la classe ne soit pas exécutée et ne récupère qu'une chaîne de la base.
Afin d'accomplir cela, nous pouvons retravailler la fonction de sortie pour mettre en cache le CSS dans un transitoire. Ainsi, lorsque nous pouvons ignorer toute la classe de préprocesseur si le transitoire a une valeur, sinon, nous pouvons exécuter le processus complet et le remettre en cache. Voici la fonction de sortie modifiée:
add_action ('wp_head', 'slug_theme_customizer_output'); function slug_theme_customizer_output () // Définit css sur transitoire ou reconstruit. if (false === ($ css = get_transient ('slug_theme_customizer_css')))) // Assurez-vous que notre classe existe. if (class_exists ('Slug_Theme_Customizer_Output'))) // Initialise la classe et obtient le css traité. $ class = new Slug_Theme_Customizer_Output (); $ css = $ class-> process (); // cache css pour la prochaine fois. set_transient ('slug_theme_customizer_css', $ css); // Pour être sûr, assurez-vous que la méthode 'process' n'a pas renvoyé la valeur false ou autre chose qu'une chaîne. if ($ css && is_string ($ css)) echo $ css; Maintenant, s'il y a une valeur définie dans le transitoire slug_theme_customizer_css il peut être répété directement, après avoir réussi les mêmes tests, pour s'assurer qu'il n'est ni faux ou pas une chaîne. La classe de préprocesseur n'est pas chargée et une seule requête est effectuée dans la base de données. Si le transitoire revient faux, le processus est exécuté et la valeur est mise en cache pour la prochaine fois.
Bien sûr, nous voulons nous assurer que lorsque les mods de thème sont mis à jour, nous effaçons le transitoire afin qu'il ne produise pas de paramètres obsolètes. WordPress traitera cela chaque fois qu'une option spécifique est mise à jour.
Nous pouvons utiliser cette action puisque les mods de thème sont stockés dans une option nommée pour le thème auquel elle est associée. Par exemple, les mods de thème de TwentyFourteen sont stockés dans l’option theme_mods_twentyfourteen. Voici comment nous utilisons cette action pour effacer notre transitoire:
/ ** * Réinitialise le transitoire slug_theme_customizer_css lorsque les mods du thème sont mis à jour. * / // Récupère le nom du thème actuel. $ theme = get_stylesheet (); add_action ("update_option_theme_mods _ $ theme", 'slug_reset_theme_customizer_css_transient'); function slug_reset_theme_customizer_css_transient () delete_transient ('slug_theme_customizer_css'); Mettre à profit et aller plus loin
Maintenant que vous pouvez écrire votre CSS qui est mis à jour à partir du personnaliseur de thème avec des variables, vous voudrez peut-être envisager d'utiliser un seul thème par thème à plusieurs endroits..
Par exemple, qu’en est-il au lieu de définir theme_mod pour chaque couleur du thème et de provoquer une surcharge d’options, qu’en est-il des options pour la couleur primaire, la couleur secondaire et la couleur accent?
Le système que je vous ai montré comment créer ici ne fonctionne qu'avec des options de couleur, ce qui le rend vraiment utile pour les propriétés CSS telles que Couleur, Couleur de fond, couleur de la bordure, etc. Vous pouvez l'étendre pour qu'il soit utile pour d'autres types de propriétés.
Rappelez-vous simplement de ne pas réinventer Sass ou LESS, le but de tout cela était d'éviter de gonfler votre thème avec une implémentation PHP complète Sass ou LESS, qui sont déjà disponibles sous forme de plugins..
