Académie de développement de thèmes WordPress 5 avec Bootstrap v4

1. Introduction: Bienvenue à la WordPress Theme Development Academy en utilisant Bootstrap. Ceci est un cours de développement de thème WordPress entièrement mis en utilisant WordPress version 5 et le framework bootstrap 4. Si vous voulez faire passer vos compétences WordPress au niveau supérieur, développement de thème d'apprentissage est parfait pour cela. Il vous permettra de construire sites WordPress personnalisés qui ressemblent exactement à ce que vous voulez. Il vous donnera également un avantage par rapport aux autres développeurs WordPress en utilisant les thèmes préconstruits et en essayant de les personnaliser en fonction exactement ce qu'ils essaient de construire. C' est ce que vous serez en mesure de construire à la fin de ce cours. À la fin de cela, vous serez en mesure de construire presque n'importe quel type de nouveau site Web que vous voulez utiliser WordPress ou prendre n'importe quel site existant et le convertir en thème WordPress. Qu' est-ce qu'un thème WordPress exactement ? Pour voir ce que WordPress peut faire, jetons un coup d'oeil à quelques exemples. Voici la page du blog pour le thème que nous allons construire ensemble. Nous avons l'en-tête en haut ; lien vers les pages d'accueil et de blog, un sous-titre, une image d'en-tête et une superposition de texte. Puis ci-dessous nous avons le billet de blog listé sur la gauche, puis la barre latérale sur la droite. Ensuite, en utilisant exactement la même version de Wordpress et le même contenu, tout ce que j'ai fait ici est de passer à un thème différent en cliquant sur un bouton. Cela a le même billet de blog et nous pouvons également voir les liens de page sont les mêmes, mais un look complètement différent. Encore une fois, en changeant le thème une fois de plus, voici comment nous allons regarder en utilisant un autre thème préconstruit. Cela change complètement notre page de blog et toutes les autres pages de notre site. Aussi la même chose pour cet exemple deux, en changeant complètement le champ de nos sites Wordpress. Dans ce cours, nous ne ferons pas seulement le thème WordPress minimum, nous commencerons par créer une version statique HTML et CSS de ce thème en utilisant Bootstrap 4. Learning Bootstrap est aussi une compétence précieuse en soi, mais ensuite nous passons à la mise en place de WordPress et en regardant exactement ce qui est nécessaire pour convertir ce site en un thème. Nous couvrons toutes les étapes, y compris certains des concepts les plus avancés et difficiles tels que les champs personnalisés, la traduction de thèmes, formulaires de recherche personnalisés, l'utilisation de crochets, et aussi quelques fonctions personnalisées pour obtenir la fonctionnalité exacte que nous voulons. Si vous voulez être sérieux sur le développement de thème WordPress, inscrivez-vous à ce cours et je vous verrai en classe. 2. Qu'est-ce qu'un thème WordPress ?: Nous savons pour ce cours que nous allons construire dans un thème WordPress. Mais qu'est-ce qu'un thème WordPress exactement ? Eh bien, seulement la documentation officielle WordPress. Dans la section ce qui est un thème, nous pouvons voir qu'un thème Word Press et change une conception des sites Web, et souvent changer la mise en page, ce qui va alors changer la façon dont l'utilisateur final voit nos vues sur l'extrémité frontale , à savoir, quel visiter la maladie. Fondamentalement, un thème peut avoir différentes mises en page, il peut utiliser une mise en page statique ou réactive. Utilisera Bootstrap pour créer une mise en page réactive avec différentes largeurs de colonne. Cela prend généralement tous les autres contenus de WordPress, eh bien, si c'est la page est que nous avons créé, nous allons si tout post de blog, tous les médias tels que des images de vidéos et les affiche de quelque manière que nous créons dans notre thème. En descendant plus loin, les thèmes sont constitués de certains fichiers requis, comme le index.php, et aussi le style.css, et nous les ajouterons bientôt à notre thème. Nous allons également ajouter beaucoup plus de fichiers de modèles PHP, nous allons également créer des fichiers pour la localisation, qui est ce qui traduit notre thème. Sera utilisé dans plusieurs fichiers CSS et JavaScript pour inclure Bootstrap et généralement tout le reste du contenu dont nous aurons besoin pour construire notre thème. Si nous regardons le côté fini ici, c'est la peau du thème que nous allons construire pour tout ce cours. Il comprendra beaucoup de colonnes Bootstrap, lignes, images et texte pour créer la version finale, que vous voyez ici. Si nous allons à la section blog, ce sera tous les billets de blog que nous allons créer dans WordPress, et il va les parcourir et les afficher tous sur cette page, avec notre barre latérale sur le côté droit, ce qui nous permettra de rechercher à travers ces messages. Et aussi filtrer par les archives, les catégories, ou toutes les balises qui seront ajoutées. Si nous allons sur le tableau de bord, puis dans la section thème, c'est le thème du spa Tranquil que nous avons activé. Lors de l'installation de WordPress, nous avons également des thèmes par défaut qui viennent avec elle. Je vais activer un thème différent appelé 2019. Ensuite, si nous retournons à notre site et rafraîchir, nous voyons ces deux mêmes pages de la maison et du blog. Comme il utilise la même information, qui est actuellement dans WordPress, nous allons simplement créer dans une mise en page différente. Nous avons également nos mêmes articles de blog. Bien qu'un style différent et la mise en page aient été appliqués, c'est exactement le même contenu, mais présenté de la manière différente. Nous avons aussi notre barre latérale en bas tout en bas. Ce sont les mêmes blocs de contenu que nous avons créés dans notre thème, mais juste disposés d'une manière différente. Revenons à la section thématique, jetons un coup d'oeil à une autre. C' est le thème 2017. Jetons un coup d'oeil à cela, commençant par la maison. Cela semble à nouveau complètement différent. Bien que nous ayons toujours nos mêmes pages, il a une sensation complètement différente de notre site original, et c'est ce qu'un thème fera, en cliquant sur le blog. Nous voyons toujours tout le même contenu, comme les articles de blog qui sont tous répertoriés. Vous voyez ces mêmes images en vedette qui ont été ajoutées, et aussi cette barre latérale à droite a tous les mêmes blocs de contenu juste réarrangés d'une manière différente. C' est le pouvoir que nous avons en tant que développeur de thèmes. Nous pouvons créer tout type de site Web que nous voulons en utilisant WordPress, et cela nous permettra de créer notre site de spa Tranquil que nous traversons le cours, ainsi que de vous donner ces compétences et connaissances pour construire tout type de site WordPress que vous souhaitez, que ce soit pour vous-même, ou pour un projet, pour l'entreprise ou pour les clients. 3. Configuration de Bootstrap 4: Bienvenue dans la section Bootstrap de ce cours. C' est là que nous commençons les choses avec la création de notre thème personnalisé. Cette section est tout sur la création d'un HTML statique et des sites Web CSS. Hamel a créé exactement à quoi nous voulons que notre thème Wordpress ressemble. Cependant, ne vous inquiétez pas de WordPress pour le moment, qui est facturé cela comme nous le ferions avec tous les sites HTML normaux. Ensuite, nous gérons la conversion à WordPress dans une section ultérieure. La première chose que nous devons faire est de récupérer le noyau Bootstrap, CSS et JavaScript fichiers. Pour ce faire, nous avons besoin de la tête pour obtenir bootstrap.com. Cela nous mènera à la version quatre de Bootstrap. J' utilise la version 4.3, et je vous recommande d'utiliser la même chose si possible. Pour commencer avec Bootstrap, je vais passer à la documentation dans la section d'introduction. Ici, nous avons quelques liens Quickstart, nous avons un lien CDN pour le CSS, et aussi le JavaScript. Ensuite, ci-dessous, nous avons un modèle de démarrage pour notre page d'index, et nous reviendrons et le saisir bientôt. Bien que je vais cliquer sur le bouton de téléchargement dans le menu, puis cliquez sur le lien CSS et JavaScript compilé, puis commence le téléchargement avec ce bouton ici. Évidemment dans ce téléchargement compilé CSS et JavaScript, que nous allons commencer très rapidement. Une fois cela fait, nous pouvons cliquer sur le paquet et décompresser. Une fois que cela est décompressé, je vais le déplacer sur le bureau. Allons traîner ça, et puis je vais renommer ça. Le nom que je vais appeler c'est tranquil-bs. C' est pour la version boost up tranquille de notre projet. Plus tard va créer un tranquil-wp, qui est pour notre conversion Wordpress. La prochaine chose que nous voulons faire est de saisir les images. Les images sont incluses dans ce cours. Allez-y et attrapez-les si vous ne l'avez pas encore fait, puis faites glisser cela dans notre dossier. J' aurais Visual Studio Code ouvert ici, et vous pouvez utiliser n'importe quel éditeur de texte que vous aimez pour ce cours. Pour commencer dans VS Code, nous avons juste besoin de glisser sur notre dossier de projet, puis cela s'ouvrira avec le contenu dans cyber. Sa version compilée utilise divers fichiers CSS et JavaScript. Je vais juste utiliser le bootstrap.min.css pour ce cours. Qui est une version minifiée du CSS principal, qui inclut les mises en page Bootstrap disponibles et les composants dont nous avons besoin. Il existe également différentes versions, si vous voulez utiliser la grille CSS ou les redémarrages de Bootstrap, et vous pouvez en savoir plus sur ce qui est inclus dans ces fichiers dans la documentation Bootstrap, si vous le souhaitez. Ensuite, nous avons le dossier JavaScript, qui est juste au buttom ici. La même chose vaut pour le JavaScript, je vais seulement utiliser le fichier bootstrap.min.js principal. Ensuite, bien sûr, nous avons les images qui sont fournies pour ce cours. Vous saurez également qu'il n'y a pas de fichier index.html. Cela n'est pas fourni, donc nous devons aller en créer nous-mêmes, dans les racines de ce projet. Dans la route principale, cliquez sur le nouveau fichier et créons notre index.html. Si nous revenons au navigateur, puis de retour dans la section d'introduction. Nous pouvons maintenant copier les modèles de démarrage que nous avons recherchés auparavant, vous pouvez cependant sélectionner tout et copier, ou vous pouvez simplement cliquer sur le bouton de copie dans le coin supérieur. Copiez ceci, puis sur notre index.html. Nous pouvons maintenant coller ceci dans. Tout d'abord, nous avons le Bootstrap CSS, qui est dans la section tête. Ce kit de démarrage de base pointe vers les fichiers CSS et JavaScript dont nous avons besoin de bootstrap et ceux-ci hébergés sur CDN. Vous pouvez voir par ces liens ici. Changons ceci pour pointer vers nos fichiers locaux que nous avons ajoutés à notre projet, en commençant par le CSS Bootstrap. Dans le href, nous pouvons supprimer ceci et ensuite nous pouvons pointer ceci vers notre dossier CSS, css/bootstrap.min.css. En bas, nous pouvons alors regarder nos JavaScripts, faire défiler vers le bas dans les sections de script, nous avons trois scripts différents ici. Tout d'abord, nous avons jQuery, que nous pouvons laisser pour l'instant puisque nous n'avons pas cela installé dans notre projet. Nous pouvons également supprimer le Popper.js, qui est le script du milieu juste ici. Cela n'est pas nécessaire pour nos projets, et cela n'est requis que pour certains composants Bootstrap, par exemple lors de l'utilisation d'info-bulles et de liens déroulants. Cependant, si vous avez l'intention de personnaliser le modèle, recrée, faire usage de ceux-ci, vous pouvez bien sûr, laisser cela dans, alors nous devons changer le fichier de base Bootstrap JS pour pointer vers notre fichier local. Si nous supprimons la source ici sur ce lien CDN, alors les changements dans notre dossier JavaScript et le fichier que nous voulons est bootstrap.min.js. Avec le CSS bootstrap de base que nous avons été fournis, nous voulons également ajouter notre propre style personnalisé. Pour remplacer l'un des styles Bootstrap par défaut, que nous pouvons traiter avec un fichier CSS personnalisé. Retour dans la barre latérale, dans le dossier CSS et créez un nouveau fichier, et il s'appelle Custom.css. Menerait à lier ensuite cela dans le index.html aux points vers ce nouveau fichier. Ouvrir en haut, nous allons ajouter ceci juste après le noyau Bootstrap CSS. Ajoutons un commentaire de CSS personnalisé. Nous pouvons ensuite ajouter notre lien. Cette feuille de style est une feuille de style et href pointe vers notre dossier CSS, et le nom était custom.css. Comme pour tout projet sur le site Web, nous devrions inclure nos propres feuilles de style personnalisées en dernier. Ils seront ensuite chargés en dernier et remplaceront l'une des feuilles de style ci-dessus si nécessaire. Dans notre cas, le CSS Bootstrap personnalisé. La dernière chose à faire est de changer le titre de cette page pour être un spa tranquille. Nous pouvons donner à ce fichier une sauvegarde, je vais aller dans le index.html, copier le chemin, puis coller cela dans un nouvel onglet de navigateur, pour ouvrir cela. Vous pouvez également aller dans votre dossier de projet et double-cliquer sur la page d'index pour être pris à cela, et maintenant nous voyons le texte Hello World, qui est de notre exemple de code, qui est h1 juste ici. C' est tout maintenant pour la configuration de notre projet. Je vous verrai maintenant dans la prochaine vidéo où nous commencerons à personnaliser notre thème en ajoutant Google Fonts. 4. Ajouter des polices Google personnalisées: Puisque nous créons notre propre thème personnalisé, nous sommes libres d'utiliser n'importe quel type de police que nous aimerions. Je vais faire une nouvelle d'une police Google dans son thème, et vous pouvez bien sûr choisir l'un de ceux que vous préférez. Vous pouvez avoir une recherche pour les polices Google, ou vous pouvez vous diriger vers les polices dot google.com. Jetez un coup d'œil à ces thèmes et sélectionnez ceux que vous préférez pour le thème, ou vous pouvez suivre avec le même que moi, qui va s'appeler merriweather, alors faisons une recherche de merriweather et c'est celui que nous voulons juste ici. Dans la liste déroulante ici, nous pouvons sélectionner la version que nous voulons. Je vais utiliser une version légère, qui est la lumière 300, alors sélectionnez ceci, et puis pour ajouter cela, nous pouvons cliquer sur le symbole plus juste ici. Cela l'ajoute ensuite au bas en bas et ensuite nous pouvons l'étendre pour obtenir certaines des informations dont nous avons besoin pour l'inclure dans nos projets. C' est tout ce que nous pouvons inclure dans ces feuilles de style dans notre projet en copiant le lien juste ici, puis passez à notre page d'index. Fermez ces, donc le index.html, et puis nous incluons ceci juste au-dessus de notre CSS personnalisé, donc des polices personnalisées. Ensuite, juste après cela, nous pouvons coller cela dans. Nous pouvons maintenant revenir sur les sites Web de Google Fonts, et vous pouvez voir comment définir cette règle en tant que règle CSS dans nos feuilles de style personnalisées. En bas, nous pouvons copier cette ligne ici, qui est pour la famille de polices, puis plus dans notre CSS personnalisé, c'est à cette fin. Prenons d'abord le sélecteur de corps, puis collez dans la famille de polices, qui va chercher un merriweather s'il peut être trouvé, sinon, il sera de retour par défaut à un serif standard. Donnez ceci une sauvegarde, puis revenez au navigateur, rechargez notre page d'index, puis les facteurs doivent enregistrer. Le index.html donne à cela une sauvegarde, puis rechargez. Maintenant, voir les polices personnalisées a pris effet dans le navigateur, et c'est tout ce que nous devons faire pour inclure des polices Google personnalisées dans notre projet. Ensuite, nous allons passer à la création d'une section d'en-tête. 5. Navigation dans l'en-tête: Actuellement, nous avons juste un exemple de base Hello World à partir des modèles de démarrage bootstrap. Lorsque les organes changent cela en ajoutant la navigation supérieure, il ira à la version finie ici. Ce sera la barre de navigation supérieure, qui est ici. Sur le côté gauche, nous aurons un lien d'accueil avec un titre de site. Et puis à droite, nous aurons nos liens. Si nous réduisons le navigateur vers le bas, ce sera entièrement réactif, et cela sera également descendu à un bouton, qui lorsque vous cliquez dessus pour obtenir nos liens de menu sur les appareils plus petits. Reprenons dans le index.html. La première chose que je vais faire pour ne pas avoir de problèmes dans le CSS Bootstrap, je veux savoir si ces deux attributs d'intégrité et aussi le dernier d'origine croisée, puis ramenez ce retour sur la même ligne. Aussi la même chose pour le JavaScript en bas. La seule façon dont nous avons lié notre version minifiée, nous pouvons supprimer l'origine croisée sur l'intégrité et ensuite donner à ceci une sauvegarde. L' étape suivante consiste à supprimer notre HelloWorld. L'exemple de code. Je n'en aurai plus besoin. Au lieu de cela, nous allons commencer avec un en-tête. Ouvrez l'en-tête, puis imbriqué à l'intérieur, nous avons les éléments nav. Dans l'élément nav va contenir deux choses. Tout d'abord, sur le côté gauche, nous allons avoir le titre du site, que vous semblez pour, puis les liens de menu sur la droite. Ces liens de menu s'effondrent dans le bouton déroulant sur les appareils plus petits. Commençons par les ajouter maintenant. Commençons par notre lien, qui va être pour le titre du site de spa tranquille. Cela va avoir des classes Bootstrap, si nous sauvegardons cela, puis vérifiez ceci. Nous pouvons voir que ce sont juste des textes assez standards pour le moment. Commençons par les éléments nav en ajoutant quelques classes Bootstrap. Le premier est la barre de navigation simple. Si nous donnons à cela une sauvegarde et puis rechargeons, nous pouvons voir que cela est maintenant déplacé à partir du bord supérieur. Nous pouvons voir quels styles ont été appliqués en allant dans les outils de développement avec un clic droit et inspecter. Si nous cliquons ensuite sur le sélecteur et ensuite avoir sur notre barre de navigation. Assurez-vous que cette ligne de navigation est surlignée, puis sur la droite, nous pouvons voir quels styles ont été appliqués par bootstrap à partir de cette classe de barre de navigation. Nous pouvons voir qu'il utilise la boîte CSS flex comme type d'affichage. Nous utilisons également un rembourrage qui s'est déplacé depuis le coin supérieur, que nous avons vu auparavant. Nous pouvons ajouter des classes supplémentaires à cela aussi juste après la barre de navigation, mais ajouter navbar, expand-md, donnez ceci une sauvegarde et ces styles s'appliqueront sur les appareils de taille moyenne. Si nous rechargeons cela, nous pouvons voir dans la requête média, ces styles s'appliqueront lorsque la largeur minimale de l'écran est de 768 pixels. Si on réduit ça en dessous de 768. Juste un peu plus loin, nous chargeons. Nous pouvons voir que nous avons juste maintenant la barre de navigation qui s'applique d'avant. Nous n'avons plus la deuxième classe qui s'applique. Cette classe d'expansion de la barre de navigation définira le CSS fléchi avec la ligne sans rap, comme nous pouvons le voir ici, et justifiera le début du contenu fléchi, qui est sur le côté gauche. Ensuite, ajoutons quelques couleurs de fond pour que cela se distingue un peu plus. Juste après cela, nous pouvons ajouter la lumière de la barre de navigation et aussi bg-light. Nous pouvons utiliser n'importe quelle combinaison de ces couleurs ici. J' utilise la lumière de la barre de navigation, qui était utilisée avec des couleurs d'arrière-plan claires, puis bg-light pour spécifier la couleur de fond de lumière réelle du nav. Si nous rechargeons, nous pouvons maintenant voir toute cette différence en arrière-plan. Maintenant, nous allons travailler avec notre lien de spa tranquille. Cela va avoir une classe, une classe bootstrap de la marque Navbar et ensuite nous pouvons simplement ajouter un [inaudible] vide, le lien vers notre page d'accueil. Si nous enregistrons maintenant cela et rechargeons le navigateur, nous voyons maintenant que cela applique un style, couleur et les propriétés d'espacement à notre lien. Ensuite, je vais créer le bouton, qui est pour notre menu déroulant. Juste un bouton HTML normal. Donc, à l'intérieur ici, nous pouvons ajouter des classes Bootstrap. Le premier va être navbar-toggle, puis les attributs de type du bouton. Nous n'allons pas ajouter de texte à l'intérieur parce que bientôt nous allons ajouter une icône et cette icône est les lignes libres que vous voyez sur la version finale de dans le coin. Ainsi, les deux attributs suivants que nous ajoutons le bouton seront liés au petit écran et au contenu déroulant qu'il contrôle. Tout d'abord, ajoutons le basculement de données pour être égal à l'effondrement, puis nous pouvons également ajouter la cible de données, et nous allons définir ceci pour être égal à l'aide. Donc, ajoutons le hachage et appelons ceci le nav de la barre de navigation. Ici, nous voyons une belle bascule de données et nous avons déclaré que nous voulons que le contenu s'effondre lorsque ce bouton a été cliqué sur. Mais quel contenu voulons-nous s'effondrer ? Eh bien, si nous regardons la version finale, cela va s'effondrer et développer ce menu de navigation. Nous n'avons pas encore créé cela, mais une fois que nous le ferons, nous donnerons cette AIDE de navbar-nav. Cette cible de données peut être n'importe quel sélecteur CSS que nous voulons. Donc, nous allons juste l'utiliser comme JavaScript régulier. Si vous voulez cibler la classe, nous pouvons utiliser le point ou utiliser le hachage pour un ID. Juste avant de créer le div que nous voulons contrôler par le bouton. Je vais ajouter une travée, qui va ajouter les icônes que nous venons de voir auparavant. La plage va avoir la classe pour ajouter ces icônes dans l'icône de basculement de la barre de navigation. Voyons cela dans le navigateur, et ci-dessous, jusqu' au plus petit écran et nous avons maintenant le bouton avec les icônes libres de notre filé. Si nous développons le navigateur, nous devrions également voir que ce bouton disparaît parce que nous avons ajouté cette expansion sur les appareils moyens. Maintenant, nous allons créer nos liens de suivi div. Ce sera le conteneur pour notre maison et notre lien de navigation de blog et ce sera le conteneur, qui est bouton bascule ouvrir et fermer. Mettons-nous au travail juste en dessous de notre bouton. Ajoutons notre div qui est notre conteneur. La première classe va être égale à s'effondrer. Ceci est utilisé pour masquer le contenu quand nous en avons besoin. Ensuite, nous avons l'effondrement de la barre de navigation. La deuxième classe bootstrap regroupera tous les contenus ensemble, et elle sera également utilisée en conjonction avec la barre de navigation expand md. Il sait cacher ce conteneur sous ces points d'arrêt et le troisième est pour la boîte CSS flex, c'est justifier la fin du contenu et cela va pousser nos liens vers le côté droit de la navigation. A l'intérieur de ce tableau, nous pouvons aller de l'avant et créer nos liens, qui va être une liste non ordonnée. Liste non ordonnée prend également dans certaines classes sont le style et la mise en page et le premier va être navbar-nav. Nous ajoutons ensuite nos articles de liste. Les classes d'éléments de liste vont être élément nav, puis imbriqué à l'intérieur, nous avons un lien en utilisant un élément avec les textes de la maison. Ce lien va avoir une classe de lien de navigation et ensuite nous pouvons définir le brouillon de haine pour pointer vers notre point d'index HTML. Bien, nous allons copier ceci et ajouter une fois de plus pour notre blog. Ce premier élément de liste, collez-le dans. Cela va être pour le blog et vous pouvez également changer le href pour être notre blog point HTML. Bien sûr, nous n'avons pas créé cela, mais nous y reviendrons dans une vidéo plus tard. Donc, donnez à ce fichier une sauvegarde, puis au navigateur. Rechargeons et élargissons ceci. Nous voyons sur les plus grands écrans, nous avons notre maison et les liens de blog, puis trouve sur le bouton est cache le contenu sur ces petits appareils. Mais si nous cliquons sur ce bouton dans le coin supérieur, nous ne voyons pas les liens tomber vers le bas. C' est parce que si nous allons à notre bouton, nous définissons la cible de données de navbar-nav. Les deux n'ont pas ajouté cela à notre conteneur. À l'intérieur de cette div, ajoutons l'ID de navbar-nav. Donnez cela une sauvegarde, rechargez le navigateur et maintenant nous obtenons un travail dans le menu déroulant. Développez ceci et cela revient maintenant à la vue plein écran. Bien, donc c'est maintenant pour le menu, et nous allons continuer avec l'en-tête suivant lorsque nous ajoutons l'image d'arrière-plan en vedette. 6. Section des images vedettes: La prochaine étape de notre en-tête est d'ajouter cette image en vedette, qui est le fond que nous voyons ici. Plus tard dans le cours, nous permettra également d'être changé dans le tableau de bord WordPress sur un contrôle par l'utilisateur. abord, nous allons aller de l'avant et ajouter une nouvelle section et toujours dans cet élément d'en-tête. Localisons la balise d'en-tête de fermeture. Ensuite, nous pouvons créer une nouvelle section. La section va avoir une classe Bootstrap de liquide de récipient. Pour disposer une page dans Bootstrap, nous utilisons une série de conteneurs, de lignes et de colonnes, qui utilise la boîte flexible CSS sous le capot. Il existe une classe de conteneur qui regroupe le contenu dans un conteneur de largeur de pixels réactif, ce qui laisse un espace sur le côté droit et gauche de la page. Nous examinerons bientôt cette alternative. Il y a ce liquide de récipient comme nous venons d'utiliser ici, qui fournit un récipient de fluide qui s'étirera à 100 % de la largeur de l'écran disponible. Avec if type, il peut être utilisé comme référence pour centrer et séparer notre contenu à l'intérieur. Imbriqué à l'intérieur de ce conteneur, nous ajoutons une classe de ligne. Les lignes nous permettent de contenu NES à l'intérieur et soupire le contenu en utilisant des colonnes, et nous allons regarder cela très bientôt. Mais pour l'instant, nous allons ajouter notre ligne. Cela va être une classe sur un wrapper div. À l'intérieur, nous pouvons ajouter notre image, qui va être l'image de fond que nous avons vu auparavant. La source de l'image va provenir du dossier images fourni avec ce cours. À l'intérieur, il y a une image appelée Lake.JPEG. Nous pouvons également ajouter l'ancien texte des arrière-plans de lac puis une classe qui est une classe personnalisée, nous allons bientôt arriver à Header_IMG. Juste après cette image, nous allons également ajouter un div. Ce div va être pour le texte qui est posé sur l'image. Ensuite, à l'intérieur, nous pouvons ajouter les éléments p pour ajouter du texte. Je vais ajouter des primes entièrement réactives thème chemin pour WordPress. Vous pouvez ajouter n'importe quel texte que vous aimez ici, puis ajoutons quelques balises de rupture, juste pour diviser cela sur deux lignes différentes. Ceci après responsive et aussi après thème. Nous pouvons contrôler ces textes dans le CSS. Nous devons également ajouter une classe. Il s'agit là encore d'une classe personnalisée de texte d'entité. Le texte de fonctionnalité est l'une de nos propres classes personnalisées et rien à voir avec Bootstrap. Nous allons simplement profiter de nos propres classes aussi afin que nous puissions contrôler ces textes dans le CSS, ou dans le navigateur. Puis rechargez, il y a notre image et aussi notre texte. Notre texte est maintenant placé sous l'image. Ce n'est pas le résultat que nous voulons pour notre projet final. Nous allons aller de l'avant et ajouter des classes CSS personnalisées et aussi des classes Bootstrap aussi, pour que ce texte superpose l'image. Commençons par configurer les classes Bootstrap. Nous pouvons définir la ligne environnante pour être une position de relative. Allons à notre ligne environnante qui est juste ici, nous pouvons ajouter la position de bootstrap relative, et c'est exactement la même chose que d'entrer dans notre CSS et de définir dans une position relative, mais de cette façon, c'est juste une classe bootstrap, puis bootstrap prend soin d'ajouter tout le CSS dont nous avons besoin. Si nous sauvegardons cela et puis rechargeons, ouvrez les outils de développement, vous voyez que la classe relative de position a ajouté la valeur de position CSS de relative, puis bootstrap est également ajouté de l'importance à la fin. Assurez-vous juste que rien ne l'emporte sur cela. Ensuite, nous devons définir le texte pour être une position absolue. Dans la div qui entoure nos éléments p, une classe, notre position absolue. Ils devraient maintenant déplacer le texte. Si nous rechargeons le navigateur sur le haut de l'image, définissant le texte à une position absolue, nous retirerons le texte dans le flux normal de la page Web. Il se positionne ensuite sur le conteneur relatif le plus proche, qui est notre ligne, l'étape suivante, est de centrer ce texte au milieu de l'image. Faisons ça en allant sur notre rangée, qui est juste là. Nous pouvons définir le type d'affichage pour être flexbox avec le flux de tiret. Nous pouvons également définir la valeur flexbox du centre de contenu justifier, qui alignera le contenu au centre de l'axe principal. Sauvegarder et recharger. Cela nous laisse à mi-chemin, nous avons maintenant le contenu au centre horizontalement. Maintenant, nous avons juste besoin de l'alignement vertical aussi. Je cherche à le faire en ajoutant une classe de plus à notre ligne. Cette classe est aligner les éléments, centre du navigateur et là nous allons. Le positionnement comme celui-ci était beaucoup plus difficile avant flexbox. Les deux la propriété aligner les éléments centre, alignera notre contenu maintenant sur la croix ou l'axe opposé, ce qui nous donne un alignement horizontal et vertical parfait. Un petit ajustement que nous pouvons faire est de définir le texte pour être centré aussi. Pour le moment, tout est aligné à gauche du conteneur. Encore une fois, nous pouvons l'appliquer à notre ligne juste après le centre des éléments d'alignement. Nous pouvons ajouter le centre de texte et nous y allons. Nous pouvons maintenant terminer cette section avec un peu de CSS personnalisé. Nous avons déjà une classe personnalisée d'image d'en-tête qui va utiliser maintenant. Maintenant, ajoutons un à notre texte div 2 environnant. Voici notre texte et dans le conteneur environnant, après position absolue. Ajoutons fonction tiret BG, cela sera utilisé pour ajouter la boîte environnante. Si nous allons à la version finale qui entoure les textes, sorte que nous pouvons écrire un peu plus facilement sur l'image. Ce fond serait également 60 pour cent du conteneur sur des écrans plus grands, puis sauter vers le haut pour être la pleine largeur sur des écrans plus petits. Mettons-nous à travailler dans le CSS personnalisé. La première étape consiste à définir l'image sur une largeur maximale de 100 pour cent. Nous pouvons ensuite utiliser la classe BG d'entité pour commencer à créer notre arrière-plan. L' arrière-plan va être créé à l'aide d'une couleur RGBA. Nous lui donnons donc cette belle transparence que nous pouvons voir ici. Les quatre valeurs vont être 255, 255, 255, puis la quatrième est pour l'opacité. Je vais définir ceci sur 30 pour cent, qui est une valeur de 0,3. Assurez-vous qu'il s'agit d'un tiret. Maintenant sur la largeur, la largeur va être de 100 vw pour les plus grands écrans, qui couvrira toute la largeur du navigateur ou du port de vue. Le rayon de bordure de 10 pixels, nous donne une sauvegarde. Ouvrez l'onglet et rechargez. Peu y a changé, je pense que nous avons juste besoin d'enregistrer l'index pour la classe personnalisée. Essaie ça. Maintenant, rendons ça un peu plus grand. Nous avons une div environnante de texte de fonctionnalité. Prenons ça. La taille de la police va être de deux REMS. Aussi la hauteur de ligne qui augmentent à quatre REMS, recharger. L' étape suivante consiste à ajouter une hauteur minimale à notre image d'en-tête. Faites défiler jusqu'à l'en-tête soulignement IMG, Tout ce que nous allons faire ici est de définir la hauteur minimale de la vitesse d'image 25 VH. Ce qui signifie que l'image sera toujours au moins 25 % de la hauteur de la barre de vue. La dernière chose à faire dans notre CSS est de créer une requête multimédia. Si nous regardons la version finale, faites la largeur de ce fond 60 pour cent sur les plus grands écrans. En tant que médias, nous allons cibler les écrans. Nous pouvons également faire correspondre nos points d'arrêt avec les points d'arrêt Bootstrap. Largeur minimale de 768 pixels. Aller à saisir la fonction BG et définir la largeur à 60 vw. Sur les écrans plus grands, l'arrière-plan sera de 60 pour cent, puis sur les écrans plus petits, l'arrière-plan sera de 100 pour cent. Enregistrez ce fichier, sur le navigateur. Si nous le réduisons et fermons les outils de développement pour obtenir plus d'espace, l'arrière-plan et les textes de notre petit écran sont toute la largeur. Si nous augmentons l'espace disponible à l'écran, cela descend maintenant à 60 %, qui est exactement ce que nous voulions. C' est ça pour notre en-tête maintenant. Juste avant de partir, je veux vous montrer la différence entre le récipient et le liquide du récipient. Actuellement, nous avons défini la section pour être liquide de récipient. Si nous définissons simplement cela sur le conteneur, puis le recharger, cela fait du conteneur une largeur fixe basée sur un pixel, qui signifie qu'il y a un espace blanc sur le côté gauche et à droite. Où comme liquide de conteneur que nous avions avant, va s'étirer à toute la largeur du navigateur, et nous allons faire plus usage de ces conteneurs que nous allons passer par le reste du cours. 7. Section de bienvenue: Dans la dernière vidéo, nous avons terminé la section d'en-tête. Si vous jetez un oeil à la version finale, nous allons maintenant passer à cette section « Bienvenue », nous voyons ici. Cela nous donnera une chance de travailler avec des colonnes pour étaler le contenu en parties égales ou en trois parties dans notre cas. Si nous rétrécir le navigateur, nous voyons cette section, ainsi que toutes les petites sections, est pleine réactive. Ensuite, nous stockerons dans une plus petite vue d'écran. Dans le point d'index HTML. Ce contenu ira juste en dessous de l'en-tête que nous avons terminé. Allons-y et faisons-le maintenant. Nous localisons la balise d'en-tête de fermeture. La première chose à faire est de créer un div. Cela va avoir une classe de liquides de conteneur, tout comme la section d'en-tête, l'a fait aussi. Puis aussi une classe de Tech Center, pour ajouter notre positionnement de texte. Ensuite, nous allons ajouter un peu de rembourrage. On va utiliser ça avec py-5. Maintenant, cela peut sembler un peu déroutant. Allons à la documentation Bootstrap dans la barre latérale. Si nous allons aux services publics, puis vers le bas à l'espacement. Cela explique comment nous pouvons utiliser la marge et le remplissage comme noms de classe. Nous devons les construire avec un P pour le rembourrage ou un M pour la marge. Dans notre cas, nous avons utilisé py-5. P pour le rembourrage et ensuite nous pouvons utiliser, les valeurs en haut, en bas, à gauche et à droite. Ou nous pouvons définir les x et y pour les appliquer en haut et en bas ou à gauche et à droite, suivi d'une taille de zéro à cinq. Dans notre cas, le py est certainement la valeur de rembourrage sur le haut et le bas. Il peut également avoir un jeu avec ces différentes valeurs aussi pour voir à votre projet. La prochaine chose que je veux faire est de créer une ligne qui va être wrapper pour nos textes et aussi cette icône au milieu. À l'intérieur de notre conteneur, ajoutons un deuxième div avec la classe de ligne. Ensuite, imbriquez-le à l'intérieur ici, nous pouvons ajouter nos colonnes, Bootstrap utilise une grille de 12 colonnes. Si nous définissons un div à six colonnes de large, il prendra la moitié de la largeur de l'écran. Pour le moment, chacune d'entre elles a quatre colonnes, donc quatre, quatre et quatre. Nous pouvons également définir notre texte Welcome to tranquil spa à la taille de six colonnes. Puis décalez-le par une valeur de trois, qui poussera cela au milieu. Donnant trois colonnes à gauche, puis trois colonnes à droite. À l'intérieur de notre ligne, ajoutons la div. La classe pour définir nos colonnes s'appellera -md, -six, ce qui signifie que ce sera la largeur de six colonnes sur les périphériques moyens et au-dessus, toute la largeur sur les périphériques plus petits. Comme nous l'avons mentionné précédemment, nous pouvons également compenser cela sur les appareils moyens par trois colonnes. Si j'enregistre maintenant et puis recharge, vous ne voyez rien parce que nous n'avons pas encore ajouté de contenu. Si nous ajoutons notre titre de niveau 3 à l'intérieur avec un texte de « Bienvenue à Tranquil Spa ». Nous devrions maintenant être en mesure d'enregistrer et de voir quelque chose à l'écran. Le titre de niveau 3 comprend six colonnes ou la moitié de la grille de 12 colonnes. Les six colonnes restantes ont été divisées de chaque côté parce que nous avons compensé cette valeur par une valeur de trois. Ensuite, nous devons ajouter notre icône ou notre image juste en dessous. La source se trouve dans le dossier Images. L' image qui a été fournie pour cela est le diviseur violet, l'ancien texte du diviseur deux. Puis une classe de W25. Encore une fois, si nous revenons aux utilitaires Bootstrap, nous pouvons jeter un oeil à la taille. W25 définira la largeur à 25 pour cent. W50 définira la largeur à 50 pour cent et ainsi de suite. Enregistrez ceci et nous pouvons vérifier cela dans notre rechargement de projet. Ok, bien. L'étape suivante consiste à descendre et à ajouter ces images. Ces images vont également avoir un wrapper qui va être un div. Ce sera une ligne séparée aussi parce que nous sommes sur une nouvelle ligne. Ensuite, à l'intérieur de cette rangée, nous allons créer trois nouveaux divs. Chacun avec une largeur de quatre colonnes. Juste après cette rangée ici, mais toujours dans notre conteneur. C' est juste une faute d'orthographe. Ok, juste après cette div ici, nous allons faire de l'espace et ensuite ajouter une nouvelle ligne. Le div avec la classe de la ligne, va également ajouter quelques classes supplémentaires à cette div. Nous allons aussi ajouter une certaine marge au sommet. Ajoutez un espacement qui est une valeur de quatre. Aller à définir le type d'affichage pour être flex en utilisant d flex , puis ajouter un espacement Flexbox avec justifier le contenu autour. À l'intérieur, nous pouvons regarder mieux comment fonctionnent les colonnes. Nous pouvons ensuite ajouter une classe de col sm quatre. qui signifie que c'est sur les petits écrans et au-dessus de cette table, la moitié de la largeur de quatre colonnes. Si nous collons cela dans deux fois de plus, disons a, b, et c. Vérifiez cela sur le navigateur. Chacun de ces trois divs prendra un espace égal. Au lieu de a, b et c, nous voulons ajouter une image, puis quelques textures ci-dessous. Supprimons ces deux divs pour l'instant. Au lieu d'un, nous pouvons ajouter une image. La source de l'image sera le dossier images. Ensuite, le makeup.jpeg, faire l'image comme l'alt. Ensuite, nous pouvons ajouter quelques classes Bootstrap ici. Je vais construire ça comme une carte Bootstrap. Va passer à la documentation. Nous voyons à quoi ressemblera la carte. Si nous allons aux composants, puis vers le bas à une carte. Il y a beaucoup de variantes que nous pouvons utiliser. Je veux en utiliser un très simple pour obtenir une mise en page très similaire à cela. Nous allons utiliser la carte sur l'image de la carte, image haut. Corps de la carte pour la section de la bombe. Puis cartes texte pour le contenu réel, ce qui nous donnera une belle mise en page et le style. Tout d'abord, dans l'image, nous pouvons ajouter la classe de cartes img top. Ensuite, un div pour le contenu réel juste en dessous. Cette div aura une classe de corps de carte. Puis imbriqué dans notre texte. Voici un maquillage. Au lieu de l'esperluette, je vais utiliser une entité HTML d'AMP. Ce texte nécessite une classe de texte de carte. Ok, alors sauvegardez ça et voyez à quoi ça ressemble. Nous n'avons qu'un div à la minute donc c'est centré au milieu, mais cela sera poussé sur le côté une fois que nous ajouterons notre deuxième, et notre troisième div. Si nous jetons un oeil à la version finale, nous pouvons voir sur l'image il a ces coins arrondis. Il s'agit d'une nouvelle classe d'utilitaire Bootstrap qui est fournie. Nous pouvons ajouter cela comme une classe sur l'image de l'image de la carte haut. C' est un cercle arrondi. C' est tout ce que nous avons besoin d'ajouter pour transformer maintenant notre image. Plutôt que de taper à nouveau toutes ces classes, je vais copier cette div et ensuite coller ceci dans deux fois de plus. Le milieu, si nous regardons le projet final, celui-ci va être l'image des bougies et ensuite besoin de textes des installations de spa, ce probablement maquillage, celui-ci est candles.jpeg, ancien texte de l'image des bougies puis des installations de spa. Tous les autres cours resteront les mêmes. Le troisième sera pour la retraite, retreat.jpeg. L' image de maquillage est maintenant image de retraite. Puis le texte à la fin, je vais faire une visite. Ok, voyons comment ça regarde en arrière dans le navigateur. Rafraîchissez il y a les trois images. Tout est bien. Ok, donc il n'y a plus qu'une ou deux choses qu'on doit faire juste pour finir ça. Si nous regardons la version finale, nous pouvons voir que les images sont un peu plus petites et que le texte est un peu plus grand. C' est parce que si nous regardons notre version, nous avons utilisé toutes les 12 colonnes disponibles. Donc quatre, quatre et quatre. Je vais rendre cela un peu plus petit en changeant les trois pour être une valeur de trois. Enregistrer, actualiser. Maintenant, j'ai un peu plus d'espacement autour des images. Tout cela est toujours centré parce que nous avons justifié le contenu autour, alors nous avons un espace égal de tous les côtés. Ensuite, nous pouvons rendre le texte en bas un peu plus grand en remplaçant les styles Bootstrap. La classe Bootstrap du texte de la carte a été appliquée au texte. Allons à notre CSS personnalisé, juste au-dessus de la requête média. Nous pouvons ajouter le texte de la section « Bienvenue ». Le seul et unique style que nous avons besoin d'ajouter est le texte de carte. Je vais avoir besoin que cela soit une taille de police de 1,2 rems. Ouvrez Chrome, rechargez. Maintenant, cela semble beaucoup mieux et plus comme la version finale. venons de terminer avec la section d'accueil et jetons un oeil à façon dont nous pouvons utiliser les colonnes avec l'utilisation de différents utilitaires Bootstrap. Merci et je te verrai la prochaine fois. 8. Section des dernières offres - HTML: Nous progressons bien avec notre thème bootstrap et c'est maintenant le moment de passer à la dernière de la section. La section sera juste en dessous de cette section d'accueil que nous avons créée dans la dernière vidéo et si vous allez à la version finale ici, c'est une section que nous allons créer maintenant. Il nous donnera plus de pratique en utilisant des cartes et aussi des colonnes pour la mise en page, ainsi que de regarder les petites classes de bootstrap qui sont disponibles. Dans cette vidéo, nous allons ajouter tout le HTML pour la section ainsi que les classes d'amorçage nécessaires. Cependant, de petites choses telles que le prix au-dessus du haut ici seront CSS personnalisé, et nous allons passer au style dans la prochaine vidéo. Sur les pupilles avec le HTML dans notre page d'index. Allons vers le bas en dessous des divs de fermeture. Juste au-dessus du JavaScript, nous pouvons créer un nouveau div. Cette nouvelle div va avoir une classe de liquide de conteneur. Nous voulons que le texte soit aligné au centre, afin que nous puissions avoir des classes bootstrap. Nous allons avoir un fond sombre que vous pouvez voir juste ici. Nous pouvons le faire avec une classe bootstrap de bg-dark, puis enfin un rembourrage en haut et en bas, que nous pouvons ajouter avec PY pour l'axe y et la valeur de cinq pour le garder cohérent. À l'intérieur, nous ajoutons notre rangée familière. Donc, ajoutez un nouveau div avec la classe de la ligne. C' est tout ce dont nous avons besoin pour celle-là. Ensuite, à l'intérieur, nous allons créer le titre, qui est les « dernières offres de spa ». Nous allons le faire d'une manière similaire à celle-ci en haut. Nous allons créer un div ou une section avec une portée ou une largeur de six colonnes, puis nous allons le décaler trois colonnes pour le placer au centre. Alors ouvrez la div, la classe, col-md, donc c'est six colonnes sur les périphériques moyens et les deux, ce qui signifie que tout ce qui est en dessous des périphériques de taille moyenne sera la largeur par défaut. Nous pouvons également fournir les décalages sur les appareils moyens à trois colonnes, en poussant au centre de la page. Notre titre dans le h3, cela va avoir la classe des diapositives de texte. Puisque nous utilisons de belles couleurs de fond sombres et le texte de « Dernières offres de spa ». Ok, bien. Ci-dessous, nous avons besoin de notre image. Cette image va être similaire à celle ci-dessus, qui est juste celle-ci ici. Il va avoir une couleur légèrement différente puisque nous avons un fond différent qui est le même que l'image. Donc imj, la source, ceci est dans le dossier images, et celui-ci est le divider-silver.png Le texte alt, simplement diviseur, puis une classe bootstrap. Donc, nous allons juste ajouter un peu de rembourrage sur le bas de ceci, commence dans l'espacement, donc ci-dessous nous sommes rembourrage bas ou pb et la valeur de quatre. En outre, nous pouvons définir la largeur pour être personnalisé largeur w-25, qui a déjà regardé, est une largeur de 25 pour cent. Ensuite, nous pouvons jeter un coup d'oeil, recharger, et aller en dessous de notre section d'accueil et voici notre titre. Maintenant, nous devons créer une nouvelle ligne juste en dessous pour ces trois cartes ici. Chaque carte va être dans une largeur de quatre colonnes dans sa propre div séparée. Commençons donc par créer la première section. Nous devons créer un nouveau div juste en dessous de cette ligne. Div avec la classe de ligne. Fermez cette option et assurez-vous qu'elle est toujours à l'intérieur du conteneur environnant. Nous pouvons maintenant construire notre div avec la classe de col-sm-4. Il s'agit d'un tiers de la largeur de la page sur les appareils plus petits sous les deux. Chacun d'entre eux va être une carte, ajouter un div avec la classe de cartes, et cela nous donnera une chance de faire une chose similaire que nous avons fait dans la dernière vidéo, où nous pouvons ajouter un en-tête de carte, un corps de carte, et ce ajoutera toutes les belles photos de style bootstrap. Tout d'abord, ajoutons un en-tête de carte. Ajoutons ceci dans un titre de niveau quatre. Nous devons lui donner une classe d'en-tête de carte. Comme c'est un en-tête en haut, nous allons ajouter un peu de rembourrage pour lui donner un peu d'espacement par rapport au haut. Nous pouvons le faire avec py-5, et cela s'appliquera au haut et au bas de l'en-tête. A l'intérieur, nous allons ajouter le texte du paquet de natation familiale. Bien sûr, tapez n'importe quel texte que vous préférez ici, suivi d'un intervalle avec le prix. Je vais ajouter 60 pour cela, et ce sera le prix qui se trouve en haut ici et nous allons positionner cela en utilisant CSS dans la prochaine vidéo. Mais maintenant que nous ajoutons juste le HTML, donc je vais ajouter une classe à cette plage. Le coût sera égal à fond-poids-gras. Cela rendra juste un peu plus audacieux pour qu'il se démarque plus. Sous notre h4, nous pouvons ensuite ajouter le corps de la carte. Nous avons déjà utilisé cette classe avant, c'est card-body. Avant d'aller plus loin, vérifions cela dans le navigateur. Rafraîchissez, et il y a notre en-tête de carte et le corps de notre carte juste en dessous. Ce corps de carte va obtenir le texte, qui est juste sur ici, puis une autre liste avec trois éléments de liste. Ok, allons travailler à l'intérieur de notre corps de cartes. La première chose que nous allons faire ici est d'ajouter un texte blockquote. Ce blockquote signifie également une classe bootstrap de blockquotes. Donc, une classe de guillemets, et c'est à la marge en bas à une valeur de zéro. Nous pouvons ajouter notre texte à l'intérieur des éléments P. Ce texte sera notre forfait de natation le plus populaire, excellent rapport qualité-prix pour les familles ou les groupes de 12 personnes. Maintenant, nous devons aller au-dessous du blockquote et au-dessous de ce div pour le corps de la carte. Ensuite, à l'intérieur, nous allons ajouter une autre liste, qui va avoir une classe de groupe de liste. Ce sera notre liste d'articles gratuits. Donc le premier va avoir un cours. Celui-ci va être list-group-item, suivi de font-italic. Le texte est jusqu'à 12 personnes. Vous pouvez taper le suivant, donc je vais copier et coller deux fois de plus car il a les mêmes classes. Le texte sur celui-ci est des sessions privées, puis le troisième sera des leçons de natation également disponibles. Là, nous allons au navigateur. Maintenant, allons dans le premier onglet, recharger, et il n'a pas l'air bien. Nous devons maintenant répliquer cela deux fois de plus pour notre deuxième et troisième section. Donc, pour ce faire, je vais copier ceci pour éviter beaucoup de répétitions. Si vous voulez une petite pratique, vous pouvez aller de l'avant et taper cela vous-même. Je vais aller de l'avant et localiser la div de clôture. En fait, nous avons juste besoin du col-sm-4, donc nous allons copier cette div ici et la section col-sm-4. Assurez-vous que vous êtes toujours deux balises div fermées à la fin, qui est pour la ligne et le conteneur extérieur. Collez ceci juste en dessous. Celui-ci sera pour la mariée, et le prix de celui-ci sera de 40. Le texte, celui-ci sera « Nos forfaits de mariage sont parfaits pour votre grand jour ». Ensuite, nous pouvons accueillir des groupes, grands ou petits. Alors tout ce qu'il nous reste à faire, c'est les articles de la liste gratuite. Le premier va être son maquillage et cela va utiliser l' entité HTML d'amp, ajouter le maquillage. Le prochain sera pour les groupes de toute taille. Celui-ci sera du champagne et des cocktails disponibles. On en a juste un de plus maintenant. Donc, en bas, assurez-vous à nouveau d'utiliser ces deux tags div répartis à la fin, puis collez-le dans et pour la troisième et dernière fois et ce sera pass week-end pour 60$. Je veux saisir le texte pour celui-ci juste ici, et ajouter la même chose entre les éléments P. Celui-ci va être piscine et sauna. Ensuite, l'utilisation complète de notre salle de gym et le point-virgule à la fin là. Le troisième sera composé de deux traitements par personne. Ok, bien. Je pense que c'est maintenant, vers le bas si nous allons au bas et juste ajouter un commentaire rapide, suffit de dire que c'est un conteneur de fermeture et la même chose pour la rangée. Bien. Donc, plus à Chrome, nous pouvons vérifier cela et peut sélectionner l'onglet pour le projet, recharger et c'est nos trois sections maintenant. Si nous réduisons cela aussi, nous pouvons voir que cela sera entièrement réactif par défaut en raison des classes bootstrap que nous avons ajoutées. Nous allons jouer avec cela un peu dans la prochaine vidéo lorsque nous ajoutons des CSS personnalisés. mais pour l'instant, bien que la majorité soit en place. Alors on se voit ensuite. 9. Section des dernières offres - CSS: Pour compléter cette section « dernière offre », nous avons juste besoin d'appliquer des CSS personnalisés. Cela va être beaucoup pour la section « prix », qui est en haut ici. Je vais le faire ressembler à la version finale ici, ce qui est positionné en haut de la carte. Le code que nous allons écrire, qui sera CSS standard, qui ne sera pas fourni par Bootstrap. Ce n'est pas un problème cependant, car un thème WordPress peut être composé de n'importe quel HTML et CSS. Peu importe s'il utilise Bootstrap, HTML régulier, ou tout autre framework d'ailleurs, notre prix que nous avons créé dans la dernière vidéo est entouré d'un élément span. Montons, et c'est celui qu'on peut voir ici. Nous pouvons marquer cela dans notre CSS. Nous allons le faire dans notre fichier CSS personnalisé, et nous allons commencer dans la requête média. Donc, cela s'applique aux écrans plus grands, que notre fond de fonctionnalité. Marquons les éléments de span, et tout d'abord, nous pouvons supprimer le flux normal des documents en ajoutant une position d'absolu, et je vais créer l'arrière-plan, qui sera pour le cercle qui l'entoure. Nous pouvons ajouter un peu de transparence, ce sera une valeur rgba de 175, 169, 169 et la valeur alpha de 0,6, qui est de 60 pour cent, ce qui est de 60 pour cent, nous allons également en faire un cercle. Nous pouvons commencer par ajouter une hauteur de 80 pixels et aussi une largeur fixe de 80 pixels. Donc, notre prix est positionné dans le centre. Nous allons également ajouter la hauteur de la ligne, et cela va aussi correspondre, cela va être 80 pixels. Ensuite, pour créer notre cercle, nous allons ajouter le rayon de bordure, et nous pouvons le faire en ajoutant ceci comme une valeur de 100 pour cent. Avant d'aller plus loin, voyons où nous en sommes avec cela, donc notre projet et notre rechargement. Il y a notre cercle avec l'arrière-plan avec un rayon de bordure de 100 pour cent pour le rendre arrondi et une largeur et une hauteur fixes de 80 pixels. L' étape suivante consiste à positionner cela au centre et au-dessus de la carte. Maintenant, pour pousser cela au centre, parce que ce sont des références absolues du conteneur relatif le plus proche, qui est ce div juste ici. Donc, nous allons mettre ceci à une valeur négative 40 en haut à gauche, positionnant donc cela au centre de la Cordova. Ajoute une valeur supérieure de 40 pixels négatifs, et la même chose pour la gauche, négatif 40 pixels, et voyons comment cela nous laisse. Maintenant, cela pousse ça dans le coin supérieur. Comme il s'agit d'une largeur de 80, nous avons décalé la valeur de 40 pixels. Nous avons l'alignement vertical aura besoin, et maintenant nous avons juste besoin de le pousser à travers de 50 pour cent et nous pouvons y parvenir avec une marge à gauche de 50 pour cent, et nous y allons. La dernière étape est juste d'augmenter la taille de la police à 1,8 rems et puis nous sommes bons pour aller, 1.8 rems, la fois le navigateur et là nous allons. Si nous réduisons le navigateur, nous pouvons voir comment ces sections ressemblent sur les appareils plus petits. Passons à la taille mobile, ces sections regardent un peu près ensemble sur le haut et le bas, donc nous pouvons ajouter une marge au bas de chaque carte en dehors de la requête média. Défilons vers le haut. Faisons cela juste à propos de la « section Bienvenue ». Donc, il s'applique à toutes les cartes, y compris celles-ci, carte à points, ajouter une certaine marge sur le fond de 20 pixels, recharger. Nous pouvons maintenant voir l'espacement entre chacun. La dernière chose que nous devons faire est de réinitialiser la marge à 0 pour cette vue plus large, nous devons le faire à l'intérieur de la requête média en dessous de notre plage, encore une fois, étiqueter les cartes. Tout ce que nous devons faire pour cela est de définir la marge sur le fond pour être une valeur de 0. Bon travail. Le modèle Bootstrap commence à prendre forme, alors continuez. Ensuite, nous allons travailler avec la section « A propos de nous ». 10. Section « À propos de nous »: Dans cette version finie ici, nous pouvons voir, si nous faisons défiler vers le bas à partir de la dernière partie de la section, nous avons une petite section À propos de nous juste en dessous. Cette section À propos de nous est assez basique et probablement quelque chose que vous pourriez compléter vous-même, si vous vous sentez confiant de le faire. Il contient simplement notre en-tête de About Us, une image que nous avons utilisée précédemment, ainsi qu'une ligne de texte Lorem Ipsum. Ceci est placé dans notre page Index, juste en dessous de la dernière section d'offre que nous venons de créer. Passons à notre index.html. Créons des commandes. Voici la section À propos de nous. Nous ferons aussi de même, juste au-dessus aussi, dans la dernière section. Ceci est pour les dernières offres. Cela nous aidera plus tard lors du défilement vers le haut et vers le bas. Dans la section À propos de nous, cela va devenir assez familier maintenant. Nous avons une div environnante avec la classe. Je veux utiliser à nouveau le liquide de conteneur afin qu'il couvre toute la largeur de la page. Je vais également ajouter une valeur de rembourrage sur le haut et le bas de cinq, positionner les textes pour être au centre, et aussi ajouter une couleur de fond de lumière. Cela décalera la valeur de l'obscurité, qui est juste au-dessus. A l'intérieur de cette div, nous allons ajouter une ligne familière. Pour que les choses restent cohérentes, nous allons structurer le titre de la même manière que les deux dernières sections. Nous faisons cela avec un div. Cela va avoir une valeur de col-sm-6, donc c'est la moitié de la largeur de la page, puis décaler cela avec une valeur de 3 pour pousser cela au milieu. Un titre de niveau 3, qui sera About Us, l'image, donc la source sera dans le dossier Images. Et rappelez-vous ces deux [inaudibles] différents ici, puisque nous utilisons la couleur de fond plus claire, nous allons utiliser le diviseur de violet, texte alt du diviseur est très bien, et puis la même classe que nous avons utilisée avant lui donner un poids de 25 pour cent. Vérifions ça. Donnez ça une sauvegarde, et il y a notre titre et l'image. Ensuite, nous avons juste besoin de créer une nouvelle ligne juste en dessous pour l'exemple de texte. Donc revenons, nous avons la ligne de fermeture, donc les colonnes de fermeture, et la rangée de fermeture. Ajoutons un peu d'espace, encore une fois, en nous assurant que c'est à l'intérieur du conteneur environnant, div avec la classe de ligne, placez-le sur une nouvelle ligne. Nous ajouterons également une marge en haut. Séparez ceci du titre avec mt et la valeur de deux. Chaque ligne doit avoir un div imbriqué à l'intérieur. Je vais faire quelque chose d'un peu différent cette fois et je vais juste mettre ça pour être col. Si nous définissons simplement ceci pour être col plutôt qu'une valeur, chaque fois que nous ajoutons un nouveau col, cela prendra une quantité égale d'espace. Donc, si nous voulons avoir cette div, ce sera les 12 colonnes complètes. Si nous avions trois divs côte à côte, tous de la même classe de col, chacun prendra un tiers égal de la page. Ajoutons notre exemple de texte à l'intérieur avec les éléments P et la classe du centre de texte. Il y a donc deux façons différentes de le faire. Si vous utilisez Visual Studio Code, vous pouvez taper les shortcodes lorem, appuyez sur Tab, puis nous obtenons un exemple de texte placé dans les photos. Sinon, vous pouvez aller sur le navigateur, et aller sur lipsum.com, et cela nous donnera quelques exemples de texte que nous pouvons générer vers le bas, puis copier et coller cela dans le projet. Une fois que cela est fait, et donnez cela une sauvegarde, et nous pouvons vérifier cela dans le navigateur, et nous verrons notre texte. En fait, je vais en générer un peu plus. Au lieu de faire cela, nous pouvons ajouter plus en tapant lorem, puis une étoile, générer cinq paragraphes, appuyer sur Tab, et c'est tout ce que nous devons faire. Voici la section À propos de nous maintenant terminée. C' était assez simple, mais cela nous donne un peu de pratique supplémentaire en utilisant Bootstrap. 11. Section de la liste des tarifs: Tout fait avec la section À propos, que nous avons faite dans la dernière vidéo, si vous faites défiler vers le bas sur le projet final, cette section de liste de prix va être un peu plus détaillée que celle que nous venons de créer. Nous avons quelques colonnes de tailles différentes pour la mise en page qui ont les images un côté et aussi les prix pour chaque type de traitement disponibles de l'autre. C' est la section que nous allons créer maintenant dans le index.html. Nous commencerons par créer un titre et une image familiers, et nous le ferons dans le conteneur sideshow et la première rangée. Juste après que la section À propos sera créée, faisons défiler vers le bas et ajoutez des commentaires. Ce sera pour notre section de liste de prix. Juste en dessous de cela, nous pouvons ajouter notre div, qui suivra la même structure qu'avant, cela aura une classe pour l'emballage du liquide de récipient. Certains rembourrage sur l'axe Y de la valeur de cinq. Je vais définir cette fois l'arrière-plan pour qu'il soit sombre. A l'intérieur ici, nous avons besoin d'une ligne, donc cela va à la moitié de la classe de ligne à l'intérieur ici, et cette ligne doit alors avoir quelques colonnes imbriquées. Tout d'abord, nous pouvons ajouter notre titre, comme le reste du côté cela va avoir une largeur de colonne de six. Donc col md -six, nous pouvons ajouter le décalage, qui est la valeur de libre. Il pousse dans le centre et aussi la classe du centre de texte aussi. Ensuite, nous pouvons ajouter notre titre de niveau 3. Le titre de niveau 3 est pour notre texte de liste de prix, et cela a également besoin d'une classe, puisque nous utilisons un arrière-plan sombre, nous pouvons ajouter la classe de textes lumière. Voilà notre titre, l'étape suivante est pour notre image. La source de l'image se trouve dans le dossier Images, et cette fois c'est le diviseur, silver.png les classes d'image. Tout d'abord, nous avons besoin d'un rembourrage sur la valeur inférieure avant, et a également dit que c'est une largeur de 25 pour cent avec W 25. La même chose nous permet de vérifier cela. À l'intérieur de l'onglet droit en dessous du texte ci-dessus, nous devrions maintenant avoir nos listes de prix, et nous manquons juste l'image de cela, et vérifier le dossier des images. Pour diviser un argent est-il là ? Peut-être juste besoin de sauver ça. Nous voulons juste le sauvegarder après l'image et c'est bon. L' étape suivante consiste à créer une nouvelle ligne. Cela va être pour notre section massages soins, qui est cette première ligne ici. Cela aura la bonne image, puis une liste non ordonnée sur le côté droit. Juste en dessous de cette ligne, mais nous allons ajouter un commentaire, juste pour qu'il soit clair ce que nous faisons ici, c'est le conteneur de fermeture. Juste au-dessus, nous avons besoin de notre div, classe ou ligne et ensuite à l'intérieur de nos colonnes. L' image va être plus grande que la liste non ordonnée, donc je vais définir ceci pour être une colonne large avec l'appel sm-8, et en fait, pour la ligne, nous allons également ajouter une marge en haut et en bas, ajouter un peu d'espacement. Ensuite, à l'intérieur de nos colonnes, nous pouvons ajouter notre image. L' image fournie pour celui-ci s'appelle le massage. JPEG, et l'ancien texte. Après le wrapper pour les images, descendons et créons un deuxième div à l'intérieur de cette ligne, et cette table sera pour la liste non ordonnée. Nous avons l'habitude de huit colonnes ou lignes, donc nous pouvons aller de l'avant et utiliser les quatre autres. Nous appelons sm-4. Cela va prendre une liste non ordonnée, mais tout d'abord, nous avons besoin d'un titre dans un titre de niveau quatre, qui est ce texte de massage est ici. Ajoutez nos massages h-4 comme titre. Maintenant, nous pouvons ajouter nos classes Bootstrap. Le premier sera title, title n'est pas une classe bootstrap, c'est une classe personnalisée que j'ai ajoutée, et nous allons bientôt l'utiliser dans le CSS. Suivi par une classe bootstrap de centre technologique pousse au milieu. Après cela, nous pouvons ajouter une liste non ordonnée, qui prend également certaines classes de style. Le premier est le groupe de liste, et après cela, ce groupe flush, et nous allons jeter un oeil à ce que cela fait dans un instant, puis enfin, text-light. Je vais juste ajouter quelques exemples d'éléments de liste. Le premier va juste être un massage, avertir. Les classes Bootstrap de l'élément de liste sont List Group Item. Ensuite, après cela, nous pouvons ajouter les balises span juste après le nom, et nous pouvons ajouter un prix. Nous voulons ajouter ceux-ci entre les balises M, donc il est souligné ou italique et un tiret, puis ajouter un prix à l'intérieur ici. Dans le modèle de ces albums, vous pouvez coller dans et avant et descendre ici et juste changer les noms. Cela pourrait être plus imaginatif si vous voulez, donc je vais juste aller 1, 2, 3, 4, 5, et puis jeter un oeil à cela dans le navigateur. Passez à notre projet, puis actualisez. Nous avons notre image sur le côté gauche, elle a pris huit parties, puis en a pris quatre parties, sur le côté droit est notre liste non ordonnée. Le texte est un peu difficile à voir, mais si nous mettons en évidence cela, nous pouvons voir est là, et nous le ferons en CSS dans un moment. Déplaçons vers le bas et créons les deux sections suivantes, qui est cette section faciale ici, puis les cheveux et le maquillage. Ces deux prochaines sections, nous suivrons un modèle similaire à ceci. Allons juste au-dessus de notre conteneur ici, et nous allons créer une section similaire à ceci. Allons créer notre div avec la classe de ligne. Cela va également avoir une marge sur l'axe Y de quatre. Ensuite, nous allons faire le contraire de ce que nous avons fait ici, plutôt que d'avoir huit colonnes à gauche de l'image, puis quatre colonnes à droite. Nous allons faire les quatre vient en premier, afin que nous puissions ajouter la liste non ordonnée. Donc, la classe div du noyau sm-4, puis en dessous de cela à l'intérieur de la ligne, nous allons ajouter une deuxième div. Celui-ci sera pour les huit colonnes, alors appelez sm-8, puis fermez ceci. Pour la première section qui a quatre colonnes, va avoir une liste non ordonnée, tout comme nous l'avions ici, et aussi un titre de niveau quatre, permet de couper et de coller ces dans. Celui-ci est des soins du visage, maintenant nous pouvons changer ces textes ci-dessous. Copions ceci et collez-le dans chacun d'eux. Juste comme ça, vous pouvez changer les prix si vous voulez, mais je veux le garder comme ça. Ensuite, à l'intérieur de notre section 8 colonnes, ceci prend notre image. Cette image va se trouver dans le dossier Images, et celle-ci s'appelle facial.jpeg. Dites ceci, puis sur le navigateur, rechargez les projets. Va en bas et on y va. Encore une fois, les images sont là, mais le texte est un peu difficile à voir, et nous allons corriger cela avec un peu de CSS plus tard. Le troisième en bas va suivre la structure similaire à notre première rangée avec l'image à gauche et les liens à droite, allons à notre section Massage, et je vais copier cette ligne complète et puis coller ceci dans juste au-dessus de notre conteneur. Tout d'abord, la section 8 colonnes en haut, l'image pour celui-ci est cosmetics.jpeg. On peut changer l'ancien texte. Le texte de l'en-tête est cheveux et maquillage, puis à n'importe quel texte que vous aimez dans ces liens, suffit de les coller dans, et qui devrait être il donne un fail-safe, et jusqu'au rechargement du navigateur. Voilà, il y a nos trois sections, et maintenant nous pouvons aller au CSS et faire du style pour cela. Allons à un custom.css besoins aller en dehors de la requête multimédia. C' est ajouté des commentaires, c'est la section de liste de prix à l'intérieur ici. Quand nous avions la classe de titre personnalisée, je vais définir son titre pour être une couleur de charge dorée, puis après cela, nous pouvons ajouter le list-group-item. Cet élément de groupe, si nous passons à la page d'index, c'est la classe qui avait été ajoutée à chaque élément de liste, et ce que nous allons faire ici est de supprimer cette image de fond blanc afin que nous puissions voir le texte. Pour ce faire, nous devons faire est de définir l'arrière-plan pour être connu, et nous pourrions également changer la taille de la police pour être 1.1mz. Sauvegardez cela, et voyons à quoi cela ressemble. C' est l'arrière-plan maintenant supprimé pour chaque élément de liste. afin que nous puissions voir notre texte. On n'a pas parlé de cette classe supplémentaire. Si nous montons ce qui est list-group-flush. Donc, si nous retirons cela des cosmétiques et puis rechargeons vers le bas, nous verrons la différence. Cela a la bordure complète tout autour, tandis que le reste a juste les lignes entre les deux. Ajoutons ce backend, puis réinstaure notre projet. C' est maintenant pour la section, nous allons terminer la page d'accueil dans la vidéo suivante en complétant le pied de page et en ajoutant également dans nos icônes Font Awesome. 12. Le bas de page et l'ajout de Fontawesome 5: La dernière partie de cette page d'accueil est de créer la zone des pieds. Si vous descendez à la version finale, c'est la zone juste en bas ici, qui va être divisée en trois sections. Nous aurons un côté gauche officiel pour vous inscrire par e-mail, nous aurons le centre de réglage sur l'emplacement, et nous aurons également quelques liens de navigation sur les droits. Vous pouvez également remarquer que nous avons quelques icônes trop bas pour les liens de médias sociaux. Ceux-ci vont tous être fournis avec une bibliothèque appelée Font Awesome. Commençons par l'installer dans nos projets. Je me dirige vers fontawesome.com. Ceci a une version gratuite. Alors, cliquez sur ce bouton juste ici. Il s'agit d'une version pro-payante gratuite. Nous avons juste besoin de cette version gratuite pour nos besoins, que nous pouvons télécharger à partir de ce bouton juste ici. C' est différentes façons de l'utiliser. Nous pouvons simplement cliquer sur le « Télécharger » et commencer cela. Il existe différentes façons d'installer pour les bibliothèques telles que View, React, et vous pouvez également le télécharger à l'aide d'outils tels que sketch. Ensuite, assurez-vous que nous sommes sur la section web ici et cliquez sur le « Télécharger », qui va lancer l'installateur. sites Web comme celui-ci ont souvent l'habitude de changer les conceptions et les mises en page. Donc, si cela semble un peu différent de cela, suffit de jeter un oeil pour le téléchargement. Il y a aussi un lien CDN disponible, mais je veux les télécharger et les ajouter directement dans notre projet. Vous pouvez également vous sentir libre de consulter les icônes avec ce lien ici, et vous pouvez voir toutes les icônes disponibles qui viennent de télécharger. Nous les utiliserons tout au long du projet. Commençons par ouvrir le dossier. Le nom du dossier inclut le numéro de version et je vais juste raccourcir cela à Font Awesome afin qu'il soit facile de travailler avec. Ensuite, passez à nos projets. Si nous ouvrons, le tronc sera comme dossier dans le CSS. Vous pouvez ensuite faire glisser sur le dossier font-impressionnant complet et le placer là-dedans. Maintenant, si vous ouvrez la barre latérale, puis dans le CSS, assurez-vous simplement que ce dossier a été inclus. À l'intérieur du dossier Font Awesome, je vais lier à la version minifiée de toutes les polices. Ceci est en CSS, et alors c'est tout .min.css. Nous pouvons ajouter le chemin du fichier dans la page d'index. Si nous allons à nos liens CSS dans l'en-tête, je vais ajouter le lien juste au-dessus de notre CSS personnalisé. Ajoutons un commentaire de Font Awesome, le lien. Celui-ci est de nouveau dans notre dossier CSS. C' est dans le dossier Font Awesome après cela, puis css/all.min.css. C' est tout ce que nous devons faire maintenant pour lier Font Awesome à notre projet. Nous allons tester que tout fonctionne bientôt, quand nous arriverons à les ajouter dans le pied de page. Pour l'instant, nous allons travailler avec l'ajout du pied de page, que vous pouvez voir ici. Nous pouvons ajouter un conteneur en bas pour tenir cela. Donc, en bas, juste au-dessus de notre JavaScript. Ajoutons un commentaire ou une section de pied de page. Je vais utiliser l'élément de pied de page HTML pour cela. Vous pouvez toujours ajouter les mêmes classes de liquide de récipient et aussi py-5. À l'intérieur, cela prend dans un div avec la classe de rangée, donc nous pouvons ensuite nicher à l'intérieur de nos colonnes. Le premier sera pour la section des médias sociaux de rester connecté sur le côté, qui sera un titre, un formulaire d'inscription, puis nous ajouterons nos icônes de médias sociaux plus tard. Comme il y a trois sections différentes, nous pouvons diviser cela en quatre colonnes chacune avec une classe de col-sm-4. Le texte d'un titre de niveau 5 reste connecté. Après cela, nous allons placer dans notre formulaire, nous n'avons pas besoin d'une action puisque vous créez simplement une structure HTML pour l'instant. À l'intérieur, nous allons ajouter un div qui va entourer ou grouper nos éléments de forme. Ça va prendre des cours de Bootstrap. Le premier va être la ligne de formulaire pour faire un formulaire en ligne, puis le second du groupe de formulaires pour regrouper nos entrées. Ce formulaire ne contient que les entrées d'adresse e-mail, puis le bouton. L' entrée à gauche va être de huit colonnes de large, puis nous pouvons utiliser les quatre autres pour le bouton d'inscription. Créons nos sections pour celles-ci. Le premier est pour l'entrée. Donc, cela s'appellera sm-8. Ensuite, celui de notre bouton et juste en dessous, pour les quatre sections restantes. Commençons par l'entrée du formulaire. Ce sera une entrée avec le type d'e-mail, les classes d' amorçage du contrôle de formulaire, et un texte d'espace réservé de l'adresse e-mail, puis vers la section inférieure. Donc, le bouton va avoir le texte de l'inscription. Il a également besoin d'un type. Le type de soumissions à l'intérieur ici, puis la classe Bootstrap. Le premier de btn, btn-primaire, pour lui donner la couleur bleue. Nous allons également ajouter une petite icône Font Awesome sur le côté droit du texte. On y reviendra dans un peu. Sauvegardons et voyons à quoi cela ressemble, recharger, et il y a notre formulaire en bas et nous allons ajouter les icônes des médias sociaux très bientôt, que vous voyez ici. Pour l'instant, juste après le formulaire, nous allons ajouter un commentaire. Donc les icônes des médias sociaux, et nous reviendrons à ces très bientôt. Après cette div de fermeture, nous avons deux autres sections dont quatre colonnes chacune. La prochaine sera pour le texte, puis la navigation sur la droite. Donc div avec la classe de col-sm-4. Celui-ci aura un titre de niveau 5 et cette fois le texte est notre paramètre, et une virgule. Ensuite, tout ce que nous allons faire est d'ajouter l'élément p avec un exemple de texte. Encore une fois, si vous utilisez Visual Studio Code, vous pouvez taper Lorem, puis appuyer sur « Tab ». C' est tout ce que nous avons à faire pour notre section médiane. Donc maintenant, après notre col-sm-4, nous pouvons en ajouter un de plus, qui est pour nos articles de liste sur la bonne classe col-sm-4. Celui-ci aura également un titre de navigation de niveau 5, suivi d'une liste non ordonnée, qui contiendra nos liens de navigation. La classe d'amorçage de la liste non ordonnée est un groupe de liste et des éléments de liste, qui prend dans la classe de list-group-item. Ce seront des liens, alors ajoutons l'élément a à l'intérieur ici, le href, le lien. Celui-ci va être pour le blog au HTML. Nous n'avons pas encore créé cette page, mais nous allons demander le texte du blog, copier-coller. Celui-ci est pour la page de contact. Ce sera contact pour HTML, puis le texte des contacteurs et lien UML pour la politique de confidentialité. En fait, nous avons href nous donne aller au navigateur. C' est tout le contenu dont nous avons besoin. Nous allons maintenant appliquer un peu CSS juste pour terminer cette page. En commençant par ces liens bleus juste ici, passons à notre style.CSS, ou Custom.CSS, et en dehors de la requête multimédia, nous allons cibler le pied de page, commençant par les liens, donc ce sont les éléments. Nous pouvons réinitialiser la couleur pour être une valeur de 212529. Voyez comment cela a l'air beaucoup mieux. Maintenant, si nous revenons sur l'infarctus, nous pouvons réduire le navigateur maintenant d'abord, nous voyons les choses ont besoin d'un peu plus d'espacement, choses comme si nous faisons défiler vers le bas le titre d'or qui est ici, est un peu d'espacement sur le haut et le bas, jusqu'à le pied de page. Aussi ces entrées et le bouton nécessite un peu d'espacement aussi. Pour corriger cela dans le Custom.CSS, je vais créer une nouvelle requête multimédia ciblant une largeur maximale de 768 pixels. Les styles ne fonctionneront que sur les petits écrans. Après cette requête multimédia, vous pouvez en ajouter un nouveau au média veut cibler ces écrans, ainsi que la largeur maximale de 768 pixels. Ajouter les accolades calli. Commençons par ajouter le haut de la marge ou le titre, c'est le titre d'or que nous avons vu auparavant. Un em est bien pour ça. Nous pouvons ajouter un peu d'espacement sur notre bouton en tapant le bouton de pied de page. Cela ne prendra effet que sur les boutons situés dans le pied de page. Les marges doivent également être une valeur de 1em, enregistrer puis recharger. On aura plus d'espace. Autour de cela, nous avons aussi notre espacement au-dessus des titres. Finalement terminer, je veux ajouter un peu de rembourrage et aussi un fond de bordure à chacune de ces sections. Les sections également du pied de page, peuvent saisir chaque div avec la classe de col-sm - 4 pour un fond de bordure pour commencer aligné, pour séparer chacun d'un pixel. Une ligne solide, et une couleur de ddd. Puis un rembourrage à l'intérieur de 20 pixels en haut et en bas, puis 10 pixels à gauche et à droite. Ouvrez ça, rafraîchissez. On dirait qu'on a une ligne supplémentaire à l'intérieur, alors jetons un coup d'oeil. Jusqu' au pied de page, c'est juste à côté du bouton, pour en avoir un juste en dessous. C' est le 1.5 réel ici, et ceux-ci sont censés être pour les appareils moyens. Changons ça pour être MD. Ceux-ci sont sur les propres lignes sur ces appareils mobiles. Nous allons percer sur la route à côté de chacun de cela sur les appareils moyens et au-dessus, sauver et rafraîchir. Cela semble maintenant beaucoup mieux sur les plus petits et aussi pour les plus grands écrans. Tout ce qu'il reste à faire pour ce pied de page est d'ajouter les icônes des médias sociaux. Retour au pied de page. Nous avons créé un commentaire, et nous les ajouterons également au bouton S'inscrire. La version gratuite nous permet d'accéder à deux styles différents d'icône, qui est appelé marques et solide. Icônes solides comme ils sonnent ou une icône noire solide, et est utilisé pour des choses telles qu'une entreprise ou une icône de carte de crédit. Nous utilisons la classe CSS FAB pour les marques, et FAAS pour les solides. Les versions irrégulières et légères aussi, mais celles-ci ne sont disponibles que sur la version pro. Commençons par le bouton S'inscrire. Nous pouvons ajouter une icône Font Awesome en utilisant les éléments I. Je vais les ajouter sur deux lignes séparées donc c'est plus clair. Ouvrez les éléments I, puis il a besoin d'une classe. À l'intérieur, nous spécifions d'abord quel type de bouton nous voulons. Si on veut les solides ou la version brune, je vais opter pour la version solide. Donc, nous allons taper FAS qui est Formé Awesome Solids, puis nous tapons le nom de l'icône. Nous le suivons sur le site Font Awesome. Vous pouvez obtenir le nom de chaque icône juste en dessous. Nous allons les ajouter en ajoutant un nom de classe de FFA. Ensuite, le nom de l'angle double droit. Donnez cela une sauvegarde, puis rechargez les projets vers le bas dans la zone de pied de page. Nous avons maintenant l'icône des droits à double angle dans laquelle nous avons commencé. Je vais revenir sur les icônes de nos projets juste en dessous pour notre section de médias sociaux donc juste sous les icônes des médias sociaux, nous allons faire exactement la même chose en ajoutant les éléments I. La classe cette fois va commencer avec FAB, donc c'est les icônes de la marque, le nom de FA, qui va être pour notre icône Facebook. Donc Facebook-square, puis une troisième classe qui est facultative. Ceci pour faire les polices deux fois la taille. Nous pouvons le faire avec FA, puis 2X. Je vais copier et coller ceci dans trois fois de plus. Le second remplacera Facebook par Twitter. Le troisième que ça va être pour Instagram. Le dernier est Pinterest. Tout le reste restera le même. Vérifiez cela sur le navigateur. On manque un Instagram, et ça n'a pas besoin de carré à la fin, désolé pour ça. Puis sur Chrome, recharger, et maintenant nous avons nos quatre icônes. C' est tout maintenant pour notre page d'accueil, pour nos modèles Bootstrap. J' espère que vous avez apprécié cette section et appris beaucoup sur l'utilisation d'un Bootstrap. Dans la section suivante, nous terminerons ce projet en ajoutant les pages supplémentaires, telles que le blog et la page Contactez-nous. Merci et je vous y verrai. 13. Articles de blog et pagination: Nous faisons de bons progrès avec nos modèles Bootstrap, et maintenant nous avons pris soin de la page d'accueil. Maintenant, nous allons maintenant passer aux pages supplémentaires en commençant par le blog. Dans la dernière section, nous avons créé un lien vers une page de blog, nous n'avons pas encore créé de contenu. Si nous regardons le site fini qui était juste ici, et si nous allons à l'un des liens du blog, c'est à quoi le blog va ressembler. Nous aurons une section d'en-tête qui sera la même que la page d'index. Aussi le pied de page, qui sera également le même pour garder le thème plus cohérent. Ensuite, le blog va se composer de nos messages sur la gauche dans un conteneur appelé. Nous aurons également quelques liens vers la page précédente et suivante, ainsi qu'une barre latérale à quatre colonnes sur le côté droit. Le seul contenu que nous allons ajouter en ce moment sur cette page, est juste pour montrer, c'est fondamentalement un modèle que nous pourrions brancher à WordPress avec plus tard. Dans Visual Studio Code, nous pouvons créer le blog à une page HTML. Fermons ceci, et nous pourrions le faire à la racine du projet à côté de l'index. Cela va être appelé le blog à un HTML. Tirez ça dans la racine du projet, voilà. Assurez-vous que cela est à côté de l'index et la première chose que je vais faire est de copier tout le contenu de la page d'accueil. Sélectionnez tout, copiez, puis collez-le dans le blog. Cela nous permettra de garder les mêmes sections de pied de page et d'en-tête et nous pouvons simplement supprimer tout le contenu de l'intérieur. Je vais supprimer juste au-dessus du pied de page, je sélectionnerais ce conteneur et je dois aller jusqu'à la balise d'en-tête de fermeture. C' est un peu de contenu à supprimer ici. Il y a l'en-tête, assez, et tout juste en dessous de cette balise d'en-tête ici, nous pouvons supprimer cela donner une sauvegarde, et puis nous pouvons voir si cela est correct dans le navigateur, et aller sur notre blog et assurez-vous que nous avons juste le et la zone de pied de page ressemblant à ceci. Si cela ressemble toujours à ceci, nous sommes prêts à partir et nous pouvons commencer à personnaliser notre page de blog. Commençons par le titre, qui va être blogue spot tranquille. Ensuite, nous pouvons également modifier le texte de la fonction. Au lieu d'un thème spa premium réactif complet, nous le modifions pour avoir besoin de Tranquil Spa blog officiel. Juste après la balise de pause, nous pouvons ajouter un blog officiel. Enregistrez ceci et avec le CSS que nous avons déjà fourni, il devrait toujours y avoir au centre ici, donc nous n'avons pas besoin de faire de travail supplémentaire avec cela. La prochaine chose à faire est de descendre et de créer un conteneur de blog. Faisons cela, juste après l'en-tête, nous pouvons ajouter un commentaire. Ce sera la section du blog. Ensuite, cette section de blog va être un conteneur fluide, qui sera une classe sur l'élément principal, va juste être le contenu principal. Construisons nos classes Bootstrap de conteneur, de liquide de tableau de bord et aussi un peu de rembourrage y, qui est le haut et le bas. Comme toujours, nous avons aussi un div imbriqué à l'intérieur avec la classe de la ligne. Maintenant, cette ligne va avoir deux sections. Comme nous l'avons mentionné précédemment, lorsque nous avons examiné la version finale, le côté gauche sera une section de huit colonnes. Ensuite, nous allons également créer une barre latérale pour remplir les quatre colonnes restantes. Notre div avec la classe de col sm-8 à l'intérieur ici, nous pouvons construire un modèle de blog assez simple. Rappelez-vous que c'est juste un HTML de base que nous pouvons adapter à WordPress plus tard dans le cours. Un div environnant pour le billet de blog, un titre de niveau deux. Ajoutons quelques exemples de données, donc nouvelle fonctionnalité, puis ouvrez les éléments p et nous allons ajouter une date à laquelle le billet de blog a été créé. Nous pouvons ajouter n'importe quelle date ici. Nous devrons également ajouter l'offre, afin que nous puissions dire que c'est fini et nous pouvons ajouter le nom d'un auteur à l'intérieur d'un lien. Je vais ajouter mon nom ici, et le lien peut juste avoir un h-ref vide pour le moment. Encore une fois, nous allons corriger cela dans WordPress plus tard. Ensuite, nous pouvons ajouter d'autres éléments p juste en dessous. Juste avec un exemple de date ici, je suis juste en train de taper Lauren et la date de l'exemple de texte à partir du code VS. Regardons cela plus dans le rechargement du navigateur et nous avons notre premier billet de blog. Encore une fois, le contenu n'a pas d'importance pour le moment. Nous allons ajouter tout cela en utilisant le tableau de bord WordPress. La prochaine chose à faire juste après cette date est que je vais ajouter une petite section, pour afficher toutes les balises associées à l'article de blog, et m'assurer que l'élément a est fermé. On y va. Créons une section juste en dessous de cela. Ça va être un div. Nous pouvons ajouter un peu de rembourrage sur le fond, et ajouter une classe de pb et la valeur de deux. Cela donnera juste à cela un peu d'espacement par rapport au texte. À l'intérieur, nous pouvons utiliser Font Awesome avec les éléments i. Cela ferait monter une icône de balise. Ce devrait être le type solide avec FAS, puis FA, une icône est appelée balises. Juste après cela, nous pouvons ajouter un p éléments et il va avoir le texte de tagué. W \ e va juste ajouter quelques exemples de balises à l'intérieur ici. Ce nouveau sera généré par WordPress plus tard. Cette petite icône au milieu est le tilde. Vous devrez peut-être regarder autour de votre clavier pour celui-ci, mais vous pouvez ajouter n'importe quelle icône à l'intérieur. Disons ça. Tout d'abord, nous pouvons ajouter une classe. L' inline fait les éléments p en ligne plutôt que le niveau par défaut ou bloc. Cela gardera les balises que nous ajoutons ici sur la même ligne que notre icône juste au-dessus. Vérifiez ceci rechargez le navigateur. Il y a une petite icône Font Awesome, et ensuite nous pouvons avoir nos tags juste après en ligne. Ça a l'air très bien. Pour ajouter un peu plus de contenu, je vais copier et coller dans ce billet de blog. Si nous allons à notre div, qui entoure tout le contenu ici, copiez-le, assurez-vous que nous sommes toujours entre l'élément col sm-8, puis collez-le dans deux fois de plus. Pour arrondir les choses pour cette vidéo, quelques boutons en bas des poteaux. Vous déduisez simplement les pages plus anciennes et plus récentes, tout comme nous l'avons dans la version finale ici. Plus à notre blog, à notre HTML, et juste après notre dernier post de blog que nous avons ajouté, la page précédente et suivante va être à l'intérieur d'un élément nav. Cet élément nav va être une liste non ordonnée avec la classe bootstrap de nav. La liste non ordonnée aura nos articles à deux listes. Le premier sera pour la page suivante, et copiez et collez ceci dans, et celui-ci sera pour notre précédent. Ensuite, sur le rechargement du navigateur. Il y a nos liens maintenant, nous pouvons simplement ajouter un espace entre les deux avec l'entité HTML. L' esperluette, l'espace ininterrompu, et voilà. Notre blog commence maintenant à prendre forme. Remarquez comment nous avons contenu le billet de blog à huit colonnes de large. Cela nous donnera quatre colonnes avec lesquelles travailler pour la barre latérale, dans la prochaine vidéo. 14. Barre latérale de la page du blog: Nous laisserons cet espace de quatre colonnes sur le côté droit. C' est là que nous allons ajouter une barre latérale pour notre blog. Tout comme la version finie que vous voyez ici, il y aura quelques sections avec quelques informations sur cette barre. Aussi, nous pouvons filtrer vers le bas par catégories ou par le mois où il a été créé. Laissez une petite section de médias sociaux au bas aussi de n'importe quel blog, au HTML. Nous pouvons créer un espace juste au-dessus de cette ligne de fermeture. Si cela aide, vous pouvez ajouter un commentaire à l'intérieur ici. Disons que c'est la ligne de clôture. Aussi, nous pouvons dire que c'est le conteneur, juste pour qu'il soit plus clair que nous avons raison. Ensuite, nous créons notre div. En fait, nous ajoutons cela comme un côté. Depuis que c'est une barre latérale. Cette barre latérale va avoir une classe, faire quatre colonnes de large sur les appareils plus petits et au-dessus, soi-disant sm-4. La barre latérale contiendra les quatre blocs que nous venons de regarder. Le premier est juste un peu sur ce bar. Un div environnant pour ce bloc aura toujours une classe de py-3. Juste pour ajouter un peu d'espacement sur le haut et le bas. Un titre pour ce bloc « font-italic », et le titre de environ. Ensuite, le texte dans les éléments p. Les éléments p auront une classe, pour ajouter la marge et le bas de zéro. Ensuite, nous voulons coller dans le texte pour celui-ci. On va juste prendre ça du côté fini. Collez la même chose, suivie d'une règle horizontale avec les éléments hr juste en dessous. Vérifions cela plus dans Chrome. Rechargez notre page de blog. Ensuite, nous avons la section des archives. Sur la version finie, cela va être une liste ordonnée, qui va avoir chaque élément de liste comme date. Nous pouvons commencer avec un div environnant comme un conteneur encore dans le col-sm-4. Mon nouveau surround en div. Tout comme ci-dessus cela va ajouter une classe de py-3, alors ajoutez notre espacement. Nous allons ensuite ajouter un titre de niveau quatre. Cela va également être italique, serait la classe italique de la police. Puis le titre des archives. Nos articles vont être dans une liste ordonnée. Cette liste ordonnée va avoir des classes Bootstrap. Le premier va être list-déstylé. List-unstyled supprime le style de liste par défaut et la marge gauche sur nos éléments de liste. Ensuite, nous définirons le bas de la marge à zéro. Ces éléments de liste auront un lien imbriqué à l'intérieur. On peut ajouter quelques dates ici. Puis un href pour les éléments a. On peut laisser ça vide. Tout ce que vous devez faire maintenant est de copier et de coller cela dans quelques fois de plus. Ajoutez quelques dates aléatoires ici. Cela serait généré par WordPress plus tard, enregistrer et puis actualiser à l'intérieur de Chrome. C' est tout ce qu'il faut faire pour les archives. Ensuite, nous allons faire une section similaire, et ce sera pour les catégories. Une nouvelle div juste avant notre section latérale. Suivant le même modèle. La classe de py-3, un titre qui va être niveau quatre, classe de police italique, et le texte des catégories. Cela prendra également dans une liste ordonnée avec les mêmes classes que ci-dessus. Celui-ci sera list-déstylé pour supprimer n'importe quel style de liste et aussi définir le bas de la marge à zéro. Les éléments de liste sont également imbriqués avec un lien à l'intérieur, un href vide. On peut ajouter les nouvelles. Nous pouvons également ajouter les offres. La dernière section est pour notre section followers qui va être quelques liens de médias sociaux en utilisant les icônes de police impressionnantes. Nous allons créer notre div, classe de py-3. A l'intérieur, j'aurai une nouvelle fois un titre quatre, qui va à nouveau être italique, avec le texte des adeptes. Cela va avoir quelques éléments i pour nos icônes. Première classe de fab, puis FA-facebook.Il va être carré, puis fois fa 2 x pour les faire deux fois la taille. Ajoutons trois autres ici. Ce prochain veut être Twitter, puis en surround qui n'a pas besoin de la place. Puis enfin Pinterest. Enregistrez ceci et rechargez. C' est notre barre latérale maintenant terminée. En fait, c'est notre page de blog également complète. Nous avons maintenant un modèle de blog que nous pouvons convertir WordPress dans une section ultérieure. Ensuite, nous finirons nos modèles Bootstrap en ajoutant une page de contact. 15. Page de contact: Avec notre blog, maintenant terminé, nous allons aller de l'avant et créer notre dernière page, qui sera le Contactez-nous. Si nous faisons défiler vers le bas, nous aurons un lien vers la page Contactez-nous ici. Nous avons également un lien de politique de confidentialité. Mais nous ne créerons pas cette page car ce serait quelque chose de spécifique à votre entreprise ou à vos besoins. Vous pouvez aller de l'avant, et créer ceci si vous le souhaitez. Je vais maintenant créer ce Contact Us dans les racines de notre projet, côté d'un blog et d'une page d'index. Créons ce fichier, qui peut être contact.html. Encore une fois, nous allons réutiliser les mêmes en-tête et pied de page pour garder la mise en page cohérente, puis créer une nouvelle section au milieu. Pour accélérer les choses, nous pouvons aller sur le blog, copier tout le contenu, puis coller cela dans. Tout comme nous l'avons fait avant au-dessus de la section pied de page, sélectionnons le conteneur principal tout le chemin vers le haut. Nous voulons sélectionner cela juste au-dessus de la section de bloc puis supprimer tous ceux-ci. Vous pouvez remplacer la section d'en-tête et aussi le pied de page. Nous pouvons le dire et vérifier si cela fonctionne bien en rechargeant la page de contact, ce qui est très bien, donc nous pouvons aller et changer le titre en haut. Nous pouvons changer le titre de la page pour être Contactez-nous. Ensuite, le texte de la fonction, passons à cette section ici. Nous pouvons à nouveau utiliser le texte index.html qui était FULL RESPACE PREMIUM SPA THEME. Copiez ceci et remplacez notre section blog. Ensuite, nous allons travailler entre la section en-tête et pied de page en créant notre section Contactez-nous à. Commençons par un commentaire, Aidez-nous lorsque vous faites défiler vers le haut et vers le bas. Cela va avoir un div, et ce div sera le conteneur de fluide pour toutes les pages. Ensuite, aussi un peu de rembourrage sur le haut et le bas une valeur de cinq est bien. A l'intérieur, div avec la classe de ligne. Ce sera la première rangée à l'intérieur de notre conteneur. Sur la version finale, si vous allez sur notre page contact, ce sera juste une ligne qui aura le titre Contact et ensuite l'image. Après cela, nous allons créer un formulaire dans une deuxième ligne juste en dessous. Ce premier formulaire, nous ferons la même chose que nous l'avons fait dans la page d'index. Ce sera un conteneur à six colonnes avec un décalage de colonne libre, donc col-sm-6, puis fournir les décalages sur le point de faire de cela un périphérique moyen appelé Md. Ensuite, la valeur de décalage de trois, niveau trois, qui va être Contactez-nous. L' image de notre diviseur qui est le dossier des images et nous voulons choisir le diviseur violet, l'ancien texte, puis une classe de w-25 donc c'est 25 pour cent de la largeur. Encore une fois, si cela aide, vous pouvez ajouter un commentaire et ce sera pour la ligne de clôture. Ensuite, à notre projet dans le navigateur, et quelque chose n'est pas tout à fait correct là. Nous avons nos contacts d'image, nous avons juste besoin d'ajouter une nouvelle classe de centre technologique. Ça devrait faire l'affaire, recharger, et c'est tout. On va ajouter une nouvelle ligne pour notre formulaire. Il suffit d'avoir ce commentaire ici. Ce serait une classe de ligne, puis imbriquée à l'intérieur ici, nous pouvons faire de notre ligne un conteneur de 12 colonnes pour faire de notre formulaire une pleine largeur pour la page. Ouvrez notre div, ce sera col-sm-12, qui serait le wrapper pour nos éléments de formulaire. Nous n'avons pas besoin d'actions puisque WordPress gérera cela, mais nous avons besoin d'une classe. Je vais ajouter une classe de texte à gauche, et comme cela semble, cela alignera tous les textes sur le côté gauche du formulaire. Chaque entrée va prendre un wrapper de groupe de formulaires afin que bootstrap puisse contrôler le positionnement et la mise en page. Un div environnant pour chaque entrée, une classe de form-group. Chaque entrée aura aussi une étiquette. Ça va être une étiquette de texte. Le premier sera Votre Nom. Nous ajoutons ensuite l'attribut for qui va être nom, et cela le liera à cette entrée que nous allons maintenant créer. L' entrée va être un type de texte, car il s'agit d'un champ de nom, d'une classe d'amorçage de contrôle de formulaire, l'ID et cet ID doivent correspondre à cet attribut ici pour que le navigateur sache que cette étiquette est liée à cette entrée. Un autre avantage d'avoir ces liens est que l'utilisateur peut également cliquer sur cette étiquette ou le texte, et il mettra également en évidence l'entrée afin que l'utilisateur puisse commencer à taper. Un espace réservé pour les textes de Entrez votre nom. Avant d'aller plus loin, voyons à quoi ça ressemble. Comme nous l'avons déjà dit, si nous cliquons sur cette étiquette, il mettra également l'entrée en focus afin que nous puissions taper tout de suite. Faisons un couple de plus. Puisque le suivant va être très similaire, nous pouvons copier le groupe de formulaires, coller cela puisque nous utilisons les mêmes classes. Celui-ci va être une étiquette pour les courriels. Le texte de vos entrées e-mail, e-mail et l'ID aussi. Nous devons également changer le titulaire de la place pour entrer votre e-mail, et jetons un coup d'oeil à cela dans le navigateur. Ça a l'air bien. Dans la version finale, nous allons également ajouter une zone de texte en bas, puis un bouton pour envoyer cela. La saisie du message va être une zone de texte. Ajoutons notre groupe de formulaires une fois de plus. L' étiquette va être message, le texte de votre message. Nous pouvons supprimer le type d'entrée de texte, et en place, nous pouvons ajouter notre zone de texte. Je vais supprimer le nom, définir l'ID sur le message pour correspondre à Je vais étiqueter. Colonnes, je vais supprimer mais je vais définir les lignes pour être libres suivies d'une classe bootstrap de contrôle de formulaire. La dernière chose à faire juste pour la balise de formulaire de fermeture est d'ajouter un bouton afin que l'utilisateur puisse l'envoyer avec le texte de Envoyer un message... Certains attributs, la balise d'ouverture, c'est un type de soumission. Aussi quelques classes bootstrap de btn, puis btn-primary pour lui donner la couleur bleue et aussi le dimensionnement. Jetons un coup d'oeil à cela. C' est tout ce que nous devons savoir pour suivre la section Contactez-nous. La dernière chose que je vais faire est juste de vérifier que tous les liens fonctionnent bien. La page d'accueil revient à l'index. Nous avons la page du blog. Au bas de la page d'index, nous pouvons vérifier le blog fonctionne et il le fait, Contactez-nous, j'aime ça ici aussi, donc tout fonctionne bien. Cela nous laisse maintenant avec un superbe bootstrap pour le modèle à travailler avec pour notre thème. J' espère que vous êtes maintenant heureux de passer à la conversion de ce modèle à WordPress. 16. Installer WordPress avec Flywheel: Dans cette vidéo et aussi la prochaine, nous allons examiner deux façons de faire fonctionner avec WordPress sur notre ordinateur. Nous pouvons commencer à créer des thèmes et les tester. Sinon, si vous avez un fournisseur d'hébergement en direct et que vous préférez l'utiliser, n'hésitez pas à aller de l'avant et à le faire. Cette vidéo va couvrir l'installation avec un service appelé Local by flywheel, qui est notre local par flywheel.com. Dans la vidéo suivante, qui est facultative, nous aborderons l'installation et la configuration de MUMP comme alternative. Je recommande de suivre avec cette vidéo plutôt que la prochaine surtout si vous êtes un débutant, puisque MUMP peut causer des problèmes pour beaucoup de gens, mettre ceci est à vous. Commençons par aller sur la page d'accueil, les versions non pavées pour les équipes et les agences. Mais nous avons juste besoin de l'édition communautaire gratuite, qui est disponible pour Mac et Windows. Flywheel nous permet de mettre rapidement en place des projets WordPress sur notre ordinateur très facilement, et prend également en charge le réglage des photos du serveur et de la base de données. Il n'a pas trop de caractéristiques. Nous pouvons voir notre site, ainsi que la section admin en cliquant sur un bouton. Nous pouvons également générer un lien en direct pour voir notre projet n'importe où en ligne, et aussi pour partager avec d'autres personnes. Avec beaucoup de fonctionnalités plus avancées, telles que la possibilité de configurer WordPress multi-site et bien plus encore. Pour commencer, nous cliquons sur le lien de téléchargement, que vous venez ici en haut ici. Ensuite, choisissez la plate-forme que vous souhaitez, entrez vos coordonnées, puis cliquez sur, Obtenir maintenant. Ce téléchargement peut prendre quelques minutes, donc je reviendrai une fois cela terminé. Une fois que local a terminé le téléchargement et que vous venez par l'installation de votre machine, devrait être le prendre à un écran de démarrage similaire que nous avons ici. C' est juste avec un exemple de site de test, qui est livré avec le téléchargement. Mais quand il est descendu à cette icône plus en bas, nous créons nos nouveaux sites. La première étape consiste à créer un nom et il s'appellera le Spa Tranquil, allez sur Continuer. Après cela, nous obtenons un environnement que vous voulez choisir. Je vais m'en tenir aux versions préférées de PHP et MySQL, mais ce sont aussi des versions personnalisées. Si vous ressentez le besoin de changer l'une de ces versions, continuez. Ensuite, nous devons ajouter un nom d'utilisateur et un mot de passe pour vous connecter. Je vais appeler mon pseudo Tranquil underscore admin, le mot de passe est à vous et je veux ajouter le mien ici. Ensuite, l'e-mail, qui est un e-mail de votre choix. Ensuite, ajoutez notre site à local en cliquant sur ce bouton, donnez-nous quelques instants pour générer notre site. Une fois que votre site a été configuré, vous serez redirigé vers cette page et vous avez vu le feu vert à côté du nom du signe, vous êtes prêt à partir. Les deux principales choses à noter ici sur l'écran sont les boutons dans le coin supérieur. Le premier est de voir les sites, cela ouvre un nouvel onglet de presse de mot dans le navigateur, donc nous cliquons sur cela. C' est notre installation WordPress réelle que nous regardons avec le thème par défaut. C' est à quel point il est facile d'obtenir une configuration avec WordPress sur Local. Si nous revenons maintenant à l'administrateur, est également un bouton d'administration juste ici. Cela nous mènera ensuite à la page de connexion pour le tableau de bord WordPress et ceci est le nom d'utilisateur et le mot de passe que nous avons fournis lors de la configuration de nos sites. Mes coordonnées étaient administrateur tranquille, et au mot de passe. Je vais cliquer sur Se souvenir de moi, puis sur Connexion. C' est le tableau de bord WordPress que nous connaîtrons beaucoup plus au fur et à mesure que nous suivrons le cours. Il a des liens où nous pouvons sélectionner nos publications, différents actifs médias que nous voulons ajouter. Nous pouvons créer de nouvelles pages, nous pouvons créer ou voir nos commentaires, ainsi que changer n'importe quelle apparence et paramètres de nos sites WordPress. Mais nous allons couvrir tout cela pendant que nous allons tout au long du cours. Vous pouvez également cliquer sur ce lien ici, qui nous mènera également au même site que celui que vous voyez ici. Une autre grande fonctionnalité à propos de l'utilisation du volant d'inertie est qu'il fournit également un lien en direct. Si nous cliquons sur Activer vers le bas, activation de cela générera un lien qui irait dans le navigateur sur n'importe quel appareil. Si vous cliquez dessus, vous pouvez alors l'ouvrir sur votre appareil mobile dans un navigateur différent ou vous pouvez également partager ce lien avec votre famille et vos amis pour montrer votre progression. Si vous êtes à ce stade, nous avons maintenant bon d'aller avec la création de notre site WordPress, commençant notre conversion de thème de Bootstrap. Je vous verrai maintenant dans la section suivante où nous commencerons ce processus. 17. FACULTATIF : Installation de WordPress avec MAMP: Il s'agit d'une vidéo facultative si vous préférez utiliser un service appelé MAMP. Configurez Wordpress sur votre propre ordinateur. Si vous avez suivi avec succès dans la dernière vidéo et configurer WordPress en utilisant Flywheel, alors vous pouvez aller de l'avant et sauter cette vidéo et passer à la section suivante. Si vous préférez utiliser MAMP et que vous ne l'avez pas déjà installé, vous devrez aller sur mamp.info, puis cliquer sur « Téléchargement gratuit. MAMP est un environnement de développement local qui peut être utilisé sur Mac et Windows et il nous fournit un environnement qui exécutera PHP et aussi MySQL Database qui est une exigence pour utiliser WordPress. L' étape suivante consiste à télécharger WordPress à partir de wordpress.org. Cliquez sur « Obtenir WordPress » et puis nous pouvons télécharger la dernière version, qui est actuellement à 5.2. Télécharger ceci est leur une exigence si nous sommes auto-hébergement WordPress sur notre ordinateur en utilisant MAMP. L' étape suivante, une fois que MAMP a été téléchargé, est de passer dans le dossier MAMP et d'ouvrir également les téléchargements. MAMP à l'intérieur ici aura une icône d'éléphant. Nous pouvons double-cliquer dessus et ouvrir la page de démarrage du MAMP. Cela va nous permettre de démarrer les serveurs, et vous voyez les deux feux verts en haut pour le serveur et la base de données, alors tout fonctionne bien. Ensuite, dans le répertoire MAMP, nous avons ce dossier htdocs, et c'est ici où nous ajoutons tous nos projets. Je vais ajouter notre projet WordPress ici dans les téléchargements. Je vais décompresser le dossier WordPress, puis renommer ceci, tranquilwp, appuyez sur « Enter » et maintenant je peux faire glisser cela sur les htdocs. Si vous utilisez un Mac, vous devrez peut-être ajouter un mot de passe à ce stade, puis nous pourrons fermer ces deux fenêtres. L' étape suivante consiste à créer une base de données pour nos projets WordPress. Nous pouvons le faire en utilisant MAMP à partir de la page de démarrage Web. Si nous cliquons sur cette icône, allez dans Outils, puis phpMyAdmin. De là, nous pouvons créer une nouvelle base de données à partir de l'onglet de la base de données. Je vais appeler ma base de données tranquil-spa avec un trait d'union. Cliquez sur « Créer » et tout est fait. L' étape suivante consiste à aller à MAMP, vérifier la partie sur laquelle vous êtes en cours d'exécution en cliquant sur « Préférences ». Je cours sur le port 8888. Tout ce que nous avons à faire maintenant est d'aller à localhost 8888. Il « Enter » et puis nous sommes pris au contenu des htdocs. Cela nous donnera un lien pour le seul et unique projet que j'ai, qui tranquilwp. Si nous sélectionnons ceci, nous sommes ensuite amenés aux scripts d'installation de WordPress. Où nous pouvons commencer par choisir notre langue. Cliquez sur « Continuer ». Cette étape nous indique quelles exigences nous aurons besoin telles qu'un nom d'utilisateur et un mot de passe de base de données. Nous avons déjà tout cela. On peut cliquer sur « Allons-y ». Le nom de la base de données exactement comme nous l'avons fait dans phpMyAdmin était tranquil-spa, avec le trait d'union. Nous n'avons pas configuré ajouter d'utilisateur supplémentaire. Si nous l'avons fait, vous devrez ajouter un nom d'utilisateur et un mot de passe à votre base de données. Sinon, nous pouvons simplement taper root et root pour le mot de passe deux. Nous utilisons un hôte local, et nous pouvons également changer le préfixe de table et changeons le mien en tranquil_db. Ensuite, soumettez ceci. Si vous voyez ce message, signifie que tout est maintenant connecté à notre base de données, et nous sommes prêts à exécuter l'installation WordPress. Ça ne prend pas trop de temps à faire. L' installation de WordPress doit connaître le titre du site. Je veux appeler ça le Spa Tranquil. C' est le nom d'utilisateur et le mot de passe que nous allons utiliser pour vous connecter au back-end WordPress ou au tableau de bord WordPress. Je veux appeler le mien, tranquil_admin. Le mot de passe vous pouvez le conserver comme celui généré, ou vous pouvez ajouter un mot de passe de votre choix. L' adresse e-mail, puis terminez l'installation en cliquant sur ce bouton. Bien, nous sommes maintenant prêts à nous connecter en utilisant le nom d'utilisateur et le mot de passe que nous venons de créer. Cliquez sur « Login » et nous pouvons entrer ces détails dans WordPress. Donc tranquil_admin, le mot de passe Se souvenir de moi, puis se connecter. Une fois que nous sommes connectés sera redirigé vers le tableau de bord WordPress, qui est la zone d'administration de notre site. Cela nous permettra de contrôler des choses telles que les pages, les messages. Nous pouvons télécharger n'importe quel média. Nous pouvons contrôler les commentaires et les paramètres et l'apparence de notre site. Nous les examinerons plus en détail au fur et à mesure que nous progresserons dans le cours. Nous pouvons également consulter notre site en survolant Tranquil Spa et en cliquant sur « Visiter le site ». Cela nous mènera ensuite au thème par défaut. Vous verrez quelque chose qui ressemble à ça une fois que vous atteindrez ce stade. Si vous avez besoin de revenir au tableau de bord, tout ce que vous avez à faire est de cliquer sur le titre de ce site ou de descendre le lien Tableau de bord et cela nous ramènera au Tableau de bord. Si vous atteignez maintenant cette étape, c'est WordPress tout maintenant configuré sur votre ordinateur et vous pouvez maintenant à la section suivante où nous allons commencer à construire notre site WordPress. 18. Le dossier de notre thème WordPress: Bienvenue de retour. Maintenant, nous avons une version de WordPress en cours d'exécution sur notre ordinateur. Nous allons maintenant commencer le processus de transfert de notre modèle Bootstrap sur un thème WordPress. À l'intérieur de local par volant, nous pouvons fournir le nouveau dossier thématique en naviguant vers notre répertoire. Dans cette petite icône juste ici, nous pouvons cliquer dessus et puis nous sommes emmenés à l'endroit où notre projet est stocké, à l'intérieur du nom du projet, nous pouvons aller vers le haut, puis vers « contenu WP », puis vers « Thèmes », puis à l'intérieur, nous pouvons voir les thèmes par défaut gratuits, qui sont installés avec WordPress par défaut. Si vous avez choisi de suivre ce cours, utilisez MAMP, devez naviguer vers le répertoire MAMP, ouvrir ce dossier, puis aller dans les documents HT, ouvrir le projet, puis aller au contenu, puis aux thèmes et ensuite, vous pouvez continuer exactement comme nous le ferons. Donc, à l'intérieur, c'est là que nous allons placer notre nouveau thème. Pour ce faire, je vais dupliquer notre modèle de bootstrap, puis une fois que cela est fait, je vais renommer ce, WP tranquille. Une fois que nous l'avons fait, nous pouvons le faire glisser dans nos thèmes, donc WordPress a accès à notre dossier de thème. L' étape suivante consiste à le faire glisser vers votre éditeur de texte. Cela s'ouvre à la place de la version bootstrap. Maintenant, puisque WordPress utilise PHP, la première étape consiste à renommer la page d'index à partir de index.html. Nous allons changer l'extension à la fin pour être index.php. C' est l'un des fichiers requis dans un thème WordPress, puis à l'intérieur ici, nous devons ajouter un commentaire en haut du fichier. Ce commentaire va être à l'intérieur des balises PHP, puis réglé dans le code PHP, alors nous pouvons fermer ceci avec un autre point d'interrogation et la flèche de fermeture. Ensuite, nous pouvons ajouter notre commentaire PHP à l'intérieur. Une commande PHP est un avant/ puis une étoile, puis se termine par une étoile, puis avant/. Ensuite, nous pouvons taper n'importe quel contenu que vous voulez ici. Je vais juste ajouter le texte du fichier de modèle principal, puis enregistrer ceci. L' autre fichier requis dans notre thème est le style.css. Nous avons un fichier CSS personnalisé à l'intérieur du dossier CSS, donc je vais saisir le CSS personnalisé et faire glisser ceci à la racine du projet. Assurez-vous que c'est à côté du reste des pages que nous aurons ici. Ce fichier pour WordPress doit être renommé style.css. Donc, il est reconnu par WordPress. Le style.css a également besoin d'un commentaire en haut du fichier. Cependant, ce commentaire est un peu différent de celui que nous ajoutons dans la page d'index. Si nous allons sur le navigateur, puis ouvrez un moteur de recherche, si nous recherchons les feuilles de style thème codex, le premier lien que nous obtenons devrait être pour le codex WordPress. Nous avons fait référence au codex plusieurs fois tout au long de ce cours pour voir les informations sur les fonctions WordPress, que nous pouvons utiliser. Nous pouvons également cliquer sur ce lien pour accéder aux feuilles de style de thème et c'est la section exacte dont nous avons besoin. C' est le commentaire que nous devons ajouter en haut de notre feuille de style et ce commentaire fournit différentes informations sur notre thème, comme l'auteur, le nom du thème, nous pouvons ajouter une description, toute licence ainsi que toutes les balises qui sont relatives à notre thème, types tels que le thème de couleur, le nombre de colonnes, si cela est réactif et atteindra la traduction prête. Nous pouvons simplement ajouter des balises ici que nous aimons, nous avons besoin de se référer aux balises WordPress disponibles dans le manuel de revue de thème et vous pouvez vérifier ceci si vous le souhaitez. À [inaudible], je vais copier ce commentaire comme un débutant , puis au-dessus de la section du corps, nous pouvons coller ceci dans et c'est juste un cas d'édition du contenu en fonction de notre thème. Ça va être tranquille WP. Nous n'avons pas de lien ici, donc je vais juste en faire un, tranquilspantheme.com, l'auteur, vous pouvez ajouter votre nom ici. Vous pouvez ajouter votre site web si vous le souhaitez, aussi une description. Je vais juste ajouter tranquilspantheme pour notre WordPress. Je vais laisser la version, la licence et pour les tags, je vais supprimer les couleurs, juste me donner les couleurs de votre choix, donc je vais laisser ceci dehors et puis éditer le reste. J' allais être prêt pour la traduction. Nous ajouterons ceci dans une section ultérieure. Nous pouvons ajouter la barre latérale droite. Nous inclurons également des en-têtes personnalisés, nous aurons des images en vedette et aussi un menu personnalisé. Vous pouvez bien sûr, après cela plus tard, une fois que nous ajoutons plus de fonctionnalités, mais juste pour finir, je vais ajouter le domaine de texte, qui correspondra à notre nom de dossier thèmes WP tranquille et ensuite nous pouvons supprimer le texte droit en bas, puis enregistrez ce fichier. L' étape suivante consiste à déplacer les captures d'écran, que vous avez été fourni dans le dossier images. Si vous prenez le screenshots.png et alors nous pouvons le faire glisser à la racine de notre projet à côté de nos feuilles de style et aussi toutes les pages. Ce sera l'image qui apparaîtra à côté de notre thème à l'intérieur du tableau de bord. Si nous sauvegardons ce fichier, c'est exactement ce que nous allons faire maintenant. Nous devons passer à l'hôte local dans le navigateur ou si vous utilisez le volant d'inertie, nous pouvons sélectionner le bouton d'administration, connecter si nécessaire et l'étape suivante est de passer à l'apparence, puis aux thèmes. Cette section de thème aura une liste de tous les thèmes que nous avons vus auparavant à l'intérieur du dossier de thèmes, tels que ceux par défaut fournis par WordPress et maintenant nous devrions également avoir le thème que nous avons fourni de WP tranquille. C' est aussi la capture d'écran en arrière-plan, que vous pouvez voir ici. Nous pouvons vérifier notre aperçu en direct, que je vais simplement activer ce thème. Nous pouvons vérifier que cela fonctionne en cliquant sur visiter le site. Il s'agit de tout le contenu HTML de notre site. Vous pouvez voir que le site a besoin d'un peu de travail, c'est le contenu HTML de base mais ce n'est pas encore sous le contrôle de WordPress, nous mettons simplement du HTML de base. Pour commencer le processus de conversion, je vais créer quatre nouveaux fichiers, afin que nous puissions commencer à travailler là-dessus. Dans les racines du projet, le premier va s'appeler le header.php. Le second va s'appeler le footer.php. Le troisième sera pour la barre latérale avec l'extension a.php et le quatrième sera pour notre functions.php et le but de ces quatre fichiers est de décomposer les sections de notre HTML, puis les placer dans leur propre fichier PHP personnalisé et ensuite nous pouvons les importer dans notre thème au besoin et nous commencerons avec ce processus dans la prochaine vidéo. 19. Pour commencer & notre page d'index: Une des premières étapes de la création d'un thème WordPress est de diviser nos sections de nos sites Web en leurs propres dossiers WordPress. À certains moments, nous avons créé les dossiers de fichiers dans la dernière vidéo, qui va contenir l'en-tête, le pied de page, la barre latérale. Nous créons également un pour les fonctions, mais nous avons aussi le index.php trop qui pour le moment il contient juste notre contenu de modèle Bootstrap. Travaillons avec la prise de notre contenu dans leurs propres fichiers distincts. Nous allons commencer par l'en-tête, donc si nous faisons défiler vers le bas jusqu'à la balise d'en-tête de fermeture, qui est celle-ci ici, sélectionnez jusqu'au DOCTYPE. Aller mettre ceci, puis coller son contenu dans le header.php en divisant notre code en petits fichiers comme celui-ci est un moyen vraiment pratique de faire les choses plutôt que d'avoir cet en-tête codé en dur dans chaque page. WordPress l'aura juste dans un seul fichier, puis l'injecter à chaque page selon les besoins. Nous pouvons également revenir à notre index et faire de même pour le pied de page, vers le bas. Faites défiler jusqu'à notre section pied de page, mettez la section jusqu'au bas, y compris le HTML. Collez ceci dans notre footer.php, si nous sauvegardons cela et rechargeons le navigateur sur notre index, nous voyons que nous avons juste le contenu qui est placé entre les deux. Nous n'avons plus l'en-tête et le pied de page. Pour les replacer dans notre thème, nous devons aller dans la page d'index où ils entrent une fois. Hop tout en haut, à la place du contenu de l'en-tête, nous pouvons ouvrir les balises PHP, qui est le crochet d'angle gauche, point d'interrogation, PHP. Ensuite, nous pouvons utiliser une fonction WordPress, en tirant cet en-tête. C' est la fonction WordPress est appelée « get_header » avec les crochets bourrés après. Puisque nous revenons maintenant à PHP puis en HTML normal, nous devons fermer nos balises PHP avec un point d'interrogation et les crochets d'angle, comme ceci. Ensuite, nous faisons une chose très similaire en bas à la place de notre pied de page, où notre pied de page était à l'intérieur du PHP. Nous utilisons une fonction WordPress cette fois appelée get_footer, puis fermons notre PHP, sauvegardez ceci, et rechargez le navigateur. Il ne semble toujours pas que beaucoup de notre contenu soit de retour en place, nous avons la section d'en-tête, en bas, nous avons notre pied de page, et tout est bien pour l'instant. De toute fonction de PHP, nous pouvons commencer à travailler avec cela en ajoutant un commentaire en haut. Cela va être une commande PHP, alors ouvrons et fermons les crochets PHP. Nous commençons un commentaire avec une barre oblique et une étoile, puis nous fermons cela avec l'envers avec une étoile, et une barre oblique avant, puis une étoile pour chaque nouvelle ligne. Cela va être une description du fichier et je vais juste ajouter des définitions de fonctions pour thème Tranquil Spa puisque ce fichier va contenir toutes les fonctions qui sont nécessaires pour notre thème. Ce fichier est utilisé pour modifier le comportement par défaut. Il peut être utilisé pour ajouter des fonctionnalités et aussi de nouvelles fonctionnalités. Ces fonctions peuvent être soit des fonctions natives WordPress fournies tubercules, ou nous pouvons également ajouter nos propres fonctions personnalisées aussi. Nous examinerons les deux types pendant ce cours. La première chose à faire est de créer une fonction de configuration. Cela s'exécutera dès que notre thème sera chargé. Ensuite, à l'intérieur de cette fonction, nous pouvons ajouter toutes les fonctionnalités nécessaires que nous devons charger immédiatement, comme nos menus de navigation. Sous les commentaires, je vais ouvrir le PHP, puis créer une fonction PHP, ce nom de la fonction sera Tranquil wp_setup, les crochets juste après. Ensuite, notre corps de fonction, la première chose que nous voulons faire est d'ajouter le support de thème. Cela enregistrera notre support de thème pour une fonctionnalité donnée. Le premier sera des liens automatiques, séparés par les tirets. liens automatiques permettent par défaut de publier et de commenter les flux RSS. Ces flux s'afficheront automatiquement dans la section tête. Je vais dupliquer cela et ajouter également le support de thème pour la balise title, title-tag et les points-virgules à la fin. Cela permet à WordPress de gérer le titre de notre document, à la place de la balise title. Ceci est essentiellement dire que nous ne allons pas WordPress pour contrôler le titre de la page. Plutôt que d'utiliser notre code dur. En dehors de notre fonction, nous ajoutons ensuite une action. Cela va prendre deux arguments, le premier est after_setup_theme, puis le second est le nom de notre fonction, qui est tranquilwp_setup, un point-virgule à la fin, et je peux fermer le PHP. After_setup_theme, que nous avons transmis comme premier argument, est un hook WordPress, qui sera appelé chargement de page en file d'attente, une fois que le thème est initialisé, il est généralement utilisé pour former une configuration de base, inscription, et aussi toutes les actions nécessaires pour notre thème. Nous allons ensuite de l'avant et passons dans notre propre ensemble de fonctions personnalisées. Exécutez également et fournissez notre propre fonctionnalité de démarrage personnalisée, que vous avez ajoutée ici. Ensuite, peut ajouter la largeur du contenu. abord, vous devez vérifier si la largeur du contenu a déjà été définie. Cette fonctionnalité nous permet de définir la largeur maximale autorisée ou tout contenu ajouté 12 thème, comme une image dans un post. Notre design n'a pas l'air déplacé. Si nous utilisons un était d'aller de l'avant et de télécharger une image plus grande que prévu. La première chose que nous devons faire est de créer une instruction PHP if. Pour vérifier si le contenu qui est déjà défini, nous pouvons accéder au contenu avec la variable de content_width. Rappelez-vous, PHP utilise un symbole $ pour déclarer une variable. Nous voulons cependant faire le contraire et vérifier si la largeur du contenu n'a pas été définie. On le fait avec un point d'exclamation. Si la largeur du contenu n'a pas été définie, nous voulons aller de l'avant et le définir nous-mêmes. Nous pouvons saisir cette variable de largeur de contenu et la définir à une valeur de pixel de 660. La largeur de contenu est également accessible par les plug-ins pour permettre à nos thèmes d'intégrer tous les plug-ins installés. Si nous continuons et sauvegardons ce fichier, nous ne devrions pas voir quelque chose de différent dans le navigateur une fois rechargé, puisque nous n'avons rien fait d'autre qu'une rupture de ce contenu dans des fichiers séparés. Cependant, c'est une première étape importante dans la création de notre thème WordPress. Maintenant, nous allons aller de l'avant à travailler avec les fichiers d'en-tête et de pied de page. 20. Rendre l'en-tête et le bas de page dynamiques: Maintenant, sur l'en-tête et le pied de page. Pour le moment, nous avons notre code HTML des modèles de bootstrap. C' est bien pour les sites statiques, mais nous voulons remettre le contrôle à WordPress. Je vais commencer par passer à notre HTML et ensuite passer le contrôle à WordPress en ajoutant quelques balises PHP pour utiliser les fonctions WordPress intégrées, commençant par le header.php. Ouvrons ce fichier, puis remontons tout en haut. Nous pouvons ajouter un commentaire PHP. Ouvrez le PHP, fermez ceci, qui est juste comme ça. Votre commentaire sera simplement l'en-tête de notre thème. Puisque WordPress est construit dans le langage de programmation PHP, nous devons ajouter n'importe laquelle de nos fonctions WordPress intégrées. Également entre ces balises PHP, nous pouvons ouvrir et fermer ces balises n'importe où dans notre HTML. Par exemple, nous allons remplacer l'attribut language. Supprimons ceci de la balise HTML d'ouverture, ouvrons le PHP, fermez ceci, et puis nous pouvons ajouter une fonction WordPress appelée les attributs de langue, suivie des crochets, puis du point-virgule. Ces crochets PHP lorsqu'ils sont utilisés à l'intérieur du HTML, signaleront le début du code HTML. Ensuite, nous fermons ceci, puis le fichier reviendra au HTML normal. Les attributs de langue sont une fonction WordPress utilisée pour définir la langue de la page. Mais comment WordPress sait-il quelle langue vous voulez utiliser ? Allons au navigateur et jetons un coup d'oeil. Rechargeons ceci, cliquez avec le bouton droit de la souris, puis « Afficher la source de la page ». Si nous regardons en haut pour les éléments HTML d'ouverture, nous voyons que nous avons l'attribut de langue défini sur Anglais, US. Le vôtre peut être différent pour votre installation, mais nous pouvons voir que ce n'est pas ce que nous avons défini dans notre fichier. Nous ne voyons aucun de ce code PHP qui a été ajouté dans. Au lieu de cela, nous voyons le langage réel que nous utilisons. C' est parce que PHP est rendu sur le serveur. Lorsque nous récupérons cette page et ouvrons le navigateur, nous ne voyons pas réellement le code PHP. Nous voyons en fait le HTML qui se régénère à sa place. Cette langue est définie dans le tableau de bord WordPress. Si nous ouvrons Volant d'inertie, cliquez sur « Admin », puis descendez à « Paramètres » et « Général », nous avons la langue du site, que nous avons définie juste ici. Si vous voulez en savoir plus sur l'une des fonctions WordPress que nous allons couvrir, vous pouvez visiter le codex.wordpress.org, et rechercher le nom de la fonction pour en savoir plus. Ensuite, nous allons définir les jeux de caractères. De retour dans notre en-tête. Pour le jeu de caractères méta, nous pouvons supprimer notre version codée en dur de UTF8, puis à l'intérieur de ces citations, nous pouvons ouvrir les balises PHP, fermer, puis à l'intérieur ajouter une fonction WordPress appelée info blog. L' info du blog que nous voulons définir est le jeu de caractères, qui est défini comme ça. L' encodage par défaut dans WordPress est UTF8. C' est ce qui sera affiché. Nous pouvons également recharger la source du navigateur juste pour vérifier cela. On y va. Cette valeur est définie sur l'UTF8 par défaut. Ensuite, nous avons le titre du site, que je vais supprimer. Alors faites défiler vers le bas, nous avons le titre utilisé ici. Nous pouvons complètement supprimer ou commenter cela. C' est parce que dans le functions.php, nous avons ajouté récemment, qui définit le support du thème pour la balise title. Ce faisant, ce support de thème permet à WordPress de gérer en toute sécurité les photos de titre de la page et déclare également que nous n'utilisons pas un titre codé en dur pour notre thème. Retournez à notre header.php. Nous pouvons utiliser une fonction PHP appelée wp_head. Cela indiquera à WordPress exactement où nous voulons ajouter les informations générées automatiquement. L' emplacement de ceci est important car il est utilisé pour injecter toutes les choses de traction telles que nos fichiers CSS, tous les scripts et ils vont être insérés ici exactement où nous avons ajouté ceci. Nous allons également jeter un oeil sur la façon dont WordPress gère notre CSS et nos scripts en un instant, mais d'abord, nous allons passer à la classe body. Ajoutons ceci à l'intérieur de la balise body d'ouverture, ce qui signifie PHP. Fermez ça. puis ajoutez une autre fonction WordPress appelée body_class ; Sur celui-ci aussi. Toujours en vous assurant de fermer la balise HTML juste à la toute fin. En ajoutant cette classe body à la section body, cela permet à WordPress d'ajouter toutes les classes CSS, qui est nécessaire, juste de la même manière que nous ferions en HTML régulier en ajoutant les attributs de classe. Mais maintenant au lieu de cela, c'est sous le contrôle de WordPress. Si nous sauvegardons cela et puis rechargeons notre source de page, et si nous localisons les éléments du corps d'ouverture, qui est juste ici, nous voyons maintenant toutes ces classes que WordPress a ajoutées. Ces classes changent en fonction de la page que nous affichons, de nos états connectés, s'il y a des erreurs, et ainsi de suite, mais tout cela est géré par WordPress dans les coulisses. Nous pouvons même ajouter nos propres classes à chaque page aussi, simplement en les ajoutant comme une chaîne à l'intérieur de la classe body. Allons-y pour la coutume. Donnez ceci une sauvegarde, rechargez, et nous devrions également voir notre classe personnalisée ajoutée à la fin. Ceci est ajouté sous la forme d'une chaîne. Si nous avions plusieurs classes, nous pourrions ajouter ceci comme un tableau. Je vais taper le tableau. A l'intérieur des crochets, nous pouvons ajouter notre première valeur séparée par une virgule. Nous pouvons ajouter une deuxième valeur, disons personnalisé 2, « Enregistrer » et « Recharger ». Cela ajoute plusieurs classes à notre corps. Nous n'en avons pas besoin pour ce projet, donc je vais les supprimer et laisser la classe de corps vide. Lorsque vous consultez la source de la page, vous avez peut-être également remarqué que nous avons maintenant du contenu supplémentaire dans la section d'en-tête. Si nous faisons défiler vers le haut, nous avons tout ce code qui est sur ici et aussi tous les liens ci-dessous. Ceux-ci sont tous ajoutés automatiquement par WordPress. Ce sont tous les styles et scripts que WordPress a ajoutés depuis que nous avons inclus la fonction WP_Head. Ceci est juste en dessous de notre CSS personnalisé. Si nous recherchons notre CSS personnalisé ici, c'est tout le contenu wp_head ajouté juste ci-dessous. Nous avons également le titre de notre site, qui est automatiquement ajouté même si nous avons supprimé le titre de la page codée en dur. Le dernier changement à l'en-tête que je veux faire dans cette vidéo est le titre du site tout en haut. Si nous passons à notre projet, c'est le titre du site que nous avons dans le lien. Actuellement, c'est codé en dur et WordPress n'a aucun contrôle sur cela. Allons-y et changeons-le maintenant. Manipuler sur le contrôle à WordPress, nous utilisons get_bloginfo en passant dans le nom. Si nous faisons défiler jusqu'à notre navigation, nous avons le titre du site à l'intérieur de l'élément A. On peut supprimer ça. Ouvrons les éléments PHP et fermons ensuite. Ici, nous pouvons faire écho au nom du blog par get_bloginfo. À l'intérieur, nous allons transmettre les informations que nous voulons recevoir. C' est le nom du site. Si nous sauvegardons cela, et encore une fois, si nous regardons la source de la page, puis faites défiler vers le bas jusqu'à notre section d'en-tête, mien est sur la ligne 62, et ici nous voyons le titre du site de Tranquil Spa. Retour sur notre site et recharger. On le voit aussi juste ici. Pour voir où cela est défini, nous pouvons une fois de plus aller dans les paramètres généraux, puis aller au titre du site. Si nous ajoutons quelque chose juste après ici, appuyez sur « Enregistrer », « Recharger le site » ; nous voyons les changements sont reflétés dans le navigateur. Revenons à Tranquil Spa, puis économisons. La dernière chose que je veux faire maintenant dans l'en-tête est d'avoir le lien de titre du site vers la page d'accueil lorsque nous cliquons dessus. Actuellement, si nous cliquons dessus maintenant, nous utilisons juste un href vide, qui est défini ici. Cela fonctionne pour l'instant, mais nous voulons nous assurer que WordPress est également entièrement en contrôle de cela en ajoutant l'élément PHP. Fermez ceux-ci, puis nous allons faire écho à l'URL d'échappement, en passant le home_url comme une fonction. Ainsi, le home_url récupère la page d'accueil de WordPress, et nous la passons dans l'URL d'échappement pour supprimer ou nettoyer tous les caractères inutiles tels que les esperluettes, les symboles de pourcentage, ou généralement tout caractère qui n'est pas nécessaire. Enregistrez ceci et maintenant il suffit de vérifier que tout fonctionne encore en cliquant sur Tranquil Spa et retourner à la page d'accueil. Il y a aussi un petit changement à apporter au pied de page. Si nous ouvrons le footer.php, faites défiler vers le bas du fichier. Juste au-dessus de la balise de corps de fermeture, nous devons ajouter une fonction WordPress appelée wp_footer. Nous mettrons les crochets, le point-virgule. C' est un peu comme le wp_head, ce que nous avons fait dans la section d'en-tête juste ici. Il sera utilisé par WordPress pour injecter tous les scripts que vous pouvez ajouter. Ajouter dans le wp_footer, indique donc WordPress où placer ces scripts. Nous avons également besoin d'un commentaire PHP en haut du fichier. Il suffit de suivre le pied de page, d'ouvrir et de fermer le PHP. Ce sera le modèle d'affichage de notre pied de page. Donnez une sauvegarde à ce fichier. Nous reviendrons au pied de page à un stade ultérieur lorsque nous examinerons l'ajout de choses telles que des menus personnalisés. Mais pour l'instant, c'est l'en-tête et le pied de page maintenant changé pour être plus dynamique et aussi pour être lié plus profondément dans WordPress. 21. Comment mettre en file d'attente les feuilles de style et les scripts ?: Actuellement, nos scripts et nos styles sont directement ajoutés à notre zone d'en-tête et de pied de page. Ceci date d'avant lorsque nous avons créé le modèle Bootstrap. Nous avons le CSS dans l'en-tête. Ensuite, dans le pied de page en bas, nous avons notre JavaScript. Si nous visitons le mot précis, nous ne voyons pas de style et aussi des choses telles que les images et les icônes. Ce que nous allons faire maintenant est de supprimer ces liens codés en dur, puis de les déplacer vers le functions.php. Nous pouvons ensuite les inclure dans WordPress en utilisant des fonctions appelées wp_enqueue_style, des feuilles de style de ligne, et pour que notre script obéisse à wp_enqueue_script. Mais pourquoi avons-nous besoin de le faire ? Eh bien, il y a quelques raisons. Mais imaginez, notre thème WordPress nécessitait un jQuery pour qu'il fonctionne, et puis imaginez si nous avions deux plugins et ces deux plugins nécessitent également un jQuerry. Si jQuery a été codé en dur dans le thème civil et aussi dans les plugins. Cela signifierait que WordPress aurait besoin de télécharger jQuery trois fois distinctes. Cela ralentirait nos sites. Après cela, il peut également s'agir de versions différentes du même script, ce qui peut provoquer des conflits de version. En outre, un script particulier peut également être fourni avec WordPress, donc nous n'avons peut-être pas besoin de le télécharger du tout. En utilisant ces fonctions, cela permettra à WordPress de prendre le contrôle et de charger seulement exactement ce qui est nécessaire. Il peut également prendre soin de tous les scripts supplémentaires qui sont des dépendances à. Commençons par le header.php en supprimant les feuilles de style d'ici. Nous en avons les quatre, et ensuite nous pouvons également supprimer tous ces scripts du bas du pied de page. Nous en avons deux ici, nous pouvons également supprimer ces commandes, enregistrer le fichier, et je peux passer au functions.php. Nous pouvons ajouter ces back-in en créant une fonction PHP. En bas, toujours dans notre section PHP, nous allons ajouter une fonction PHP appelée tranquil_scripts comme crochets juste après. Tout d'abord, je vais ajouter les styles sans commentaires sur le haut, alors ajoutez les styles. Ensuite, à l'intérieur, nous pouvons commencer par la fonction WordPress appelée wp_enqueue_style, point-virgule à la fin. wp_Enqueue_style peut prendre jusqu'à cinq paramètres. Le premier est le nom des feuilles de style, que nous allons ajouter comme une chaîne d'appel Bootstrap. Ce nom doit également être unique. Le deuxième paramètre dont nous avons besoin est la source. Ici, nous pouvons utiliser une fonction WordPress appelée get_template_directory_uri, qui nomme les racines ou le répertoire d'accueil de notre projet. Ajoutons ceci maintenant. Donc [inaudible], et c'est votre point vers notre répertoire personnel, qui est tous nos fichiers et dossiers sur la gauche ici. Nous utilisons ensuite un point, puis nous pouvons ajouter un chemin de fichier à notre CSS. Ce sera notre version minifiée Bootstrap, qui est dans le dossier CSS. En tant que chaîne, nous pouvons ajouter /CSS, puis le fichier est le bootstrap.min.css. Si nous donnons ceci pour enregistrer maintenant, fermez la barre latérale, sur le navigateur, puis appuyez sur « Recharger ». Nous ne voyons aucun changement à notre projet pour le moment. Pour réellement exécuter la fonction, nous devons ajouter une action, et cette action va être responsable du démarrage de notre fonction. Juste en dessous, nous pouvons add_action. C' est tout comme nous avons ajouté ci-dessus pour notre configuration. Cette fois-ci, ce sera nos scripts. Le premier argument est wp_enqueue_scripts, puis le second est notre nom de fonction personnalisé de tranquil_scripts. Cette action exécutera notre fonction personnalisée de tranquil_scripts, qui est cette section ici. Chaque fois que la fonction WordPress est wp_enqueue_scripts est appelée. Maintenant, nous pouvons enregistrer cela, puis il rafraîchit le navigateur. Maintenant, comment les styles Bootstrap ont été appliqués ? Les sont également de petites feuilles de style que nous devons ajouter à cette fonction telles que Font Awesome, nos polices Google, et aussi notre CSS personnalisé. Faisons exactement la même chose qu'avant. Je vais copier et coller ce style. Cette fois, je vais appeler ça fontawesome comme nom. Le lien cette fois doit être ajusté pour pointer vers le fichier Font Awesome. Donc, c'est /cssfontawesome/css, et alors nous avons besoin du all.min.css. Vérifions si ces icônes fonctionnent, appuyez sur « Enregistrer », « Recharger », et ce sont nos icônes dans le pied de page. C' est aussi notre fichier CSS personnalisé 2. Rappelez-vous, comme une exigence de WordPress, nous devions déplacer cela dans un fichier style.css, et c'est à la racine de notre projet. En dessous, nous allons copier et coller dans une nouvelle ligne. Cela devient B pour notre fichier personnalisé. Nous devons également récupérer le répertoire personnel, qui est get_template_directory_uri. Cette fois, nous n'avons pas besoin d'ajouter un chemin d'accès de fichier car il est dans la racine. Tout ce que nous devons faire est d'ajouter le nom de fichier de style.css, enregistrer et recharger. Nous pouvons voir que certains styles personnalisés ont maintenant été appliqués. Nous n'avons pas encore les images présentées, mais nous y reviendrons très bientôt. La dernière chose à ajouter sont nos scripts pour jQuery et Bootstrap. Nous pouvons ajouter notre fichier bootstrap-js d'une manière similaire aux styles. Mais cette fois, au lieu de wp_enqueue_style, nous exécutons wp_enqueue_script, donc ce sont les mêmes, juste après notre troisième style. Le nom de la fonction wp_enqueue, et cette fois c'est un script à l'intérieur. Ici, nous ajoutons d'abord notre nom, donc ce sera bootstrap-js. Encore une fois, c'est le nom de notre choix, et il doit être unique. Deuxièmement, nous allons copier le chemin du fichier à partir d'ici. même temps, nous devons également utiliser ceci pour pointer vers le répertoire personnel, puis le chemin du fichier que nous allons utiliser est supposé être /js, puis barre oblique le nom de notre fichier, qui est bootstrap.min.js. Nous pouvons également ajouter des choses à cela, un tableau de dépendances. Je vais ajouter une dépendance de jQuery. Nous pouvons ajouter plusieurs scripts ici, et jQuery est fourni avec WordPress par défaut, donc nous n'avons pas besoin d'ajouter ceci comme un script séparé par une virgule. Juste après cela, nous pouvons également ajouter un quatrième argument, qui est si vous voulez utiliser un numéro de version spécifique, donc je vais ajouter ceci comme un null, la cinquième et la valeur finale sera vraie. Définir cette valeur à true déclarera que nous voulons que WordPress ajoute ce script au pied de page, Vous avez juste besoin de la balise wp_footer, que nous avons ajoutée plus tôt, et c'est celui-ci ici. Enfin, si nous sauvegardons ceci et puis rechargeons notre thème. J' ai aussi eu des erreurs de syntaxe, vérifions ça, et on pourrait juste manquer un point-virgule. Tu dois sauver. Nous pouvons vérifier que le JavaScript est en cours de chargement. Si nous faisons défiler le navigateur vers le bas, et nous savons que le JavaScript fonctionne parce que notre liste déroulante est entièrement fonctionnelle. Si nous élargissons maintenant le navigateur un peu plus grand, puis nous allons recharger la ressource. Tout d'abord, allons en haut du fichier. Si nous regardons de près, nous pouvons voir notre CSS personnalisé. Nous pouvons voir notre fontawesome, et aussi ce que nous appelons bootstrap-css a été chargé. Ensuite, tout en bas, nous avons aussi un script ici, qui est l'un de nos bootstrap.min.js. Vous avez maintenant appris à ajouter des feuilles de style et des scripts à WordPress de la manière correcte. Cela permet à WordPress de contrôler ce qui est chargé et d'éviter tout problème potentiel. 22. Menu de navigation de l'en-tête: Dans notre section d'en-tête, notre menu s'affiche en haut. Si nous cliquons sur la page d'accueil, ce lien vers nos versions HTML de notre page d'index, et aussi si nous cliquons sur le Blog, cela va également à notre blog en HTML. Ce n'est pas ce que nous voulons cependant pour un thème WordPress, puisque nous voulons que WordPress contrôle les pages et aussi la navigation. Commençons les choses en créant un nouveau menu WordPress dans le tableau de bord. Alors passons au tableau de bord principal, puis accédez à Apparence, puis à Personnaliser. De là, nous pouvons aller sur le personnalisateur et ajouter un nouveau menu. Comme vous l'avez deviné, nous pouvons le faire dans l'onglet Menus, puis créer un nouveau menu. C' est notre premier regard sur ce qu'on appelle le customizer. Cela nous permet d'apporter visuellement des modifications à certaines parties de notre thème, et nous pouvons également voir un aperçu sur le côté droit de nos modifications. Ainsi, nous pouvons jouer avec ces paramètres et voir à quoi il ressemble dans notre thème avant de commettre. Nous allons utiliser le personnalisateur pour ajouter ce nouveau menu à notre thème. Ensuite, ajoutez un nom de menu du menu principal, cliquez sur « Suivant », ajoutez des éléments à d'autres pages que nous voulons ajouter à notre menu. Le premier sera pour la maison, et ensuite nous n'avons pas encore de page de blog. Donc, nous pouvons ajouter le juste ci-dessous. Cliquez sur « Ajouter », et assurez-vous que nous avons les liens d'accueil et de blog sur le côté gauche. Si nous le voulions, nous pourrions également ajouter des liens personnalisés. Nous pourrions également ajouter des liens vers divers articles et les catégories ou tags associés à ces publications aussi, mais pour l'instant ces deux pages sont tout ce dont nous avons besoin pour refléter nos modèles d'amorçage. Nous pouvons également ajouter automatiquement des pages à notre menu au fur et à mesure qu'elles sont créées en cliquant sur ce bouton ici. Mais on veut juste les deux pour l'instant. Alors cliquez sur « Publier », fermez ceci, et nous pouvons aller rafraîchir notre page. Donc, le menu est créé mais nous ne l'avons pas encore apparaissant dans notre thème. Voici les liens de notre HTML. Juste avant faire cela, nous allons aller sur le codex WordPress, qui est disponible sur developer.wordpress.org. Alors dirigez-vous vers cette page. Ensuite, nous pouvons faire une recherche pour wp_nav_menu, séparé par des traits de soulignement. Donc wp_nav_menu. Recherchez cela, puis passez à la référence de la fonction. Nous voyons en haut wp_nav_menu est utilisé pour afficher un menu de navigation et c'est exactement ce dont nous avons besoin. Ci-dessous, nous avons quelques paramètres que nous pouvons ajouter dans notre menu. Ces paramètres nous permettront de personnaliser le menu en ajoutant des éléments tels que conteneurs ainsi que des classes de clients et des identifiants différents. utilisation de tous ces paramètres nous permettra de dire exactement à WordPress quelles classes nous voulons l'ajouter à notre menu, pour garder notre style et la mise en page exactement comment il utilise Bootstrap. Je vais le faire en utilisant ce qu'on appelle un navwalker Bootstrap. Passons à l'onglet et à la recherche du Bootstrap pour navwalker, ce qui nous amènerait à la page GitHub. Ce navwalker nous permettra de lier toutes les classes Bootstrap et les ID et la structure de base à notre menu WordPress. Nous n'avons donc aucune différence dans le style. La première chose que nous devons faire est de télécharger le fichier zip. Cliquez sur « Clone or download ». Téléchargez le fichier zip. Je veux qu'il télécharge, nous devons ajouter ceci à la racine de notre projet. Alors ouvrez ceci, puis à l'intérieur ici vous avez une classe qui s'appelle class-wp-bootstrapnavwalker.php. Donc, copions ceci ou en fait, je vais faire glisser cela dans la barre latérale. Cela placera cela à l'intérieur de notre dossier de thème à la racine du projet. Si nous revenons à la page GitHub pour le navwalker, faites défiler vers le bas jusqu'à l'installation. Nous avons déjà terminé la première étape, qui consiste à placer notre fichier PHP dans notre dossier. La prochaine chose que nous devons faire est d'aller au functions.php et d'ajouter le code suivant. Donc, je vais copier cela dans le fichier de fonctions , puis faire défiler vers haut et je vais ajouter ceci juste après notre support de thème pour la balise title, collez-le dans, et nous sommes prêts à y aller. Donc, exiger une fois qui est au début de cette ligne est une fonction PHP, qui inclura le fichier que nous spécifions. Dans notre cas, nous le pointons vers le répertoire principal, puis dans le fichier PHP que nous avons ajouté. Requirer une fois est similaire à la fonction PHP require. Nous vérifierons d'abord si ce fichier a déjà été inclus dans le passé avant de le demander une fois de plus. Avec ce maintenant enregistré, revenons à la documentation et l'étape suivante consiste à utiliser une fonction WordPress appelée register_nav_menus. Donc, nous pouvons copier cette fonction juste ici. Cela doit également aller à notre fichier de fonctions, et je veux ajouter ceci juste sur la ligne ci-dessous. Collez ceci dans. Il existe également une fonction pour créer un menu unique appelé register_nav_menu plutôt que menus. Mais nous ajouterons également un menu de pied de page à une date ultérieure. Donc nous pouvons rester avec les menus. Il contient un tableau de menus. Si non juste avoir celui en ce moment. Ici, nous ajoutons dans notre menu comme primaire et nous allons jeter un coup d'oeil à cela dans un instant. Après cela, nous aurons une description du menu. Une fois que nous arrivons à la description, le menu d'en-tête principal. Après cela, nous avons le nom du thème. Je vais juste me calmer. Ce nom doit correspondre aux commentaires en haut du fichier style.css. Il doit beaucoup ce domaine de texte, que nous avons déclaré plus tôt. De retour dans les fonctions, ce domaine de texte sera également utilisé plus tard lorsque nous examinerons la traduction de notre texte dans le thème. Revenons maintenant à la documentation et continuons avec ce menu. Si nous faisons défiler jusqu'à l'utilisation, le morceau de code suivant est wp_nav_menu. C' est ce que nous avons regardé dans le codex WordPress juste avant. Cela sera utilisé dans wp_nav_menu pour enregistrer notre menu, nous pouvons ensuite aller de l'avant et cartographier nos classes WordPress avec l'équivalence bootstrap. Copions cette fonction juste ici sur notre en-tête, qui est l'endroit où notre menu est stocké. Notre menu pour naviguer vers la liste non ordonnée. Nous pouvons avoir un supprimer ceci ou commenter cette section. Puisque nous n'utilisons plus cette version codée en dur. En place, c'est que nous allons ajouter des balises PHP, puisque nous allons maintenant sauter dans le code PHP, puis coller dans notre menu. Notez la liste des paramètres sur le côté gauche de ce tableau. Ce sont les paramètres que nous avons vus avant lorsque nous avons regardé wp_nav_menu à l'intérieur du site WordPress. Ce sont tous ceux qui sont juste ici. Nous avons ensuite la possibilité sur le côté droit de mapper l' un de ces éléments à notre équivalence Bootstrap. Ainsi, les classes Bootstrap prendront effet plutôt que les valeurs par défaut WordPress. Si nous commençons par enregistrer ceci puis recharger notre page d'accueil, nous voyons que notre menu a maintenant disparu depuis que nous l'avons commenté. Nous allons aller plus loin pour ajouter un menu, mais j'ai besoin de prendre à notre menu principal que nous avons créé auparavant. Nous devons maintenant définir ce menu principal à notre emplacement thématique du menu d'en-tête principal. Alors sélectionnez ceci, enregistrez nos modifications et notez sous l'apparence que nous avons maintenant un menu de menus. Nous pouvons retourner sur notre site en cliquant sur ce lien juste ici. Vous pouvez voir maintenant nous avons notre Accueil et nos liens Blog à partir de notre menu. Ceci est maintenant terminé sur le côté gauche, mais c'est quelque chose que nous pouvons facilement réparer maintenant. Retour au menu dans votre fichier header.php entourant notre menu et en fait, je vais juste supprimer cette liste non ordonnée. Nous avons encore cette div environnante avec les classes Bootstrap. Nous allons supprimer cela dans un instant. Mais pour l'instant, nous pouvons l'utiliser comme référence, puisque nous le remplaçons essentiellement par les paramètres ci-dessous. L' emplacement du thème est défini sur principal. C' est bien puisque cela relie avec le nom dans nos fonctions de primaire juste ici. Ensuite, nous avons la profondeur du menu. Nous allons définir ceci pour être une valeur de un. Puisque ce menu n'est pas une liste déroulante. Notre conteneur a également la classe de justify-content-end. Donc, je vais copier ceci et ajouter ceci à la fin de la classe conteneur. Cela déplacera notre menu vers la droite. L' ID de navbar-nav, nous pouvons prendre cela et ajouter ceci comme l'ID du conteneur. Nous pouvons également supprimer la valeur droite de marge d'auto, puisque nous ne l'utilisons pas dans notre thème. C' est notre conteneur maintenant répliqué, et en bas, nous avons créé une nouvelle instance de navwalker à utiliser maintenant thème. Tout ce qui reste à faire maintenant est de supprimer la div environnante, l'ouverture, et aussi les balises de fermeture du navigateur, puis nous pouvons recharger. Bon, notre menu est maintenant poussé vers la droite. Si nous allons aux outils de développement par un clic droit et inspecter, Cliquez sur le « Inspecteur », et allez dans le menu. Quand il trouve le div avec l'ID de navbar-nav, qui contient maintenant toutes nos div et classes qui vont réinitialiser dans le navwalker, puis imbriqué à l'intérieur, nous avons notre liste non ordonnée et ensuite nos éléments de liste. Si nous fermons maintenant ceci, nous pouvons cliquer sur les liens. WordPress a maintenant un contrôle total sur l'endroit où nous sommes emmenés. Nous ne voyons plus aucun des liens HTML en haut. Donc, notre menu fonctionne maintenant comme prévu et c'est ainsi que nous pouvons ajouter un menu personnalisé à notre thème. Ensuite, nous allons travailler sur la correction de nos images. 23. Chemins d'accès aux fichiers d'images: Nos images à l'intérieur de notre thème WordPress n'ont pas fonctionné depuis que nous avons commencé la conversion. C' est quelque chose que nous allons corriger dans cette vidéo. Si vous allez à un clic droit, puis allez aux outils de développement avec des inspections, nous pouvons vérifier la console en cliquant sur cet onglet. Nous avons une liste de quatre ou quatre messages de NOT_FOUND. Ces quatre de nos images comme vous pouvez le voir ici. C' est quelque chose que nous pouvons résoudre assez facilement. C' est vraiment juste un cas de changement des chemins de fichier pour la source de l'image. Commençons en haut avec l'image de fond principale, qui le dans header.php. Si vous souhaitez déplacer les éléments d'image, qui est une section d'entités soignée, faites défiler vers le bas. C' est ce qu'il faut entendre. Je vais remplacer la source de l'image. Avant notre chemin de fichier pour entrer dans le PHP, ouvrez et fermez ceci. A l'intérieur, nous allons faire écho à une chaîne PHP. Ensuite, nous pouvons utiliser la fonction d'échappement URL, qui va vérifier et nettoyer également l'URL fournie, supprimant tous les caractères qui ne sont pas autorisés, puis tout comme nous l'avons fait lorsque nous avons ajouté le CSS dans les fichiers JavaScript dans les fonctions, nous pouvons faire usage de gets template URI. C' est le point vers le répertoire racine de notre thème. Sont des crochets sur les extrémités ? Est-ce que des points-virgules sont à la fin ? Nous devons également ajouter une barre oblique avant le dossier images. Comme cela n'est pas ajouté par défaut du projet et recharger. Maintenant, nous avons maintenant notre première image à l'écran. Maintenant, c'est juste un cas de passer par le reste des images du thème, puis [inaudible]. Vous pouvez avoir une copie et coller ceci ou vous pouvez taper ceci manuellement si vous préférez accélérer les choses. Je vais tout copier. Une balise PHP d'ouverture jusqu'à la barre oblique, copiée ceci. Nous pouvons trouver le reste des images dans notre index.PHP. Faisons une recherche avec la commande ou le contrôle F, rechercher les balises d'image. Maintenant, copiez et collez notre PHP. Le premier, le second, les bougies, l'image de retraite. La fracture est nécessaire pour continuer à descendre, nous avons une autre image ici pour un diviseur. On a l'image du massage, on a les cosmétiques pour le visage, et ça leur ressemble tous. Sauvegardons cela et vérifiez le tout lié maintenant le navigateur, je vais faire défiler vers le haut et vers le bas et vérifier que seules les images sont là où elles devraient être et tout semble bien. Si vous avez des problèmes avec des images, assurez-vous que vous avez tous le code PHP inséré au bon endroit. C' est nos images, encore sur notre travail. Ensuite, nous allons jeter un oeil à la hiérarchie des modèles, inutilisée à partir de la page. 24. La hiérarchie des modèles et la page d'accueil: Nous passons maintenant à créer en première page de notre thème. Vous pensez peut-être, n'avons-nous pas déjà eu notre page d'accueil ? Oui, vous avez raison. Lorsque nous visitons le thème, nous voyons le contenu de l'index point PHP. C' est essentiellement parce que, puisque nous avons maintenant créé un modèle de page d'accueil approprié, WordPress sera par défaut de retour à notre point d'index PHP. Pour mieux comprendre comment cela fonctionne, allons sur Google, et rechercher la hiérarchie des modèles WordPress. C' est le lien dont nous avons besoin en haut. Les modèles utilisant WordPress peuvent être des fichiers réutilisables pour afficher nos pages Web. Nous avons déjà utilisé les modèles d'en-tête et de pied de page, que nous avons réutilisés sur notre thème. Cependant, tous les modèles ne doivent pas être utilisés sur l'ensemble de notre thème. Nous pouvons créer des modèles de page pour n'afficher que certaines pages, ou même utiliser un contrôle de rendu conditionnel lorsque nous les utilisons. Défilons vers le bas jusqu'à la hiérarchie des modèles dans la section détaillée, et voici la section juste ici. Nous sommes sur le point de découvrir que WordPress utilise un système de hiérarchie pour décider quel modèle contrôle quelle page. Mais le moment c'est assez facile puisque nous avons seulement vraiment le point d'index PHP nous met notre thème grandit, que vous allez bientôt. Nous devons être conscients de l'ordre de sélection, qui est utilisé car nous avons plus de modèles de page disponibles. Nous allons utiliser le fichier PHP point d'index pour afficher nos billets de blog, ce qui est assez commun dans WordPress, puis créer un nouveau à partir de modèles de page. Si vous allez à l'affichage de la page d'accueil, que vous voyez ici, par défaut, WordPress définira la page d'accueil des côtés pour afficher les derniers articles de blog. Évidemment, nous n'avons pas encore de posts de blog, et nous allons regarder changer le thème. Il va d'abord chercher un home dot modèles PHP. Si cela n'est pas trouvé, il retournera par défaut au point d'index PHP. La chose clé à retenir ici est que nos billets de blog seront par défaut page d'index arrière si aucune page plus appropriée n'est trouvée. Est alors n'importe quelle note juste en dessous qui dit que le point de la page d'accueil PHP remplacera les deux, et c'est un fichier qui va créer ensuite pour notre page d'accueil. Si nous faisons défiler vers le bas, nous pouvons maintenant voir le point de la page d'accueil PHP. Ce point de page d'accueil PHP est utilisé pour rendre les côtés de la page, et c'est exactement pour cela que nous allons l'utiliser. Si le point de la page d'accueil PHP est introuvable, nous chercherons alors un point d'accueil secondaire PHP. Après cela, si cette page ne peut pas être trouvée, nous allons alors chercher le point de page PHP, puis enfin le point d'index PHP. Si nous faisons défiler encore plus loin, les modèles que nous pouvons utiliser pour le seul message, une seule page, différentes catégories, et bien plus encore. Nous en ferons usage tout au long du cours, mais cette page est toujours une bonne référence si vous avez besoin de comprendre comment les choses fonctionnent. Maintenant, commençons à travailler sur la création des modèles de première page. Si nous allons sur le tableau de bord, en cliquant sur le coin supérieur ici, nous pouvons créer une nouvelle page en allant sur le lien de nos pages, puis ajouter de nouvelles. C' est là que nous créons des pages pour notre thème, commencerions par créer la page d'accueil, puis cliquez sur publier en haut. Nous pouvons maintenant travailler sur le déplacement du contenu de notre point d'index PHP sur le fichier de la page. Nous allons dupliquer ou copier et coller le point d'index PHP, et puis nous pouvons renommer cela le point de la première page PHP. Puisque notre page d'index ne sera plus utilisée pour notre page de départ, nous pouvons supprimer tout le contenu entre l'en-tête et le pied de page. Supprimez toutes les sections, en ne laissant que l'en-tête et le pied de page. Nous pouvons vérifier si cela fonctionne bien en visitant les sites, et nous voyons toujours toutes les sections de notre page d'accueil. Pourquoi voit-on encore tout le contenu de notre page d'accueil ? Eh bien, c'est parce que nous avons maintenant un gabarit plus spécifique ou une page d'accueil, et il a maintenant tout le contenu dont nous avons besoin. Nous reviendrons à cette page d'index dans la section suivante, où nous utiliserons ceci pour afficher nos articles de blog. La prochaine chose à faire est d'aller sur le tableau de bord, et ici dans les paramètres. Ensuite, en lisant, nous pouvons définir la page que vous voulez afficher pour la page d'accueil et aussi pour tous les articles de blog. Notre page d'accueil affichera une page statique. Ce sera la page d'accueil que nous avons créée auparavant. Enregistrez les modifications, et maintenant nous sommes prêts à partir. Nous pouvons vérifier si tout est propre à partir de nos modèles de première page en ajoutant n'importe quoi ici. J' ai changé la barre des strangles de bienvenue. C' est assez pour entendre, aussi une première page, et c'est notre texte qui vient de la première page. Bien, donc c'est notre page d'accueil maintenant configuré et notre premier nous allons examiner les modèles de page personnalisés. Suivant repassera à l'index point PHP. Nous allons créer la boucle WordPress, et afficher nos articles de blog. 25. Franchir la boucle: Nous allons maintenant passer à jeter un oeil à la célèbre boucle WordPress, et comment nous pouvons l'utiliser pour parcourir tous nos billets de blog et les afficher à l'écran. Je l'ai juste remis aux sites de développeurs WordPress, puis dans la section de boucle, qui peut nous donner un peu plus d'informations sur ce que la boucle est et ce qu'elle peut faire. Mais j'ai mis en évidence probablement l'une des sections les plus importantes et les plus simples ici, qui dit fondamentalement que la boucle va parcourir chaque post récupéré pour la page actuelle un à la fois, et ensuite nous pouvons effectuer une action pour chaque post que va récupérer. Donc, fondamentalement, ce que nous allons faire est de boucle à travers chaque post qui a été créé dans WordPress, et ensuite nous pouvons structurer notre post de blog de n'importe quelle façon que nous aimons utiliser HTML et aussi quelques fonctions WordPress. Si nous faisons défiler vers le bas, nous pouvons voir à quoi ressemble la boucle en PHP. Donc, cela peut sembler un peu étrange si vous n'avez pas l'habitude de PHP. abord, si vous sortez les balises PHP, ce qui est beaucoup d'entre elles lorsque nous entrons et sortons dans le code, puis prenons un pas en arrière et vu Redis comme c'était l'anglais. Nous sommes essentiellement en train de dire que si publié en ayant des messages, nous allons alors utiliser une boucle, qui est appelée une boucle while, puis nous allons faire une boucle à travers tous ces messages et ensuite saisir le contenu de chaque post. Cela signifie le côté intérieur de cette section de boucle while. Nous avons ensuite accès à tous les contenus disponibles, tels que le titre, la section du corps, les tags ou catégories ou tout autre que nous créons. Ensuite, après cela, tout ce que nous faisons est juste de fermer la boucle, puis de fermer la section if d'en haut. Allons de l'avant et créons ceci maintenant. À l'heure actuelle, dans notre blog au HTML. Tout cela est juste du contenu statique et c'est très bien pour un site HTML normal. Si nous voulons que WordPress ait le contrôle de la façon dont ces billets de blog s'afficheront sur la page. Donc, nous allons créer la boucle et ensuite nous allons créer la structure pour notre WordPress passant des choses telles que le titre, la date, et la description. Comme je l'ai mentionné précédemment, nous allons créer nos billets de blog dans le index.php. Nous pouvons écrire la boucle entre l'en-tête et le pied de page. Commençons par ouvrir les balises PHP. Ensuite, nous allons créer notre instruction if pour vérifier si des messages existent. Avoir des messages de soulignement. Ceci est une fonction WordPress, puis un deux-points juste après. Ce deux-points est un raccourci ou une syntaxe alternative pour PHP, ce qui signifie que nous pouvons ajouter notre contenu juste après si cette condition est vraie. Ensuite, je vais fermer ceci avec un endif et un point-virgule, fermer le PHP à la fin. Donc, si vous avez des messages disponibles, que voulez-vous faire ? Nous voulons créer notre boucle while pour boucle à travers les messages tant qu'ils sont disponibles. Donc, nous pouvons utiliser la même fonction où nous avons des messages. Mais je vais faire une boucle à travers chacun. Encore une fois, utilisez un deux-points, puis nous déclarons après cela ce que nous voulons faire tout en postant disponible. Lorsqu' il est publié disponible, nous voulons utiliser la fonction WordPress, le post de soulignement, nous appellerons les données du prochain post en ligne, nous bouclons et un point-virgule à la fin, puis nous pouvons fermer notre boucle while avec fin. Cela sortira de la boucle une fois que nous aurons fini de boucler tous les poteaux, point-virgule à la fin. Donc maintenant à l'intérieur de cette section tout, nous avons les informations de poste. Nous pouvons aller de l'avant et créer notre HTML pour créer nos articles de blog. Si nous allons de l'avant et ajoutons un élément HTML tel qu'un dif, comme ceci, nous pouvons voir que l'éditeur de texte a mis en évidence ce blanc car ce n'est pas une syntaxe valide. C' est parce que nous créons une section PHP avec les balises d'ouverture et de fermeture et donc l'éditeur de texte s'attend à ce que tout le contenu soit PHP. Mais puisque nous le transférons maintenant au HTML, nous devons maintenant fermer notre PHP. Pour rendre cela plus lisible, nous pouvons mettre tout cela sur sa même ligne. Ensuite, après ce HTML, nous sauterons dans PHP. Donc, nous devons une fois de plus ouvrir ça. Nous pouvons également mettre cela sur la même ligne afin qu'il soit plus lisible. Maintenant, le PHP tout a les balises d'ouverture et de fermeture, nous sommes libres maintenant d'ajouter le HTML là où nous devons. Maintenant, nous avons notre section où nous pouvons créer notre structure de blog. Je ne vais pas utiliser une fonction PHP appelée le contenu. Ouvrez les balises PHP, fermez ceci et la fonction WordPress appelée le contenu de soulignement. Ceci est utilisé pour filtrer le contenu de l'article de blog à partir de la base de données, puis il le rend à l'écran. Nous reviendrons sur ce sujet très bientôt et ajouterons plus de contenu à notre article de blog. Mais pour l'instant, je vais ajouter autre section. Nous disons ici, si nous avons des messages et que nous allons construire notre billet de blog à l'intérieur. Sinon, nous pouvons ajouter une autre section, le deux-points. Donc, si aucun poster disponible, créons du HTML, les éléments p, puis un texte de désolé, aucun post ne correspond à nos critères. Nous pouvons voir tout de suite que cela est mis en évidence en blanc puisque nous avons besoin de fermer notre PHP juste au-dessus. Nous pouvons ensuite recommencer une fois de plus après cela. Ensuite, nous allons envelopper notre texte dans une fonction d'écho. Donc PHP souligne e pour afficher cela dans le navigateur. Ensuite, comme une chaîne, nous pouvons coller dans notre texte plus, ajouter un point-virgule, fermer le PHP, et maintenant tout est, comme il se doit. L' utilisation de cette fonction de soulignement e permet à notre texte d'être traduit plus tard dans un thème, qui est une partie assez essentielle de tout thème, à moins que vous envisagiez de posséder le thème utilise pour vous-même dans une langue particulière. Donc, cela peut sembler assez déroutant si vous êtes nouveau dans tout ça. Mais juste pour récapituler, nous vérifions si les postes sont disponibles. Si c'est le cas, nous sommes en boucle avec une boucle PHP while et chaque affiche définit à l'intérieur de WordPress, nous allons afficher le contenu du post avec enfermant la boucle. Ensuite, plus de code ci-dessous pour la course est ce post sont disponibles. Cependant, si ces publications ne sont pas disponibles, la section juste après s'exécutera et nous recevrons un message disant : « Désolé, aucun message ne correspond à vos critères. Nous reviendrons plus tard sur l'endroit où nous construisons le reste de notre billet de blog. Ils devraient donc avoir l'air un peu plus clair dans une future vidéo. Cet index est maintenant notre page de blog par défaut. Si aucun modèle plus spécifique ne peut être trouvé. Nous devons également faire la même chose maintenant pour le modèle de page aussi, qui sera une page par défaut si aucune autre page ne peut être trouvée. Sélectionnez tout, copiez ceci, et nous pouvons l'utiliser comme base. A l'intérieur de notre barre latérale, nous créons les modèles PHP point de page, collez-le dans. Comme il s'agit des modèles de page par défaut, non pour les billets de blog, nous pouvons dire qu'aucune page ne correspond à vos critères. Enfin, les commentaires du modèle en haut. Ce sera le modèle pour afficher tous les messages uniques. Donc c'est maintenant pour nos bases de boucle, mais nous allons continuer avec cela dans les prochaines vidéos pour construire le reste de nos articles de blog. 26. Articles de blog dynamiques: Avec toute la boucle de base maintenant, toutes les configurations. Maintenant sera un bon moment pour ajouter quelques billets de blog pour réellement quitter la place. Nous pouvons le faire si nous allons sur le site Web et ensuite nous dirigeons vers le tableau de bord. En bas dans la section post, nous pouvons aller à Tous les messages ou Ajouter Nouveau. De là, je vais ajouter le nouveau post, donc simplement Blog post 1. Un simple exemple de texte d'un paragraphe est correct, collez-le dans. Nous pouvons ajouter quelques balises. Allons chercher des nouvelles, des mises à jour. Ensuite, nous publions. Ajoutons deux autres. Cliquez sur « Ajouter Nouveau », imaginatif avec des titres si vous voulez, Blog post 2. Ajoutez quelques exemples de contacts, puis quelques tags vont pour le maquillage et les soins de beauté. Ces types s'afficheront également à l'écran. Une fois que vous les ajoutez à une boucle, nous pouvons les ajouter dans certaines catégories. Quand c'est bon, vous publiez. Ensuite, nous en ajouterons un troisième et dernier. Ça va libre. Juste ci-dessous, nous pouvons choisir un nouveau bloc, coller dans le contenu. Vous pouvez bien sûr, cliquez sur l'icône plus ici et choisissez différents styles de blocs si vous préférez. Sous-catégories. Allons pour les cheveux, puis cliquez sur publier. Ensuite, nous avons besoin quelque part, il est en fait afficher ces messages de blog. N' oubliez pas que nous avons créé un lien de blog dans notre menu. Si nous descendons aux pages et cliquez sur cela, nous avons toutes les pages ici que nous avons créées à partir de notre menu plus tôt. Aussi si nous allons sur le site Web en cliquant sur ce lien, puis cliquez sur le lien de blog en haut. Toujours voir dans la section de bloc est cet en-tête et le pied de page sans contenu entre les deux. Eh bien, pour afficher notre post entre les deux, nous devons configurer cela dans le tableau de bord. Nous devons aller au tableau de bord, jusqu'aux paramètres, puis lire à partir d'ici, tout comme nous avons défini notre page d'accueil plus tôt que la page d'accueil. Nous pouvons également afficher les messages sur la page du blog. Enregistrez ces modifications. Visitez notre site, puis retournez à notre lien de blog. Vous voyez ces messages affichés ici, parce que nous utilisons la page d'index. Si vous vous souvenez plus tôt lorsque nous avons examiné la hiérarchie des modèles, la page d'index sera toujours la page par défaut sous les billets de blog. Si aucune page plus spécifique ne peut être trouvée. Retour à notre index PHP. Nous pouvons maintenant commencer à construire ceci pour refléter nos modèles d'amorçage. Si nous allons à notre page de blog, qui est le blog au HTML. Vous voulez copier tout le contenu de la section principale. A partir de cette section de bloc ici, ouvrez-le probablement dans la balise principale. Ensuite, jusqu'au conteneur principal de fermeture. Copiez ceci, de retour à la page d'index. Collons ceci juste en dessous de l'en-tête. Retour au sommet où nous avons notre billet de blog. Je vais supprimer les premiers, laissant juste un billet de blog en place. Faites sauter ce « coll-sm-8". Prenons ce premier et retirons et faisons de même avec le second, laissant juste un billet de blog en place. Cette section va être assez importante. Ce sera celui que nous avons besoin de boucler à l'intérieur de la boucle WordPress. Ensuite, nous pouvons utiliser cela comme une structure pour chaque billet de blog. Plutôt que d'avoir le texte codé en dur comme la nouvelle fonctionnalité, nous allons ajouter une fonction php ou une fonction WordPress à l'intérieur ici, qui va récupérer chaque titre de la base de données et ensuite le placer ici. Avec cela à l'esprit, nous devons maintenant ajouter ceci comme le contenu de notre boucle WordPress. Nous avons créé la boucle ci-dessous. Allons de l'avant et prenons la section d'ouverture, qui est cette première ligne ici. On peut appeler ça notre place. Faites défiler la sauvegarde. Par-dessus tout post de blog. Collons ceci avec un besoin se ferme. Retournez à notre boucle. On peut couper la fin tandis que la section. Sortez cela et puis coller est juste après la fin de notre article de blog. La prochaine étape consiste à parcourir chaque élément de contenu statique que nous avons dans le billet de blog. Ensuite, remplacez-les par des fonctions WordPress. Écrivez rapidement le titre et les balises h2. Cela peut être remplacé par une fonction appelée le titre. C' est du code PHP. Nous devons ouvrir les balises PHP, les fermer. Ensuite, le nom de la fonction du titre, suivi des crochets point-virgule. Ceci comme prévu, va récupérer le titre du billet de blog, pour chaque post. Si nous sauvegardons cela et puis passons au navigateur, nous pouvons voir quel effet cela a, recharger. Nous avons le titre dynamique des billets de blog 3, 2, 1. Tout le reste du contenu vient d'être remplacé par le HTML statique et c'est le même pour les trois publications. Nous devons aller de l'avant et rendre cela plus dynamique. Nous pouvons le faire à nouveau avec les fonctions WordPress commençant par la date, supprimant ainsi la date codée en dur dans le PHP. À l'intérieur, nous allons faire écho pour afficher cela, le navigateur et une fonction appelée obtenir la date. Obtenir la date va prendre dans les arguments libres à l'intérieur des citations. Va être un F majuscule, un j minuscule, puis une virgule pour séparer cela d'un Y. Si vous êtes nouveau en PHP, ces lettres F, j et Y peuvent sembler étranges. Tout ce que nous faisons ici est de définir les formats que nous voulons afficher le jour, le mois et l'année. Par exemple, souhaitez-vous qu'un billet de blog créé en janvier soit affiché comme le mot Janvier ou simplement Jan, ou même un numéro de mois d'un. Si vous voulez en savoir plus sur cette fonction, vous pouvez vous diriger vers WordPress et rechercher les dates et l'heure de mise en forme. Ici, si nous faisons défiler vers le bas, nous pouvons voir ce que chacune de ces lettres représente. Par exemple, nous avons utilisé le Y majuscule, qui va être une année à quatre chiffres, comme nous le voyons ici. Nous pouvons faire de même pour le mois et les jours aussi, pour obtenir le format exact que nous voulons. Maintenant, si nous donnons à cela une sauvegarde, nous pouvons vérifier cela dans le navigateur, recharger notre page de blog et nous voyons que chaque post a été créé. Ensuite, nous voulons créer l'auteur juste après. Sur la même ligne, nous avons un lien vers l'offre de billet de blog. Plutôt que la version codée en dur. Nous allons remplacer cela par une fonction WordPress appelée l'auteur. C' est assez simple, il ne prend aucun argument, il va juste recadrer l'auteur des messages, nous pouvons recharger. L' auteur dans notre cas est l'utilisateur connecté, qui est administrateur tranquille. Je vais juste ajouter le mot juste avant. Il suffit de suivre un lien ici que vous pouvez ajouter par, disons ceci. En fait, il a besoin d'un espace juste après. Recharger. Maintenant sur ces textes ci-dessous. Nous pouvons aussi les rendre plus dynamiques, en utilisant une fonction WordPress appelée les tags. Au lieu de cette version codée en dur, nous allons supprimer ceci. Ajoutez une fonction PHP, qui est les balises de soulignement. Cette fonction peut prendre jusqu'à trois arguments à l'intérieur des parenthèses. Le premier est le texte que vous souhaitez ajouter avant l'affichage des balises. Je vais ajouter le mot marqué, suivi d'un deux-points, d' un espace et d'une virgule juste après. Le prochain sera le séparateur. C' est ce qui va apparaître entre chaque balise. Par défaut, les balises seront séparées par une virgule. Dans notre thème, nous utilisons l'icône tilda. Ajoutons cela avec l'espace des deux côtés. Nous pouvons également ajouter un troisième argument facultatif, qui est tout texte que vous souhaitez afficher après la balise. Mais je vais juste laisser ceci tel qu'il est, sur le navigateur. Recharger. Notre flux d'articles de blog n'a pas de balises. Pour le second a le texte avant des balises. Nous avons chaque étiquette individuelle avec le tilda séparant chacun, également connu sous le nom de deux. Si nous survolons chacune de ces balises. Ces liens aussi et si nous cliquons sur ceux-ci, il nous amène également à une page qui affichera tous les messages avec ce tag particulier. Nous avons eu plusieurs messages avec la même étiquette. Tout cela apparaîtrait sur une liste. C' est comme presque maintenant terminé avec le billet de blog. La dernière partie du bas est le contenu. On sait déjà comment attraper ça. Nous avons déjà la fonction vers le bas, qui est le contenu. Ça pourrait mériter une place. Ensuite, déplacez ce retour sur notre blog. A cela à la place de notre lorem ipsum texte à cette fin et nous allons recharger. Maintenant sur une liste de billet de blog. Tout comme ça, la quantité de contenu que nous avons n'a pas l'air trop mauvaise. Mais si cela était beaucoup plus long comme cinq, six, sept paragraphes, chaque page serait vraiment longue à la place de ce contenu. Ce que nous voulons souvent faire sur une page comme celle-ci, c'est de raccourcir le texte qui s'affiche. Nous pouvons le faire avec une fonction WordPress appelée l'Excerpt. Plutôt que le contenu, nous allons placer ceci dans l'Extrait. Cela devrait maintenant afficher dans le navigateur une version plus courte. Cette page ne devient pas trop longue. Ensuite, si l'utilisateur veut lire la version complète, ils peuvent ensuite cliquer sur ce billet de blog et ils seront pris à une seule page complète.Voilà ce que nous allons obtenir de travailler avec dans la prochaine vidéo. 27. Le permalien: Nous aurons une version raccourcie du billet de blog dans la dernière vidéo en utilisant une fonction PHP ou WordPress appelée les extraits. Dans un blog typique, nous voulons également que ce post fasse un lien vers la version complète sur une nouvelle page lorsque vous cliquez dessus. Pour ce faire, je vais rendre ce titre de billet de blog cliquable, qui sera tous un lien vers cette seule page affichée au contenu complet et aussi créer un lien de lecture plus en dessous de cet extrait pour lien vers la version complète. Pour ce faire, nous voulons aller à l'endroit où tous les blogs sont produits, et c'est dans l'index point PHP. A l'intérieur de la boucle, nous avons ce titre de billet de blog. Je veux entourer cela dans une balise HTML A qui est avant le titre et juste après nous pouvons fermer cela. À l'intérieur de ce lien, nous devons fournir les attributs HREF. Ensuite, cela va être lié à notre permalien. Ouvrez le PHP. Fermez ça. Ensuite, à l'intérieur ici, nous pouvons lier au permalien ajouter les crochets juste après et le point-virgule. Permalink est ce que WordPress appelle l'URL actuelle. Dans notre cas, ce sera l'URL de chaque billet de blog. Si nous sauvegardons cela et puis passons au navigateur, nous pouvons maintenant actualiser. Voyez maintenant lorsque vous passez le curseur sur chaque titre de blog, il s'agit maintenant d'un lien. Nous pouvons ensuite cliquer sur et puis nous allons le prendre à une page avec juste ce billet de blog. Nous pouvons également voir dans le titre, c'est obtenu sa propre URL unique, qui est le même que le titre. Ceci est le billet de blog 3. Cliquez sur le numéro 1, et l'URL est exactement la même. Nous reviendrons sur cette page plus tard dans le cours pour afficher le contenu complet des articles de blog plutôt que seulement l'extrait que nous voyons ici. Passons maintenant au texte Read More juste en dessous de cet extrait. Retourne. Ensuite, dans notre index de PHP, nous pouvons faire un peu d'espace sous l'extrait et ensuite créer un nouveau div, qui va être le wrapper pour notre texte. Je vais ajouter une classe Bootstrap, qui va être un peu bas de marge avec MB et une valeur de trois. Le contenu sera également un lien, donc nous pouvons l'ajouter dans les balises A. Fermez ça. Nous pouvons simplement sortir n'importe quel texte brut que vous voulez ici. Mais au lieu de cela, je vais ajouter du PHP, qui va être la fonction de soulignement E, qui fera écho ou affichera du texte dans le navigateur. Cela signifie également que cela peut être traduit plus tard dans le cours. Nous pouvons ajouter le texte de lire plus. Ensuite, comme nous l'avons fait ci-dessus avec le titre, nous pouvons également ajouter le permalien pour lien vers l'URL de ce billet de blog actuel. Le HREF sera égal au permalien. Sauvegardez ceci et nous pouvons le tester dans le navigateur. Retournez à notre blog. Cliquez sur l'un de ces éléments. Voir le texte Lire la suite. Cela va maintenant aussi être un lien vers notre article de blog complet. Encore une fois avec l'URL définie comme titre. Nous n'avons pas encore de modèle pour la page de publication de blog unique. Il va revenir par défaut à notre point d'index PHP. C' est pourquoi nous venons de voir la version raccourcie de notre billet de blog. Juste ici. Eh bien, c'est quelque chose que nous allons réparer dans un peu de temps. 28. Pagination: Nous allons nous concentrer sur l'ajout d'une fonctionnalité importante appelée pagination à notre page de blog. Pour le moment, nous n'avons que trois billets de blog individuels, qui est quatre avec l'exemple un. Mais si nous avions des centaines de billets de blog, cette page serait vraiment longue. pagination nous permet de diviser les publications en pages séparées. Nous pouvons ensuite cliquer sur quelques boutons précédents et suivants pour parcourir tous nos messages dans le index.php à partir de nos modèles d'amorçage, nous avons déjà nos liens pour la page suivante et la page précédente, donc nous allons faire deux choses dans ce vidéo. Nous allons d'abord remplacer notre texte de page précédente et suivante par quelques fonctions WordPress pour fournir la fonctionnalité pour que cela fonctionne. Nous allons également supprimer cela en dehors de la boucle donc dans la section L, nous n'avons que le texte en bas. Par conséquent, commençons par découper notre section de navigation, avec notre liste non ordonnée, et aussi la div de fermeture en bas, alors mettez ceci hors de propos. Ensuite, cela va aller juste après la section endif, qui est la fin de notre boucle. Ici, on peut coller ça et juste indenter ça en arrière. D' accord, commençons par la page suivante. Nous allons remplacer ce texte par une fonction PHP. Ouvrez PHP et puis nous allons utiliser la fonction WordPress appelée next_posts avec un s, puis lien, point-virgule à la fin. Ensuite, nous allons remplacer la page précédente par une fonction WordPress très similaire. Ce sera le lien des messages précédents, séparés par les traits de soulignement, point-virgule à la fin, puis fermez le PHP. Enregistrez ce fichier, puis sur le navigateur. Rechargeons la page. Maintenant, si nous faisons défiler vers le bas, nous voyons toujours nos billets de blog, mais nous ne voyons pas nos boutons pour la page précédente et la page suivante. C' est parce que nous n'avons pas assez de billets de blog pour réellement créer la pagination. Nous pouvons aller au tableau de bord, puis descendre à Paramètres. Dans la section de lecture, nous devons regarder dehors pour les pages de blog, montrer tout au plus. Nous avons ce jeu pour être 10 messages, donc nous ne créerons pas de nouvelle page tant que nous n'aurons pas 10 messages ou plus. Pour voir cela en action, réduisons cela à cinq, enregistrez les modifications. Maintenant, nous pouvons aller de l'avant et créer de nouveaux billets de blog. J' ai 1, 2, 3. Créons le numéro quatre. Copiez l'exemple de texte, collez-le dans. Nous pouvons ajouter quelques balises ici. Publiez celui-ci. Blog post cinq, quelques exemples de textes. Allons-y pour un de plus, nous allons faire numéro six, blog post 6 coller ceci dans et publier. Maintenant, nous pouvons consulter nos sites en visitant la page du blog. Nous avons les numéros 6, 5, 4, 3 et 2, donc c'est cinq billets de blog là-bas. Maintenant, nous avons le lien de la page suivante. Si nous cliquons sur cela, nous avons le billet de blog 1 et aussi notre exemple de bonjour monde. Nous pouvons également cliquer sur précédent pour revenir en arrière. Cela empêchera notre page de blog de devenir vraiment long quand nous avons beaucoup de messages individuels. C' est ainsi que nous pouvons ajouter une pagination à notre thème. Ensuite, nous allons jeter un oeil à l'utilisation de crochets de filtre. 29. Crochets de filtre: La tâche suivante consiste à supprimer les crochets, qui est à la fin de notre billet de blog. Je vais enlever les crochets et ensuite laisser les trois points juste après. C' est complètement facultatif, mais je préfère ce que ça ressemble. Ceux-ci sont automatiquement ajoutés en place lors de l'utilisation de la fonction Excerpt pour afficher la version raccourcie. Cela nous donne également l'occasion de regarder comment nous pouvons utiliser un crochet de filtre aussi. Si vous ne savez pas ce qu'est un crochet, hook nous permet de nous accrocher dans le reste de WordPress, ce qui nous permet de fournir une action ou un filtre. Dans le cas de cette vidéo, j'utiliserai un crochet de filtre appelé 'excerpt_more'. Pour en savoir plus sur ces hooks et toutes les autres fonctions WordPress, nous pouvons aller sur developer.wordpress.org/reference. Cette page change au fil du temps. Ne soyez pas trop surpris si cela a l'air un peu différent. Vous voyez, ici, nous pouvons parcourir les fonctions disponibles, les crochets, les classes et les méthodes que WordPress fournit. Si nous cliquons sur le lien des crochets, nous sommes amenés à tous les crochets disponibles auxquels nous avons accès. Il y en a beaucoup. Je vais cliquer sur cette loupe et faire une recherche pour 'excerpt_more' et nous voyons cela apparaître. Je vais chercher ça. Ensuite, nous avons la référence de code pour le crochet de filtre 'excerpt_more' et nous pouvons voir que c'est un filtre qui va filtrer la chaîne dans le « more link » affiché après un extrait coupé. C' est parfait pour ce dont nous avons besoin. Passons au 'functions.php' jusqu'au sommet. A l'intérieur, nous avons déjà utilisé des crochets d'action plus tôt. Nous avons déjà utilisé le 'after_setup_theme', qui est celui-ci juste ici. Nous allons exécuter notre configuration « tranquilwp » juste après ce hook, hard run. Nous avons également utilisé 'wp_enqueue_scripts, qui exécutera nos propres 'tranquilscripts' juste après. Je vais ajouter notre propre filtre juste après cette ligne. Mais nous avions encore besoin du PHP. Je vais créer une fonction PHP. Je vais appeler ça n'importe quoi de votre choix. Je veux appeler le mien 'new_excerpt_text' séparé par les traits de soulignement. Ouvrez les accolades. Toutes ces fonctions qui doivent faire est de retourner une chaîne. Nous avons tout ce que nous voulons afficher à la place des crochets. Nous pouvons utiliser l'instruction return pour renvoyer une chaîne. En place, je vais juste ajouter les trois points avec un point-virgule à la fin et la chaîne peut être n'importe quel texte que vous préférez. Vous pouvez voir que nous avons une erreur juste ici. Je pense que nous devons ajouter un point-virgule à la fin et cela corrigera cela. Ensuite, après notre fonction, nous pouvons ajouter dans notre filtre avec 'add_filter'. Cela prend en compte deux arguments. Le premier est le nom du filtre, qui est 'excerpt_more', que nous venons d'examiner dans la documentation, séparé par une virgule. Le deuxième document est le nom que nous avons donné à notre fonction juste au-dessus. Ceci est nouveau et ajouter ceci sous forme de chaîne, nouvel extrait, puis texte, point-virgule à la fin, puis sur notre thème dans le navigateur, il se recharge. Maintenant, c'est juste trois points à la fin sans les crochets. Je pense que cela donne un look beaucoup plus propre à notre blog. Pour la clé à emporter pour cela est se rappeler que chaque fois que nous voulons faire quelque chose dans WordPress, il y a souvent un crochet disponible pour cela à utiliser, et il suffit d'une recherche de la documentation pour les trouver. Aussi, n'oubliez pas de ne jamais être tenté de changer les fichiers de base WordPress directement pour utiliser ces crochets dans nos thèmes personnalisés ou nos plugins sont parfaitement bien. 30. Réintroduire la barre latérale: Dans notre page de blog, vous avez peut-être remarqué que nous n' avons pas la barre latérale sur le côté droit, que nous avions dans nos modèles de bootstrap. C' est parce que nous avons toujours ceci situé à l'intérieur de notre boucle Wordpress dans la section else. Cela ne sera pas rendu à l'écran tant que nous avons actuellement des billets de blog. Pour corriger cela, nous pouvons aller à notre index.php, puis si nous allons à notre section else, juste après, nous avons cette section de côté, qui est l'enveloppe de notre barre latérale. Si nous sélectionnons toute la section de côté, alors ils se ferment et roulent sur le récipient. Depuis tout ce qui doit être contenu à l'intérieur de cela. C' est juste parler de ça. Ensuite, je vais ajouter ceci juste après le prochain et précédent lien postlink juste au-dessus de la section pied de page, nous pouvons coller ceci dans. Laissant en place la section assignée, je vais enlever tous les divs à l'intérieur ici. Donc, encode tous les blocs de notre barre latérale et nous pouvons maintenant utiliser ce contenu pour aller à l'intérieur de notre sidebar.php. Juste des petits morceaux bien rangés. Prenez le contenu, puis ouvrez la barre latérale et allez dans notre sidebar.php. Nous pouvons coller ce contenu ici. De la même manière que nous l'avons fait avec l'en-tête et le pied de page, à l'intérieur de notre index.php, nous pouvons réintroduire le contenu d'une barre latérale en utilisant une fonction WordPress. Ici, en bas, nous avons utilisé get pied de page pour la barre latérale comme vous l'avez probablement deviné, nous devons utiliser get sidebar. Ouvrez et fermez le PHP. Ensuite, la fonction Wordpress qui obtient la barre latérale de soulignement, les crochets et le point-virgule. Par défaut, obtenez la barre latérale, nous allons chercher un fichier appelé sidebar.php. Si vous avez besoin d'introduire plus d'une barre latérale dans votre thème, comme un sidebar-dark.php. Si nous avions ce fichier, nous le ferons, supprimerait alors la section de la barre latérale et ensuite il suffit d'ajouter le nom de sombre à l'intérieur ici. Ensuite, cela chercherait le fichier dark.php de la barre latérale, puis ajoutez-le à la place de la valeur par défaut. Nous n'avons pas besoin de cela, donc je vais juste supprimer ceci et jusqu'à ce qu'il soit vide. C' est maintenant exactement ce que nous avions auparavant dans nos modèles de bootstrap. La seule différence est le contenu de la barre latérale de maintenant être externalisé dans un fichier séparé, tout comme avec l'en-tête et le pied de page. Maintenant, nous pouvons essayer cela dans le navigateur et la barre latérale est maintenant réintroduite à notre page. Nous reviendrons à la barre latérale suivante, où nous allons remplacer tout ce HTML par du contenu dynamique, racontant à WordPress. 31. Rendre la barre latérale dynamique: affichage de cette barre latérale sur la page est maintenant un pas dans la bonne direction. Pour le moment, nous avons juste les données factices qui ont été ajoutées à notre thème. C' est ce sur quoi nous allons nous concentrer dans cette vidéo. Tout d'abord, le bloc ci-dessus en haut, est juste un texte simple de base. On peut laisser ça tel quel. Après cela, nous avons nos sections dynamiques d'archives et de catégories, et nous pouvons travailler avec celles-ci dans le sidebar.php. C' est le bloc supérieur avec le texte. Le second, c'est les archives. Ce que nous devons faire, nous devons supprimer nos éléments de liste gratuits que nous avons à l'intérieur des listes ordonnées, puis à la place de cela, nous pouvons ajouter une fonction WordPress appelée wp_get_archives. Supports, puis point-virgule à la fin. Vérifions ce travail dans le navigateur. Recharger. Bien, je n'ai créé ces billets de blog qu'en un mois. On ne voit que le mois apparaitre dans les archives. Nous pouvons cliquer sur cela, nous voyons la date est renseignée dans l'URL, ainsi que les messages plug que nous avons créés au cours de ce mois-ci. Passons maintenant aux catégories ci-dessous. Nous pouvons faire une chose très similaire en supprimant nos deux éléments de liste, puis en remplaçant cela par une fonction WordPress. Cette fonction WordPress cette fois s'appelle wp. Ces catégories, consultez ceci. Vous avez plusieurs catégories, donc Actualiser. Nous avons les nouvelles, les offres et aussi une section pour tous les blogs non catégorisés. Par défaut, nous avons également le titre d'une catégorie en haut. Cependant, nous avons déjà ceci comme un titre. Nous pouvons supprimer cela, si nous revenons à la fonction WordPress des catégories de liste. A l'intérieur ici comme une chaîne, nous pouvons définir le titre. Donc title_li. Je vais juste définir ça pour être égal à rien. Enregistrez ceci, Recharger et le titre a été annulé. Si vous voulez également vérifier la référence de la fonction WordPress, vous trouverez beaucoup d'autres arguments aussi si nécessaire. Par exemple, la possibilité de trier des catégories, ajouter un style supplémentaire et également ajouter un séparateur entre chaque catégorie. Je vais juste laisser cela pour l'instant puisque nous avons déjà ajouté le style en utilisant Bootstrap. Nous pouvons maintenant cliquer sur « Catégorie », allons-y pour les Nouvelles. Nous allons voir comment un billet de blog gratuit ici, offres. Nous n'en avons que deux qui sont étiquetés avec des offres, et ensuite toutes qui ne tombent pas dans une catégorie. La dernière chose que nous avons dans notre barre latérale est nos icônes de médias sociaux. Selon vos propres pages de médias sociaux ici. Je vais juste en ajouter un comme exemple, alors allons-y pour Twitter. Vous pouvez ajouter le lien avec des éléments HTML. Nous pouvons trouver l'emplacement du lien avec le href : https://twitter.com/chrisdixon161. Fermez ça. Ensuite, juste après nos éléments i, nous pouvons fermer notre lien, puis indenter ceci. Je vais maintenant vous laisser le reste si vous voulez aller avant et ajouter d'autres liens sur les réseaux sociaux. Une fois que tu auras fini avec ça, je te verrai dans la prochaine vidéo. 32. Balises conditionnelles WordPress: Si nous regardons nos modèles Bootstrap originaux que j'ai ouvert ici, nous avons le texte du thème spa premium full responsive pour WordPress dans l'en-tête. Ensuite, si nous cliquons sur la section Blog, le texte change en blog officiel tranquille spa. curseur dans notre version WordPress, nous avons juste le même texte si nous cliquons sur les deux pages. Puisque ces deux fichiers utilisent notre header.php, ce qui signifie que le texte sera le même. Pour résoudre ce problème, nous allons voir comment nous pouvons ajouter du code PHP personnalisé dans notre thème. Ce code détectera la page sur laquelle nous sommes actuellement, puis nous pouvons rendre conditionnellement le texte basé sur la page. Ces textes sont stockés dans le fichier header.php. Allons travailler là-bas. Si nous localisons la zone de texte d'entité, je vais supprimer le texte d'ici, donc découpez ceci, et ensuite en place, nous allons ajouter du PHP personnalisé. Cela va être notre propre fonction PHP personnalisée et rien à voir avec WordPress. Appelons cela le texte de la fonction capitale T. Nous pouvons maintenant configurer cela dans nos fonctions point PHP, passons à ici. Ensuite, juste après notre filtre, toujours dans les balises PHP, nous pouvons créer cette fonction, qui est appelée le texte de la fonctionnalité. À l'intérieur du corps de cette fonction, le travail consiste à vérifier si nous sommes sur la page d'accueil ou sur la page du blog, puis à afficher le texte correspondant. Nous pouvons le faire avec une déclaration if pour vérifier d'abord en utilisant la fonction WordPress, si la page est la page d'accueil. Si c'est le cas, nous ajoutons ensuite quelques accolades. C' est une page d'accueil, est une balise conditionnelle WordPress, qui nous permettra de définir le texte que nous voulons pour la première page. Tout comme ça, nous pouvons ajouter un trait de soulignement, e, l'écho de notre texte. Cela va être une chaîne, à ajouter dans les guillemets. Je cite les textes sortis de l'en-tête avant, donc nous pouvons maintenant coller cela en place. Vérifions que tout fonctionne dans le navigateur. Assurez-vous que dans la version WordPress, oops, et nous avons une erreur. Ligne 43, point-virgule encore, sauvegardez cela, rechargez et il y a du texte sur notre page d'accueil. Cependant, si nous passons à notre blog, nous voyons qu'aucun texte n'est généré. C' est parce que nous ne définissons le texte que si la page est la première page. Si ce n'est pas la première page, nous pouvons ajouter une balise jamais conditionnelle appelée is home. La fonction est home se réfèrera à la page de publication du blog. regardant cela dans une section else-if, à l'intérieur des crochets, nous utilisons notre balise conditionnelle de est la maison. Ouvrez les accolades et veut faire une chose similaire à avant. Nous allons faire écho au navigateur et ce sont des actes de spa tranquille, blog officiel avec un point-virgule à la fin. Sauvegardons ceci et rechargeons. Notre texte du blog officiel de spa tranquille est maintenant affiché sur la page du blog. Si vous êtes nouveau à, si d'autres instructions, ils exécuteront le code à l'intérieur des accolades. Par exemple, si est de la page renvoie true, alors le texte à l'intérieur de ces accolades s'exécutera. Si nous ne sommes pas sur la première page, vous revenez ensuite à la section suivante, qui est else. Vérifiez si la page est à la maison, puis il exécutera le code à l'intérieur de l'ensemble des accolades à la place. Nous pouvons également ajouter plusieurs sections elseif et nous le ferons plus tard dans le cours. En découvrant à la toute fin, si aucune de ces conditions ne satisfaisait, nous pouvons ajouter une dernière section L. Cela servira de solution de rechange si aucune des deux conditions ci-dessus n'est remplie. Sinon, nous allons juste faire écho à l'écran le texte standard que nous avons sur la page d'accueil. Collez ceci et cela fonctionnera pour des choses telles qu' un suivi de quatre pages ou l'une des pages que nous ne définissons pas le texte personnalisé. Nous allons continuer à ajouter à cette fonction que nous créons plus de modèles de page, fois l'analyse, tout ce dont nous avons besoin. Ensuite, nous passerons à nos modèles de page unique. 33. Le modèle Single.php: Dans la dernière section lorsque nous avons créé cette page de blog, nous avons également ajouté une fonction permanente pour permettre à ce lien vers la page de publication complète du blog. Lorsque je clique sur le titre, nous sommes amenés à une seule vue de publication, pour voir plus de détails sur la publication. Pour le moment cependant, nous voyons toujours la version abrégée du billet de blog, tout l'extrait comme il est appelé, et nous pouvons également voir le texte lire plus en bas, que nous devons également supprimer. C' est parce que le thème sera de retour par défaut au fichier index.php, si le fichier le plus spécifique est introuvable. Dans cette vidéo, je veux maintenant créer un nouveau modèle de page Tranquil appelé le single.php, et c'est un fichier qui est reconnu par WordPress comme le modèle pour afficher un seul billet de blog. Passons à notre éditeur de texte à la racine du projet. Cliquez sur « Nouveau fichier ». C'est le single.php. Nous pouvons commencer comme jamais avec nos commentaires en haut. Ouvrez ou fermez les balises php, puis nous ajoutons un commentaire avec la barre oblique avant, puis les étoiles se ferment. Il va en fait être le modèle pour afficher tous les articles de blog. Puisque ce fichier partagera beaucoup de similitudes avec le index.php, je vais aller là-bas et copier le contenu pour commencer. En bas en bas du pied de page, nous copions tout jusqu'à l'en-tête. Prenez cela, et ajoutez-le juste sous nos commandes dans un single.php. Commençons en haut de ce fichier. Le titre, nous voulons juste afficher le titre en haut de l'article de blog. Nous n'avons pas besoin de cela pour lier au post complet puisque nous sommes déjà là. Nous pouvons supprimer le lien qui l'entoure. Retirez cela, nous devrions partir maintenant sur notre single.php. Si nous rechargeons, nous devrions maintenant voir que nous ne pouvons pas cliquer sur le titre de cette page, qui signifie que le fichier unique que nous avons créé prend effet. La prochaine chose à faire est de faire ces textes ici, le contenu complet plutôt que l'extrait. Si nous faisons défiler vers le bas jusqu'à l'extrait, qui est cette fonction juste ici, tout ce que nous devons faire est simplement de le changer pour être le contenu, et c'est maintenant la version complète du contenu de notre billet de blog. Nous n'avons qu'un seul paragraphe pour le moment. Nous pouvons voir que c'est le contenu complet que nous avons. L' étape suivante consiste à supprimer ce texte lire plus. Puisque nous avons déjà le billet de blog complet, plus à single.php, si nous prenons chercher ce texte lire plus ici, je vais supprimer le lien complet ou le div complet entourant cela. On n'a plus besoin de tout ça. Dites ceci et le texte est maintenant disparu. Confirmons simplement que tout fonctionne bien, si nous revenons à notre blog, nous voyons toujours la version raccourcie. Nous voyons toujours le lien pour le titre et le texte lire plus. Retour à notre single.php. Pour terminer cette vidéo, si vous remarquez, en haut, nous avons le texte VG par défaut. C' est parce que dans le functions.