Transcription
1. Introduction du cours: Salut tout le monde. m'appelle Kyle et je suis un développeur web basé dans l'Ohio. Je suis développeur web à temps plein depuis environ cinq ans maintenant. Et aujourd'hui, je vais vous apprendre comment commencer à construire votre propre thème WordPress personnalisé à partir de zéro. Nous allons toucher à tous les éléments d'un site WordPress à
partir de la configuration initiale des sites locaux, que je vais utiliser lampe sur Mac. Et résoudre les fichiers de base en utilisant un modèle de démarrage, intégrant des frameworks HTML et CSS comme Bootstrap, ainsi que quelques plug-ins centraux à utiliser tout au long du processus. Ce cours sera orienté vers les débutants absolus, mais j'espère que tous ceux qui suivent ce cours pourront apprendre quelque chose en cours de route. Merci encore d'avoir suivi le cours et j'espère que vous êtes aussi excité que moi de commencer.
2. Configuration d'environnement de développement local - MAMP: Ok, donc la première étape pour obtenir notre configuration de l'environnement WordPress local est d'installer réellement un logiciel appelé carte. Donc, j'utiliserai la version MAMP Pro. Il y a une version gratuite de l'homme sur leur site, qui sera tout à fait bien pour ce que nous avons à faire ici. Donc, MAP est vraiment sympa. Il le rend vraiment, vraiment facile à télécharger,
installer et mettre en place des sites Web WordPress sur votre machine locale. Il prend soin de toute la configuration du serveur avec Apache, MySQL et des choses comme ça. C' est vraiment juste un téléchargement en un clic dans une étoile d'un clic et puis vous avez votre site en cours d'exécution fondamentalement. Alors allez-y et dirigez-vous vers MAMP Dot info et, et téléchargez la version gratuite ou si vous voulez aller de l'avant et acheter la version pro, n'hésitez pas. Il y a certains paramètres que vous pouvez personnaliser avec la version pro que vous ne pouvez pas avec la version gratuite. Je crois que la version gratuite vous permet seulement d'avoir une configuration de site. Ça pourrait se tromper. Je connais la version pro, vous pouvez avoir plusieurs configurations ainsi qu'un tas d'autres choses,
mais ok, donc ici je suis en train de télécharger la version gratuite de MAMP, en vous prenant un exemple de ce à quoi ça ressemble. Ainsi, vous pouvez l'utiliser tout au long du cours. Alors allez-y et cliquez sur Free Download une fois que vous êtes ici. Et cela va vous emmener à cette page et aller de l'avant et télécharger la bonne version pour votre machine. Et l'installation elle-même est en fait assez simple. Je vais juste aller de l'avant et mettre en pause l'enregistrement et revenir quand moins la configuration. Bon, donc mon téléchargement est prêt et je vais aller de l'avant et ouvrir ça. C' est marcher à travers elle très vite. Et une fois que ça sera fait, je reviendrai. Très bien, donc mon téléchargement et l'installation a été réussie. Alors maintenant, je viens d'ouvrir MAMP et c'est l'écran que vous verrez. Donc, comme je l'ai dit, allez-y et laissez tout pareil. Allez-y et cliquez sur Démarrer. Très bien, et c'est l'écran que vous allez vous présenter avec ça. Et comme un serveur démarre. Et cela, il semble très similaire aux outils
de tableau de bord des versions Pro ici a PHP, mon administrateur. Cela sera important plus tard dans le cours. Disons localhost deux-points 8888, barre oblique, barre oblique avant. interrogation, la langue est égale à l'anglais. Vous pourriez, vous pouvez ou non avoir ça. Si vous allez de l'avant et réellement supprimer tout après le 8888, puis cliquez sur Entrée. Cet écran vous sera présenté. Et cela signifie que sont installés a réussi. Si vous pouvez voir cette carte de page a été correctement configuré et lancé et est prêt à partir. Vous pouvez voir quelques informations générales ici, racine du document. Ce document HT est l'endroit où nous allons stocker nos fichiers de site web, version
PHP, et puis il y a un fichier là-dedans actuellement qui est index.php. Tellement génial, c'était la version gratuite, très similaire à la configuration de la version pro. J' espère que vous avez trouvé ça utile.
3. Téléchargement et installation de WordPress: Ok, Donc dans cette section, nous allons mettre en place l'environnement WordPress réel à l'intérieur de Madame. Donc ce que je vais vraiment faire puisque j'ai plusieurs sites Web déjà mis en place et que j'ai travaillé dans le passé. Je vais en fait créer un nouvel hôte à l'intérieur de MAMP Pro. Si vous utilisez la version gratuite, n'hésitez pas à sauter en avant environ 30, 45 secondes. Si vous utilisez la version pro, restez autour. C' est un processus très simple. Donc tu veux juste aller au signe plus juste ici. Je le laisse toujours vide. Continuer. Je vais juste nommer ce cours Web, puis le document root. Je vais choisir et le garder à l'intérieur de mon propre dossier. Je vais réellement sélectionner le dossier de cours Web ici, ouvrir. Et puis je vais laisser cela non coché et puis créer l'hôte. Et c'est à peu près tout. Donc, tout ce que vous avez à faire à partir d'ici, si vous utilisez la version pro est assurez-vous que votre hôte est sélectionné ici. Donnez-lui une seconde pour générer ce qu'il a besoin de générer dans le backend. Une fois qu'il est prêt, ce bouton Ouvrir juste ici devrait apparaître. Pour ceux d'entre vous qui utilisent la version gratuite. Vous pouvez aller de l'avant et simplement démarrer le serveur et cela ouvrira votre URL hôte local à l'intérieur de votre navigateur. Et on peut partir de là. Ok, donc le mien est prêt à partir, donc je vais juste y aller et cliquer sur Ouvrir. Comme je l'ai dit, la version gratuite s'ouvrira automatiquement lorsque le serveur a démarré. Je vais donc cliquer sur Ouvrir. Et cela montrera une page très similaire à ce que j'ai montré dans la dernière section. Donc, cela veut juste dire que la racine du document est définie sur le dossier que j'ai créé la version PHP et ainsi de suite. Donc, la prochaine étape ici va réellement obtenir les fichiers WordPress. Pour ce faire, vous voulez aller à wordpress.org. Une fois que cette page est chargée, il y a un bouton bleu en haut à droite qui indique Obtenir WordPress. Allez-y et cliquez dessus. Et puis ça vous mènera à cette page ici. Donc, dans ce premier paragraphe, il y a un lien qui dit télécharger et installer. Allez-y et cliquez dessus. Et il va le déposer plus loin sur la page. Et puis vous pouvez cliquer sur Télécharger WordPress 5.8. Au moment de regarder cette vidéo, cette version, il peut être différent, mais allez-y et cliquez simplement sur cela et installez. Et attendez que ça se télécharge. Je vais y aller, faire une pause et revenir quand c'est prêt. Ok, mon téléchargement était prêt. Donc, ce que cela fait est en fait télécharger le fichier zip qui contient tous les fichiers WordPress de base. Vas-y et ouvre ce fichier zip. Et puis à l'intérieur de ce dossier, vous verrez tous ces fichiers ici, index.php point sous licence TXT. Lisez-moi tout ce qui commence par WP Dash est un fichier de base WordPress. Donc, ce sont ce qui construit réellement le backend WordPress. Donc, ce que vous voulez faire est en fait avoir ce dossier tiré et ensuite le dossier HT docs. Ce que vous allez faire est juste supprimer tout ce qui est à l'intérieur de ce dossier, devrait juste être un fichier index.php. Allez-y et supprimez cela. Et puis à partir de là, vous pouvez réellement glisser sur tous les fichiers WordPress à partir de ce téléchargement. Ils vont faire ça. Dragon sur le dessus. Et puis je le nettoie par son nom. Et puis c'est à peu près tout. Alors allez-y et fermez ces deux fenêtres de recherche. Fermez cette fenêtre pop-up. Et puis maintenant, si vous retournez dans votre navigateur et
actualisez, vous devriez obtenir une page WordPress. Fondamentalement un peu comme une page de configuration, être un peu marcher à travers ça. Donc, une fois que vous êtes prêts et allez de l'avant et sélectionnez votre langue, je vais sélectionner l'anglais, Continuer. Et puis ici, il est dit, Bienvenue à WordPress. Avant de commencer, nous avons besoin de quelques informations sur la base de données. Vous devrez connaître les éléments suivants avant de continuer. Nom de la base de données, nom d'utilisateur de données, mot de passe, hôte de la base de données, puis préfixe de la table. Donc c'est là que nous allons réellement entrer dans PHP,
mon administrateur, et réellement créer la base de données. Donc, pour ce faire, nous allons revenir à MAMP et vous allez cliquer sur ce bouton Web Start. Et puis une fois que cela a été chargé, nous allons aller à la liste déroulante Outils PHP, mon administrateur. Super. Donc maintenant à l'intérieur de PHP mon administrateur, ce que nous devons faire est de créer la base de données. Donc, dans la barre latérale gauche ici, allez-y et cliquez sur Nouveau. Donnez-lui un nom. Je vais juste nommer mon cours web. N' hésitez pas à le nommer comme vous voulez. Vous pouvez laisser cela tranquille et aller de l'avant et cliquer sur Créer. Donc, ce que cela a fait était de créer une nouvelle base de données appelée cours Web. Et il n'y a pas de tables en ce moment. En fait, va créer des tables. Nous allons laisser la configuration d'installation de WordPress faire tout cela pour nous. Mais ce que nous devons faire est de mettre en place un utilisateur pour cela, cette base de données. Donc, en haut de cette barre ici, allez-y et cliquez sur les privilèges. Ajouter un utilisateur. Et ici, je vais nommer le mien un internaute. Laissez le mot de passe de l'hôte seul. Je vais juste faire le test 123, puis le retaper. Épreuve 1, 2, 3. Lorsque vous faites réellement cela pour un site de production, éventuellement, ou que vous voulez utiliser quelque chose de plus sécurisé en ce moment, certainement trouver, devrait probablement toujours utiliser quelque chose de plus sécurisé. C' est un site local, donc la sécurité n'est pas un problème énorme. Mais si vous deviez mettre ceci sur un site bêta, sur un serveur bêta quelque part ou simplement le déplacer directement dans la production. Cela peut être un problème. Avoir un mot de passe très facile, extrêmement faible. Juste quelque chose à être au courant. Une fois que tout est configuré, nom d'utilisateur et mot de passe, faites défiler vers le bas et cliquez sur ce bouton Go. N' importe lequel de ceux qui viennent et puis il suffit de cliquer à nouveau. Et maintenant, nous sommes tous prêts. Donc équilibre retour à l'onglet de configuration WordPress. Maintenant que nous avons toutes ces informations qu'ils veulent, nous pouvons cliquer sur, allons-y. Et maintenant c'est le nom de la base de données. Donc c'est ce que nous avons créé en PHP, mon administrateur, j'ai nommé mon cours web. Assurez-vous de taper exactement ce que vous avez fait le nom. Cours Web. L'utilisation du nom est l'utilisateur Web. Et test 1, 2, 3. Laissez l'hôte de la base de données seul, c'est bon. Préfixe de table ainsi que trouver WP soulignement standard pour le site WordPress. Alors allez-y et cliquez sur Soumettre. Il dit que nous sommes tous prêts. Il peut communiquer avec la base de données et nous allons continuer et exécuter l'installation. Ici. Il s'agit de quelques informations générales sur le site. Nous pouvons donner le nom de notre site, le nom d'utilisateur et le mot de passe ici, ou ce que nous allons réellement utiliser pour vous connecter au backend WordPress. Donc, une fois que le site est réellement configuré, vous devrez réellement vous souvenir du nom d'utilisateur et du mot de passe que vous avez configurés ici. C' était quelque chose que vous allez utiliser et référencer assez souvent, votre email, et vous pouvez utiliser votre vrai email. Visibilité des moteurs de recherche Je vérifie toujours ça quand je me développe. Vous pouvez le laisser non coché. Encore une fois, c'est un site local, personne ne peut y accéder. Donc, une fois que tout est configuré, allez-y et cliquez sur Installer WordPress. Ok, on dirait que tout était bon. Allez-y et cliquez sur Connexion. Et voici où nous allons taper notre nom d'utilisateur et mot de passe. Et cliquez sur Connexion. Super. Donc, nous sommes maintenant à l'intérieur de notre backend WordPress. C' est là que nous allons réellement aller pour créer des billets de blog, nouvelles pages, des commentaires gérés. Vous pouvez gérer les utilisateurs, installer les thèmes, thèmes
enfants, le lien permalien contrôlé, qui est la structure URL des pages WordPress. Et beaucoup d'autres choses. Vous allez passer beaucoup de temps dans son back-end une fois que nous serons plus loin dans le cours. Mais c'est un endroit idéal pour être. Donc, jusqu'à présent, nous avons mis en place MAMP, nous avons mis en place un site WordPress localement. Et la section suivante, nous allons réellement installer un éditeur de code. Et puis nous allons commencer, construire un thème réel à l'intérieur de WordPress.
4. Installer un éditeur de code: Bon, donc dans cette section, nous allons mettre en place un éditeur de code. C' est donc ce que nous allons réellement utiliser pour construire des pages, des modèles de
page, modifier tous les autres fichiers de configuration dont nous avons besoin et ainsi de suite. J' utilise donc Visual Studio Code. Si vous prenez ce cours, vous en avez probablement déjà installé un. Je recommande le code Visual Studio. C' est vraiment génial une fois que tu t'y habitues. J' utilisais en fait un appelé Atom. Je sais qu'il y en a d'autres comme des parenthèses et d'autres comme ça. N' hésitez pas à utiliser tout ce que vous êtes à l'aise. J' utilise Visual Studio Code. Il est livré avec beaucoup d'extensions que vous pouvez télécharger et installer qui aide un peu votre code que vous tapez IntelliSense et des choses comme ça. Donc certainement beaucoup d'avantages à l'utilisation de Visual Studio Code. Je crois qu'Adam a aussi des extensions et des choses comme ça aussi. Alors allez-y et installez ce que vous voulez. Je suppose que j'utilise du code Visual Studio, donc je vais tirer ça en ce moment. Ok, donc quand vous ouvrez Visual Studio Code pour la première fois, vous obtiendrez une, fondamentalement une fenêtre vide. Donc, ce que vous pouvez réellement faire est d'aller dans File Open et juste ouvrir ce dossier 80 docs. J' ai le mien à l'intérieur des documents MAMP sites avec cours, et l'ouvrir. Donc, une fois que cela s'ouvre, vous pouvez voir tous les fichiers ici. Donc, à partir du sommet, administrateur
WP ne touche presque jamais rien à l'intérieur de là. Même chose avec WP inclut. Ce sont vraiment des fichiers de base pour WordPress. Habituellement, si vous gâchez quelque chose à l'intérieur de là, Cela va provoquer une erreur quelque part sur le site et le faire ne pas fonctionner correctement. Fondamentalement, tout ce que vous allez éditer ou ajouter ou faire quoi que ce soit sera dans le dossier de contenu du tableau de bord WP, l'accès HT. Vous allez probablement entrer dans un peu lorsque vous configurez ceci pour un site de production. Et puis un autre fichier ici est WP config. Et ouvrez ça. Donc, ce fichier indique essentiellement WordPress quelle base de données à rechercher. Donc, vous pouvez réellement voir cela ici, nom de la base de données, cours
Web, utilisateur de base de données, utilisateur
Web et ainsi de suite. Il s'agit en fait des informations que nous avons fournies lors de la configuration de l'installation du site Web. Des clés secrètes, sécurisées, des trucs comme ça, n'entrent vraiment pas grand-chose dans tout ça. Débogage Wp. Ceci est utile lorsque vous essayez de déboguer le site WordPress. Nous pouvons faire en sorte que cela devienne vrai si nous abordons des problèmes sur la route. Ceci est généralement laissé à faux. Il y a d'autres choses que vous pouvez ajouter à ce fichier de configuration. Certains plugins de mise en cache, ajoutez quelques lignes à cela. Certaines écritures aux téléchargements de fichiers peuvent parfois aller ici et des choses comme ça. Vraiment la seule chose à craindre dans ce fichier est les informations de base de données. Si vous allez changer de serveurs, changez de serveurs de base de données ou quelque chose comme ça. Vous voudrez simplement vous assurer que toutes ces informations sont mises à jour correctement afin que vous puissiez continuer à travailler sur votre site Web. Je vois aller de l'avant et fermer ça. Si vous allez dans le dossier Contenu WP, vous verrez quelques dossiers à l'intérieur de leurs plug-ins, thèmes et téléchargements. Télécharger auto-explicatif. C' est là que tous vos fichiers WordPress que vous téléchargez seront stockés. C' est tout ce qui se passe dans les médias. bord Wordpress. Donc c'est là que toutes vos images de blog ou images de page, bannières, quelque chose comme ça, PDF. Donc, vous pouvez penser que c'est là que vous allez les télécharger et ensuite ils sont stockés dans le catalogue à l'intérieur de ce dossier de téléchargements. Plugins, même chose là-bas. Tout plug-in que vous installez sera logé dans ce dossier. Thèmes. C' est en fait là que nous allons travailler la plupart du temps dans ce cours en ce moment, nous sommes presse vient standard avec trois thèmes par défaut, les thèmes 2019, 2020 et 2021. Ceux-ci sont parfaits pour les blogs très basiques comme les sites Web. Ce n'est pas notre objectif pour ce cours, notre noyau, ce cours va être tout sur la création d'un thème personnalisé pour vous
permettre de construire exactement ce que vous voulez, comment vous voulez. Nous allons commencer à partir de zéro avec un modèle nus et le construire à partir de là. Donc, vous pouvez réellement supprimer tous ces gagnants. On ne va pas faire ça maintenant tant qu'on n'aura pas installé notre autre thème. Mais c'est ce que c'est. Et puis vous verrez également tous les thèmes enfants que vous avez à l'intérieur de ce dossier également. Ainsi, vous pouvez voir si vous développez dans l'un de ces, vous pouvez voir toutes sortes de fichiers à l'intérieur d'ici. Les plus importants pour vraiment se concentrer sur footer.html, functions.php, point d'en-tête PHP, index.php, et point unique PHP. Ils sont vraiment tous importants, mais ce seront les principaux. En-tête et pied de page point PHP. C' est assez standard pour garder tout dans le fichier d'en-tête qui y appartient, tels que les balises Meta, titres de
site, quelque chose comme ça. La navigation peut parfois aller sur leur pied de page, même chose. éléments de pied de page typiques peuvent aller dans le
fichier PHP point de pied de page, puis dans le fichier functions.php. C' est en fait là que nous allons ajouter dans les fichiers CSE ou CSS, les fichiers
JavaScript, tout ce que nous devons réellement utiliser sur le site Web. Nous allons les charger à l'intérieur du fichier functions.php. J' y reviendrai dans une section ultérieure. Mais c'est pour cela que ce fichier est utilisé, ainsi que l'ajout de fonctions personnalisées et de choses comme ça. Page. Il s'agit d'un modèle de page par défaut dans WordPress. Une chose importante à savoir ici est la fonction get header. Donc, je touche sur le fichier PHP point d'en-tête. Cette fonction ici appelle réellement ce fichier sur la page. Donc, ce qui est vraiment génial à propos de WordPress est d'utiliser des parties de modèle. Je considère l'en-tête comme une partie de modèle. Cela signifie que vous créez un fichier que vous pouvez utiliser sur plusieurs pages différentes simplement en l'appelant dans une fonction. Donc, l'en-tête get est une fonction spécifique qui appelle le fichier PHP point d'en-tête. Cette fonction ici sur la ligne 17 appelle en fait une partie de modèle différente. Ainsi, vous pouvez voir la fonction d'obtention de la partie de
modèle appelant la page de contenu des parties de tiret de modèle. Donc, il tire dans un fichier sous le contenu des pièces typiques, page de contenu. Tout ce qui est à l'intérieur de ce fichier sera chargé sur cette page avec une ligne de code, ce qui est vraiment génial. Et puis sur la ligne 25, même chose, obtenez le pied de page. Cela va être appeler le fichier PHP point de pied de page dans ce fichier, encore une fois avec une ligne de code. Donc, c'est ce qu'il est vraiment génial il va toucher
plus de ces fichiers au fur et à mesure que nous entrons plus profondément dans le cours. Chercher. Il s'agit du modèle de fichier de page de résultats de recherche spécifique. Donc, si vous êtes sur un site Web et afficher, vous voulez rechercher tout ce qui concerne le sport. Vous pouvez simplement rechercher des sports et ensuite vous pouvez réellement personnaliser ce modèle qui montre les résultats. formulaire de recherche est le formulaire de recherche unique. Donc, par défaut, c'est pour une publication unique. Ces choses ici. Donc, chaque fois que vous créez une nouvelle publication, c'est le modèle par défaut qui va être utilisé. Et nous pouvons ajuster cela aussi. Donc, c'est à peu près la vue d'ensemble de la structure de fichier WordPress. Dans la section suivante, nous allons réellement installer notre thème de démarrage. C' est un thème bare-bones, vous
donne tous les fichiers de base dont vous avez besoin pour créer
un thème WordPress afin que nous n'ayons aucune erreur que nous rencontrons tout de suite. Et à partir de là, nous le ramifions, construisons comment un besoin, et nous partons de là. Donc j'ai hâte de cela.
5. Sélectionner un thème de démarrage: Dans cette section, nous allons installer notre thème de démarrage, qui nous permettra de créer un thème enfant et ramifier à partir de là et de le construire dans notre thème personnalisé. Donc, ce que vous voulez faire est de vous assurer que vous êtes connecté au site WordPress que nous avons créé dans les sections précédentes et de vous diriger vers l'apparence, puis les thèmes. À partir de là, allez de l'avant et cliquez sur Ajouter un nouveau. Et puis sur le côté droit, on va chercher un thème appelé ardoise blanche. Et c'est la toute première ici. Lorsque je clique sur Installer et activer. Donc, à la même chose est, c'est un thème
très, très vide, pas de jeu de mots. n'y a pas de styles, il n'
y a pas de formatage, il n'y a vraiment aucune structure. Mais ce qui est vraiment agréable à ce sujet, c'est qu'il vous donne tous les fichiers de base dont vous allez avoir besoin pour réellement construire le thème. Par défaut, lorsque vous créez un thème à l'intérieur de WordPress, il recherche des fichiers spécifiques. Si nous devions juste aller dans ce dossier Thèmes
ici et juste faire un nouveau dossier et nous l'appelons le thème de Kyle. Avec cela étant clignotant, dossier clignotant. Si nous allons dans WordPress et essayons d'activer ce thème, il va lancer une erreur disant que nous manquons quelques fichiers. Ce qui est bien à propos de l'ardoise vierge est B, vous l'agrandissez. Vous pouvez voir qu'il est réellement livré avec tous ces fichiers dont nous allons avoir besoin. Index d'en-tête de la fonction de pied de page et ainsi de suite. Tout cela est prêt à partir. Et puis nous pouvons réellement créer un thème enfant basé sur ce thème parent, qui nous permettra de faire toutes nos modifications
et de construire le site exactement comme nous le voulons sans compter sur les développeurs de l'ardoise vierge et potentiellement ruiner notre site en bas de la route. Si vous ne saviez pas que le but d'un thème enfant à l'intérieur de WordPress est de séparer
vos modifications dans votre personnalisation du thème du thème parent ou du thème principal. Raison pour cela,
disons, nous construisons notre site, nous le lançons sur un serveur de production. La circulation va y arriver. Tout est génial. Ok, alors dites en même temps que les développeurs, une ardoise vierge a publié une mise à jour qui corrige le correctif de sécurité ou quelque chose comme ça. Si nous devions aller dans notre site de production et mettre à jour le thème The Blank Slate, cela effacerait fondamentalement tout ce que nous avons fait à l'intérieur de ce thème si nous ne le faisions pas dans un thème enfant. Donc, disons que nous venons d'entrer dans ce pied de page et nous avons dit, Bonjour, C'est un test du pied de page. Et on le sauve. Et on retourne ici et on se rafraîchit. Vous pouvez voir que c'est juste ici. Donc, disons que c'était notre site en direct et nous sommes allés avant et mis à jour le thème de l'ardoise vierge du développeur. Et cette ligne juste ici, puisque cela a été fait à l'intérieur du thème parent, cela serait complètement effacé. Il n'y aurait aucun moyen de le récupérer. C' est pourquoi il est vraiment, vraiment important d'utiliser comme thème enfant. Même si vous avez acheté un thème dans la forêt à thème ou ailleurs, vous voulez toujours vous assurer qu'ils utilisent un thème enfant. Vous ne voulez pas que tout votre travail acharné soit évincé d'une simple mise à jour. Alors gardez toujours ça à l'esprit. Et je vais vous montrer comment créer un thème enfant aussi dans la section suivante. Mais ce que nous avons fait ici est un bon début. Vous pouvez un peu cliquer autour. Je sais qu'il n'est pas formaté, mais vous pouvez voir des messages récents, Bonjour monde. Et c'est à quoi ressemblerait un seul billet ici. Vous pouvez voir bienvenue à WordPress est que votre premier post, éditer ou supprimer et commencer à écrire. Il y a un commentaire de test. Et vous pouvez voir que notre ligne de pied de page est toujours là puisque nous l'avons mis dans le footer.html réel. C' est donc une installation de thème. Pour commencer dans la section suivante, nous allons voir comment créer un thème enfant. Nous allons entrer dans la documentation WordPress un peu et ensuite partir de là.
6. Créer un thème enfant personnalisé: D' accord, j'espère que vous appréciez la classe jusqu'à présent. Dans cette section, nous allons créer notre thème enfant. Alors allez-y et sautez dans votre éditeur de texte. Et ce que nous allons faire maintenant est en fait simplement supprimer les thèmes 2019, 2020 et 2021. On n'en a pas vraiment besoin. Donc par et supprimez simplement ces. Et puis sur votre dossier d'ardoise vierge, ce que nous voulons faire est en fait lancer une recherche et remplacer le mot ardoise
vierge et le remplacer par ce que vous voulez nommer votre thème. Donc, ce que je vais faire est de remplacer le nom ardoise vierge par un cours Web. Et je vais tout remplacer là-dedans. Maintenant, une fois que cela est fait, je vais juste renommer le dossier aussi bien en cours Web. Et maintenant, si nous revenons au tableau de bord et allons à Thèmes Apparence, il va montrer une ardoise vide inactive juste parce que nous avons changé tous les noms de l'ardoise vierge à ce que vous l'avez appelé,
ce thème n'existe pas réellement plus. Donc, tout ce que vous avez à faire est juste d'activer votre nouveau. Et nous sommes prêts à y aller. Ainsi, vous pouvez voir le thème actuel, web corps version 2019 0.3. Par des choses bien rangées, s'il vous plaît lire des balises et choses comme ça afin que nous puissions réellement modifier toutes ces informations. C' est notre thème maintenant, donc nous n'avons pas besoin d'avoir tout ça là-dedans. Nous pouvons, bien sûr, le garder pour le thème des parents, mais pour notre thème enfant, nous pouvons nous en débarrasser, le nettoyer un peu. Redonnez donc au code Visual Studio ou à votre éditeur de texte. Et ce que nous voulons faire maintenant, c'est créer un nouveau sous-dossier à l'intérieur du dossier themes. Alors allez-y et faites ça. Ce que tu veux faire c'est nommer exactement la même chose, Dash Child. Une fois que vous avez ce dossier, le premier fichier que nous allons créer à l'intérieur de ce nouveau dossier de thème enfant s'appelle style.css. Et puis le fichier suivant que nous voulons créer va s'appeler fonctions PHP. Et puis ce que nous devons faire est de commencer à éditer le fichier style.css, CSS. Donc, pour réellement associer ce thème enfant au thème parent, nous avons juste besoin d'ajouter quelques lignes de code pour que les deux se reconnaissent mutuellement. Donc, ce que nous allons faire ici, c'est commencer un commentaire. Et puis on va dire le nom du thème, l'enfant du cours Web. Et puis on va dire thème, URI. Et je vais en fait sauter sur le thème parent du cours Web et juste attraper ça ici. Et ensuite la description. Nous pouvons dire cours web, enfant étant auteur. Vous pouvez dire votre nom, auteur, votre, nous pouvons dire que si vous avez un site Web de portefeuille, vous pouvez le faire. Si vous construisez cet accompagnement très, vous pouvez le mettre comme vous pouvez le mettre là aussi. En fait, je vais juste me débarrasser de ça. Ce n'est pas nécessaire. Modèle, c'est la ligne la plus importante ici. Nous avons besoin que cela corresponde exactement au nom du thème parent, ce qui est mon cas, une version de cours Web. On peut faire 1. Et le domaine de texte peut être enfant de cours Web. Et puis nous allons clore ce commentaire. Donc, la ligne la plus importante ici est le cours Web de modèle. Ce sera le nom de votre thème. C' est en fait ce qui relie ce thème enfant au thème parent. Donc, assurez-vous que cela correspond correctement. Allez-y et sauvegardez ça. Si vous voulez revenir sur les thèmes WordPress. Vous devriez maintenant voir le mot, le thème enfant que nous avons créé. Vous pouvez voir que c'est le thème enfant des webcasts, si génial. C' est exactement ce dont nous avons besoin jusqu'à présent. Maintenant, ce que nous allons faire est d'éditer le fichier functions.php pour commencer à tirer des feuilles de style. Donc, notre première feuille de style et nous allons tirer dans est en fait en regardant la feuille de style de parent ardoise vierge. Donc, un nouveau basculement vers le fichier functions.php à l'intérieur du faisceau enfant. Et ce que nous allons faire est juste de commencer avec une balise d'ouverture PHP, puis de la fermer. Et ce que nous allons faire est de commencer
à taper la fonction pour essentiellement tirer dans ces feuilles de style. Nous allons donc faire Add Action, WP, file d'attente, script,
cours, style de file d'attente, point-virgule, fonction, web bien sûr. Et c'est le nom de votre thème. Styles. Peut être thème enfant de style
P et Q, feuille de
style, BRI sur un nombre. On va dire le gestionnaire des parents, le WP, le thème, la version Git. Ceci, cela ne fonctionnera que si vous avez la version définie et l'en-tête de style. Et puis on va fermer ça et le sauver. Donc maintenant, nous pouvons retourner à WordPress et activer notre thème enfant. Et puis si nous voyons réellement la page, ça aura l'air un peu différent. En fait, nous tirons dans les styles du thème parent, ce qui formate les choses un peu mieux pour nous. C' est donc un bon début. Nous allons réellement utiliser cette fonction ici pour inclure des ressources supplémentaires telles que des feuilles de style personnalisées, des bibliothèques
ou des frameworks que nous devons ajouter. C' est en fait là que nous allons charger ces fichiers. Nous ne voulons pas réellement mettre des liens vers des ressources externes et l'en-tête, le pied de page, juste la façon dont WordPress charge les ressources. C' est en fait un moyen plus efficace de le faire. Donc, à partir d'ici, nous avons vraiment tout mis en place pour pouvoir commencer
à construire notre thème personnalisé, ce qui est génial. Donc, dans le prochain chapitre ou dans la section suivante, nous aborderons cela. Je vais utiliser Bootstrap pour construire le thème afin que vous puissiez suivre avec cela. Ou utilisez le cadre que vous voulez.
7. Travail sur le thème: Très bien, dans cette section, nous allons commencer à construire notre thème. Donc, une chose que j'ai oublié de mentionner dans la section de l'éditeur de code était les extensions que vous pouvez réellement ajouter dans Visual Studio Code. En plus d'Adam, je pense que c'est juste un peu d'un processus différent dans Adam ou d'autres puis Visual Studio Code. Mais un très important que j'utilise beaucoup est appelé embellir. Votre idée de ce que ça fait. Quand tu l'appelles. Il formate en fait votre fichier de code et d'une manière beaucoup plus lisible. Donc retournez au thème parent et je vais ouvrir le fichier d'en-tête. Vous pouvez voir que le thème Blank Slate que nous avons installé à l'origine contient tous les fichiers dont nous avons besoin. Cependant, ils ne sont pas bien formatés ou quelque chose comme ça. Mais ce qui est bien à propos de cette extension, c'est que vous pouvez embellir le fichier, dire que c'est HTML, puis il met tout en forme correctement. Il est beaucoup plus facile à lire et semble juste plus agréable, plus facile à utiliser. Donc, c'est une chose que je recommande est d'installer des extensions pour aider à formater le code, embellit ce que j'utilise pour Visual Studio Code. Je ne suis pas sûr qu'ils en aient un pour atome, mais ça vaut la peine d'examiner. Donc, maintenant que, c'est hors du chemin, ce que nous allons commencer par faire avec notre thème est de créer un menu de navigation en haut de la page. On veut un logo ici, peut-être quelques liens en haut. Et comme je l'ai dit précédemment, je vais utiliser Bootstrap pour cela, et j'utiliserai Bootstrap version cinq. Donc, la première étape pour cela est de réellement connecter Bootstrap au thème. Donc, nous allons sauter dans le thème enfant, dans le fichier functions.php. Et puis on va faire une nouvelle ligne. Et quand je dis le style WP file d'attente, et quand je dis Bootstrap core, et puis nous allons faire des virgules, puis ouvrir des guillemets. Et nous allons sauter sur le site Bootstrap. Et ce qu'on va faire, c'est sauter dans les documents et commencer. Et vous pouvez voir ici, copiez coller le lien de feuille de style dans votre tête avant tout cela, nos feuilles pour charger notre CSS. C' est grand petit oiseau ne va pas vraiment le mettre dans la section de la tête. Nous allons le mettre dans le fichier functions.php. Alors allez-y et copiez ce lien. Passez à votre éditeur de code, puis collez-le juste là et enregistrez-le. Et puis revenez sur le site Web de Bootstrap. Et puis on va faire la même chose avec ces bottes ou avec ce JavaScript. Ensuite, copiez cela et revenez à l'éditeur. Nous allons faire une nouvelle ligne, WP file d'attente script. Et cela peut être un script de base Bootstrap. Et puis collez-le là aussi. Et en sécurité. Donc juste en faisant cela, si nous allons rafraîchir notre site Web, le formatage devrait ressembler un peu différent à nouveau. Cette fois, nous incluons en fait des styles Bootstrap. Allons-y et passons à ça et voyons ce que ça a fait. Donc, vous pouvez voir nos liens sont maintenant bleus que les familles de
polices un peu différents espacements, peu différent. C' est donc un bon signe. Cela signifie que nous avons des styles et des scripts Bootstrap connectés correctement à notre thème. Et nous pouvons commencer à construire la navigation réelle. Alors allez-y et revenez à l'éditeur de code. Nous pouvons fermer functions.php pour l'instant. Et ce que nous voulons faire est de créer l'en-tête du fichier PHP à l'intérieur de notre thème enfant. Et ce que nous pouvons faire pour rendre les choses plus faciles pour nous est d'ouvrir le thème parent, aller dans le fichier PHP point d'en-tête, ouvrir et puis de le copier et
de le coller dans notre en-tête de thème enfant, puis de fermer celui-ci. Super. C'est donc notre en-tête pour notre thème enfant. Un peu nous aide le long il suffit de copier et de coller de cette façon, nous obtenons toute
la structure requise d'un document HTML. Tout ce que nous allons faire ici aujourd'hui dans ce cours va en fait être beaucoup de HTML, CSS et JavaScript. C' est vraiment tous les sites WordPress sont. C' est juste un moyen de construire un site et de se connecter à
la base de données pour extraire des informations de l'utilisation de PHP à l'intérieur de HTML. Et puis nous avons formaté tout son CSS. Donc, vous allez voir beaucoup de structure
familière au cours de
ce cours lorsque nous construisons des pages et des choses comme ça. Donc, nous avons le code HTML standard ici, corps, classe de corps. Il s'agit d'une fonction spécifique à WordPress. La même chose avec ça. Et puis c'est en fait là que nous entrons dans la construction de notre en-tête réel. Donc, vous pouvez voir que nous avons l'en-tête avec l'ID d'en-tête. On peut se débarrasser de tout ça. Et puis nous pouvons commencer à mettre dans notre navigation bootstrap. Donc, je vais commencer par ceci et dire que la classe nav est égale navbar. Navbar développer une grande barre de navigation. Lumière. Bg, genre et je vais fermer ça. Et à l'intérieur de ce NADH, on va ouvrir un conteneur. Fluide. On va fermer ça. D' accord. Et puis à l'intérieur de ce conteneur fera la classe de marque navbar égale la marque navbar HRF, ou tout simplement laisser cela là pour l'instant. Et on va dire Navbar. D' accord, allez-y et sauvegardez ça et nous pouvons
retourner sur notre site et voir à quoi ça ressemble. Super. Donc, nous avons navbar et la gauche, qui est la marque. Et on peut aller de l'avant et l'inspecter. Nous pouvons voir que nous avons notre barre de navigation, qui couvre toute la largeur. A l'intérieur, nous avons un conteneur. Marque Navbar, super. Et nous avons le style tire de Bootstrap, si parfait. Ensuite, nous allons créer le bouton pour basculer le menu sur les écrans mobiles. Donc nous allons faire un saut de ligne ici et nous allons dire classe de bouton, navbar bambin. Tapez le bouton égal. Données bascule effondrement fermé. La cible est le contenu
pris en charge par la barre de navigation . Contrôles de zone. supportée par la barre de navigation contenusupportée par la barre de navigation. Élargi, étiquette de zone
fausse, bascule, navigation. On va fermer ça. Et puis à l'intérieur de ce bouton, nous allons ajouter une travée avec
une icône de flou de cravate de la barre de navigation de classe. Nous pouvons aller de l'avant et rafraîchir notre page. Et puis si on rétrécit ça, faites-le de ce côté. On devrait voir notre bouton de menu apparaître là-haut. Nous n'avons pas vraiment le contenu édité sur la page pour afficher réellement un menu, mais le bouton est là et il s'affiche et se cache en fonction de la largeur de l'écran. Tellement génial. Maintenant, tout ce que nous devons faire est juste d'ajouter le contenu réel qui s'
affichera et le réduit lorsque ce bouton est appuyé, ainsi que montrer. Je suis le dossier des écrans plus larges. Donc juste en dessous du bouton fera Hello classe navbar effondrement. Et nous allons lui donner un ID du contenu pris en charge par la barre de navigation. Fermez la div. Et puis on va juste ouvrir une liste non ordonnée et un élément de liste. Et puis cela aura une classe d'élément nav. Et qu'à l'intérieur de cela, nous aurons un nouveau lien avec le lien de navigation de classe et actif, et ensuite nous allons lui donner la zone, page
actuelle et la référence H. On peut juste laisser vide pour l'instant et on va juste dire, Oh, j'ai oublié d'ajouter la classe de la liste. Donc nous allons dire Navbar, Nav et auto et B pour être grands ici, et ce ne sont que des classes d'espacement. Ce sont, ce sont toutes Bootstrap, des classes spécifiques bootstrap. Allons de l'avant et sauvegardons ceci
, revenez au site et actualisez. Super, donc on voit la maison. Et puis on peut l'effondrer et ensuite on y voit aussi la maison. Donc, le tout-petit fonctionne et le menu fonctionne comme prévu sur les petits et grands écrans. Tellement génial. Une dernière chose dans cette section, au lieu du mot navbar pour la marque, nous voulons vraiment avoir une image là-bas. Donc, ce que nous pouvons faire, c'est nous débarrasser de ça. Et puis nous pouvons juste mettre une image ici et dire le placeholder.com. Et on va dire un 140 par 70. Et ceci est juste une image de détenteur de lieu pour montrer à quoi cela ressemblerait s'il y avait un véritable logo là-bas. Eh bien, ça et rafraîchissez ça et vous pouvez voir si c'était un vrai logo de la marque. Il ira là-bas et aura fière allure. Donc c'est tout pour cette section. Et la section suivante, nous allons passer au milieu de la page, le contenu réel. On peut avoir des images, des rangées et des choses comme ça là-dedans. Et vraiment faire construire ce site.
8. Créer un modèle de page: Très bien, Dans cette section, nous allons en fait examiner les modèles de page,
comment assigner des modèles de page, et en fait construire du contenu pour cette page spécifique à l'intérieur de l'éditeur de code. Donc on va juste sauter dedans. Ce que nous voulons faire maintenant, c'est sur notre page d'accueil, nous voulons faire quelques choses. Premièrement, nous voulons créer une page d'accueil. Nous allons ensuite créer un fichier de modèle de page. Nous allons affecter ce modèle de page à la page d'accueil. Et puis nous allons charger juste du contenu de base de héros à partir de bootstrap juste pour obtenir quelque chose là-dedans afin que la page soit un peu plus agréable. Alors allons-y et commençons. Nous allons retourner au tableau de bord et WordPress. Et nous allons naviguer vers les pages. Et ce qu'on veut faire, c'est ajouter une nouvelle page. Et on va juste l'appeler au titre et on va l'appeler la page d'accueil. Et puis nous allons le publier. Une fois que cela est publié, allez cliquer sur Afficher la page. Et puis à partir d'ici, ce que nous voulons faire est en fait cliquer sur personnaliser. Et nous allons aller aux paramètres de la page d'accueil. Et puis nous allons basculer ceci sur une page statique, puis la page d'accueil, nous allons
définir sur la page d'accueil, puis publier. Donc, ce que cela fait est chaque fois que les pages Web ou le site Web est chargé, il va charger cette page d'accueil comme page principale. Super, donc maintenant ce que nous pouvons faire est de passer à l'éditeur de code. Et à l'intérieur de notre thème enfant va créer un nouveau dossier et nous allons appeler ce modèle de page. Et puis à l'intérieur de ce dossier, nous allons créer un nouveau fichier et nous allons appeler cette page d'accueil à PHP. A l'intérieur d'ici, nous allons commencer avec les balises PHP et nous
allons dire la page d'accueil du nom de modèle. Ce commentaire juste ici dit simplement WordPress dans le back-end qu'il s'agit d'un fichier de modèle de page et lui permettre d'être sélectionné la liste des modèles de page à choisir lors de l'édition de la page. On y arrivera dans une seconde après cette ligne. Ce que nous voulons faire ensuite, c'est inclure l'en-tête. Donc, nous allons obtenir des parenthèses d'en-tête de soulignement, fermer ça, et ensuite nous ferons la même chose pour le pied de page. Et puis allez-y et sauvegardez ça. Et nous pouvons revenir à notre page Web et rafraîchir. Et on y va. Rien ne change, tout va bien. Ce que nous devons faire maintenant est de cliquer sur la page Modifier. Rappelez-vous que nous avons défini la page d'accueil que nous venons de créer comme page d'accueil du site Web. C' est pourquoi nous le voyons ici aller et cliquer sur Modifier la page. Sur le côté droit. Développez l'accordéon de modèle, modèle
par défaut, cliquez dessus, puis modifiez-le en page d'accueil. Ensuite, nous allons de l'avant et cliquez sur Mettre à jour. Puis Visualiser la page. Très bien, donc cette page semble différente maintenant, nous n'avons en fait rien entre l'en-tête et le pied de page comme
le modèle par défaut l'a fait. Donc, pour l'instant, tout ce que nous avons est la navigation que nous avons ajoutée, puis le pied de page, qui est juste le copyright avec le nom. Et puis quelques textes que nous avons ajoutés plus tôt dans le cours. Super. Donc, ce que nous pouvons faire maintenant est de revenir dans le modèle de fichier de la page d'accueil et commencer à ajouter du contenu de héros à partir de Bootstrap. Donc on va dire div. On va donner un cours à ça. Px, PY cinq et y cinq centres de textes iront à l'intérieur de cette div et nous dirons H1. Je veux dire que c'est un titre. On va lui donner un cours. Afficher cinq, F, W gras. Et puis en dessous de ce H1. Et on va dire div avec la classe du col, du grand six et de l'auto. Et puis nous dirons à l'intérieur de là, nous allons juste dire un paragraphe avec la classe de plomb et MB. Et on va mettre un peu de Lorem Ipsum là-dedans. Et puis en dessous de ce paragraphe donnera un div de plus. On va mettre quelques boutons ici. Donc, nous allons dire un div avec la classe de l' écart de grille
D au flex, justifier le contenu petit centre. Et puis à l'intérieur de cette div dira un bouton. On va juste dire primaire. Et puis tapez bouton égal, classe. Bouton, bouton, primaire. Et encore une fois, ce sont toutes les classes par défaut Bootstrap, disons le tiret de bouton grand, AX4, obtenez trois. Et puis pour le rendre plus facile, nous allons simplement copier cette ligne de bouton, coller juste en dessous, changer le texte est secondaire. Secondaire. Et puis on changera. La classe est juste un peu au lieu de bouton primaire dira le contour du bouton. Secondaire, bouton grand nous pouvons garder et puis nous dirons p de x. et nous sauverons ça. Et nous pouvons remettre à la page Web et rafraîchir. Et nous avons cette belle section d'en-tête,
cette section de héros ici, encore une fois avec juste un contenu d'espace réservé, mais regardant beaucoup, beaucoup mieux. Et certainement en arrivant à ce que nous voulons voir dans un thème personnalisé. Super. Ensuite, nous pouvons ajouter une ligne avec quelques cartes, quelques cartes Bootstrap juste pour un peu plus de contenu sur la page. Donc ce qu'on veut faire ici, c'est retourner dans l'éditeur de texte. Et juste en dessous, nous allons dire div avec la classe de ligne. Et nous allons commencer une colonne, petite six. Et à l'intérieur de là, nous mettrons la carte. Et puis à l'intérieur de cela, nous aurons un autre div avec un corps de tableau de bord de carte. Et puis ici, nous dirons H5 avec une classe de titre de carte. On dira que c'est un titre de carte. Et puis juste en dessous qui mettra un paragraphe avec une classe de texte de carte. Et nous allons juste dire que ce sont quelques textes qui vont ci-dessous. Et puis juste en dessous, nous allons juste jeter un autre bouton. Donc nous allons dire un bouton, bouton primaire. Une référence H n'est qu'une pour l'instant. Et nous allons dire ça, nous allons juste dire lien. Et je vais sauver ça. Et puis maintenant, nous pouvons simplement copier toute
cette colonne et la coller de cette façon nous avons deux colonnes avec une carte à chacune. Allez-y et enregistrez cela, retournez sur le site Web et actualisez. Et vous pouvez voir qu'on a deux cartes là-dedans. Une chose qu'on a oublié de faire était de mettre ça dans un conteneur pour qu'on ait un peu d'espacement sur le côté. Donc je vais juste aller au
conteneur ici et ensuite juste envelopper tout ça à l'intérieur d'un conteneur. Super. Donc maintenant, nous sommes un peu plus
confinés, avons un peu d'espacement intégré. Maintenant, tout a l'air bien. Tellement génial. La section suivante, nous allons passer à l'ajustement du pied de page, nettoyer un peu et aller à partir de là.
9. Footer et connexion en CSS personnalisée: Donc, cette section, nous allons travailler sur le pied de page. Encore une fois, ce que nous allons utiliser certains éléments Bootstrap pour formater cela un peu plus rapidement. Mais je vais vous montrer comment faire ça. Nous allons nous rendre sur le site Web de Bootstrap, getbootstrap.com. Et puis on ira à Docs et on fouillera sur Twitter. Je clique sur ce premier résultat ici. Et tout ce que nous allons chercher ici, c'est juste un exemple de quelque chose que nous voulons faire. Donc on peut voir celui-là juste ici. On dirait que dans cet aperçu, c'était un peu différent. On dirait que c'était quatre colonnes. Donc, on va juste y aller et faire ça. On dirait que ça a un peu de mal, mais on va aller de l'avant et en faire quatre colonnes. Donc, nous pouvons le faire en retournant dans l'éditeur de code. Et en ce moment, nous avons le fichier de la page d'accueil ouvert. Mais ce que nous voulons ouvrir maintenant, en fait ce que nous voulons créer maintenant est le fichier footer.html. Donc, à l'intérieur du cours Web, ou peu importe ce que vous avez appelé votre thème, le thème enfant ici nous allons faire un nouveau fichier, footer.html, CPI. Et dans ce fichier, nous pouvons juste aller de l'avant et commencer à taper ce que nous voulons dans le pied de page. On va faire quelque chose de simple. On va faire un div avec une classe de conteneur. A l'intérieur de cette div fera une rangée. Et puis nous ferons 43 colonnes de largeur. Entrez sur ça. Et puis on peut dire 1, 2, 3 et 4. On va sauver ça. Et nous pouvons aller de l'avant et remettre à la page d'accueil I fichier PHP. Et pourtant, nous avons le pied de page inclus. Revenons donc au navigateur. Allez sur notre site Web, actualisez la page. Et vous pouvez voir que nous avons nos quatre colonnes ici. La raison pour laquelle il s'est débarrassé de ce que nous avions auparavant est parce que ce que nous avions auparavant était dans le thème des parents. Donc on va retourner dans ce pied de page PHP. Donc, il s'agit du fichier de pied de page Thèmes parent. Tout ici est immédiatement remplacé dès que nous
créons le fichier PHP point de pied de page dans notre thème enfant, ce que nous avons fait ici avec nos quatre colonnes. C' est la raison pour laquelle c'est arrivé. Super. Maintenant, nous pouvons revenir à cet exemple de bootstrap. Et on dirait qu'ils ont un logo, puis trois menus. Nous pouvons donc aller de l'avant et faire quelque chose de semblable à cela. Donc nous pouvons faire, Faisons un lien avec une image. Et je vais juste utiliser la même image que nous avons utilisée dans l'en-tête juste ici. Est-ce que c'est dedans ? Et puis venez à, nous allons juste faire une liste non ordonnée, simple élément de liste. Et on en fera un autre là-dedans aussi. Et puis nous allons juste copier ceci, mettre dans les deux autres colonnes, va rafraîchir. Et on y va. Donc pour l'instant, c'est un peu près ensemble. Nous pouvons ajouter quelques styles ici. Je peux vous montrer comment connecter votre propre feuille de style personnalisée au site Web. Revenons à l'éditeur de code. Et puis à l'intérieur du thème enfant, allez dans et créez un nouveau dossier. On va juste appeler ça CSS. Puis à l'intérieur de cela, nous allons dire styles.css. Super. Et puis ce sera notre feuille de style personnalisée. Et puis ce que nous devons faire maintenant pour réellement le connecter au site Web. Si vous vous souvenez précédemment, j'ai mentionné que nous n'ajoutons pas réellement ces feuilles de style personnalisées directement à l'en-tête du site Web. Mais ce que nous voulons faire est de les ajouter dans le fichier functions.php. Ouvre ça. Et pour rendre les choses un peu plus faciles, nous pouvons simplement copier ce Bootstrap que nous avons fait. Et je veux juste mettre ça juste là, changer un peu. Nous pouvons dire CSS personnalisé. Et puis ce que nous voulons faire à la place de ce lien, nous voulons faire obtenir des feuilles de style, répertoire, URI, point, guillemets ouverts, et nous dirons les styles CSS que CSS lors de l'enregistrement. Et puis si nous voulons nous assurer que nos styles fonctionnent, nous pouvons revenir à notre nouvelle feuille de style. Et on peut dire, disons que les H sont rouges. Sauve ça. Et on peut retourner au pied de page. Et juste pour tester cela, nous allons ajouter un élément ici. C' est un test, sauvez-le. Et puis nous allons revenir au navigateur et rafraîchir. Et maintenant, vous pouvez voir qu'il y avait déjà un H1, donc celui-ci est rouge et c'est ainsi, sorte que c'est génial. Cela signifie que notre feuille de style est connectée et fonctionne. Donc, ce que nous pouvons faire maintenant est en fait juste ajuster une partie de l'espacement ici. Débarrassez-vous de cela et nous allons juste dire div avec ni que nous pouvons aller de l'avant et juste faire. La classe de pied de page, a un haut de rembourrage de 50. Enregistrez cela, accédez au pied de page et à la classe de pied de page au conteneur global. Et cela devrait nous donner un peu d'espace. Analyse parfaite. Je vais me débarrasser de ça. Un porte-place là-bas. Très bien, ça a l'air bien. Donc, il y a le pied de page et aussi comment connecter une feuille de style personnalisée à la chose.
10. Contenu dynamique: Donc, dans cette section, nous allons réellement aller sur la façon extraire des données ou du contenu du backend ou l'éditeur WordPress et effectivement montrer ce contenu sur l'extrémité frontale du site Web au visiteur, en visitant réellement la page. Donc, ce que nous voulons faire est d'aller de l'avant et de revenir dans le tableau de bord si vous ne l'êtes pas déjà. D' accord. D'accord. Maintenant que je suis de retour dans le tableau de bord, on va aller de l'avant et revenir à la page d'accueil. Quelques pages sur la page d'accueil de gauche. Et je vais juste ajuster les options d'écran ici. Ne préférez pas être en mode plein écran. J' aime juste le mode par défaut dans la barre latérale. ce moment, nous regardons le nom de la page et puis cela serré à deux ou choisir un bloc. Il s'agit du contenu réel de la page. Donc, par défaut, cela comme l'éditeur WordPress Gutenberg. C' est très bien. On peut le garder tel quel. Et tout ce que je vais faire ici, c'est dire que c'est du contenu de test. Ceci sera affiché sur la page. Et je vais aller de l'avant et cliquer sur Mettre à jour. Donc juste une phrase simple, 12 phrases ici, à des fins d'exemple. Alors allez-y et visualisez la page. En ce moment, ça ne montrera rien dans notre fichier de modèle. Nous n'avons rien configuré pour extraire ces données. Donc, ce que nous voulons faire est de retourner à l'éditeur de code et nous voulons ouvrir notre modèle de page d'accueil. Et au lieu de cette phrase ici, nous allons vraiment vouloir que ce soit notre contenu que nous venons de mettre dans l'éditeur de page. Donc, pour ce faire, nous devons utiliser ce qu'on appelle le WordPress une boucle. Dans un bon exemple de ceci est dans le thème parent dans le fichier PHP point de page. Alors allez-y et trouvez ça, ouvrez ça. Et je vais juste embellir ce fichier pour qu'il soit un peu plus facile à lire. D' accord ? Donc, à partir de la ligne 3, c'est en fait ce qui commence la boucle WordPress. Donc, il dit si avoir des messages, tout en ayant des messages, obtenir le contenu de la publication. Ce sont toutes les fonctions par défaut de WordPress. Ce n'est rien de coutume. C' est exactement ce avec quoi nous devons travailler. Donc ce qu'on veut faire, c'est juste prendre cette ligne. Copiez cela et nous allons revenir à notre modèle de page d'accueil. Et nous pouvons mettre cette ligne juste ici. Donc nous allons dire ligne trois coller. Et puis juste en dessous du pied de page, nous pouvons simplement fermer ces déclarations if et while. Alors allons de l'avant et terminons le quoi. Allez-y et ouvrez d'abord les crochets PHP, puis nous dirons fin tout en sauvegardant cela. Donc en ce moment tout cela veut dire que s'il y a un post et que nous avons le post, obtenez les post-données, nous affichons une page, donc nous allons avoir un post à montrer. ce moment. Il va toujours montrer tout ce que nous avons codé. Mais juste pour vous montrer que rien ne va casser, nous allons de l'avant et rafraîchir la page. On dirait exactement la même chose. Super. Alors revenons très vite. Et puis ici, au lieu de ce paragraphe, nous pouvons simplement dire, ouvrons nos crochets PHP ici et nous dirons le contenu de soulignement. Et encore une fois, c'est une fonction spécifique WordPress. Ce n'est rien que nous devions faire seuls. Allons-y et sauvegardons ça. Et ce que cela fait, c'est en fait tirer importe quel contenu est à l'intérieur de l'éditeur. Cela devrait nous donner une phrase à notre détenteur. Juste là, c'est, et c'est du contenu de test, du contenu, cela sera affiché sur la page. C' est donc juste un très bref exemple de la façon d'extraire contenu dans la page à partir de l'éditeur. Dans la section suivante, nous allons réellement passer sur un plug-in que j'utilise sur presque tous mes sites WordPress qui élargissent cette fonctionnalité en une tonne d'options de champ différentes, images, tout ce que vous pouvez penser. C' est en fait un
outil vraiment, vraiment génial à utiliser lorsque vous construisez sur des sites Web de clients. C' est beaucoup plus efficace que d'utiliser un plugin Page Builder. Donc je suis vraiment excité de vous le montrer dans la prochaine section.
11. Configuration avancée: Très bien, Donc, dans la dernière section, nous sommes allés sur la façon tirer juste une phrase simple ou deux de l'éditeur de page sur notre modèle de page pour réellement montrer sur le front de notre site Web. Dans cette section, je vais en fait vous montrer les gars un plug-in que j' utilise presque sur chaque site WordPress que j'ai construit pour les clients. C' est un excellent outil pour prendre cette fonctionnalité que nous venons d'apprendre et
l'étendre en un tas d'éléments différents à tirer. Donc, nous avons des images, nous avons des codes de couleur, nous avons des éléments répétés, nous avons des tableaux. Il y a une variété illimitée d'éléments à tirer de l'utilisation de ce plugin. Donc, les polygones l'appellent réellement des champs personnalisés avancés. Je vais laisser un lien vers cela dans la description du cours. Ce plug-in a une version gratuite et une version pro. La version pro en vaut la peine à mon avis. Et il vous donne quelques autres éléments qui sont vraiment,
vraiment puissants pour les sites Web. Sans entrer trop en profondeur, vous pouvez voir toutes sortes de pages d'options, galeries, cloner un champ, et ainsi de suite. Juste un tas de trucs que vous obtenez avec ce plugin vraiment, vraiment génial. Quoi qu'il en soit, la version gratuite est plus que suffisant pour ce que nous devons apprendre ici. Donc, ce que vous pouvez faire est en fait retourner dans votre tableau de bord WordPress. Et on va aller à Plugins, puis Ajouter Nouveau. Et on peut juste chercher ça. Donc, nous allons dire champs personnalisés avancés. Et c'est celui-là, 1 million d'installations. Et vous pouvez voir qu'il y a un tas d'autres plug-ins et une sorte de développer sur les listes de champs déjà massives qu'ils ont intégrées. Ainsi, vous pouvez voir qu'il ya une Gravity Forms, ajouter sur la police, impressionnant, ajouter sur la table sentir que sur étendu et ainsi de suite. Donc, une fois que ce fichier est téléchargé, allez-y et cliquez sur Activer. Et maintenant, nous pouvons passer aux champs personnalisés et à la barre latérale. Et un aperçu rapide de cela, ce plugin ici. Donc ce qu'on veut faire, revenons à ça. Donc, ce tableau de bord ici, les champs personnalisés avancés page d'accueil, si vous voulez. C' est là que vous allez gérer tous vos champs personnalisés qu'ils utilisent, ont configurés pour n'importe quoi. Les pages publient des types de publication personnalisés, ce que vous pouvez penser, des pages de catégorie et ainsi de suite. C' est que nous allons gérer tout ça. Donc, ce que j'aime faire est de cliquer sur Ajouter un nouveau, et de les diviser en différents groupes en fonction de la page. Donc, pour ce groupe, je vais juste le nommer la page d'accueil et les règles de localisation. C' est là que vous allez réellement désigner ce groupe de champs pour afficher uniquement la publication spécifique ou la page spécifique à laquelle vous souhaitez qu'elle apparaisse. Donc, ce que nous devons faire, c'est dire que nous pouvons le faire de deux façons différentes. Si nous voulions qu'il soit juste sur n'importe quelle page, nous pourrions simplement changer de poste une page. Et maintenant, chaque fois que nous créons une nouvelle page, ces champs apparaîtront là, mais nous voulons être un peu plus précis. Donc, nous voulons réellement cibler le modèle de page. Et s'il est égal au modèle de page d'accueil que nous avons créé, nous voulons que ces champs apparaissent. Super, Donc, nous pouvons aller de l'avant et laisser cela et nous pouvons cliquer sur Ajouter un champ. Donc ce que je vais faire, c'est au lieu d'utiliser cet éditeur WordPress par défaut de Gutenberg pour notre phrase, je vais juste dire phrase de héros. Et puis Tad, cela crée réellement le nom du champ par défaut avec un trait de soulignement. Il remplace les espaces par des traits de soulignement. Vous pouvez également changer cela si vous voulez qu'il soit un peu différent. Nous pouvons laisser cet ensemble au texte. Je le mets généralement à un éditeur wysiwyg si je vais construire toute la section. Donc je vais le faire ici. Je vais changer ça en contenu de héros et contre-ténor de héros. Sois juste un peu plus précis. Je n'aime pas que quelque chose soit nécessaire à moins que ce soit absolument nécessaire. Cela devient un peu difficile si vous deviez
revenir une fois que vous avez votre site Web construit un peu plus. Et vous voulez revenir en arrière et ajuster certains paramètres ou faire de nouvelles pages, se
débarrasser des pages, des trucs comme ça. Si vous avez déjà besoin de champs, cela devient un peu délicat. m'assure juste que tout correspond. Donc, j'aime tout laisser comme pas nécessaire. Et nous pouvons laisser le reste tel quel. Super. Alors allons de l'avant et publions ceci. Et ce que cela fait, c'est juste enregistrer nos paramètres ici. Nous pouvons revenir à la page d'accueil de nos pages. Et maintenant, puisque notre modèle est défini sur le modèle de page d'accueil, nous pouvons maintenant voir notre groupe personnalisé ici, qui est juste étiqueté page d'accueil avec le contenu du héros avec un éditeur wysiwyg. Donc, ce que nous pouvons faire est en fait simplement copier cette phrase et ensuite simplement la coller ici. Et je vais voir la page très rapidement avant d'enregistrer quoi que ce soit. Et en fait, je vais juste attraper celui-là. Et mettez-le ici aussi. Super, Donc, nous avons un H1, laissez-moi juste un paragraphe en dessous. Je suis sur Mettre à jour, puis afficher la page. D' accord, donc on s'est débarrassés de cette phrase, alors c'est parti et le titre est toujours là. Donc, c'est ce que nous devons faire maintenant est de revenir à notre éditeur de code. Et nous pouvons nous débarrasser de cet alignement ici, cet élément H1. Et nous pouvons nous débarrasser de ce paragraphe ici. Et tout ce que nous devons faire maintenant, c'est dire, il a ouvert nos crochets PHP et dire le contenu du héros de champ. C' est donc le nom du champ que nous venons de créer. Et le champ, c'est un, c'est un champ personnalisé avancé fonction par défaut qui appelle réellement ce champ à partir de la base de données. Alors continuons et sauvegardons cela et actualisons notre page. Et maintenant, nous voyons nos éléments H1 ici. Notre texte de paragraphe est ici, puis les boutons étaient là tout le temps. Super. Et donc vous pouvez voir que nous n'avons pas de texte codé en dur ici. Il tire simplement cela de la base de données. Et nous pouvons modifier ce contenu. On peut juste copier ça quelques fois de plus juste pour qu'on obtienne plus de texte là-dedans. D' accord. Parfait. Donc tout fonctionne exactement comme nous le voulons. On peut faire la même chose pour ces cartes. Nous pouvons en fait utiliser des champs personnalisés avancés pour cela également. On peut même le faire pour le pied de page. Je vais donc vous montrer comment faire ces deux cartes dans cette section. Donc, ce que nous voulons faire est, je suis désolé, revenir au tableau de bord, les champs personnalisés
avancés sont des tableaux de bord et ajouter de nouveaux. Nous voulons revenir dans la page d'accueil et ajouter un champ. Donc, pour simplifier les choses ici, on va juste dire à gauche, carte gauche. Et puis on va faire de celui-ci un groupe. Et puis à l'intérieur du groupe, nous avons des sous-champs. Donc, si nous retournons à notre page d'accueil, nous pouvons faire le titre et le sous-titre. En fait, revenons en arrière. Donc, nous avons un H5 et ok, super, Ouais, nous pouvons le faire comme un éditeur wysiwyg et nous pouvons réellement ajouter un élément pour faire ce lien, fera cela à la fois pour le côté gauche et le côté droit. Revenons à l'éditeur de champ ici nous allons ajouter un champ. Nous allons juste dire titre et sous-titre. Et juste pour nettoyer un peu cela, nous allons dire sous-titre titre de
soulignement, changer ceci en éditeur wysiwyg. Et c'est tout ce qu'on a à faire pour celle-là. Et puis nous allons dire bouton, bouton, et ensuite nous pouvons changer ça pour voir ce qu'on veut pour ça seul. On veut un lien. Et bien, alors maintenant ce que nous pouvons faire ici, nous avons la carte de gauche. champs personnalisés avancés le rendent vraiment facile. Nous pouvons juste dupliquer et puis changer cela jusqu'à dire ou écrire la carte, carte droite. Et puis on peut garder ça les mêmes. Et puis nous pouvons mettre à jour ceci et revenir à l'éditeur de la page d'accueil. Et maintenant, vous pouvez voir où la carte gauche et la carte droite. Et ce que je vais faire, c'est juste copier ce contenu, coller ici, et croire que c'est la même chose pour celui-là. C' est vrai, je vais sauver ça. Et puis le bouton, nous pouvons sélectionner un lien. Je vais juste faire un lien réservé. Je pense. La même chose ici. Ok, on est tous là. Ça va se mettre à jour. Sera la page à nouveau, rien ne va changer. Mais ce que je veux vous montrer, c'est la documentation avancée des champs personnalisés. C' est vraiment, vraiment génial. Il montre beaucoup d'exemples sur la façon d'utiliser à peu près tous les champs avec quelques exemples différents pour chacun. Donc, ce que vous pouvez faire est en fait juste chercher, qui est cliqué sur la mauvaise couche. Allons à la documentation. Et puis on va dire « groupe ». Défilons vers le bas. Ainsi, vous pouvez voir l'utilisation du modèle. Il y a le contenu d'affichage, il y a l'exemple de boucle, comment afficher le même groupe en utilisant la fonction have rows. Et nous allons simplement aller simple et juste copier cet exemple de contenu d'affichage. Donc, ce qu'on veut faire ici, c'est qu'ils ne se sont pas mis en héros, avoir un héros de champ de soulignement. Cela ressemble beaucoup à ce que nous avons déjà utilisé dans notre modèle, le champ. Donc, la différence ici est si nous allons enregistrer la valeur de notre champ personnalisé à l'intérieur d'une variable. On voulait avoir un champ de soulignement. Cela n'affiche pas le champ et le définit, il suffit de le tirer et de le stocker ensuite dans la variable. Si nous devions dire le champ ici, cela serait en fait une erreur. Ça ne marcherait pas. C'est donc la différence entre les deux. Si vous voulez juste afficher le champ exactement comment il est, allez-y et faites-le simplement si le champ et enregistrez-le dans une variable que je suis allé obtenir le champ. C' est donc ce que nous allons faire. Voici juste une vérification simple pour voir si cela a réellement quelque chose et puis vous l'affichez simplement comme vous le feriez normalement. On dirait qu'ils ont ajouté quelques styles ici. Et vous fermez juste l'instruction if. Super, alors allons-y et faisons-le. On peut le faire ici sur la ligne 16, on va juste dire que la carte gauche est égale et obtenir la carte gauche du champ. Et puis à PHP si fente carte. Et puis juste après la carte va juste fermer que si déclaration. Donc on n'oublie pas. Et maintenant, puisque cette valeur est définie dans l'éditeur, si nous actualisons la page et nous devrions toujours voir le même contenu puisque nous n'avons rien changé. Parfait, il est toujours là. Et puis maintenant, nous pouvons juste ajuster cela comme il faut. Donc, au lieu de coder le H5 et le paragraphe, nous allons juste dire le champ. J' ai déjà oublié ce qu'on appelait. Retournez ici. Nous l'avons appelé sous-titre. Ok, je vais copier ça et ensuite coller là. Et maintenant, je vais juste l'enregistrer et rafraîchir la page. Et il n'est pas là. Alors voyons ce que nous avons de mal ici. Eh bien, c'est vrai. Puisque nous utilisons le champ de groupe, nous devons en fait référencer la variable de champs de groupe, puis dire quel champ vous voulez l'intérieur. Alors, allons-y et changeons un peu ça. Mais il disait le champ que nous allons dire, d'accord, allez à gauche, et ensuite nous allons dire sous-titre. Parfait, il est là. Et vous remarquerez que j' utilise
réellement les crochets au lieu des parenthèses. C' est exactement ce que vous utilisez lorsque vous
référencez réellement une valeur ou un champ qui se trouve à l'intérieur d'un groupe. C' est donc la différence entre les parenthèses getfield et ensuite le champ echo de l'intérieur d'un groupe. Donc nous pouvons faire la même chose pour le lien. Donc, au lieu de juste le mot lien, nous allons dire PHP qui vont bouton de carte gauche. Et comme il s'agit d'un champ de lien, nous allons dire titre. Et puis nous allons copier ça, exactement
la même chose ici et la déplacer là où se trouve le FRH. Et puis cela au lieu du titre, nous dirons URL. Ensuite, nous allons enregistrer ce rafraîchissement. Et vous pouvez voir notre titre changer le lien de test, qui est ce que nous avons mis dans l'éditeur. Et si nous l'inspectons, vous pouvez voir que le HRF est également changé à ce que nous avons dans l'éditeur. Grand, Donc, pour faire le bon côté, nous pouvons simplement copier et coller, va découvrir est énorme si déclaration ici et juste remplacer ici et changer les valeurs. Donc, au lieu de la carte gauche, on veut juste droite, droite. Et puis nous devons le changer ici aussi. Et si nous actualisons, vous pouvez voir que ce titre change le lien de test en, puis l'URL est également modifiée. Parfait. C' est donc juste une vue d'ensemble rapide de très haut niveau des champs personnalisés avancés et
comment utiliser cela pour extraire
le contenu de l'éditeur et réellement le montrer au visiteur du site Web. Dans la section suivante, je vais aller sur le post sur la page ou le post sur le site. Et en fait, comment les faire éditer le modèle et l'afficher soit dans un format de blog ou juste sur cette page d'accueil dans quelque chose comme une mise en page de trois colonnes. Ce sera donc la prochaine section.
12. Publication de blog - Créer, montrer et le style: J' espère que vous appréciez la classe jusqu'à présent. Dans cette section, nous allons passer en revue les articles de blog et comment
les faire modifier le modèle et effectivement les obtenir pour qu'ils apparaissent sur le site Web. Alors nous allons juste sauter là-dedans. Faites votre chemin vers le tableau de bord WordPress et cliquez sur les messages. Donc, par défaut, WordPress vous donne le poste, le type de poste. C' est généralement ce que vous allez utiliser lorsque vous créez un blog sur votre site Web ? Il existe des types de messages personnalisés. Je ne sais pas si je vais entrer dans ça dans ce cours ou non. C' est un peu plus un sujet de haut niveau. C' est plus pour juste les bases de la création d'un thème WordPress. Mais de toute façon, donc pour créer un post wordpress vous donne ce par défaut. Je vais aller de l'avant et jeter ça et juste en ajouter un nouveau. Et nous dirons le titre de test un et juste le contenu ici pour notre post de test. Et je vais juste copier ça quelques fois pour le remplir. Et je vais le publier, puis voir le post. Donc, cela est en fait en utilisant un modèle de page non stylé, essentiellement juste montré ce post. C' est très non formaté. n'y a pas de styles et a toujours notre ancienne barre latérale, mais il utilise l'en-tête et le pied de page que nous avons créés. Donc c'est bien. Donc, nous allons dans la façon d'ajuster réellement ce modèle ici. Alors, sautez dans l'éditeur de code. Et vous pouvez voir dans le thème parent, il y a un fichier appelé single.php. Php. Donc, c'est en fait le fichier que WordPress utilise pour afficher ce billet de blog. Donc nous allons juste voler un peu de code et faire le nôtre. Donc, sautez dans le thème de l'enfant et faites un nouveau fichier. Et nous allons appeler ce point unique PHP. Et nous allons réellement copier tout à partir du thème parent single dot PHP, et il suffit de le coller dans notre fichier de thème enfant. Et on va s'en débarrasser. Nous allons nous débarrasser des commentaires. On ne veut pas ça pour le moment. Et puis le pied de page principal et nous allons nous débarrasser de la barre latérale aussi bien. Aussi cette principale. Super. Donc en ce moment nous avons l'en-tête, nous avons notre boucle WordPress, et ensuite nous avons le pied de page. Alors continuons et sauvegardons cela et actualisons la page maintenant il ne devrait rien montrer. Bon, maintenant il ne devrait rien montrer sauf l'en-tête et le pied de page, qui est exactement ce que nous voulons. Et puis maintenant, nous allons juste revenir à notre éditeur et en fait construire cette page. Donc, je vais juste faire une mise en page très simple en deux colonnes. Donc, pour commencer, nous allons juste dire conteneur div avec une ligne, et puis nous allons juste utiliser les classes Bootstrap ici pour faire le côté contenu. Et puis nous ferons juste une barre latérale ici. Et on en dira quatre. Parfait. Donc nous dirons les groupes de gauche. Et génial, Alors
allons de l' avant et rafraîchissons cela et assurez-vous juste que nous avons notre mise en forme et configuration de mise en page parfait. Et puis nous pouvons utiliser quelques fonctions par défaut WordPress, un peu de code et réellement tirer du contenu de poste dans ce modèle. Donc, nous voulons faire est juste de dire le titre. Et puis nous dirons PHP, le contenu. Donc, en ce moment, cela va juste montrer le titre et le contenu sur la page. Parfait. Évidemment, ça n'a pas l'air très bien en ce moment. Alors, changeons un peu ça. Donc, disons que nous voulons que le titre soit dans un H1, donc nous allons juste faire une nouvelle ligne. Un. On va déplacer ça ici. Et puis nous pouvons dire le titre du blog. Et puis nous allons juste envelopper ça dans un div pour l'instant. Et nous allons juste dire le contenu du blog. Parfait. Et puis en fait, nous allons aller dans notre feuille de style personnalisé que nous avons fait. Et nous allons juste dire le titre du blog, le poids de la police, le gras, remplissage, en fait, le bas de la marge 25, juste pour donner un peu d'espace. Parfait. Et puis une chose de plus quand il est en fait repousser ça, tout
ce conteneur entier loin de l'en-tête. Alors revenons au single et nous allons juste dire billet de blog. Nous allons juste dire 50 et ensuite rembourrer le bas 50 ainsi pour le repousser du pied de page. Rafraîchissez ceci, nous verrons que prendre effet parfait, déjà à l'air mieux. Disons que nous avons une image en vedette pour ce billet de blog. Et en fait, allons-y et ajoutons ça maintenant. Donc, nous allons simplement cliquer sur Modifier la publication. Et puis l'image en vedette sur la droite. Nous allons juste télécharger cette image. Vous pouvez télécharger n'importe quelle image de votre choix. Une mise à jour. instant, ça ne va rien montrer. Donc, nous allons sauter dans notre éditeur de code et ensuite notre fichier PHP single.php. Et juste au-dessus du titre, Faisons une nouvelle ligne avec une balise image. Et nous dirons à l'intérieur de la source, Il ouvre quelques crochets PHP. Et nous allons dire, ici,
à l'intérieur de notre boucle, nous allons juste dire que l'URL de l'image est égale à obtenir l'URL de la vignette de publication. Et à l'intérieur, on va dire chercher la carte d'identité. Et c'est juste une fonction WordPress par défaut pour obtenir l'ID du post actuel qui est à l'intérieur de la boucle. Et puis nous allons définir la taille de l'image que nous voulons. Nous voulons la taille réelle et nous fermerons ça. Super. Donc, en ce moment, nous avons l'URL de l'image
en vedette pleine taille que nous venons de télécharger enregistré dans cette variable. Donc, nous allons bouton enregistrer cela ou copier cela. Et nous allons revenir à notre balise d'image et dire écho à cette variable. Et puis nous pouvons rafraîchir notre page. Et maintenant, vous pouvez voir notre image est là. On dirait qu'il se chevauche un peu. Nous pouvons ajuster cela aussi. Mais c'est génial. Alors nous allons sauter dans notre feuille de style et éditer ceci. Nous allons dire billet de blog. Largeur maximale de l'image de 100%, hauteur. Auto devrait contenir à l'intérieur de notre colonne. Parfait. Donc, à la recherche beaucoup plus comme un billet de blog maintenant, nous avons une configuration d'espacement décent. Nous avons notre image ou notre titre et du contenu sur le côté droit. C' est généralement là que nous
afficherions articles similaires liés à des catégories ou des balises que vous pourriez avoir configurées. ce moment, je vais juste mettre des espaces réservés là-bas, mais on peut en fait plonger là-dedans tout de suite. Donc, à l'intérieur du fichier PHP à point unique, ce côté droit, Faisons juste un div et appelons-le lié au blog. Et puis à l'intérieur de cette campagne, donc ils vont avoir une rangée qui a une colonne de gros pore coulomb avec une image. On va juste laisser ce vide pour l'instant. Et puis la colonne suivante. Ce sera le titre et une courte phrase. Aperçu du contenu. Allons sauver ça et voir à quoi ça ressemble. Ok, donc on n'a pas d'image, mais cet espacement semble bon. Il y a un titre, puis un aperçu. Super, Donc en fait pour obtenir du contenu pour apparaître ici, Allons-y et faire un nouveau billet de blog détenteur de place. Revenons au tableau de bord. On va juste nommer ce test. J' utiliserai les mêmes images pour les tests. Et puis un peu de contenu ici. Le contenu avant le test 2 est contenu pour le test 2. Et je fais juste cela un peu plus longtemps juste pour que je puisse vous montrer les gars comment montrer un aperçu au lieu de tout le contenu publié ce post. Et oups, nous allons vraiment revenir en arrière et voir notre premier post que nous avons fait. Et ce qu'on veut faire, c'est faire venir ce second post ici. Pour que nous puissions retourner dans notre éditeur. Et ce que nous voulons faire ici est essentiellement dire s'il y a un autre post que nous voulons montrer ce bloc de contenu, cette boîte liée au blog que nous venons de créer. Donc, ce que nous pouvons faire est en fait exécuter une, une autre boucle WordPress pour obtenir des messages supplémentaires sur cette page. Nous devons essentiellement tirer une autre boucle dans la page ou ouvrir des ups et des crochets PHP. Et nous allons dire ARDS, ce qui est abrégé pour les arguments. Tableau. Ouvrez ça et on va dire post par page. On va régler ça à trois. C' est juste dire que nous ne voulons que trois messages à l'intérieur de cette boucle. ce moment, nous n'avons qu'un autre détenteur. Mais nous voulions limiter ça à trois. Nous allons dire le type de poste, nous voulons regarder exclusivement post. Et puis nous dirons le statut de poste. Et nous ne voulons que les messages publiés. Super. Et puis nous pouvons fermer ceci et ensuite nous allons faire une nouvelle ligne et dire la requête que nous voulons exécuter,
définir cette variable, nous allons dire nouvelle requête WP avec notre art que nous venons de définir. Et puis nous dirons si cette requête a poster une requête. Hôte. Nous voulons saisir l'image en vedette. Et encore une fois, l'image en vedette est bonne, l'URL de la vignette de publication. Et puis maintenant, nous allons dire obtenir l'ID de ce post et la taille réelle peut réellement obtenir le pouce. Maintenant. Fermez ça. Et puis nous allons juste fermer de cette façon fait oublié le moment. Pendant que. Les groupes de requêtes ont des publications. Et puis ici, on a juste besoin de les fermer. Juste comme ça. Ne vous inquiétez pas, obtenez une erreur ici quelque part. Débarrassez-vous de ce support. Super. Donc, en ce moment, nous avons cette ligne ici qui
tire juste dans le titre de ces post ici que nous venons de saisir. Et puis nous pouvons également saisir l'image en vedette, l'image URL. Et nous pouvons enregistrer ceci et rafraîchir notre page. Et vous pouvez voir là, nous avons la vignette et nous avons en fait les deux messages parce que maintenant nous regardons n'importe quel poste et puis en saisissons trois. Donc, par défaut, cela va réellement attraper le post actuel que nous regardons, nos posts secondaires que nous venons de créer. Nous pouvons donc prendre une autre étape pour
exclure réellement le post actuel que nous examinons parce que nous ne voulons pas vraiment le voir dans nos articles connexes ou similaires sur notre barre latérale. Et pour ce faire, c'est vraiment facile. On va juste sauter dans l'éditeur de code. Et là, nous allons ajouter un autre argument et nous
allons juste dire post, tock in. Et je ne dirai pas de boucles de tableau. Identifiant de poste. Allez-y et sauvegardez ceci, actualisez notre page. Et cela ne l'a pas fait. Et ce serait parce que je pense que j'ai mes traits de soulignement hors de propos. Laisse-moi revenir ici. Et oui, ça devrait être un et ça ne devrait pas être trop parfait. Donc, cela se débarrasse du poste actuel d'être dans la barre latérale. Je vais en fait commenter cette ligne juste nous
puissions les ajuster correctement ici. Et puis je l'ajouterai. Alors, commentez que trois frais et puis voyez maintenant comment ceux-ci sont touchants. On voulait juste un peu de séparation ici. Donc tout ce que nous avons à faire est juste de saisir cette classe que nous lui avons donné blog soulignement sans rapport, et juste ajouter le bas de la marge. On dira juste 25 pixels. Parfait. Donc maintenant, nous avons une bonne configuration d'espacement. Maintenant, nous avons juste besoin de changer cette phrase d'espace réservé pour extraire le contenu que nous avons réellement mis dans l'éditeur de post. Donc, pour ce faire, nous allons sauter au point unique PHP. Et puis nous allons dire que les crochets PHP écho, obtenir le trait de soulignement x. juste comme ça. Et c'est une autre fonction WordPress par défaut qui
tire juste une certaine quantité de caractères du contenu de la publication et l'afficher sur la page. Donc, sauvegardons cela et puis actualisons cela. Maintenant, vous pouvez voir que nous avons vraiment tiré le vrai contenu là-dedans. S' il s'agissait de paragraphes et de paragraphes de contenu, il n'y aurait toujours qu'un certain nombre de caractères dans cet aperçu. Il y a certaines choses que nous pouvons faire pour rendre cela un peu plus petit. Nous pouvons enregistrer le contenu dans une variable et ensuite utiliser une fonction PHP pour le couper. Encore une fois, nous pouvons rendre la police plus petite. On peut faire un tas d'autres choses. Ils ont un stylet, stylisent ça un peu plus. Mais pour nos besoins, c'est un bon début ici. Donc, la section suivante, nous allons juste aller sur quelques extrémités lâches ici avec votre développement de thème WordPress personnalisé. J' espère que vous les gars ont suivi le long de la construction votre propre site de test juste pour avoir une idée de la façon dont WordPress fonctionne, ce que vous pouvez faire avec, quels plugins vous pouvez utiliser le genre élargir la fonctionnalité dans le back-end. C' est vraiment génial pour quand vous passez du site Web à un client. De cette façon, ils n'ont pas à entrer dans le gros code pour faire des modifications majeures. C' est vraiment, vraiment utile pour ça. J' ai la moitié d'un tas d'autres choses. Je pourrais le faire plus tard sur la façon dont vous utilisez au
maximum les champs personnalisés avancés et construisez réellement un vrai thème avec de beaux éléments, des éléments fonctionnels et des choses comme ça. J' espère que vous êtes excités. Merci d'avoir pris le cours. Comme je l'ai dit dans la section suivante, on va finir les choses.
13. Montrez des publications de blog sur la page d'accueil: Très bien, donc dans cette dernière section, nous allons ajouter notre article de blog à la page d'accueil pour les présenter là-bas, ainsi que quelques autres choses. Donc, ce que nous allons faire est d'aller à la page d'accueil, délicieux cliquez sur le tableau de bord et nous allons visiter le site. Super, donc on est de retour sur la page d'accueil. Et ce que nous voulons faire est juste en dessous cette carte et cette carte nous voulons montrer nos deux billets de blog. Donc, nous allons revenir dans notre éditeur de code et aller sur le modèle de page d'accueil. Et puis juste en dessous de ce conteneur, on va juste faire un nouveau conteneur. En fait, on peut le faire en dehors de la boucle. Donc, disons que vous avez fait la ligne div conteneur. Et je vais juste faire un simple côte à côte, 5050. Et puis cela sera laissé et ce sera ou it. Donc, à chaque fois que vous vous rafraîchissez, assurez-vous qu'on l'a fait. Parfait. Très bien, donc maintenant tout ce que nous avons à faire est très similaire à ce que nous avons fait pour la barre latérale des billets de blog connexes ou similaires. Nous pouvons effectivement copier la plupart de ce code. Donc je vais juste aller de l'avant et décommenter ça, copier tout ça, et le déplacer sur la page d'accueil et le coller. Et puis on peut se débarrasser de ça, c'est juste parce qu'on n'en a besoin qu'un, parce que ça va courir deux fois. Je peux te le montrer en une seconde. Et puis nous avons juste besoin de, encore une fois fermer ces déclarations. Juste comme ça. Super. Donc pour l'instant, il est réglé à trois. Nous n'avons qu'à poster et nous voulons seulement poster où changer cela à deux. Nous pouvons nous débarrasser du poste inexistant et garder le reste. Et continuons et changeons simplement ceci pour le titre et actualisons. Et puis vous pouvez voir test Tidal un test intitulé deux, sont
les titres que nous avons donné notre blog réservé. Donc, cela fonctionne exactement comme nous voulons. Alors allons-y et stylisons ça un peu plus gentil. Et encore une fois, nous pouvons voler un peu dans ce code. Je vais juste saisir cette fonctionnalité qui est déjà là. Donc nous avons juste besoin de cette balise d'image. Titres. Ils veulent en fait envelopper ces 84 et les paragraphes. Je vais recopier et coller ça ici. Et puis vers le bas juste un peu et rafraîchir. Et puis cela devrait nous donner notre image miniature, le titre et le contenu. Vous voulez ajuster cela juste un peu. On peut aller de l'avant et changer au lieu de la miniature, c'est une sorte de taille moyenne. Allons changer ces H2. Et puis je veux envelopper tout à l'intérieur de sa propre div. Et nous allons dire blog, page. Parfait. Ce fichier juste un peu, puis nettoyez-le. Un de plus. Super. Va rafraîchir ça, voir ce que nous obtenons. Parfait, donc l'image est un peu plus grande. En fait, je vais juste changer toute la largeur juste pour qu'on les obtienne. L' effet réel ici, parce que c'est ce que nous voulons réellement. Parfait. Encore une fois, c'est une sorte de chevauchement. Nous allons corriger ça avec quelques styles en une seconde, mais nous avons un, ce que nous voulons. Alors prenons cette classe et passons à notre feuille de style personnalisée. Et nous allons dire que l'image devrait également être de largeur maximale à 100% automatique. Eh bien, nous voulons aussi faire juste ce cours. Nous voulons donner une marge supérieure de 50, marge inférieure de 50. Et puis donnons-lui un peu de bordure et peut-être un peu de rembourrage. Voyez à quoi ça ressemble. Très bien, donc, correspondant à la taille de la carte un peu, pas tout à fait la même chose. On peut ajuster ça, lui donner un peu de rayon de bordure. Dis juste cinq pixels. Et changeons ça pour quelque chose peut-être un peu plus léger, peut-être un peu trop léger, mais vous avez compris. air bien. Nous pouvons continuer sur ce point. Nous pourrions ajouter un bouton qui dit lire plus que les liens vers l'article. Nous pourrions changer la taille de l'image, ajouter plus de contenu et ainsi de suite. Mais c'est essentiellement comme ça que vous tirez un billet de blog sur un modèle de page. Nous pouvons effectivement lier à cela afin que je puisse vous montrer qu'il retourne à ce modèle. Alors chaque chose, nous allons juste envelopper tout ça ici à l'intérieur d'un lien. Et ce lien aura la largeur H de l'écho, obtenir le permalien. Et tout cela fait est un modèle WordPress, notre fonction à nouveau, qui obtient le lien vers le post qui est le post actuel dans la boucle et juste le met ici. Donc, nous allons aller de l'avant et sauver ça et rafraîchir. Et maintenant, vous pouvez voir tout cela changé en lien et nous pouvons simplement cliquer dessus et cela nous mènera directement à notre nouveau modèle de poste. Vraiment rapide. Je vais juste ajuster ça. Ces liens, textes, couleur noire. Et nous retournerons au cône. Et cela ne change pas ce que la page d'accueil, les deux lien de page d'accueil est à l'extérieur. Donc, nous pouvons faire ici est un blogs. Et puis changez ça pour dire. Très bien, parfait, exactement ce qu'on veut.
14. Conclusion du cours: D' accord, donc ça termine ce cours. Merci d'avoir suivi le cours. J' espère que vous les gars avez fait tout le chemin et l'avez trouvé utile et votre voyage à construire votre premier thème WordPress personnalisé. J' aime vraiment l'enseigner si vous avez des questions, n'hésitez pas à poser. J' ai vraiment hâte de voir ce que vous avez préparé. Cela a été très excitant, mettre en place ce cours, j'espère faire plus à l'avenir et j'espère que vous
allez continuer à revenir et apprendre de moi. Alors merci encore. J' espère que vous avez apprécié le cours.
Kyle Sampson, Web Designer & Developer
