Développement wordpress pour les utilisateurs intermédiaires: Préparez – vous pour des thèmes personnalisés

by juin 3, 2022

Utilisateurs intermédiaires ESS: internationalisation
Oui, une grande quantité de connaissances WordPress, l’évaluation par les pairs, la rétroaction et la certification des conférenciers sont gratuits et les développeurs wpmu peuvent commencer à apprendre ce que vous devez suivre dans cette partie de la série, et vous devez utiliser un thème. Vous pouvez utiliser vos sujets (ce qui signifie que vous devez modifier mon code pour traiter vos sujets), ou vous pouvez utiliser les sujets que vous avez traités dans la partie 1 de cette série. Si vous le souhaitez, vous pouvez télécharger le thème final de la partie 1 à partir du fichier source de ce cours. Vous aurez également besoin d’un site de développement (peut – être sur votre ordinateur local) et d’un éditeur de code. Tu veux un conseil? Voici comment configurer votre environnement local sur Windows et sur Mac. Vous voudrez peut – être aussi consulter nos 24 meilleurs guides d’éditeur de texte pour les développeurs WordPress.
Qu’est – ce qu’un programme personnalisé? Si vous connaissez déjà WordPress et que vous étudiez ce cours, vous auriez déjà dû utiliser un programme personnalisé, donc vous n’avez pas besoin de beaucoup de présentations. Customizer permet à l’Administrateur du site de modifier le contenu ou la conception du site et d’ajouter des widgets, des menus, etc. Aperçu du site montrant ce qui se passe pendant qu’ils travaillent. Voici à quoi ressemble maintenant le personnalisateur de mon site de démonstration: Actuellement, il a quatre sections prédéfinies: l’ID du site: où vous pouvez changer le titre et la description du site. Menus: Vous pouvez y ajouter et modifier des menus. Widgets – ajoute un widget à la zone Widget enregistrée. Page d’accueil statique: Utilisez cette option pour définir la page d’accueil statique. Ceux – ci ont été ajoutés par WordPress au lieu du thème: notre thème n’a pas encore ajouté de parties ou de contrôles personnalisés. Dans cette partie de la série, nous ajouterons
Nous avons entré un fichier contenant tout le Code. Au lieu de l’ajouter au fichier de fonction. Sujet PHP, nous avons créé un fichier contenant. Dans le dossier sujet, créez un dossier nommé include. En interne, il crée un fichier vide appelé customizer. Php. Ouvrez le fichier de fonction. Php. Haut de la page ajouter: charger Essential 1392d651b0f9933446eb330050f25 enregistrer et fermer le fichier de fonctions. Ensuite, nous commençons à travailler sur le nouveau fichier de personnalisation. Php.
Ouvrez un nouveau fichier de personnalisation. PHP et Tag Add _ Setting () a deux paramètres: la valeur par défaut unique de l’id $WP Customize – > add Control () a un paramètre, New wpmu Customize textarea Control, qui indique à WordPress que nous créons une nouvelle instance d’une classe déjà créée. La nouvelle classe a trois paramètres: $WP _ Customize, l’objet de cette classe. ID unique défini. Un tableau de valeurs: une étiquette qui peut être traduite (nous en discuterons plus loin dans cette leçon). Vous y trouverez la partie de ce chèque. C’est le paramètre auquel il envoie les données, et c’est l’ID unique du paramètre que vous avez créé. Maintenant, si vous retournez au programme personnalisé sur le site et mettez à jour l’écran, la section détails de contact apparaît: Si vous cliquez sur cette section, vous verrez vos contrôles: Actuellement, si vous tapez quelque chose dans ces contrôles, ils n’apparaîtront pas sur le site, mais nous le réparerons dans un certain temps. Tout d’abord, ajoutons quelques contrôles à la deuxième partie. Ajouter des contrôles et des paramètres de couleur ensuite, nous ajoutons des contrôles de couleur que l’Administrateur du site peut utiliser pour modifier le schéma de couleur du sujet. Parce que nous avons ajouté quatre contrôles ici, je vais définir une variable $textcolors et l’utiliser pour traiter chaque couleur que nous voulons ajouter et créer un contrôle pour chaque couleur. D’abord, définissons la variable. In
Le Code que vous venez d’ajouter pour le contrôle de texte, s’il vous plaît ajouter ce qui suit: charger Essential 1392d651b0f9933446eb330050f25 enregistrer le fichier. Ceci crée une variable $textcolors qui contient un tableau de valeurs: wpmu _ color1, wpmu color2, wpmu Links color1 et wpmu Links color2. Pour chacun d’eux, il y a un autre tableau secondaire avec des fentes, des couleurs par défaut et des étiquettes. Tapotez – vous sur l’épaule: vous venez d’utiliser une nouvelle technologie PHP: imbriquer les tableaux dans les variables! Maintenant, créons le contrôle. Nous utiliserons foreach () pour faire défiler les quatre couleurs déjà définies dans la variable au lieu de créer de nouvelles couleurs pour chacune des quatre couleurs. Sous le Code que vous venez d’ajouter pour définir les variables, ajoutez ce qui suit: chargement essentiel 1392d651b0f9933446eb330050f25 enregistrer le fichier. Ceci parcourra chacune de nos couleurs et ajoutera ce qui suit: un paramètre avec deux paramètres: l’ID unique, qui utilise le Slug dans le tableau des variables, un tableau de valeurs qui contient les valeurs par défaut (aussi le tableau des arguments), et le type de contrôle, qui est une option. Contrôle, en utilisant le nouveau contrôle WP _ Customize Color et trois paramètres: $WP Custom Unique ID, en utilisant Slug dans les tableaux, les étiquettes, les sections et les paramètres. C’est très similaire à ce que nous faisons avec le contrôle de texte, mais il utilise les valeurs de tableau que nous avons définies avec la variable $textcolors. Si vous le souhaitez, vous pouvez essayer de revenir en arrière et d’appliquer la même technologie aux contrôles et paramètres de texte que vous avez ajoutés. Regardez maintenant les programmes personnalisés sur votre site Web. Vous verrez une section de combinaison de couleurs avec quatre contrôles de couleur: Comme pour les contrôles de texte, si vous utilisez le sélecteur de couleurs pour sélectionner une nouvelle couleur, il n’a toujours aucun effet sur le site. Alors continuons à changer ça. Mise en œuvre
Personnaliser les contrôles et les paramètres dans un thème ajouter des contrôles et des paramètres à un programme personnalisé est une bonne première étape, mais vous devez les faire fonctionner, ce qui signifie ajouter du Code au thème qui récupérera les paramètres enregistrés par WordPress dans la base de données et les publier dans le thème. Il y a deux choses que nous devons faire: pour les coordonnées, ajoutez un crochet au titre pour afficher le texte. Pour les couleurs, créez un style et ajoutez la tête WP au crochet de la tête WP pour changer les valeurs de couleur de certaines classes dans le thème. Tout d’abord, les coordonnées. Pour ajouter du texte à un sujet, nous avons écrit une fonction qui émet du texte dans un fichier de programme personnalisé. Php, dans la fonction que nous allons connecter au crochet d’action. Cela signifie que nous devons créer un autre crochet d’action dans le sujet dans le titre. Ouvrez le fichier d’en – tête. Php du sujet. Trouver des lignes Et ajoutez – le à ce qui suit: chargez Essential 1392d651b0f9933446eb330050f25 pour enregistrer et fermer le fichier d’en – tête. Php. Maintenant, nous avons un crochet qui relie les fonctions. Créons cette fonction. Dans le personnalisateur. Php, ajouter une fonction vide: charger Essential 1392d651b0f9933446eb33005050f25 dans la fonction, ajouter ce qui suit: charger Essential 1392d651b0f9933446eb330050f25 enregistrer le fichier. Cela ajoute quatre éléments à l’étiquette: un élément d’adresse qui contient tout le reste du contenu un paragraphe qui contient l’adresse un paragraphe qui contient le numéro de téléphone un paragraphe qui contient l’adresse électronique dans le lien vers l’adresse. Pour ce faire, nous avons utilisé la fonction get _ Theme MOD () qui récupère les données stockées à partir des paramètres pertinents du Programme personnalisé. Il y a deux paramètres: définir l’ID et la valeur par défaut. Maintenant, si vous regardez le site, vous verrez le texte par défaut dans le titre:

