Share
L’API Theme Customization, ajoutée à WordPress 3.4, permet aux développeurs de personnaliser et d’ajouter des contrôles à la Apparence> Personnaliser écran d'administration. Titan Framework vous permet d'étendre et d'utiliser un bon nombre de champs / paramètres pour créer un thème basé sur Live Theme Customizer..
Titan Framework étant un cadre d’options, il est possible de créer plusieurs types d’options en n’écrivant que quelques lignes de code. Voyons comment nous pouvons utiliser les options de thème Customizer via Titan Framework.
Accentsconagua
titan-framework-checker.php fichier inclus dans votre projet Le code que je vais utiliser appartient à mon thème personnalisé Neat. Neat contient un fichier nommé customizer-options-init.php qui est présent dans actifs / admin /titanframework/customizer-options-init.php. C’est là que j’ai mis en œuvre Titan Framework pour enregistrer tous les paramètres, panneaux et sections de ce tutoriel..
Voici le code pour ajouter une section de personnalisation dans votre thème WP.
createThemeCustomizerSection (array (// Nommez le menu d'options 'name' => 'Ma section', // Nom du panneau où toutes les sections seront présentes 'panel' => 'Mon panneau'));
J'ai placé quelques liens utiles vers la documentation de Titan Framework en haut de ce fichier. Je vous recommande de passer par ces liens.
Next (ligne 14) est un add_action () fonction qui porte un tf_create_options crochet et un aa_customizer_options fonction comme ses paramètres. Ce crochet permet de créer des options dans la section de personnalisation..
aa_customizer_options est une fonction personnalisée permettant d’enregistrer des paramètres, des sections ou des panneaux. Si vous avez lu mes articles précédents, j'ai discuté d'une règle d'utilisation de Titan Framework:
Appeler le getInstance () fonctionne chaque fois que vous avez besoin d'interagir avec Titan Framework.Tout comme sur la ligne 19 du code ci-dessus. Cela signifie qu'une instance est associée à la variable. $ titanet il prend un paramètre unique, de préférence votre nom de thème. j'utilisesoigné, qui est le nom de mon theme.
Après avoir appelé une instance, ajoutez une section dans le personnaliseur à l'aide de la touche createThemeCustomizerSection () une fonction. Les lignes 26 à 34 créent une section dans $ titan appelé $ aa_section1. le createThemeCustomizerSection () prend un tableau de paramètres comme nom, panneau, desc, etc.
J'utilise deux de ces paramètres (nom et panneau) pour créer le panneau de personnalisation du thème, puis une section à l'intérieur de celui-ci. Un panneau est un groupe de sections, alors qu'une section contient des paramètres..
J'ai créé un panneau appelé 'Mon panneau'et une section appelée'Ma section ' menu à l'intérieur du panneau.
La capture d'écran ci-dessus affiche le personnaliseur de thème récemment modifié. Ici vous pouvez trouver le nouveau panneau, c.-à-d.. Mon panneau.
À l'intérieur Mon panneau il y a une section nommée Ma section.
Dans l'article précédent, j'ai expliqué comment créer une section personnalisée dans un panneau personnalisé du personnalisateur de thème avec Titan Framework. Créons quelques options / paramètres dans la section que nous avons créée et implémentons notre thème au début du processus..
Collez les lignes suivantes juste en dessous du code écrit dans l'article précédent à l'intérieur du customizer-options-init.php fichier. Ce fichier est inclus dans le functions.php de notre thème via le admin-init.php fichier.
createOption (array ('id' => 'aa_sec_body_bg_clr', // l'identifiant qui sera utilisé pour obtenir la valeur de cette option 'type' => 'color', // type d'option que nous créons 'nom' => 'Couleur de fond du site', // Nom de l'option qui sera affichée dans le panneau d'administration 'default' => '#fff' // Valeur par défaut de notre option)); // Couleur du texte du corps $ aa_section1-> createOption (array ('id' => 'aa_sec_body_txt_clr', // L'ID qui sera utilisé pour obtenir la valeur de cette option 'type' => 'couleur', // Type de option que nous créons 'name' => 'Couleur du texte du site', // Nom de l'option qui sera affichée dans le panneau d'administration 'default' => '# 000' // Valeur par défaut de notre option)); J'utilise le createOption () fonction de Titan Framework pour créer des options. Puisque je dois créer cette option dans la section personnalisée appelée $ aa_section1, J'ai appelé la fonction de création d'options via la variable de section de la ligne 8.
J'ai enregistré deux paramètres. Les deux sont des options de type de couleur où la première option aide à configurer le couleur de fond du corps (ligne 10 à 13).
J'ai défini plusieurs paramètres pour ce réglage de couleur, ID et prénom étant les plus importants. le ID, qui doit être unique, est utilisé pour obtenir la valeur de cette option, alors que le prénom est ce qui apparaît à l'intérieur du personnaliseur.
Ensuite, j'ai créé une autre option pour la couleur du corps du texte (lignes 18 à 25). Comme il s'agit du même type d'option, il est similaire au précédent avec des valeurs différentes dans les paramètres. Voyons ce qui se passe dans le personnaliseur.
Les paramètres de couleur et de couleur de fond du corps sont affichés par rapport aux noms. Couleur de fond du site et Couleur du texte du site à l'intérieur de notre section appelée Ma section.
Jusqu'à présent, j'ai ajouté des options dans le personnalisateur de thème. Laissez-moi maintenant vous montrer comment récupérer les valeurs de ces.
Tout d’abord, je vais récupérer les valeurs sauvegardées des deux options et les sauvegarder dans deux variables différentes. Ensuite, je vais utiliser ces deux variables dans un CSS en fichier pour changer les valeurs de couleurs dans notre thème. Pour ce faire, collez les lignes de code suivantes en haut de la fenêtre. header.php fichier.
getOption ('aa_sec_body_bg_clr'); // Couleur du corps du texte $ aa_sec_body_txt_clr_val = $ titan-> getOption ('aa_sec_body_txt_clr'); ?>En utilisant ce code, je vais obtenir les valeurs des options qui ont été créées dans le customizer-options-init.php fichier. Deux étapes sont nécessaires pour y parvenir:
getOption () une fonction.La ligne 17 est l'endroit où j'ai enregistré l'instance. Les lignes 20 et 23 sont où j'ai récupéré les valeurs de ces options, ce qui était la deuxième étape. le getOption () fonction dans ces deux lignes obtient les valeurs de aa_sec_body_bg_clr et aa_sec_body_txt_clr, qui sont les identifiants uniques pour les options Couleur d'arrière-plan du site et Couleur du texte du site.
Les valeurs de couleur récupérées sont enregistrées dans les variables $ aa_sec_body_bg_clr_val et $ aa_sec_body_txt_clr_val.
Utilisons ces deux variables, qui contiennent les valeurs de couleur sélectionnées par l'utilisateur, au niveau du serveur frontal:
Collez ce code sous le wp-head () afin que nos styles soient inclus après la feuille de style originale de notre thème. Regardez à travers les lignes 7 et 20 pour chacune de ces balises-le écho La commande est utilisée pour imprimer la sortie pour la couleur de fond et la couleur du texte.
Notez que les propriétés CSS ont été marquées comme !important, ce qui assure la priorité CSS.
Suivez ces étapes pour prévisualiser en direct les modifications.
Une fois que vous avez défini les couleurs, vous pouvez voir un aperçu en direct de ces modifications sur votre site..
j'ai choisi # 000000 comme couleur de fond de mon site et #bfbfbfen tant que couleur du texte du site, vous pouvez consulter l'aperçu de la capture d'écran ci-dessus.
Une fois que vous avez terminé, cliquez sur le bouton Enregistrer et publier bouton.
Donc, c'est à peu près tout. Vous pouvez désormais créer facilement des options dans Theme Customizer avec Titan Framework. Était-ce facile? N'hésitez pas à contacter Twitter ou à commenter ci-dessous si vous avez des questions..
A présent, vous savez comment créer tout type de conteneur avec Titan Framework. Je ne saurais trop insister sur l’importance des derniers articles. Si vous ne savez pas comment créer ces conteneurs, il vous sera difficile de comprendre les articles suivants. Alors revenez en arrière et révisez vos concepts sur la manière de créer différents types de conteneurs avec Titan Framework. Vous devriez savoir créer:
À partir du prochain article, je discuterai de tous les types d’options possibles qui peuvent être ajoutés avec Titan Framework. Alors restez à l'écoute!
