Personnalisez un thème WordPress avec HTML et CSS

1. Introduction: Bonjour, je m'appelle Victoria Anna, et je suis un concepteur de communication visuelle. Je conçois des logos, des identités d'entreprise, des sites web, et j'illustrer. Dans cette classe Skillshare, j'aimerais vous montrer comment personnaliser le thème 2019 par défaut et le transformer de ceci à ceci. Ce processus est valable pour la transformation et la personnalisation d'autres thèmes WordPress. J' espère que vous allez trouver de l'inspiration et commencer à travailler sur certaines personnalisations. Nous allons jeter un oeil aux fichiers de modèle et comment ils travaillent ensemble pour construire un thème WordPress, et nous allons apporter quelques modifications à eux. Nous allons changer l'en-tête, le pied de page, personnaliser le logo, le menu, créer du contenu, intégrer Google Maps, installer quelques plugins. Je suppose que vous avez déjà installé le thème WordPress et WordPress et a regardé les paramètres et que vous avez une certaine expérience avec CSS et HTML. Si vous avez des questions, n'hésitez pas à me contacter. Vous allez trouver les fichiers de ressources et les exercices joints à certaines leçons. Maintenant, commençons. 2. Fichiers de thème WordPress et hiérarchie: J' ai démarré le client FTP FileZilla, ce qui est mon préféré. Nous allons avoir une vue d'ensemble sur les fichiers d'installation de WordPress. Habituellement, nous téléchargeons à partir du site WordPress, le dossier zip avec WordPress avec la dernière version et le ZIP sur notre ordinateur, et envoyons tous les fichiers à notre serveur pour l' installer avec l'installation de la base de données et tous les autres paramètres. Eh bien, ici dans le contenu WP, nous avons nos thèmes aussi plug-ins. Jetons un coup d'oeil. C' est notre thème 2019, et WordPress ces jours-ci vient installé avec 2017 et 2016 thème. Prenons un coup de main dans notre thème 2019 et pour voir quels fichiers sont là. Habituellement, le thème WordPress ne peut fonctionner qu'avec un fichier PHP d'index et un style CSS. Mais les fonctions PHP est aussi très agréable. Vous voudrez peut-être aussi avoir quelques bonnes interactions et quelques bonnes polices. Tous ces fichiers sont fondamentalement des composants modulaires qui construisent une chose. Il est vraiment important de comprendre la hiérarchie des fichiers modèles WordPress. Nous avons tous ces fichiers de modèle que je vous ai montré dans FileZilla, puis bien sûr, les feuilles de style et les images JavaScript et d'autres fichiers de modèle comme les fonctions PHP qui construisent le thème entier. Tous ces fichiers de modèle sont comme des petits modules que vous pouvez combiner pour créer le thème que vous voulez avoir. Ils donnent la structure de l'information sur votre site web. Par exemple, dans notre thème, la barre latérale PHP avec des widgets est en fait une partie du pied de page PHP. Vous pouvez combiner tous ces petits modules ensemble pour un grand thème, et il y a une hiérarchie spéciale, par exemple, le plus spécialisé des modèles est, par exemple, vous avez une page PHP pour toutes les pages que nous avons créées dans notre thème. Mais disons que nous allons avoir besoin d'une page de contact et qu'elle aura l'air un peu différente de toutes les autres pages. Donc, je vais créer puis une page, contactez PHP. Ce sera le modèle uniquement pour la page de contact. Dans le cas, par exemple, que j'ai créé une page de contact mais ne lui ai pas attribué de modèle de page de contact, le WordPress va retomber sur les modèles PHP de page. Donc, le modèle le plus spécialisé est, comme les chaussures de catégorie ou de catégorie. chaussures de catégorie sont plus spécialisées que la catégorie. Donc WordPress va toujours montrer le modèle plus spécialisé, et s'il ne le trouve pas, il va retomber sur le modèle moins spécialisé. Ensuite, en fin de compte, s'il n'a pas d'autres modèles dans le thème, va montrer le fichier PHP d'index. Donc, lorsque vous modifiez un thème, lorsque vous le personnalisez, vous ne travaillez généralement qu'avec le style CSS, mais parfois il y a des parties que vous voulez modifier, et pour cela, vous devrez avoir un client FTP pour ouvrir modifiez-les et créez la nouvelle structure que vous souhaitez avoir dans vos fichiers de modèle. 3. Le thème enfant en action: Pour commencer à personnaliser notre thème. Nous devons d'abord en créer une copie. Parce que partir d'ici, le thème 2019 par défaut à celui-ci que j'ai déjà essayé pour ce côté professionnel n'est pas recommandé changer tous les fichiers originaux de votre installation de thème WordPress. Parce que vous pourriez casser quelque chose, faire une erreur, ou le thème va être mis à jour et tous vos changements vont être perdus. Tu dois tout recommencer. Il y a une possibilité, bien sûr, d' aller au personnalisateur et de télécharger le logo, changer les couleurs, créer des menus, changer les widgets, et voici un champ CSS supplémentaire, que vous pouvez remplir avec votre CSS. Disons quelque chose de très simple. La couleur de fond va être verte, génial. Maintenant, vous l'enregistrez et vous avez un site web vert, mais 2019 est mis à jour et tous ces changements se perdent. Que faire ? Il existe une autre possibilité où, en tant qu'administrateur dans le tableau de bord, vous accédez à l'éditeur Thème Apparence. Je vous l'ai déjà montré dans l'autre vidéo, sorte que vous pouvez changer tous ces fichiers de thème et les éditer. Mais bien sûr, cela pourrait briser votre thème, vous êtes thème original. La recommandation est toujours de créer un thème enfant, et c'est vraiment génial. Il s'appelle thème enfant parce que le thème parent est toujours là, et tous les fichiers, toutes les fonctions, tout le JavaScript, etc. est toujours là. Le thème enfant peut les utiliser, mais si vous voulez apporter des modifications, il suffit de copier l'un des fichiers, apporter des modifications et de le laisser dans le thème enfant. Parce qu'il va écraser les fichiers qui sont ici dans le thème parent. C' est bien au-delà de notre portée pour créer un thème enfant, et j'ai trouvé en ligne qu'il y a un grand site qui est appelé ChildThemeWP.com et la grande équipe qui travaille là, et certains d'entre eux travaillent pour WordPress.org sont en train de créer les thèmes enfants pour les thèmes WordPress connus. Voici le lien de téléchargement. Vous allez le trouver dans les fichiers d'exercice afin que vous puissiez télécharger le thème enfant pour vous-même. Je l'ai déjà téléchargé, je dois juste le pousser sur mon serveur. Il est décompressé, et donc j'ai juste tiré un fichier sur mon serveur et le voilà. Le thème enfant se compose de fonctions PHP et le style CSS et la capture d'écran, bien sûr, pour le thème, que je crois est vide, et quelques JavaScript. Tout cela, la grande équipe du ChildThemewp.com a créé. Nous n'avons pas à nous soucier de créer tous ces fichiers. Comment cela fonctionne-t-il avec le thème enfant ? Nous avons un thème parent ici et l'enfant ici, et comment les fichiers communiquent-ils les uns avec les autres ? Eh bien, ce n'est pas un problème, je vais juste ouvrir ici le WordPress sur mon ordinateur juste pour avoir un aperçu des fichiers et pour expliquer. Vous voyez que le thème enfant a très peu de fichiers sur les fonctions et le style CSS. Par exemple, si je veux changer l'en-tête, je vais juste copier l'en-tête PHP dans mon thème enfant et faire les changements dans ce fichier. Tout le reste va revenir, rester le même. Tous les fichiers de modèle vont provenir du thème parent. Tout ce que vous voulez modifier dans le thème enfant, il vous suffit de copier ce fichier et d'apporter vos modifications dans le thème enfant. Bien sûr, vous devez également garder la structure des dossiers afin de garder la liaison entre les différentes parties du modèle. Sur la face avant, l'installation d'un thème enfant va ressembler à ceci. Je vais aller ici dans le tableau de bord et les thèmes d'apparence et rappelez-vous, je vous ai dit que la capture d'écran du thème enfant est vide. On va devoir changer ça dans un moment. Je vais juste activer ce thème et si je retourne de notre côté, c'est toujours le même. Vous voyez que ça marche, c'est essentiellement une copie de ce site. Mais si je veux changer un fichier ou simplement copier sur le thème enfant et changer là au lieu de casser le thème d'origine parent. 4. Changer les polices: Tout d'abord, je veux changer la typographie. J' ai déjà cherché la police avant. Ça s'appelle Source Sans Pro. Je l'ai aimé pour ce projet. Je vais le sélectionner ici et choisir les styles dont j'ai besoin ; le régulier, l'italique, et le gras. Quand je regarde ici, je vais avoir besoin de ce lien dans les fichiers PHP de ma fonction parce que nous allons changer les polices via les fonctions PHP comme lien de style. Après avoir copié ce lien vers les polices que nous avons choisies, je me dirige vers le revendeur de fichiers pour ouvrir le dossier enfant 2019 et éditer le fichier PHP fonctions, car dans la nouvelle version de WordPress, les styles sont en file d'attente dans le thème. Ils ne sont pas mis en tant que lien, mais en file d'attente dans le fichier de fonction. Ici, vous voyez que le fichier parent-css est intégré dans le thème, et voici le fichier child-css. Si nous écrivons quelque chose ici dans l'enfant-css, il va écraser le parent css. La même chose vaut pour le fichier JavaScript enfant. Si nous avons JavaScript personnalisé dans notre thème enfant, il va écraser celui du thème parent. Donc ici, je vais juste coller le lien des polices Google, puis copier ce WP sur la fonction de style de clé ici, et nommer ma fonction child-googlefonts, faire une virgule, puis coller cette référence au CSS de cette police ici à l'intérieur et mettre un point-virgule ici, et bien sûr supprimer ce lien. Je vais juste faire un petit commentaire ici. Ajouter Googlefonts. Pour que je sache ce que j'ai changé au cas où quelque chose ne fonctionnerait pas. Je vais sauver ça, et oui, confirmer. Maintenant, voyons si quelque chose a changé sur notre site. Non, ça ne l'a pas fait. La raison en est que si nous utilisons l'Inspecteur Web de Firefox, nous allons voir que ce h1 a toujours la famille de polices fait est dans le thème parent. Nous devons donc écraser cela dans notre fichier child-css. Alors faisons ça maintenant. 5. Modifier les couleurs: Si je vais changer les couleurs, je vais avoir besoin de mon fichier, mon croquis du site, et j'ai une petite application qui s'appelle ColorsLurp. C' est une application gratuite qui fait des sons drôles lorsque vous choisissez une couleur. Eh bien, j'ai éteint ça parce que j'ai trouvé ça un peu irritant quand j'ai travaillé avec ça. J' ai déjà enregistré cette couleur de fond ici, qui est un gris moyen chaud. Je vais juste copier ce code, ouvrir mon inspecteur, et trouver la balise corporelle. Ici, c'est. Il est dit, le corps de la couleur de fond est blanc. Je vais changer ça. Ici, c'est. Ça a l'air un peu drôle et bizarre, mais pas mal. Maintenant, je vais copier ici tout parce qu'il inclut aussi la couleur de la police. Donc Copier, ouvrez mon fichier de style CSS dans l'application atom et collez-le ici. Bien sûr, je dois supprimer ceci ici et peut-être aussi, cela a m couleur. Je pourrais mettre du blanc, mais je ne pense pas que ce soit correct, je pense que je dois choisir un très, très clair en gris. Je retourne ici et en utilisant ColorsLurp, je vais choisir ce gris ici. C' est l'endroit le plus léger, et je vais le copier dans ma couleur de police. Ça vient ici. Enregistrez et modifiez également la famille de polices. Sur ce site dans ce projet, j'aime avoir le moins possible différentes polices. Enregistrer, puis bien sûr, enregistrer le remplissage de la police sur le serveur. Retournez, fermez ça et voyons ce qui s'est passé. Ça a l'air sympa. Bien sûr, le texte est illisible ici, mais ce sont des blocs et c'est la belle partie que je dois juste changer fondamentalement la couleur du corps, la couleur de la police. Peut-être dans d'autres occasions comme les liens, je dois changer quelques couleurs, mais sinon tout le reste, je peux juste éditer ici dans le bloc. Voyons ça. Paramètres de couleur. Je vais mettre la couleur du texte blanc et le fond gris clair, mettre à jour et vérifier. Oui, ça a l'air un peu plus lisible, mais pas vraiment plus agréable. Pour rendre notre thème un peu plus agréable et le personnaliser, nous allons bien sûr avoir besoin de beaucoup d'ajustements, et si je suis allé à tous ces liens individuellement, il va prendre un certain temps pour changer leurs couleurs et leur état de vol stationnaire. J' ai trouvé sur GitHub, que le développeur Ann Pohl a mis le remplacement de couleur personnalisée 2019 là-bas à utiliser. Je vais juste copier tout ça et le mettre dans notre feuille de style. Laisse-moi vérifier si tu édites. J' ai déjà commenté ici, la typographie. Je vais juste mettre un autre commentaire pour savoir où chercher les choses. Couleurs, remplacez, puis collez tout ici. Ensuite, je dois chercher le a, pour les liens. C' est sur cela que nous travaillons actuellement. Gardez-le juste une seconde. Il s'agit de la couleur des liens. J' ai préparé celui que je veux ici dans mon fichier texte, copier celui-ci, revenir au code et l'entrer ici. Très probablement si je retourne ici, bien sûr, je dois enregistrer le fichier aussi sur le serveur. Voyons dans le navigateur ce qui s'est passé. Vous voyez que rien ne se passe. Eh bien, c'est l'astuce avec travailler avec des thèmes enfants que vous devez utiliser la règle importante assez souvent pour remplacer de nombreux paramètres CSS. Ça ne se sent pas bien, c'est un peu hacky et je n'aime pas vraiment ça, mais c'est tout. C' est le travail avec les thèmes enfants. C' est maintenant l'aspect des liens. Bien sûr, quand je survole, se passe pas grand-chose. Je dois changer aussi la couverture de vol stationnaire, que j'ai préparé ici, et c'est celui-ci. Je pense que c'est un jaune de maïs ou quelque chose comme ça. Voyons voir, les états de vol stationnaire. Je vais le mettre ici. Ne pas oublier important, enregistrer, et vérifier dans le navigateur ce qui s'est passé. On y va. Maintenant, je voulais aussi avoir l'animation de la frontière en dessous. Parce qu'ici vous pouvez voir il y a un soulignement de décoration de texte qui ne peut pas être animé. Je vais ajouter l'animation maintenant dans l'état de vol stationnaire. Pour changer cette transition de vol stationnaire, je vais supprimer le souligné ici, puis ajouter la bordure que je vais faire transition, pas animer la transition. J' utilise toujours à la maison, et je l'ai trouvé mieux parce que la transition sous-jacente à une décoration de texte entraîne toujours des agitations. Je retourne au fichier CSS, et ici dans l'état survol, je vais juste copier cette couleur parce que je veux que la bordure ait la même couleur, bien sûr, que le texte. Je vais juste ajouter la couleur de la bordure ici. Sauvegardez, puis passez à la transition. D' abord, je dois dire que la décoration de texte n'est pas. Après avoir déclaré la transition du bouton Border de deux pixels solide transparent à la couleur que j'ai déclarée dans l'état du survol. Je vais mettre la transition ou linéaire et le plus simple, puis 0.3 secondes. J' ai trouvé 0,3 secondes pour remplir la vitesse la plus naturelle. Certains vont enregistrer ceci ici et faire la même chose dans FileZilla et vérifier ce qui s'est passé dans le navigateur. Oh, apparemment tous les liens ont maintenant la même transition. Eh bien, le bar d'administration n'est pas vraiment ma préoccupation. Voyons voir ici. Nous n'avons pas enlevé la décoration sous-jacente. Tout d'abord, j'ai oublié d'écrire important. C' était le cas ? Retourne. Maintenant, je peux le faire passer. Voyons ici, tous les autres liens aussi. Super. Je veux aussi changer la couleur de cet élément. C' est une frontière gauche. Voyons lequel il est, son contenu d'entrée et blockquote. Je veux mettre ceci de la même couleur que la couleur du lien, et je me dirige vers le fichier CSS. Voyons voir ici est la couleur du lien, en le copiant, en le collant ici avec le blockquote, en enregistrant, en confirmant. Vérification dans le navigateur. Que s'est-il passé ? Il a changé la même couleur que le lien avant l'état du survol. Mais si je regarde cela dans l'ensemble, je trouve ces lignes trop fines compte tenu de la typographie. Je veux les rendre un peu plus gros. Je vais changer cela ici, en ajoutant la largeur de la bordure, et je vais commencer avec les neuf pixels juste pour exagérer un peu, et confirmer et rafraîchir. On dirait un peu plus en harmonie avec la topographie, mais peut-être un peu trop épais. Juste pour le tonifier, je mets huit pixels et frais, qui semble un peu plus en synchronisation. Nous avons édité les couleurs du thème, et maintenant nous allons passer à la zone de pied de page parce que je ne veux pas avoir ces widgets dans mon pied de page. 6. Changer le pied de page de: Pour changer l'apparence de notre pied de page, abord, je veux changer la couleur de fond. Je vais ici, vérifier les outils web, ce qui se passe avec le pied de page. Il est là, il n'y a pas de déclaration de couleur de fond, et bien sûr, il prend le contrôle de la déclaration de couleur de fond du corps. Je vais en faire un ici, couleur de fond et vérifier avec mon application Color Slope parce que je jouais avec les couleurs et je voulais avoir un moins de contraste dans le pied de page, donc la zone de contenu est un peu plus visible, juste subtilement mais avec un peu de différence. Oui, je retourne voir l'inspecteur, en mettant la couleur ici. Oui, c'est à ça que ça doit ressembler. Ensuite, je dois me rappeler qu'un ID de pied de page est colophon et la classe est site-pied de page, copie. Aller à la feuille de style, et quelque part ici, nous avons des couleurs override. Je vois que j'ai fait une erreur, je vais supprimer cela et coller la couleur de fond ici. Faites les crochets comme ainsi et footer-id du colophon et la classe du site-pied de page. Maintenant, laissez-moi vérifier si cela va fonctionner, sans déclarer l'attribut important. Rafraîchir, oui, ça marche. C' est génial et maintenant nous pouvons travailler sur les widgets. Chaque fois que vous voyez Meta dans WordPress, vous pouvez prendre un pari que c'est un widget et je vais vérifier ici avec l'Inspecteur Web. Oui, voici l'élément de côté qui est déclaré comme zone de widget-area. Dans certains thèmes WordPress, il y avait une barre latérale à gauche ou à droite, qui est également widgetisée, où vous pouvez mettre ces morceaux de code, un des éléments fonctionnels très pratiques qui vont améliorer votre thème. Je vais aller au tableau de bord parce que je n'ai pas besoin de tous ces widgets. Ici dans l'apparence aller à Widgets, et je vais supprimer tous ces comme ça. Jetez un oeil à mon croquis, maintenant ici j'ai quatre listes, listes de texte, et certaines d'entre elles ont des liens. Ce dont j'ai besoin fondamentalement, je ne peux pas trouver parmi ces widgets ici, je vais utiliser le HTML personnalisé, qui est un widget très pratique où vous pouvez créer n'importe quel contenu en HTML directement pour votre pied de page ou les barres latérales, selon l'endroit où se trouve votre élément Aide. Pour mon pied de page avec widget, je vais mettre dans le HTML personnalisé et widget, je n'ai pas besoin d'un titre pour cela. Je vais juste déclarer un élément flex parent, ça va être très original, footer-flex. Ensuite, à l'intérieur vont avoir quatre éléments div. Le premier sera Copyright, le second, Class, ce sera l'adresse. Le troisième, il suffit de les copier pour les mettre à l'intérieur, puis changer ce contact et les langues parce qu'un jour cette page sera en allemand et en anglais, va enregistrer ceci entre les deux et ensuite déclarer les listes. Ce n'est pas vraiment à quoi je voulais qu'il ressemble, donc après beaucoup de modifications, j'ai joué avec ce code et avec les widgets autour. J' ai trouvé une solution pour que le pied de page ressemble à un 1 et un 2, et c'est ici dans le code CSS, je dois changer plusieurs choses. Par exemple, ici pour le flex, je dois créer de l'espace entre et je dois aussi diminuer la taille de la police. Je vais le mettre à 0,7 EM. En outre, le div footer-flex a un rembourrage de 12 pour cent et il a une largeur. Je vais mettre ici 300 pixels, et aussi très important alignement auto pour auto-démarrer. Cela va pousser le texte dans la div elle-même pour être aligné avec la ligne supérieure et le footer-flex va avoir une ligne au centre, le centre vertical du pied de page. Ici aussi, dans l'UL, je dois déclarer la largeur des 200 pixels. Je pense avoir déclaré tout ce que j'ai oublié. Je vais enregistrer ceci, pousser sur le serveur 2, puis l'actualiser. Il a encore besoin d'un peu d'ajustement, par exemple, il n'est pas aligné avec le début du contenu ici à gauche. C' est parce que cet élément, aussi, je vais juste inspecter l'élément ici. Le copyright a également un rembourrage des deux côtés, donc je vais le supprimer en allant à CSS et en déclarant le div footer-flex, premier enfant n'est pas autorisé à avoir un rembourrage. Rembourrage du premier enfant 00, rafraîchissons. Maintenant, cela semble mieux, il y a un problème, auquel je pensais plus tard, et c'est la réactivité. Si je regarde cela sur l'iPhone, sur le smartphone, je vais voir seulement deux des listes, donc je suis obligé de créer deux widgets avec du HTML personnalisé. Cela va changer ici, donc je vais juste créer un autre widget, HTML personnalisé et copier ces deux dernières listes, qui est, je crois que le contact et les langues, oui. Je dois fermer la div et ensuite coller ceci ici, mais je manque cette div de départ, qui est le footer-flex. L' éditeur aime ça, pas d'erreurs, enregistrer et c'est fait donc je vais rafraîchir ici. Quand je pousse cela aux dimensions du smartphone, vous pouvez voir que j'ai les quatre listes ici empilées les unes au-dessus des autres. Je dois juste déclarer que peut être une autre classe à ce pied de page, et pour ce faire, je vais à nouveau vers CSS. Déclarer une autre classe footer-flex-1 que je vais appliquer au premier des widgets personnalisés. Je dois préparer ceci ici et copier footer-flex-1 dans toutes les déclarations sauf celle-ci. C' est le premier qui n'aura pas le rembourrage et le pied flex-1 UL. Je crois avoir tout couvert maintenant au footer-flex-1, donc je vais mettre à jour ceci sur le serveur et vérifier ce que j'ai fait ici. Oui, j'ai oublié de changer la classe dans le widget, allons-y et déclarons ceci ici, footer-flex-1, save, done et voilà. Maintenant c'est le pied de page comme je voulais qu'il ressemble. Je vais ajouter des icônes pour les langues à un moment donné, mais pour l'instant, je veux me débarrasser de cette clause de non-responsabilité ici en bas, et je ne peux le faire que dans le modèle. C' est là que nous allons voir ce but du thème enfant. Et ce que je vous ai dit que vous pouvez changer la structure du thème en copiant fichiers du thème parent dans le thème enfant et en changeant les fichiers là. Je me dirige vers FileZilla et ouvre le thème 2019, que j'ai sur mon ordinateur, sinon, je devrais aller à mon thème parent sur le serveur pendant que j'aime l'avoir ici sur mon ordinateur, donc je peux facilement copiez mon fichier de pied de page jusqu'au thème enfant. Je vais éditer ça. Ici, c'est le pied de page Id, classe Colophon site-pied de page. Si je jette un coup d'oeil, cette clause de non-responsabilité ici va vérifier les outils web, je vais remettre cela sur le côté droit pour que je puisse avoir une meilleure vue. Cet élément ici est le côté que nous venons de personnaliser, mais c'est le site-info et dans le site-info c'est le site-name de classe, puis l'empreinte de classe. Je pense que c'est ce que je dois supprimer, donc div classe site-info et l'empreinte de lien, class-empreinte. C' est là que commence la fonction suivante, je ne vais pas toucher celle-ci. Je vais juste supprimer ici, l'enregistrer sur le serveur et jeter un oeil ici dans le navigateur, parfait. 7. Conseils bonus :: Voici un conseil bonus pour ceux qui, comme moi, ont besoin d'implémenter des drapeaux d'icônes ou icônes de drapeau à côté de ces deux liens ou n'importe où ailleurs dans le code. J' ai cherché sur Internet et trouvé ici sur GitHub, un grand dépôt par lipis, qui est un développeur web à l'application Wire et Google, et il a créé ce paquet qui est appelé flag-icon-css. Vous pouvez installer ce paquet avec vos outils de gestion des tâches si vous avez un gros projet et si vous travaillez avec JavaScript, mais nous allons l'implémenter vraiment à pied parce que notre projet n'est pas énorme et nous pouvons l'implémenter simplement avec une ligne de code HTML. J' ai téléchargé ce fichier, le fichier zip. C'est ici. Je l'ai décompressé, et à l'intérieur il y a le CSS, dont je vais avoir besoin et les drapeaux. Parce que je n'aurai besoin que des rectangles, je ne vais pas télécharger le dossier entier. Je vais créer une copie ici et l'appeler drapeaux, ouvrir puis télécharger un rectangle, icônes de drapeau, SVG là-haut. En attendant, je vais jeter un oeil au CSS, et il est là. Ce sont les icônes, les SVG, les carrés et les rectangles. Cette ligne ne considère apparemment que les icônes carrées, donc je vais copier que ceci. Copiez et collez-le dans mon fichier CSS de thème enfant. Bien sûr, je vais commenter ceci si je peux le trouver plus tard et le coller ici et enregistrer. Ensuite, j'ai besoin du drapeau américain, je vais le trouver ici, et je n'ai pas besoin du carré, j'ai besoin du rectangle. Copiez ceci. Eh bien, SVG lien et collez-le dans mon CSS. Ensuite, j'ai besoin d'un drapeau allemand, et je vais le trouver ici, le rectangle, copier-coller. C' est le fichier de style CSS, que je dois confirmer que j'ai changé. Oui. Maintenant, nous avons les drapeaux ici. Le CSS est dans notre style, et maintenant nous avons besoin de cette ligne de code HTML, qui est ici. Le plus bas, celui ci-dessous est pour les drapeaux carrés. J' ai besoin des drapeaux rectangulaires. Je vais faire des widgets, et à mon deuxième widget où sont les liens vers les langues, vers les versions linguistiques. Je vais coller le HTML ici et changer la domination ici en DE pour l'Allemagne. Coller à nouveau et changer aux États-Unis pour les États-Unis, parce que les lecteurs de cette page vont également être aux États-Unis d'Amérique, sauver, fait. Voyons voir. Rafraîchir. Ils sont censés être là. Vous voyez comment le lien s'étend, mais ils ne s'affichent pas. Que s'est-il passé ? Je vais te montrer ce que j'ai oublié de faire. Je peux vous montrer ici. Vous voyez l'URL ? C' est la même chose ici. Chemin d'accès au fichier. Bien sûr, ici, je dois sortir du dossier ici et aller dans le dossier drapeau ici le style est dans la racine, j'ai juste besoin d'aller dans le dossier drapeau. Suppression de ces deux, enregistrez, mettez sur le serveur et actualisez, et voilà, ils sont là. Je pourrais prendre la peine de supprimer ce lien soulignant, mais ce serait un peu trop sur la portée de cette courte astuce. J' espère que vous avez vu comment vous pouvez modifier avec le thème enfant et changer le look soit en éditant les fichiers PHP, les fichiers de thème parent que vous copiez dans votre thème enfant ou à travers la zone de widget, et bien sûr dans votre style CSS fichiers. C' est notre site Web maintenant, et la prochaine nous devons traiter de l'en-tête et le contenu. 8. Personnaliser votre contenu : partie 1: Afin de personnaliser davantage notre page d'accueil, jetons un coup d'œil au croquis. Ici, c'est. Voici l'en-tête, puis le contenu et le pied de page que nous venons de personnaliser. Rappelez-vous, nous avons parlé des fichiers de modèle, de l'en-tête php, puis de tous ces modèles pour le contenu. Notre post a été montré sur l'index php. Maintenant, nous utilisons la page php parce que nous mettons le paramètre de lecture comme une page statique pour notre page d'accueil et l'élément du site avec les widgets dans ce thème est intégré dans le pied de page php. Maintenant, comment pouvons-nous savoir que nous utilisons le modèle de page php pour notre première page ? Jetons un oeil dans le navigateur. Voici notre installation WordPress, notre tableau de bord et la page que nous avons créée. Nous regardons l'aperçu et ici sur le tableau de bord il y a le bouton Modifier la page. Il ne dit pas éditer le post, juste la page. Aussi, nous pouvons vérifier ici dans la source. Si nous regardons la clause body, il est indiqué accueil, modèle de page par défaut, page et page ID. Maintenant, je peux être sûr que j'utilise l'un des modèles PHP de la page. Habituellement, il y en a plusieurs, mais maintenant nous n'en avons qu'un. C' est une page php, je suis sûr. Lorsque vous regardez notre croquis, vous pouvez identifier que nous n'avons pas de titre ici. Ça ne ressemble pas du tout à notre croquis. Modifions ceci dans l'éditeur Gutenberg. Voici le titre et je peux le supprimer comme ça, mettre à jour, et jeter un oeil. Il est parti. Super. Ce que je peux faire maintenant est juste de continuer à éditer cette page sans le titre. Pour ça, j'ai besoin de quelques images. Le premier bloc était une image avec du texte. Je vais au tableau de bord et je vais télécharger les images que j'ai préparées pour ce site Web et c'est ici dans le bouton média. Je vais juste dire ajouter de nouvelles images, sélectionner les fichiers. Ça va être celle-là, tout ça et un autre côté ouvert. Merveilleux. Maintenant, vous pouvez attendre ici, je serai de retour quand ils seront téléchargés. Ça va prendre un certain temps. Super. Nos images sont téléchargées maintenant, nous pouvons les trouver ici dans la bibliothèque. C' est là que vos fichiers multimédias vont être organisés. Mois après mois, vous pouvez les voir dans une liste ou dans une grille. Eh bien, je retourne à la page. Laisse-moi vérifier ici. Modifier la page et je construis le premier bloc. Ce sera une combinaison de médias et de texte. Je vais enlever celui-ci et celui-ci. Tous. Il suffit de cliquer ici sur les petits points, supprimer bloc. J' en crée un nouveau et j'ai besoin de médias et de textes. Je veux qu'il soit pleine largeur sur la page. Ici, à la bibliothèque, j'ai besoin de cette photo. Sélectionnez. Ensuite, je veux changer la couleur d'arrière-plan et voici mon paragraphe. Le premier va être un cap et ça va être comme ça. Je vais dire bioinformatique, quelque chose comme ça. Alors j'ai besoin d'un autre dollar pour être un paragraphe et j'ai juste besoin d'un texte factice. Ici, dans le générateur de texte, copier, coller et mettre à jour. Jetons un coup d'oeil. C' est notre premier bloc, une image avec un paragraphe et un titre, peut-être mettre le titre étant plus grand. Mais maintenant, je ne sais pas combien est la distance entre cela et l'en-tête. Si vous vous souvenez dans le croquis, ils sont juste après l'autre. Laissez-moi essayer de le tester avec l'inspecteur Web. Je vais vérifier ça. Ce sera un en-tête et je vais lui donner une couleur de fond. Vous voyez ici il y a toujours cette lacune qui est censée être une place pour le titre. Maintenant, je peux aller et faire la hauteur de l'en-tête, mettre huit rem. Mais il y a encore cet écart. Bien sûr, je peux faire du piratage et revenir ici dans les mottos de la page d'édition et dire, « Je veux que ce bloc ait une classe CSS », pas de titre comme ça. Ensuite, appelez une classe CSS dans la feuille de style et dites, mettez la marge supérieure de moins cinq rem ou quelque chose comme ça. » Mais je ne veux pas changer cela chaque fois qu' il y avait une page responsive ou qu'il y avait un en-tête différent. Je veux avoir un nouveau modèle complet pour la première page où je n'ai pas à m'inquiéter s'il y a un titre, si l'ont supprimé, et si j'ai mis assez d'unités moins sur la marge supérieure de ce premier paragraphe. Je ne vais pas faire ça. Je vais créer un tout nouveau modèle. C' est comme ça que nous allons faire. À des fins de démonstration, je remets un titre de bioinformatique, voilà ce que ce site Web va être à propos. Mettre à jour, afficher la page. Ici, c'est. Le titre dont nous n'avons pas besoin. Je vérifie les outils web. Ce n'est pas le H1, c'est l'en-tête, l'élément entier dont nous n'avons pas besoin. Il a un en-tête d'entrée de classe. Je suppose que puisque nous utilisons le modèle de page php, jetons un coup d'oeil. Dans notre client FTP, ce n'est pas ici dans notre thème enfant. Nous devons passer au thème des parents 2019. Voici tous nos modèles. Voici la page php, voir dans notre éditeur et voici. Il est dit, « Le modèle pour afficher tous les messages uniques. » Eh bien, un contenu de page est traité comme un seul message parce qu' il ne va pas changer, ce ne sera pas une liste de publications chronologiques, c'est juste ce seul billet qui est censé être un site statique, qui ne va pas changer. Ensuite, c'est simple, obtenez l'en-tête, montrez-moi l'en-tête. Ensuite, voici la zone de contenu de la section, le contenu de notre site principal. Ensuite, la célèbre boucle WordPress, il est dit, Alors qu'ont post, le poste. Cela signifie, si vous avez des messages ou pendant que vous avez un post à montrer, n'importe quel contenu, alors montrez-moi. Ici, nous ne trouvons pas notre titre, nous trouvons cette partie get template. Cela signifie obtenir moi cette partie qui est dans le dossier, les parties de modèle, le contenu du sous-dossier, dans la page de contenu du fichier slug, puis afficher les commentaires. Mais nous ne allons pas l'utiliser sur notre site Web et cette présentation du contenu et obtenir le pied de page. C' est ça. Il s'agit d'un modèle de page simple. 9. Personnaliser votre contenu : Partie 2: Qu' est-ce qu'on va faire maintenant ? Nous récupérons cette partie de modèle dans notre client FTP. Voici les parties du modèle de dossier et voici le contenu. Dans ce contenu, il est dit, c'est pour montrer l'extrait. C' est pour le cas où nous n'avons pas de contenu sur cette page. C' est la page de contenu qui nous intéresse pour notre page php. Il s'agit du contenu d'un seul article, un seul article que nous avons écrit, et c'est le contenu général. C' est, par exemple, si nous avons 20 messages, il va montrer 20 messages. Jetons un coup d'oeil à cette page de contenu qui est si intéressante pour nous. Nous sommes à la recherche de l'en-tête et le voilà. Il dit ici partie de modèle pour afficher le contenu de la page dans la page php. Cela signifie que la page de contenu php est un petit module de la page php. C' est comme une petite partie de Lego de toute cette maison de page que nous construisons avec des legos. Voici l'en-tête dont nous n'avons pas besoin. Je ne vais pas le supprimer ici parce que je vais ensuite le ruiner pour les autres pages qui veulent avoir un en-tête. Je vais juste copier ça. Pour cela, je crée ici un nouveau fichier et l'appelle un. Je ne suis pas très imaginatif avec ça. Je suis juste en train de copier et d'agrandir. Alors je vais l'ouvrir et la voilà, vide. Maintenant, je peux juste calmement sélectionner tout ça, copier, et le mettre ici. C' est essentiellement la même page de contenu, juste la page de contenu 1. Je n'ai pas besoin de cet en-tête ici. C' est pour ça que je vais l'enlever. Sauvegardez. Nous avons changé ce petit module, fermez-le et revenons ici, confirmez que nous l'avons créé. Maintenant, nous avons ce petit module que nous avons créé pour les pages qui n'ont pas ce titre, cet en-tête avec le titre dedans. Maintenant, nous devons retourner à cette page php et en créer une copie. Je fais glisser cette page vers le bas sur mon ordinateur pour l'enregistrer et la faire fonctionner. Je l'ouvre dans mon éditeur et crée un fichier complètement nouveau, qui va être notre nouveau modèle de page personnalisé pour les pages sans titre. La seule chose dont j'ai besoin pour cela est un commentaire qui dit le nom du modèle. Je vais appeler cette page, pas de page de titre. Désolé, faute de frappe comme d'habitude. Fermez le commentaire et fermez les crochets. Maintenant, je vais enregistrer ça ici et l'appeler pas de page de titre, pour l'instant, on pourrait changer ça par la suite. Je l'sauvegarde aussi ici et la seule chose que je dois faire maintenant est de copier tout cela à partir de la page, copier, et de le mettre ici comme ça. Maintenant, parce que voici les crochets de fermeture, je dois le supprimer ici et maintenant j'ai ce modèle. Mais il va à la page de contenu et j'ai juste besoin de la page de contenu 1, comme ça. Je vais fermer tout cela et juste télécharger le, désolé, je dois rafraîchir ici. La page sans titre, il suffit de le télécharger ici dans mon thème de graphique. Je veux juste vérifier une chose de plus ici avec le modèle, page 1 qui est a un contenu. Oui, c'est le cas. Voyons maintenant ce qui s'est passé dans le navigateur. Oups. C'est notre page. Rafraîchissons. Maintenant, vous pouvez voir ici dans les attributs de page, nous avons un modèle à choisir. Le second est celui que nous avons créé. Ça s'appelle No Title Page. Si je mets à jour ici et voir la page, wow, je l'ai maintenant sans le titre. C' est merveilleux. C'est ainsi que vous créez un modèle de page personnalisé et le téléchargez dans le thème de votre graphique. Vous avez juste à prendre soin des parties de modèle que vous devez changer si elles sont dans votre code de la page par défaut fichier php. Maintenant, construisons quelques blocs. Je vais cliquer ici sur la page d'édition et ne me dérange pas ce titre de l'annonce. C' est juste là. Je ne peux pas l'enlever pour l'instant. Je suppose que le tableau de bord et l'éditeur ont leurs feuilles de style CSS séparées et je ne vais pas être dérangé par cela maintenant. J' ai juste besoin d'un nouveau bloc qui va être en tête, produits, puis il va être centré et mises à jour. Ensuite, j'ai besoin d'un nouveau bloc avec trois colonnes. J' ai créé le bloc de colonnes et je vais devoir le sélectionner ici et augmenter le nombre de colonnes à trois. Je veux aussi que ce soit toute la largeur sur la page. J' ai préparé un texte ici, vais juste le copier. Copiez et collez, puis j'ai besoin d'une image. Ici, non, ici. Il est un peu difficile de sélectionner des blocs dans cet éditeur de Gutenberg. J' espère qu'ils vont trouver une certaine optimisation. Mais pour l'instant, je viens de mettre une image ici et vous voyez qu'elle a inséré l'image au-dessus du paragraphe et j'en ai besoin ci-dessous. Je clique sur cette flèche. Je vais en choisir un dans la médiathèque. Ils ne sont pas jolis, mais ils vont juste bien pour les fins de démonstration, ajouter la légende, copier et coller. Vous pouvez voir ici que je peux lier une image à un fichier multimédia, autre fichier multimédia et une page de pièce jointe et une URL personnalisée. Bien sûr, je peux toujours ajouter une classe CSS supplémentaire, mais je vais juste laisser ceci comme ça et ensuite continuer à le faire pour le bloc suivant aussi. Je te verrai quand on aura fini avec ce bloc. 10. Personnaliser votre contenu : Partie 3: Donc c'est notre produit, bloc de trois colonnes. Comme vous pouvez le voir, je peux difficilement lire cette légende, donc je vais changer ça. Je vais ici pour éditer la page, et en sélectionnant cette image comme ça, et en ajoutant une classe CSS avancée ici, nous allons dire image produit, mise à jour. Juste pour vérifier ici, cet élément devrait être oui, légende figée comme d'habitude. Je me dirige vers mon fichier CSS, puis j'ajoute cette image de produit de classe, puis la légende de fig, bien sûr, et dire couleur blanche, enregistrer, mettre à jour sur le serveur et, vérifier dans le navigateur. Vous voyez, je n'ai changé que cette image particulière. Donc je dois monter d'un niveau, et c'est tout le bloc. En allant ici et en affectant ce bloc une classe CSS supplémentaire, je vais l'appeler bloc de produit, mise à jour. Allez à mon style CSS, puis dites bloc de produit. Enregistrez, mettez à jour et enregistrez dans le navigateur. Oui, maintenant les trois légendes sont visibles en blanc. Ce titre, je n'aime pas ça. C' est un peu trop à gauche, donc je dois vérifier dans ce bloc si je peux mettre une marge supplémentaire sur la gauche. Nous sélectionnons donc celui-ci. J' ajoute ici une classe de produit, bloc, titre. Il faut être assez précis à propos de cette mise à jour. Allez à mes feuilles de style, puis à droite, produit-bloc-titre. Disons margin-left, il va être cinq rem, enregistrer et mettre à jour, et vérifier dans le navigateur. Rien ne s'est passé parce que j'ai probablement oublié de mettre ici la règle importante. Il doit y avoir une autre décision qui annule ce style CSS de l'éditeur, donc mettre à jour. On y va. C'est au milieu. Je pourrais aussi faire le style CSS de supprimer cette ligne ici. C' est probablement avant élément. C' est celui-là. Je vais juste copier le style et dire copie. Dis ici, n'affichez aucun. Peut-être mieux mettre. Non, je ne veux pas de ces lignes n'importe où sur mon site. Donc oui et mise à jour, est parti. Vous voyez que c'est assez génial comment vous pouvez simplement ajouter une classe supplémentaire dans un élément d'un bloc ou le bloc lui-même. Ensuite, allez simplement à la feuille de style et stylisez cette classe. C'est ça. 11. Personnaliser votre contenu : partie 4: Le bloc suivant est assez simple. Nous avons juste besoin de deux colonnes, une avec le texte, l'autre avec le bouton. Ici, je vais ajouter une nouvelle, et deux colonnes. Laisse-moi vérifier s'ils sont deux. Oui, ils le sont. Je veux qu'il soit pleine largeur, et je vais mettre un cap, H3. Il va dire : « Vous voulez en savoir plus sur notre entreprise. » Ici, j'ai besoin d'un bouton et dans le texte, je vais mettre En savoir plus. Je veux que la couleur de fond soit plus turquoise et plus lumineuse, donc mettre à jour. Ils n'aiment pas cette combinaison, ils pensent que le contraste est trop vieux pour lire, mais je vais le laisser pour l'instant. Ici, je veux mettre le lien vers notre page À propos. J' ai créé une page factice sur nous juste pour avoir un détenteur de place, voir il n'y a rien dedans. Mais j'ai besoin de cette URL ici, copier, revenir à la première page, éditer. Où est le bouton ? Ici, va mettre le lien URL, donc mettre à jour. Je veux que ce bloc ait une couleur de fond gris clair, et je peux le faire ici. Je dois mettre une classe CSS avancée, je vais mettre plus de bloc, mettre à jour, tête à ma feuille de style. Dans la feuille de style, je vais ajouter la classe plus bloc, et dire couleur d'arrière-plan, gris clair, enregistrer et mettre à jour, et vérifier dans la page d'affichage du navigateur. Que s'est-il passé ? C'est gris clair, mais je ne peux rien lire et le bouton est bien là-haut. Alors revenez à cette feuille de style et dites que plus de bloc doit également avoir une couleur de gris, mettez à jour cela et vérifiez, oui. Mais je voulais aussi avoir un rembourrage haut, haut et bas, mais haut. Rubrique 2.2, courir. Voyons à quoi ça ressemble. Oui, bouge trop vite, mise à jour. Ouais, ça a l'air un peu mieux, mais peut-être un peu moins de rembourrage, et je veux que ce bouton soit plus sur la droite. J' ai besoin de ce cours ici. Je pense que ce sera, oui, bouton de bloc WP. Je vais juste dire modifier en HTML, et copier ce bouton de bloc WP, copier, retourner à la feuille de style et puis dire que le haut de rembourrage sera 2.1, et le fond de rembourrage sera 1rem. Ensuite, j'ai besoin de cette classe de bouton de bloc WP plus. Il faut qu'il reste une marge, disons 4rem. Voyons à quoi ça ressemble maintenant. Rafraîchir, cela semble un peu plus acceptable. Mais vous savez, il y a beaucoup de travail de détail à faire, aurait un état et toutes ces choses plus agréables comme je veux avoir plus d'accent dans ce bloc, etc Le bloc suivant est juste une copie de celui-ci. Il a un texte à gauche et une image à droite. On va faire exactement ça. Voici notre premier bloc. Je vais le sélectionner ici, et dans ce menu, je vais sélectionner Dupliquer. C'est ça. Je dois changer les médias pour montrer sur la droite, et je dois aussi changer cette image ici, sélectionner, assez facile, et puis je veux pousser tout le chemin en dessous de ce bloc plus. J' ai oublié ici, je voulais empiler les uns au-dessus des autres sur mobile, afin que les gens puissent lire la page de vue. Comme je l'ai deviné, nous avons ce nouveau bloc sympa, mais ce bloc ici est celui-ci. Cette div a une marge. En outre, ce div a une marge, celui-ci a un fond et celui-ci a un sommet. Maintenant, le ci-dessus est le plus bloc, nous l'avons déjà dans notre feuille de style. Je vais juste dire ici plus bloc, j'ai besoin de la marge inférieure pour être zéro, et juste au cas où je vais mettre important. Je ne veux pas que ce soit en train de jouer avec ça. Maintenant, je dois y retourner, abord je vais sauver ça, oui, et je dois y retourner. Tu verras si je me rafraîchis, c'est toujours là. Mais je peux vous montrer ici dans l'élément d'inspection. Ce div n'a plus de bas de marge, mais celui-ci a un haut de marge. Qu'est-ce qu'on fait ? Nous ajoutons juste une classe à cette dernière ligne que nous venons de faire, donc je la sélectionne ici et dis va être, mise à jour. Dans la feuille de style, mettez l'anémone à fonctionner, et dites que le haut de la marge sera zéro et que cela sera important. Vérifions. Oui, FileZilla nous n'avons pas oublié, voir la page, oui. C' est à ça que ça doit ressembler, génial. Nous devons juste ajuster un peu entre créer des blocs, créer classes CSS supplémentaires pour eux et travailler sur eux dans votre feuille de style, et n'oubliez pas la règle importante. Maintenant, le dernier bloc va être le Contact et les Google Maps. 12. Personnaliser votre contenu : Partie 5: Pour créer notre dernière ligne de contenu sur la première page, nous avons besoin d'un formulaire de contact et de Google Maps. Nous faisons une petite excursion ici, nous ajoutons un plugin qu'il s'appelle, Formulaire de contact 7. Un plugin très populaire car il est intégré à tant d'autres services. Vous pouvez avoir une reprise. Vous pouvez l'utiliser avec PayPal et Stripe. Plugin très, très polyvalent. Donc je vais l'activer. Ici, en allant dans les Paramètres, j'ai le formulaire de contact 1, je peux laisser ce nom ici parce que je vais avoir un seul formulaire de contact pour l'instant. Je copie le code court ici et le construit dans ma première page dans la colonne de gauche. Donc, j'ajoute ici un nouveau bloc, deux colonnes, et je vais juste taper le code court ici à l'intérieur de la colonne de gauche, puis vérifier parce que je veux qu'il soit pleine page, bien sûr, pleine largeur, désolé, et mise à jour. Si je jette un coup d'oeil ici, voici notre forme, super. C' est juste un peu, vous savez, les champs sont trop grands et ces étiquettes vous devez généralement les laisser au-dessus. Il est très utile pour l'accessibilité pour les personnes qui utilisent le clavier pour naviguer sur le site, juste pour laisser cette étiquette ci-dessus. Mais pour ce site, je pense que ça va aller si je le mets juste à l'intérieur comme un texte d'espace réservé. Pour ce faire, j'accède à nouveau au tableau de bord ici dans Contact, Formulaires de contact et Modifier. Je veux que ce texte soit ici dans cette zone en tant que détenteur de place, je peux supprimer celui-ci, puis utiliser Texte comme formulaire de champ. Ça va s'appeler, ton nom. Ton nom. Valeur par défaut, les textes que j'ai copiés d'en haut. Utilisez ce texte en tant que détenteur de la place du champ. Je vais ajouter un attribut ID car plus tard, si je construis un autre formulaire de contact sur ce site, j'aimerais avoir la possibilité d'appeler uniquement ce champ spécifique. Ça va être, ton nom, « Insérer Tag ». Ici c'est, je peux supprimer celui-là. Pour l'e-mail, c'est à peu près la même chose. Copier, je peux supprimer ceci et mettre Email. Champ obligatoire, ce sera votre e-mail. Valeur par défaut, celle que j'ai copiée d'en haut. Utilisez ce texte comme espace réservé. ID, votre e-mail, « Insérer une balise ». Je peux supprimer celui-là. Le formulaire dit qu'il y a une sorte de conflit. Je ne sais pas, tout va bien. Comme ça, Sauvegarder la forme, nous sommes de retour. Sujet, comme ça. Oui, je dois faire est ici aussi. Texte, et ce ne sera pas un champ obligatoire. Ça va juste être sujet. Valeur par défaut, sujet. Utilisez ce texte. Sujet, « Insérer la balise » et supprimer ici. Alors le dernier, c'est votre message. Je vais juste supprimer ici. Zone de texte, exactement. Je vais le laisser ici. Valeur par défaut, votre message. Utilise ça. Je ne vais pas utiliser un attribut d'ID texte. Voici donc notre nouveau formulaire Save, et jetez un oeil à la page. Laisse-moi voir. Ça a l'air différent maintenant et je dois juste le coiffer ici. Pour styliser ce champ, je vais juste ouvrir mes outils Web ici et vérifier. C' est ma forme, classe de formulaire, wcpf7-form, vraiment sympa. Chacun des éléments est ici dans un paragraphe, l'étiquette et la classe span, et dans la classe span est l'élément d'entrée que je veux styliser. Donc je vais ici, je vais juste pousser ça pour que ce soit plus facile à lire. Type d'entrée texte et cetera. Je veux que l'arrière-plan soit gris, donc je vais juste écrire aaa. Je ne veux pas de frontière ici, aucune. C' est ça. Je vais copier ce premier texte [inaudible]. Assurez-vous de tout sélectionner. Revenez à la feuille de style, entrez ceci, puis copiez cette classe à partir du formulaire. Modifier HTML, et la classe est ici. Je copie ceci, le mets dans ma feuille de style en tant que classe, et bien sûr c'est une faute de frappe comme ça. Je vais le sauvegarder ici et ensuite revenir parce que je veux aussi changer cette couleur ici. Ça va être aussi gris. Je vais juste le remonter un peu comme ça, peut-être un peu plus haut. Oui. Puis je voulais que ce soit Source Sans Pro et sans-serif, et la hauteur de ligne cinq. Je dois copier tout ça. Pas tout, mais oui, j'essaie ici. Copiez, puis éditez ici et ajoutez la classe. Ok, sauve-le. Confirmez. Retournez au navigateur. En outre, je veux changer la taille de la police. Ça va être 8.8rem. Je vais copier ça ici. Copiez et collez-le ici, wpcf7-form comme classe. Bien sûr, je dois le mettre en face de chacun de ces éléments. Ne laissez personne vous le dire différemment. Lequel, bien sûr, il est plus facile de le faire dans SAS, mais nous faisons les choses manuellement ici. Oui, je n'ai pas besoin d'écrire ceci ici à nouveau, je vais juste ajouter font-size, rem et tout ce qui n'apparaît pas, va probablement être une règle importante. Voyons ce qu'on a fait jusqu'à maintenant. Rafraîchir. On dirait que je voulais que ça ressemble. Ok, peut-être pas le bouton, mais vous comprenez le point. Il vous suffit d'ouvrir vos outils Web, choisir les éléments, d'afficher leurs classes, puis de les modifier dans votre feuille de style. Allons à Google Maps, notre deuxième colonne. Pour intégrer Google Map ici dans notre site Web, nous allons simplement sur Google Maps, entrez l'adresse de l'entreprise que nous voulons afficher, puis peut-être en cliquant sur ce marqueur, puis Partager. Laisse-moi juste vérifier si ça va marcher, parfois ça ne marche pas et je ne sais pas pourquoi. Nous ne pouvons pas intégrer la carte, ça n'a pas fonctionné maintenant. Je vais rafraîchir ceci comme ça, puis cliquez sur « Partager », incorporer une carte, et maintenant cela a fonctionné. Donc ici, je peux même choisir, je vais copier ceci, « Copier HTML », puis choisir même la taille. Je vais mettre la taille que j'ai vu dont j'ai besoin. C' est 650 largeur et 595 hauteur, puis « Copier HTML » à nouveau avec les dimensions. Accédez à Notre page, Modifier la page et éditez la colonne. Donc ici, je clique sur ce bouton Ajouter un bloc et j'ai une colonne sélectionnée et je veux immédiatement ajouter une classe CSS supplémentaire, je vais l'appeler Google map, juste pour avoir la possibilité de styliser cette carte. Je vais mettre à jour ici. Ensuite, ici, je vais choisir le bloc HTML personnalisé. Donc, comme ceci, entrez le code à partir de la page Google Maps, puis Mettre à jour. Voir la page, et voici notre carte. Nous pouvons le styliser à nouveau avec notre classe CSS supplémentaire, mais fondamentalement maintenant nous avons ajouté Google Maps avec l'adresse de l'entreprise. C' était tout avec la personnalisation du contenu, nous passons à l'en-tête. 13. Personner le menu de logo d'entête: Pour personnaliser notre en-tête, nous avons bien sûr besoin d'un logo ici. J' ai préparé une petite démo ici du logo par défaut pour ce thème. Je vais personnaliser une identité de site et ici je vais sélectionner un logo dans la médiathèque. J' ai téléchargé une image où ils sont trouvés en tant que modèle sur Internet, et je vais la sélectionner. Il est écrit ici, « Recadrer l'image », publier, fermer le personnalisateur, et c'est le logo entier pour le thème 2019. Comme je l'ai compris, le thème met l'accent sur le texte et l'écriture, donc, c'est génial pour les journalistes, les blogueurs et les auteurs, mais pour mon site Web et les fins de branding, j'ai vraiment besoin d'un logo plus grand. Je retourne au personnalisateur pour supprimer celui-ci, supprimer le logo, publier à nouveau, puis je me dirige vers la médiathèque pour ajouter un nouveau fichier, mon logo SVG. J' aime SVG, c'est un fichier vectorisé et il ne perd pas de qualité lors de la mise à l'échelle, mais WordPress ne l'aime pas ici. Il dit, ce n'est pas autorisé pour des raisons de sécurité, ce qui est génial parce que quelqu'un s'occupe de la sécurité des fichiers dans WordPress, mais cela signifie que je vais devoir utiliser dans un plugin, et j'en ai trouvé un qui s'appelle le support SVG. Ici, c'est. Allez l'installer et l'activer. Aller aux paramètres, si je jette un coup d'oeil, je ne vais rien changer. Il est dit, « Restreindre aux administrateurs », ce qui est bon, seulement je suis autorisé à traiter les SVG et à les télécharger, donc, c'est tout. Je retourne à la médiathèque, et en ajoutant à nouveau mon logo SVG, ouvert, et voici, ça a fonctionné. C' est bien. Pour revenir à la personnalisation, l'identité du site, sélectionnez « Logo », voici, sélectionnez, et il est dit, « Recadrer l'image  », mais il est dit, « Il y a eu une erreur. Nous n'aimons pas encore ça. » Eh bien, j'ai cherché la raison de cela et j'ai trouvé que dans le thème parent 2019, dans le fichier PHP fonctions, il y a une fonction tenant compte de ce logo personnalisé, je vais le trouver ici, logo personnalisé. Il dit, « La hauteur est de 190 pixels, la largeur est de 190 pixels, » donc, c'est un carré, puis il y a la largeur Flex définie sur false, il n'y a pas de largeur flexible, et il n'y a pas de hauteur flexible, donc, je dois changer ceci. J' ai regardé à travers les forums d'organisation WordPress et trouvé dans les codecs, il y a ce code ici que je vais copier, et je l'ai mis comme une réponse à de nombreuses questions de personnalisation du logo 2019, donc, je vais à mes fonctions PHP dans le thème enfant ici, et je vais ajouter ce code et l'adapter à mon thème. Donc, ici sous cette fonction de thème enfant WP file d'attente, qui se termine ici avec ces crochets, je vais coller cette fonction et puis changer le nom, je vais l'appeler logo personnalisé L-yaks, et ça va être 100 pixels de haut et 400 pixels de large. La largeur flexible est définie sur true et je veux aussi que la hauteur flexible soit réglée sur true. Comme ça, et c'est tout. Je crois que je vais supprimer ça. Oh, je dois changer ça ici, bien sûr. C' est ma fonction de logo personnalisé L-yaks. Préfixe, oui, je pense que c'est tout. Je vais enregistrer ceci et le télécharger sur le serveur, et jeter un oeil ici. Encore une fois, personnalisez, identités du site, sélectionnez « Logo », « fichier SVG », et je vais juste sauter le rognage. C' est ça, publiez, fermez, et nous voilà. Nous avons ici ce petit logo qui n'est pas du tout ce dont nous avons besoin. Nous avons également le titre du site que je ne veux pas apparaître ici. Mais maintenant, vous savez comment nous allons changer ça. Nous allons nous diriger vers le fichier CSS de style et adapter l'en-tête à nos besoins. Nous avons juste besoin de créer la possibilité d' une taille flexible du logo dans nos fonctions PHP. Alors voyez-vous dans un peu dans notre style CSS. Juste avant de plonger dans notre feuille de style, il manque un élément structurel essentiel. notre menu ici. Je vais ici aux menus et donner un nom à mon menu. Je vais l'appeler menu haut. Il va être au-dessus d'une page, créer un menu. Ce sera un menu principal. Sauvez-le. Ensuite, je vais ajouter toutes ces pages que j'ai créées en tant que détenteurs de places au menu ici, puis il suffit de les faire glisser et de les déposer dans l'ordre où je veux qu'elles soient dans les menus. Ça vient ici, comme ça, et enregistrez le menu, jetez un oeil, c'est là. Il prend en charge le style des liens, mais nous voulons qu'il soit ici du côté droit et qu'il ait une typographie plus petite. Donc, je vais ouvrir mes outils web et jeter un oeil. Il s'agit de la navigation du site de l'ID de navigation. Je vais éditer en HTML copier ceci, le mettre dans ma feuille de style. Je dois créer un nouveau chapitre ici appelé le style des en-têtes et coller cet ID, et dire, je veux que vous flotiez à droite et je veux aussi que vous ayez une taille de police de 0,7 RM, enregistrez. Bien sûr, sur le serveur aussi revenir au navigateur. vérifié ça et quelque chose s'est passé ici. Nous avons la bonne typographie, mais nous ne voulons pas ce menu minimisé ici. C' est pour le site mobile et dans une minute, je vais vous expliquer ce qui s'est passé. Donc, ensuite, je veux supprimer le titre du site ici et copier ce titre de site de classe, aller à ma feuille de style, ajouter ici et dire la faute de frappe de site de classe. S' il vous plaît afficher aucun. Sauvegarder et vérifier. Il est parti et maintenant nous avons notre petit logo rond qui ne fait absolument pas son travail pour notre site Web. Laisse-moi vérifier que c'est le logo du site ici. Oui, c'est le positionnement de la div. À l'intérieur de la div est le lien qui a la boîte de transition de rayon de bordure ombre tout cela, je vais juste le copier, mettre dans ma feuille de style, et dire, je veux que le rayon de bordure soit nul. Ok, c'est bon. Je ne veux pas d'ombres de boîte et affiche donc le bloc et la largeur et la hauteur. Je ne pense pas qu'il y a 50 pixels va bien se passer. Transition, s'il vous plaît, Sauvegardez et vérifiez ce que nous avons fait. Ici. Il est minuscule et bien sûr, l'état de vol stationnaire, je dois changer celui-là aussi. Ici, dans l'inspecteur, je vais jeter un oeil à l'état du vol stationnaire ici et il dit que le logo du site a une ombre noire. Il a également une bordure, la bordure jaune que nous avons sur tous les liens de notre page. Donc je dois le changer dans ma feuille de style ici. Je vais dire de coller ceci ici et dire que l'ombre de la boîte aucun, transition none et la couleur de la bordure doit être transparente. Mais c'est une règle importante car c'est une règle générale pour tous les liens. Cela doit être plus précis. Enregistrer sur le serveur et vérifier le navigateur et l'état de vol stationnaire, est maintenant parti. C' est bien. Nous devons maintenant faire face à la taille de ces logos. Si je mets ici, il suffit de vérifier que c'est 50 pixels. Si je mets 400. Ensuite, le logo a disparu et c'est parce que la position de ce logo du site div est beaucoup de retour à droite. Donc, je dois dire auto et oui, la hauteur doit également être changée. Ça va être de 100 pixels. Oui, et la position doit changer bien sûr aussi. Je ne vais pas faire ça. C' est beaucoup trop grand. Donc, je vais à la feuille de style et dire la feuille de style, j'ai peut-être besoin de 80 pour cent de cette largeur, hauteur. Donc, et si je regarde, le logo a disparu, donc je dois changer la position du logo du site, et ensuite ce qui est donc je dois changer la position du logo du site, important ici, c'est que l'entreprise est une requête multimédia pour les grands écrans qui sont tout ce qui est au-dessus 768 pixels. Je dois m'occuper de ça aussi et ici, je vais copier ça. Je vais dire auto droit et important, mais aussi je dois ajouter la requête média et min-width est de 768 pixels. Oui alors, et j'ai besoin de quelques crochets ici et ici enregistrer et vérifier et voici notre logo. Maintenant, nous avons seulement besoin de positionner cela dans la bonne position avec le remplissage et la marge et je dois aussi changer la couleur de cet en-tête, que c'est l'en-tête, ID masthead. Je vais juste copier ça. Mettez-le dans la feuille de style. C' est un ID et je pense que la couleur de fond, je l'ai écrit ici sur note. La couleur de fond est 353942. J' ai stylé cela un peu plus loin. Donc, pour l'en-tête, j'ai augmenté la hauteur ici, non seulement changé la couleur et pour la navigation, qui est seulement un bouton. Maintenant, j'ai également changé le haut de la marge, donc c'est plus éclairé avec le logo. Et il n'y a pas de limites pour le style CSS dans votre feuille de style. Je voulais juste vous montrer quelle fonction dans le fichier de fonctions est responsable de l'affichage de la taille de ce logo, et puis nous avons changé un peu le CSS pour supprimer le rayon, enlevé les bordures, et la position afin que nous puissions montrer tout ce logo. Ici, nous allons voir ce qui s'est passé avec la navigation. J' ai commencé aussi un peu pour la version mobile. Mais ce que je voulais te montrer est en fait un petit tour. Je devenais fou sur cet affichage du bouton sur la version de bureau sur les grands écrans et je suis passé par des fichiers vierges de mot entier. Ce que j'ai trouvé est en fait l'ici en 2019 lui-même dans les fichiers JavaScript, il y a un fichier appelé menu prioritaire JS. Quand j'ai regardé à l'intérieur pour voir quelle fonction joue réellement avec ce menu de navigation, découvert qu'il y a une faute de frappe et il dit navivation au lieu de navigation. Maintenant, je ne sais pas si c'était un nom précis. Je viens de vérifier, applaudi la version corrigée et maintenant vous voyez si je rafraîchis notre menu de navigation principal est ici. Donc c'était fondamentalement ce que nous avons fini la canne, la première création ou personnalisation de la 2019 pour le faire ressembler au thème sur lequel nous sommes censés travailler et maintenant, bien sûr, les petits détails vont se produire rendant le images topographiques sympa, etcetera. n'y a pas de limites à cela. Je voulais juste vous montrer comment travailler avec les fichiers de fonctions, avec les fichiers de modèle, avec le CSS pour créer le thème que vous voudriez avoir pour votre site Web. 14. Conclusion: Maintenant, nous avons vu comment les fichiers modèles, les fonctions PHP, la feuille de style CSS, les widgets et les plugins peuvent travailler ensemble pour personnaliser le 2019, ou les autres thèmes d'ailleurs, et comment l'adapter à notre propre design. J' espère que vous avez trouvé quelques conseils précieux pour vos propres personnalisations, et j'ai vraiment hâte de voir votre site WordPress et ce que vous avez fait pour le personnaliser. Personnalisation heureuse.