Parce que le texte dans l’élément avec le titre de la classe de droite est déjà correctement aligné
Défini par la Feuille de style du sujet, notre texte est correctement aligné. Vous voudrez peut – être ajuster la marge sous la zone des sous – ensembles de titre pour ajouter de l’espace sous la zone de recherche (ou ajuster la marge sous l’élément de titre qui contient la zone de recherche). Essayez maintenant d’éditer le texte dans le Programme personnalisé: Ajoutez un style au thème, et nous créons des fonctions pour le schéma de couleurs. Avant d’ajouter le Code, nous déterminons la cible pour chaque couleur. La première couleur (wpmu _ color1) s’applique à l’en – tête, aux liens du menu de navigation et à l’arrière – plan du pied de page. La deuxième couleur est appliquée à l’arrière – plan de navigation. La troisième couleur s’applique au lien ou à l’état auquel il est accédé. La quatrième couleur s’applique aux liens en vol stationnaire ou actif. Vous pouvez appliquer un schéma de couleurs à différents éléments ou ajouter plus de couleurs à d’autres éléments ou catégories. Avant d’ajouter un style, nous devons créer une fonction. Dans le personnalisateur. Php, ajoutez cette fonctionnalité: chargez l’événement 1392d651b0f9933446eb330050f25 pour enregistrer le fichier. Il s’agit d’une tête chaude, de sorte que le contenu de la fonction sera ajouté à la Section De chaque page. Ce n’est pas idéal parce qu’il est préférable d’ajouter des CSS à chaque page plutôt que d’utiliser des feuilles de style. Mais c’est la seule façon, parce que chaque couleur est ajoutée par une fonction, vous ne pouvez pas encoder une fonction PHP dans une feuille de style. Notez que j’ai ajouté . Ajoutons – le. Sous la variable, mais toujours dans la fonction, ajoutez ce qui suit: Loading Essential 1392d651b0f9933446eb330050f25 a une balise PHP de fin suivie d’un élément <?php apertura <?php alla fine della mia funzione ma non all'inizio. Questo perché aggiungerò un tag di chiusura all'interno della funzione: continua a leggere e avrà senso. Ora creiamo una variabile per ciascuno dei colori. All'interno della tua funzione, aggiungi questo: Caricamento essenza 1392d651b0f99338446eb33005050f25 Salva il file. Quindi ora abbiamo quattro variabili che possiamo usare per definire i colori all'interno di un elemento Parfait pour notre style. Ensuite, ajoutez le style de la première couleur: Loading Essential 1392d651b0f9933446eb330050f25 ajoutez maintenant la deuxième couleur: Loading
Entro Essential 1392d651b0f9933446eb33005050f25 et la connexion aux deux dernières couleurs: charger Essential 1392d651b0f9933446eb330050f25 enregistrer le fichier. Vous voudrez peut – être apporter des changements à l’élément cible et à la classe en fonction du sujet. Maintenant, si vous allez à un programme personnalisé dans votre administrateur de site, vous pouvez commencer à modifier le schéma de couleurs. C’est à moi, les dessins sont magnifiques! Ce n’est peut – être pas le schéma de couleurs que vous choisirez d’utiliser dans votre site, mais il vous montrera comment mettre en œuvre les couleurs dans un thème. Je vais essayer quelque chose de plus délicieux, puis enregistrer et publier: Les utilisateurs peuvent maintenant utiliser un programme personnalisé pour modifier le schéma de couleurs de leur site. Défi: ajoutez vos propres paramètres et contrôles maintenant que vous avez ajouté quelques contrôles de texte et des schémas de couleurs, pourquoi ne pas essayer d’ajouter plus de paramètres et de contrôles à votre sujet pour mettre en œuvre les techniques que vous avez apprises jusqu’à présent. Peut inclure: WP _ Customize image Control Media: pour ce faire, créez une nouvelle instance de la classe WP Customize image Control, comme vous le feriez avec une classe de contrôle des couleurs. Vous devez ensuite ajouter l’image au site Web (peut – être un logo dans le titre?) Utilisez le crochet, comme les coordonnées que vous avez déjà complétées. Style d’image: Si vous ajoutez un fichier média téléchargé, vous pouvez créer des options pour le style de l’image, comme créer un logo mobile à gauche du titre du site, ou l’utiliser pour remplacer le titre du site. Pour les contrôles, vous pouvez utiliser $WP _ Customize – > add Control () pour définir \
Votre feuille de style ou par une fonction connectée à l’en – tête wp \ U. La raison pour laquelle vous pouvez utiliser une feuille de style est que vous utilisez l’option d’ajouter une classe à un fichier modèle, pas une feuille de style. Mise en page: essayez d’ajouter des options de mise en page telles que pleine largeur, colonnes ou avec ou sans Barres latérales. Vous pouvez le faire pour un type particulier de contenu, comme un seul message ou une seule page, en utilisant des balises conditionnelles et en ajoutant des styles connexes dans les fonctions attachées à l’en – tête wp \ U. Encore une fois, get _ Theme MOD () I get Theme MOD (), vous pouvez utiliser la fonction get Theme MOD () pour définir le style. Emplacement du projet: Vous pouvez ajouter des options pour déplacer la barre latérale à gauche ou à droite, ou déplacer l’image du titre au – dessus ou au – dessous du titre du menu ou du site. De même, vous devez utiliser le bouton get _ Theme MOD () et une variable pour définir le style, en utilisant get Theme MOD (). Plus d’options de texte – Essayez de créer une barre latérale ou un pied de page de texte que vous pouvez éditer dans le personnalisateur avec des crochets ajoutés au fichier de barre latérale. PHP et pied de page. Sujet PHP. Bouton inviter à l’action: Vous pouvez utiliser des contrôles de texte pour créer un bouton inviter à l’action modifiable, ainsi qu’un bouton Options pour définir si et où le bouton est actif. Ensuite, utilisez une balise conditionnelle dans la fonction pour ajouter une boîte (par crochet) pour vérifier si elle doit être ajoutée à cet emplacement. Ce ne sont que quelques possibilités que vous pouvez utiliser. Pourquoi ne pas essayer? Si vous avez besoin de plus d’inspiration pour personnaliser les contrôles, essayez de voir certains des grands sujets personnalisables disponibles dans le catalogue des sujets pour voir si vous pouvez recréer le travail qu’ils font. Cependant, n’exagérez pas: vous ne voulez pas que vos utilisateurs soient submergés! Si vous voulez vérifier le Code créé
Ou, dans cette partie de la série, n’oubliez pas d’obtenir une copie du sujet à partir du fichier source de la série sur github. Si vous rencontrez un problème à un moment donné ou si le Code ne fonctionne pas, vérifiez le code avant de publier le problème ici. La meilleure façon d’apprendre est de le résoudre vous – même! Customizer est un outil puissant customizer est un excellent outil qui permet aux utilisateurs de sujets d’apporter des changements à leurs sites Web sans écrire de code. Si vous créez des sujets que d’autres personnes peuvent utiliser sur leur site, cela leur donnera plus de flexibilité pour contrôler l’apparence de leur site. Si vous créez un site Web pour un client, le personnalisateur est un bon moyen d’éditer des contenus tels que les coordonnées et le texte de la barre latérale sans avoir à écrire de code (ou à vous convaincre de le faire). J’espère que cette partie de cette série vous donne des informations de base sur le fonctionnement des personnalisateurs et sur la façon d’y ajouter des paramètres et des contrôles, ainsi que des idées pour les ajouter à vos sujets. Amusez – vous! Oui, beaucoup de connaissances WordPress, l’évaluation par les pairs, la rétroaction et la certification des conférenciers, les développeurs wpmu peuvent commencer à apprendre gratuitement. Pensez – vous que ce tutoriel est utile? Pourquoi voulez – vous apprendre le développement de WordPress? Que voulez – vous en savoir plus? Veuillez nous le faire savoir dans les commentaires ci – dessous. Étiquettes: développement Multi – sites

Développement wordpress pour les utilisateurs intermédiaires: Préparez – vous pour des thèmes personnalisés

Leave a Reply Cancel reply