Guide complet du thème WordPress personnalisateur

La destination. Le thème initial de ce projet de personnalisation. Vous pouvez télécharger le thème initial que j’utilise ou suivre le Code sur github pour le faire vous – même. Si vous accédez aux programmes personnalisés de l’administrateur WordPress, vous pouvez déjà vérifier le titre, la description et d’autres CSS du site (les plus récentes sont les nouvelles fonctionnalités de 4.7). C’est parce que par défaut, les personnalisateurs affichent les modifications en mettant à jour toute la page. On va arranger ça plus tard, mais tout ira bien maintenant. Jeter les bases de l’ajout de CSS supplémentaires pour les personnalisateurs de sujets commençons par jeter les bases de notre travail de personnalisation. Je vais créer un fichier de programme personnalisé. PHP et moi nous assurerons qu’il est demandé dans le fichier de fonction. Php.
Le chargement du fichier de personnalisation essentiel 5f48a994db42688d788b47370c4aa9c0 commence par une opération d’amarrage qui contient toutes les sections, les paramètres et les contrôles. Charger les sections essentielles 5f48a994db42688d788b47370c4aa9c0, paramètres et contrôles représente la navigation dans un programme personnalisé. Vous devriez déjà en voir quatre: identification du site, menu, page d’accueil statique et autres CSS. En définissant une section, nous pouvons créer une nouvelle entrée dans la navigation et la remplir de contrôles. Les contrôles sont des éléments visuels, c’est – à – dire l’interface utilisateur, qui nous permettent de manipuler les paramètres. Il peut s’agir de champs d’entrée, de zones de texte, de sélecteurs de couleurs et d’autres types de contrôles pour créer une meilleure expérience utilisateur.
Ces paramètres représentent les données que nous voulons que le sujet accepte et utilise. Nous créons des contrôles pour permettre aux utilisateurs de manipuler facilement les paramètres. Créez une section pour ajouter une nouvelle section et nous utiliserons $WP _ Customize – > add section (). Deux paramètres sont nécessaires: L’identificateur de section et de nombreuses options supplémentaires, comme le titre de section vis
Position du Comité dans la liste des chapitres. Charger Essential 5f48a994db42688d788b47370c4aa9c0 n’oubliez pas que le code ci – dessus, ainsi que tout autre code qui crée des sections, des contrôles ou des paramètres, doit être inséré dans la fonction CD \ u customizer \ u Settings ().
Notre section est maintenant enregistrée, mais ne sera pas affichée tant que le contrôle n’aura pas été ajouté. Configurer les paramètres de l’environnement informe WordPress que nos thèmes utiliseront des valeurs que l’utilisateur peut modifier. Ils ont été ajoutés en utilisant $WP _ Customize – > add Setting () qui accepte deux paramètres: L’identificateur de réglage et un tableau d’options contenant des informations telles que les valeurs par défaut. Par défaut, charger le transport Essential 5f48a994db42688d788b47370c4aa9c0 met en fait à jour, mais je l’ai ajouté parce que nous le modifierons plus tard. Mise à jour signifie que WordPress doit mettre à jour la vue lorsque les paramètres changent. Les implémentations de personnalisation plus sophistiquées permettent des aperçus en temps réel, ne modifiant que les éléments touchés, et non la page entière.
Crée un lien entre les paramètres de contrôle et l’entrée de l’utilisateur. Ils ont été ajoutés avec $WP _ Customize – > add Control (). D’un point de vue paramétrique, cette méthode est un peu plus complexe que les méthodes précédentes. Si le premier paramètre est l’objet de contrôle, vous n’avez besoin que d’un seul paramètre, une instance de l’objet. L’objet peut avoir ses propres paramètres supplémentaires. Le premier paramètre peut également être un identificateur, auquel cas le deuxième paramètre de l’option est requis. Dans cet exemple, nous utiliserons la classe de contrôle WP _ Customize Color pour créer des éléments de sélection de couleurs.
Charger Essential 5f48a994db42688d788b47370c4aa9c0 le premier paramètre de cet objet doit être $wp \ u Custom Object lui – même et le deuxième paramètre doit être l’ID du contrôle. Déchirure du tendon
Les mêmes paramètres que vous contrôlez. Le troisième tableau contient des options telles que l’étiquette, l’id de la section à placer et l’ID des paramètres qu’il contrôle. Maintenant, nous avons une paire complète de contrôles de configuration qui apparaîtront dans notre nouvelle section. Il n’a pas encore fait grand – chose, mais le réglage est là et sa valeur change en fait. Paramètres de couleur dans le Programme personnalisé. Générer css pour qu’il fonctionne, nous devons appliquer les paramètres au sujet. Dans ce cas, nous voulons nous assurer que l’hôte a toujours une valeur de couleur de fond comme nouveau réglage. Charger Essential 5f48a994db42688d788b47370c4aa9c0 Notez que ce code ne doit pas être inséré dans le CD \ u customizer \ u Settings () comme nous l’avons fait pour les contrôles, les sections et les paramètres. Ce sont des choses très standard, et la seule chose à noter est comment restaurer la valeur. La fonction get _ Theme MOD () Récupère les paramètres du sujet courant; Le premier paramètre est le nom de réglage et le second est la valeur par défaut.
Bien sûr, vous pouvez utiliser cette fonction dans votre code de sujet pour changer la fonctionnalité. Nous pouvons et allons bientôt créer un contrôle et des paramètres pour masquer \/ afficher les boutons. Nous utiliserons get _ Theme MOD () qui sera utilisé dans le fichier index. Php affiche \/ cache sélectivement les boutons. Nous avons un système propre, mais il sera plus lisse si les changements de couleur et d’autres changements sont transitoires. L’aperçu en direct nous permet d’éditer sélectivement des éléments en utilisant JavaScript. D’abord, créons un fichier de programme personnalisé. JS et assurez – vous qu’il est en file d’attente. Charger Essential 5f48a994db42688d788b47370c4aa9c0 le contenu de ce fichier devrait être une fermeture très simple dans laquelle nous insérons tout le Code. Chargement
« essentiel 5f48a994db42688d788b47370c4aa9c0 ensuite, assurez – vous que la valeur de l’option de transport définie est définie à postmessage. Enfin, Collez ce qui suit dans le fichier customizer. JS, dans le sceau. La fonction Load Essential 5f48a994db42688d788b47370c4aa9c0 Customize () prend deux arguments, le nom du réglage à écouter et la fonction qui effectue l’opération. Cette fonction active à son tour une autre fonction qui lie la valeur de l’environnement et nous permet de l’utiliser comme nous le voulons. Je l’utilise ici pour éditer le CSS de l’élément corps. Le résultat est un plaisir coloré: Belle couleur! Aperçu en temps réel des fonctionnalités de base grâce à la magie du Code de base, la possibilité d’éditer des titres de blog et des descriptions existe déjà. Nous appliquons également un aperçu en temps réel à ces éléments. Bien que nous n’ayons pas encore défini ces options et contrôles, nous pouvons encore les modifier. Nous utiliserons la méthode Get _ Setting () de la classe get Setting () pour obtenir et modifier les options de réglage. Charger Essential 5f48a994db42688d788b47370c4aa9c0 le code ci – dessus doit être ajouté à la fonction CD \ u customizer \ u Settings (). La dernière étape consiste à ajouter un code JavaScript qui sera activé chaque fois que vous changez les paramètres. Charger Essential 5f48a994db42688d788b47370c4aa9c0 À la fin de ce processus, vous devriez voir une mise à jour du titre et de la description du blog lorsque vous tapez. Mettre à jour le texte avec un programme personnalisé plus d’exemples l’utilisation d’un programme personnalisé peut faire beaucoup de choses, et je pense qu’il est préférable d’inclure plus d’exemples. Commençons par quelques contrôles qui contrôlent le comportement des boutons. Afficher \/ masquer les sections Afficher \/ masquer les éléments que j’ai sélectionnés pour créer des éléments de bouton d’option. Nous utiliserons deux paramètres pour add _ Control ()
De la même façon. Vous pouvez mettre à jour un seul projet au lieu de mettre à jour la page entière lorsque le projet change. Nous commençons par générer des boutons avec l’aide de la fonction. J’ai créé le CD _ show main button () et je l’ai utilisé dans le fichier index principal pour l’envelopper dans un conteneur. Charger la fonction Essential 5f48a994db42688d788b47370c4aa9c0 elle – même est identique au Code précédent, mais elle peut maintenant être réutilisée ailleurs. La dernière étape pour charger Essential 5f48a994db42688d788b47370c4aa9c0 est de dire à WordPress de mettre à jour sélectivement le projet. Définissez la propriété de transport du paramètre CD _ button Display à postmessage et ajoutez ce qui suit à la fonction CD customizer Settings (). Charger Essential 5f48a994db42688d788b47370c4aa9c0 ceci indique à WordPress que nous devons mettre à jour sélectivement lorsque l’affichage du bouton CD \ \ u définit l’affichage du bouton CD \ \ U. Le sélecteur dans lequel nous voulons mettre à jour tout le contenu est donné dans le deuxième argument, et la fonction qui génère le contenu est également définie. Si vous essayez de personnaliser le programme maintenant, vous verrez que le bouton devient opaque et charge le bon contenu au lieu de mettre à jour l’ensemble du site. La bonne nouvelle est que le raccourci d’édition vous sera automatiquement ajouté. En fait, si vous avez juste besoin de changer le raccourci, c’est une façon. Ajouter une personnalisation de curseur de plage a de nombreux contrôles, des champs de texte simples aux téléchargements d’images. Si vous travaillez avec une grande application, vous pourriez avoir besoin d’une entrée plus fine, comme un curseur de plage, ou même une entrée entièrement personnalisée. Les personnalisateurs vous permettent de créer facilement vos propres éléments d’interface utilisateur en définissant des classes de contrôle. Nous avons créé un curseur de plage qui permet à l’utilisateur
Utilisez le mécanisme de la petite poignée pour sélectionner les valeurs. Nous construisons le contrôle: chargez Essential 5f48a994db42688d788b47370c4aa9c0 nous devons d’abord vérifier l’existence de la classe de contrôle wp \ u Customize \ u parce qu’elle n’est pas toujours chargée lorsque toutes nos options le sont. Ensuite, nous utilisons notre propre classe d’extension pour déclarer la propriété $type et la fonction render _ content (). Nous devons générer un contrôle HTML, en utilisant $this – > value () Lorsque nous avons besoin de la valeur courante et $this – > Link () au lieu du paramètre nom. J’a i créé une implémentation de curseur très simple, en utilisant un peu de magie jquery pour m’assurer que les valeurs sont visibles dans les champs de texte, et changer les champs de texte affecte également le curseur. J’ai ajouté quelques options (min, max, step) au curseur spécifié pour les attributs dans le constructeur. Pour le tester, je vais créer un petit compteur qui affiche le nombre de photos sur le site actuel. Dans le fichier index. Php j’ai ajouté ce qui suit. Il est temps de charger Essential 5f48a994db42688d788b47370c4aa9c0 pour créer les paramètres et les contrôles. Le contrôle utilise le curseur de plage que nous venons de créer. Charger Essential 5f48a994db42688d788b47370c4aa9c0 créer un aperçu en direct est maintenant presque insignifiant, et tout ce que j’ai à faire est de m’assurer que le code JavaScript couvre le bon projet. Charger l’essence 5f48a994db42688d788b47370c4aa9c0 Un curseur pour personnaliser le thème actif. Obtenez une personnalisation! Vous devriez maintenant être en mesure de travailler dans le personnalisateur de thème pour créer de meilleurs contrôles pour le thème. Il est important de rendre l’utilisation des sujets simple et intuitive, et les personnalisateurs fournissent une bonne base pour cela. Liste de lecture Si vous souhaitez mettre à jour tout le contenu du personnalisateur de thème, consultez ce qui suit: