Bootstrap pour WordPress : créez des thèmes réactif personnalisés !

1. Introduction: Bienvenue dans ce cours sur la construction d'un thème WordPress personnalisé responsive en utilisant le framework gratuit Bootstrap. m'appelle Chris, et je vous guiderai pas à pas. Nous allons commencer par construire un grand look et un modèle de thème en utilisant Bootstrap, l' un des frameworks front-end les plus populaires dans le monde. Une fois cela construit, je vais vous guider à travers le processus de conversion de ceci à un thème WordPress personnalisé entièrement fonctionnel et magnifique. Dans ce cours, vous apprendrez des choses telles que comment créer des sites Web en utilisant Bootstrap, ajouter des menus de navigation personnalisés, la boucle WordPress, comment fonctionnent les modèles WordPress. Vous en apprendrez plus sur les widgets, les champs personnalisés, les images d'en-tête, comment ajouter des spots de traduction linguistique à votre thème, et bien plus encore. Donc, ce serait le superbe site Web que nous allons construire tout au long de ce cours. C' est la page d'accueil. C' est un thème WordPress basé sur Spa. Je vais vous guider à chaque étape du processus. Donc nous ne allons pas seulement construire la page d'accueil. Nous allons réellement construire le site complet, y compris diverses pages de blog, Contact, et À propos de nous. Comme nous arrivons à la section WordPress, plus tard dans le cours, domaines tels que la section Dernières offres, nous allons ajouter des champs personnalisés à, pour nous assurer que le site Web est entièrement personnalisable. faisant défiler plus bas, nous avons une section Boutique en ligne. Ensuite, la section Photo en bas avec divers liens, la page À propos de nous, la page Contactez-nous. Si vous faites défiler vers le haut de la page, nous aurons également un bloc entièrement fonctionnel. Nous avons une barre latérale de travail, qui comprend une boîte de recherche, ainsi que des moyens de filtrer les messages par les tags, les catégories, ou les mois de l'année, et bien sûr cela sera entièrement personnalisable par le site administrateur. Nous veillerons également à ce que les utilisateurs de votre site Web puissent laisser des commentaires sur les publications. Donc, si vous allez dans les messages individuels, vous obtiendrez maintenant la version complète. Liens vers les précédents postes annexés et la section Commentaires ci-dessous. En outre, nous aurons une section Dernières Nouvelles, qui est à peu près basée sur la section blog. Mais nous appliquons des filtres WordPress pour filtrer les billets de blog par les messages commencent par la catégorie des nouvelles, et nous allons vous montrer comment le faire. n'y aura pas de contenu inutile juste pour remplir le cours, juste directement aux vidéos de pointe. Chacun vous apprend une nouvelle compétence à utiliser pour vos propres projets ou pour payer des clients, et vous prendrez également du PHP en cours de route. Qu' est-ce que tu attends ? Rejoignez-moi maintenant dans ce cours et j'ai hâte de vous accueillir à bord. 2. Configuration de Bootstrap: Bienvenue dans la section Bootstrap de ce cours. Dans cette section, nous allons construire notre site Web en utilisant le framework Bootstrap qui plus tard dans le cours, nous allons utiliser pour convertir en un thème WordPress personnalisé entièrement réactif. Pour commencer, rendez-vous sur getbootstrap.com et appuyez sur le bouton Télécharger Bootstrap. Vous êtes ensuite redirigé vers la section de téléchargement. Il existe trois versions différentes de Bootstrap que vous pouvez télécharger. Je vais juste aller pour la version standard à gauche. Appuyez sur le bouton Télécharger. Une fois que c'est téléchargé, si nous allons aux téléchargements, puis décompressez cela. Parce que notre thème est appelé spa tranquille. Il s'agit du modèle Bootstrap. Je vais appeler ça tranquil-wp. Ensuite, je veux enregistrer cela sur le bureau. On y va. Vous devriez avoir déjà téléchargé le dossier des images, qui est inclus dans cette vidéo. Si vous ne l'avez pas fait, allez-y et faites-le maintenant, puis déposez-le dans le dossier Bootstrap. Si nous ouvrons le dossier Bootstrap et jetez un oeil à ce qui est inclus. Tout d'abord, nous avons un dossier CSS qui inclut tous les CSS Bootstrap, la fois la version standard et les fichiers minifiés. Il y a aussi le dossier polices, qui inclut toutes les icônes glyphes. Comme notre propre dossier d'images, que nous venons de mettre, il y a aussi un dossier JavaScript qui inclut les fichiers Bootstrap JavaScript. Pour commencer, si nous ouvrons l'éditeur de texte et puis je vais faire glisser dans notre dossier de projet. On y va. Donc, le dossier Bootstrap que nous venons télécharger comprend à peu près tout ce dont nous avons besoin pour commencer. La seule chose que j'ai besoin d'ajouter pour l'instant est une page d'index, donc je vais appuyer sur Commande et N, ou Ctrl+N, pour créer une nouvelle page. Je vais enregistrer ceci sous index.html, et le placer dans le dossier tranquil-wp. Une fois que nous avons notre page d'index, nous devons maintenant retourner sur getbootstrap.com. Toujours dans la section Mise en route, si nous faisons simplement défiler un peu plus loin, jusqu'à ce que nous trouvions le modèle de base. Nous allons l'utiliser comme un modèle de démarrage. Il inclut toute la structure HTML de base ainsi que les liens vers le Bootstrap, CSS et JavaScript. Il suffit d'appuyer sur le bouton de copie, puis de retour dans la page d'index, nous pouvons coller cela dans. Pour l'instant, je vais juste changer le titre de la page web juste pour un spa tranquille. Ensuite, appuyez sur le bouton d'aperçu en direct, puis voyons à quoi il ressemble dans le navigateur. On y va. C'est un modèle assez basique. On vient d'avoir le monde Hello ! titre. Mais cela dit qu'il était temps de créer une page d'index. Nous avons mentionné que Bootstrap est livré avec ses propres fichiers CSS, ce qui est idéal pour un point de départ. Mais nous voulons aussi personnaliser notre modèle, donc nous allons également ajouter un nouveau fichier CSS. Je vais créer une nouvelle page et l'enregistrer sous custom.css et je vais placer ceci dans le dossier CSS. Maintenant, nous allons lier ceci dans la page d'index. Comme vous pouvez le voir il y a déjà, le lien vers la version minifiée Bootstrap, donc si nous copions simplement ceci et le commentaire, nous pouvons coller ceci juste en dessous et nous appellerons ceci le CSS personnalisé, et aussi changer le nom du fichier en CSS personnalisé. Il y a juste une ou deux autres choses que nous devons lier à notre page Web pour commencer. La suivante est les polices personnalisées. Si nous nous dirigeons vers Google, et rechercher des polices. Cela nous mènera à google.com/fonts. Une fois là-dedans, on pourra chercher en haut à gauche. La police que je vais utiliser pour cette page Web s'appelle Merriweather. Vous pouvez choisir une police différente si vous avez des préférences, mais je vais m'en tenir à cela pour instant et je vais sélectionner la Merriweather standard. Donc, ce que nous devons faire, nous devons regarder les cases sur le côté droit et cliquer sur la deuxième case dans, qui est l'onglet d'utilisation rapide. Google nous fournit différents poids de police que nous pouvons utiliser, et chaque fois que nous sélectionnons un poids de police à télécharger, il nous montre l'impact sur les temps de chargement de la page. Donc, les polices que nous allons utiliser dans ce projet sont le poids 300, le 400, qui est la taille normale, et aussi le 700 pour le texte en gras. C' est vraiment facile à inclure dans le projet. Nous pouvons simplement copier le lien pour la section tête et le coller en dessous de notre CSS. Je vais aussi y mettre un commentaire, juste pour les polices personnalisées. Nous allons enregistrer cela et retourner aux polices Google, et la dernière chose que nous devons faire est d'intégrer nos polices dans le CSS. Copiez donc la famille de polices, puis dirigez-vous vers notre fichier CSS personnalisé. La famille de polices ira dans la section du corps, et je vais juste commencer par ajouter un commentaire juste pour la section Global. Cette section conservera tous les styles que nous allons utiliser sur tout le site, et nous commencerons par la section body. Coller dans la famille de polices et nous allons ajouter le poids de la police, nous allons ajouter le poids standard de la police de 300, et également ajouter la taille de la police à 16 pixels en standard. C' est ainsi que nous ajoutons les polices au site Web. Ensuite, la toute dernière chose que nous devons faire pour la configuration est de revenir à Google et de rechercher Font Awesome, puis aller à la page GitHub pour Font Awesome. Ce sera le concept I que nous allons utiliser pour notre site Web. Si vous voulez vérifier les icônes qui sont disponibles, il suffit de sélectionner l'onglet icônes en haut et vous pouvez jeter un oeil à toutes les différentes icônes qui sont disponibles. Pour télécharger cela, nous devons aller à, Commencez. Il y a quelques façons simples de les inclure dans notre projet. Nous allons aller avec la route CDN, ce qui implique simplement de copier le lien puis de le coller dans notre section principale. Cela relie notre site Web aux icônes Font Awesome, qui sont hébergées à cette adresse. Enfin, je vais copier le commentaire, le coller dans, et nommer ceci, Font Awesome, puis enregistrer cela. On y va. Donc, c'est notre section Bootstrap, toutes les configurations. Si vous vous joignez à moi dans la prochaine vidéo, nous poursuivrons le projet en créant la section tête. 3. Section d'en-tête - HTML: Bienvenue de retour. Maintenant, nous avons notre projet Bootstrap tout mis en place. Jetons un coup d'oeil au projet final et un coup d'oeil à ce que nous allons construire dans cette section. Ensuite, nous allons ajouter le code HTML pour la section d'en-tête. La section d'en-tête contient une barre de navigation en haut, qui aura le logo en haut à gauche. Également sur le côté droit, nous allons avoir les liens de menu. Nous allons ajouter une grande image d'arrière-plan ainsi que le texte en vedette au centre, qui sera à la fois aligné horizontalement et verticalement. Le texte et l'image vont être statiques pour l'instant. Mais une fois que nous serons dans la section WordPress plus tard dans le cours, l'utilisateur sera en mesure de changer l'arrière-plan et aussi le texte. Donc, pour commencer avec la section d'en-tête, passons à notre éditeur de texte et débarrassons de la barre latérale pour l'instant. Donc, si nous faisons défiler vers le bas, nous pouvons supprimer le titre hello world h1, puis laisser commencer par un commentaire pour la section d'en-tête. Ok, donc la section d'en-tête sera entre les balises d'en-tête. Nous allons commencer avec la barre de navigation en haut de la page. Donc, ce sera dans les balises nav et il va avoir des classes Bootstrap. Le premier sera navbar, puis navbar-default. Donc, nous allons utiliser beaucoup ces classes bootstrap au fur et à mesure que nous traversons le projet. Si vous êtes curieux de savoir exactement ce que chacun d'entre eux fait, nous pouvons passer au Bootstrap CSS dans le dossier CSS. Si nous allons chercher le bootstrap.css, par exemple, si nous cherchons navbar-default. Donc, dirigez-vous vers Bootstrap CSS, et si vous utilisez la fonction de recherche de votre éditeur de texte , puis tapez la classe que vous voulez rechercher. Donc, je vais chercher un navbar par défaut. Cela vous mènera ensuite à la section du CSS qui s'applique. Ainsi, nous pouvons voir qu'en ajoutant une barre de navigation par défaut, il inclut diverses bordures et couleurs d'arrière-plan. Donc, nous pouvons l'utiliser si vous voulez savoir exactement ce qui se passe dans le CSS dans les coulisses. Mais il est également utile de garder à l'esprit que l'une de ces classes bootstrap que nous avons incluses, nous pouvons également ajouter ou remplacer dans notre propre fichier CSS personnalisé. Ensuite, nous allons ajouter un div avec la classe de conteneur-liquide. Encore une fois, conteneur-fluide est une classe bootstrap. Vous pouvez soit utiliser container-fluid, qui fournit un div pleine largeur fluide ou vous pouvez utiliser la classe conteneur par elle-même, qui comprend un div avec une largeur fixe. Ensuite, dans le liquide de conteneur, nous allons créer un nouveau div avec une classe de navbar-header. Dans ce div, ce sera la section qui inclut les informations pour les lecteurs d'écran. En outre, nous jetons un coup d'oeil au projet fini. Vous pouvez voir si nous réduisons le navigateur vers le bas, c'est un site Web entièrement réactif. Donc, une fois que nous sommes en dessous d'une certaine taille, le menu de navigation se transforme en un menu déroulant. Donc, l'en-tête va également contenir les informations pour le bouton déroulant. Commençons par ce bouton maintenant. Le bouton va avoir un type de bouton. Nous allons ajouter des classes Bootstrap. Le premier est navbar-bascule, puis s'est effondré. Il va être réduit par défaut, donc nous pouvons ajouter le bascule de données pour être égal à collapse et la cible de données est égale .navbar-collapse. Donc, ce que fait la cible de données, ceci est lié dans le bouton à un div avec une classe all navbar-collapse. Nous allons créer ça après le bouton. Imbriqués à l'intérieur du bouton, nous allons ajouter les trois barres d'icônes, qui sont sur le bouton déroulant. Donc, le premier, ceux-ci seront tous entre les balises span. La première balise span sera juste une classe pour les lecteurs d'écran. Cela aura une classe de sr-only et le texte pour le lecteur d'écran sera basculer la navigation. Ensuite, nous allons ajouter une autre étendue avec une classe de barre d'icônes. C' est donc la première des trois barres d'icônes. Donc, ce sera exactement la même chose pour deux autres. Donc, nous pouvons simplement copier et coller ou dupliquer cela et juste changer l'orthographe là. On y va. Ok, alors vérifions ça sur l'aperçu. On y va. Donc, sur le plus petit écran, nous avons le bouton déroulant qui apparaît là. Cela devrait disparaître une fois que nous aurons une certaine taille. On y va. Ensuite, nous devons ajouter le logo dans le coin supérieur gauche et aussi les trois liens de navigation. Donc, pour commencer, le logo va aller juste en dessous du bouton, mais toujours dans l'en-tête de la barre de navigation div, et ce sera un lien. Donc, nous allons mettre le href des balises et cela va relier à la page d'index, qui est index.html. La classe bootstrap est la marque navbar. Parce que notre logo est simplement du texte, nous pouvons simplement taper cela dedans. Spa si tranquille. C' est la fin de la section d'en-tête de la barre de navigation. Donc, je vais juste ajouter quelques commentaires. Donc, nous allons appeler ça l'en-tête de la barre de navigation et nous allons y mettre fin. Donc, juste en dessous de la div navbar-header, le lendemain, nous aurons les trois liens de la maison, blog et les dernières nouvelles. Donc, le conteneur div aura la classe de l'effondrement. Ensuite, nous allons ajouter la classe navbar-collapsus, que nous avons utilisée pour la cible de données. Ensuite, dans cette section d'effondrement, nous allons ajouter notre liste non ordonnée et ajouter nos classes bootstrap de nav navbar-nav, et aussi navbar-right, qui pousse les liens de navigation vers le côté droit de la div, puis éléments de liste gratuits, qui sont également des liens. Donc, le href, pour le premier lien est pour la maison, donc cela va lier au index.html, et le texte était à la maison. Nous avons besoin de deux autres éléments de la liste. Le second est pour le blog.html et changer le nom. Le troisième lien concerne la dernière nouvelle section. Maintenant, je vais juste laisser le lien vide pour celui-ci, nous allons créer notre modèle pour la section blog en utilisant bootstrap. Mais quand il s'agit de la dernière section de nouvelles, cela va être généré dynamiquement dans WordPress. Nous allons essentiellement utiliser la page du blog, mais nous allons juste utiliser un filtre, juste pour filtrer les billets du blog pour être la dernière catégorie de nouvelles. Ensuite, ajoutons quelques commentaires. Donc, nous allons d'abord ajouter un commentaire à la div de fermeture navbar-collapsus, puis le dernier est pour le conteneur fluide. Je peux fermer ça là-haut. Alors vérifions cela dans le navigateur et voyons à quoi cela ressemble. Super. On a donc le logo qui apparaît. On a les trois liens sur le côté droit. Réduire le navigateur vers le bas, qui descend à un bouton déroulant, qui se développe pour afficher les trois liens. En passant, parce que ce bouton déroulant fonctionne, cela montre également que notre JavaScript Bootstrap, qui est inclus dans le dossier js, est tout lié correctement et tout fonctionne. En bas tout en bas de la page, vous pouvez voir que les liens sont déjà inclus dans le modèle d'amorçage, fois pour jQuery et aussi le JavaScript Bootstrap. Donc, nous savons que tout fonctionne correctement. Maintenant, nous avons notre barre de navigation complète. Ensuite, nous allons commencer sur l'image de fond et aussi le texte. Nous allons appeler cela la section des fonctionnalités. Donc, nous allons mettre ceci juste en dessous de la navigation. Copions cet en-tête, puis Collez ceci juste en dessous de la balise de fermeture et de navigation, mais toujours dans l'en-tête. Je vais appeler cela la SECTION FONCTIONNELLE. Donc, parce que la section des fonctionnalités a une grande image de fond que nous voulons étirer à toute la largeur de la page, nous allons utiliser à nouveau le fluide conteneur bootstrap. Ensuite, dans le fluide de conteneur, nous devons ajouter une autre classe de bootstrap de ligne et aussi notre propre classe personnalisée, qui est fonctionnalité. Donc, nous pouvons lier à cela dans le CSS dans la vidéo suivante. Ajoutez ensuite le chemin d'accès à l'image. Donc, la sauce image. Nous avons le dossier Images dans le projet, puis la grande image d'arrière-plan est appelée lakebg.jpeg et ajouter du texte alt dedans. Je vais juste ajouter des arrière-plans de lac. Alors vérifions si ça marche bien. Je retourne dans notre projet. Donc, nous y allons, il y a une grande image épinglée en arrière-plan. Alors ajoutons ensuite le texte qui superpose l'image. Le texte va aller dans son propre div, et nous allons ajouter une classe personnalisée de texte d'entité. Ensuite, à l'intérieur de ce conteneur, nous allons ajouter notre texte dans les balises p. Donc le texte était entièrement réactif PREMIUM SPA THEME POUR WORDPRESS. Ensuite, je vais ajouter quelques balises de pause après le mot responsive et aussi après le mot thème, juste pour diviser cela en différentes lignes. Donc, si nous retournons dans le navigateur et voyons à quoi cela ressemble, nous n'aurons pas encore le texte apparaissant sur l'image parce que nous devons ajouter du CSS pour que cela fonctionne. Mais le texte apparaît juste en dessous, donc nous n'avons pas besoin de nous en soucier pour l'instant. Nous allons résoudre ça dans la prochaine vidéo. Nous allons donc terminer cette section en ajoutant quelques commentaires de clôture. Tout d'abord au conteneur de liquide, puis à la div avec la classe de ligne, puis le texte de l'entité. Alors on y va. C'est donc la fin du code HTML pour la section d'en-tête. Si vous me rejoignez dans la prochaine vidéo, nous continuerons avec la section d'en-tête en ajoutant le CSS. Je vais aussi jeter un oeil aux lignes bootstrap et au système de grille. 4. Section d'en-tête - CSS: Bienvenue de retour. Dans la dernière vidéo, nous avons créé le code HTML pour la section d'en-tête. Nous avons inclus la barre de navigation supérieure avec les liens de menu, l'image d'arrière-plan principale, ainsi que le texte de la fonction. Dans cette vidéo, nous allons rendre notre site Web plus semblable au projet fini en ajoutant le CSS. Nous allons changer la couleur du lien et l'arrière-plan de la navigation. Nous allons également styliser le texte et nous assurer qu'il est aligné horizontalement et verticalement sur l'image d'arrière-plan. Nous allons également jeter un oeil au système de grille Bootstrap, et je vais vous montrer comment ajouter une colonne à notre site Web pour le rendre réactif. Commençons dans notre éditeur de texte. Nous devons tirer la barre latérale et aller dans notre CSS personnalisé. Il suffit de souffler le corps, toujours dans la section globale, la première chose que j'ai besoin d'ajouter est une largeur maximale pour les images. Nous allons les mettre à 100 pour cent, ce qui empêche les images de s'étirer trop gros. Créons un commentaire pour la section navbar. Nous allons commencer avec la section Navbar. La navigation principale a la classe de navbar. C' est la partie que nous allons commencer à coiffer, donc point puis barre de navigation. Nous devons augmenter la couleur de fond violet. L' arrière-plan va avoir un nombre de 97689c. Vérifions si ça marche bien. La couleur d'arrière-plan a changé, mais nous devons nous débarrasser de la marge, qui est tout en bas, poussant l'image d'arrière-plan vers le bas. Nous le faisons simplement en changeant le bas de la marge à zéro. La prochaine chose que nous voulons faire est de supprimer la bordure par défaut. Il est assez difficile de voir la bordure par défaut autour de la barre de navigation. Mais nous pouvons supprimer cela en définissant simplement la frontière à zéro. Ensuite, nous devons maintenant changer le texte pour le logo sur la navigation. Bootstrap a beaucoup de classes et beaucoup de CSS, qui est inclus en standard. Il peut être parfois difficile de trouver exactement quelle classe nous devons modifier. Une des façons les plus simples de le faire est d'aller dans les outils de développement du navigateur. Dans Chrome, vous devez cliquer avec le bouton droit de la souris et sélectionner Inspecter l'élément. Ensuite, si vous sélectionnez la loupe, puis passez simplement le curseur sur l'élément que nous devons changer, et cliquez sur. Ensuite, nous devrions obtenir une liste des classes qui affectent cet élément particulier. Nous pouvons voir que le premier élément est la couleur de la marque navbar par défaut navbar, et c'est dans la version minifiée Bootstrap. On peut changer cette couleur. Je vais juste copier la classe qui affecte cette couleur. Ensuite, revenons dans notre CSS personnalisé, collons ceci dans, et changeons la couleur pour qu'elle soit blanche. Cela change la couleur du logo. Nous devons également faire la même chose pour les liens de navigation, qui est un blog d'accueil sur les dernières nouvelles. Encore une fois, sélectionnez la loupe et choisissez l'un des liens. Encore une fois, nous pouvons remplacer la couleur grise par défaut standard en copiant la classe Bootstrap. Parce que nous voulons aussi que ce soit blanc, nous pouvons l'ajouter dans la même section. Ça change ça en blanc. Ensuite, sur la vue mobile plus petite, nous voulons également que les barres d'icônes libres soient blanches aussi. Encore une fois, sélectionnez la loupe. Si vous pouvez simplement sélectionner l'une des barres d'icônes, et assurez-vous que nous pouvons trouver celui qui contrôle la couleur d'arrière-plan. Copiez les classes. Ensuite, mettons-les dans notre CSS. Changeons la couleur d'arrière-plan par défaut, nous la changeons en blanc. Rafraîchir. Super. On y va. Les barres d'icônes sont toutes blanches maintenant. C' est tout le style que nous devons ajouter à la barre de navigation supérieure. Maintenant, nous pouvons passer à la zone en vedette, et nous pouvons commencer à travailler sur la position dans l'image sur le texte. Créons un nouveau commentaire pour la section des fonctionnalités. Nous pouvons ajouter le texte sur l'image. Nous devons utiliser un positionnement relatif et absolu. Nous devons rendre le conteneur relatif. Compléter le texte à l'intérieur. Le conteneur de la section d'entités avait une classe d'entités, qui est une classe personnalisée que nous avons ajoutée nous-mêmes. Commençons par ajouter cela, et définir la position pour être relative. Parce que nous voulons que l'image d'arrière-plan s'étire, soit la même largeur que le navigateur, nous devons remplacer la largeur maximale de 100 pour cent en ajoutant la classe d'image d'entité. Au lieu de la largeur maximale, nous allons juste définir la largeur, cette fois de 100 pour cent. Cela signifie que l'image peut s'étirer légèrement plus grande ou légèrement plus petite que la taille originale de l'image. Maintenant, nous avons la position du conteneur relative. Nous devons maintenant changer le texte pour qu'il soit absolu. Nous avons ajouté une autre classe personnalisée, entouré le texte, qui était une classe de texte d'entité. Ensuite, commençons par ça. La première position va être définie sur absolue, parce que nous utilisons le positionnement absolu. Nous allons définir à la fois la position supérieure et la position inférieure pour être égales. Ils seront tous les deux nuls. Maintenant, parce qu'il est positionné absolu, le texte apparaît maintenant au-dessus de l'image. Nous pouvons commencer à travailler avec l'alignement horizontal et vertical. Nous allons commencer par aligner verticalement le texte maintenant. Tout d'abord, je vais juste taper ça, et ensuite je vais expliquer ce que ça fait par la suite. Classe de texte d'entité, puis avant. Définissez le contenu pour qu'il soit vide. Type d'affichage devant être inline-block. La hauteur pour prendre 100 pour cent du conteneur. Enfin, vertical-aligner pour être au milieu. On y reviendra juste dans un instant. Nous allons tout d'abord ajouter les styles pour le texte. Classe d'entités, puis p, qui entoure le texte. Cela va également avoir le type d'affichage de bloc inline-, et sera tous clair bientôt. Également aligné verticalement pour être au milieu. L' alignement du texte sera centralisé dans la div. La largeur doit être égale à 100 pour cent du conteneur. Si nous retournons dans le navigateur, et si nous regardons le projet fini, il y a une couleur de fond. Il est assez faible, mais il entoure le texte, qui a des bords arrondis, et il est également semi-transparent. Ajoutons ça maintenant. Pour commencer, nous pouvons ajouter la couleur d'arrière-plan, qui a une valeur RGBA. Tout d'abord, nous devons ajouter les valeurs rouges, vertes et bleues. Pour créer la couleur grise, la première valeur est 74, 82, 95, puis la dernière valeur est l'alpha ou l'opacité. Je veux que ce soit 0,2, ce qui est le même que 20 pour cent d'opacité. L' arrière-plan a des coins arrondis, que vous obtenez en ajoutant un rayon de bordure de 10 pixels. La couleur du texte est blanche. Il y a donc l'arrière-plan du texte en place. Donc, fondamentalement, ce que nous faisons ici est que nous créons du texte et nous y ajoutons quelques styles, puis nous ajoutons un élément faux juste avant le texte afin que nous puissions l'utiliser comme référence pleine hauteur pour aligner le texte dans la div. Avant le texte, nous créons un div vide, qui n'a pas de contenu, qui sont à la fois le faux div et le texte à être bloc en ligne. Donc ils seront côte à côte. Parce que les faux éléments ont une hauteur de 100 pour cent, cela prendra toute la hauteur de la div, et puis parce que c'est la pleine hauteur de la div, nous pouvons ensuite définir l'alignement vertical pour être au milieu et ce entraînera l'alignement du texte au milieu de la div. Pour que cette astuce fonctionne, nous avons juste besoin de faire une chose de plus car par défaut, bloc en ligne a un écart entre les éléments. On doit enlever ça. Nous devons donc ajouter une propriété qui est de largeur zéro. Si nous changeons la taille de la police à zéro, cela supprimera l'écart entre les faux éléments et le texte. Parce que nous avons défini la taille de la police à zéro, nous devons ensuite ajouter la taille de la police dans les balises p. Donc, il faut avoir 48 pixels. Donc, il a enregistré cela et vérifiez cela sur le navigateur. Ça a l'air bien. Il est maintenant aligné verticalement sur l'image d'arrière-plan, et nous pouvons également voir la couleur d'arrière-plan semi-transparent. Donc, ajoutons juste un peu dessus, seulement trois pour cent, et espacons la hauteur de ligne pour être de 80 pixels. Sauvegardons et jetons un coup d'oeil à ça. Super. Ça a l'air beaucoup mieux maintenant. La prochaine chose que nous devons faire est de l'aligner horizontalement dans la div. Nous allons le faire en ajoutant des colonnes Bootstrap. Si nous revenons pour obtenir bootstrap.com, puis si nous allons dans la section CSS, puis sélectionnez le système de grille sur la droite, puis faites défiler vers le bas jusqu'aux options de la grille. Bootstrap a un système de grille de 12 colonnes et d'accéder à ce que nous utilisons le préfixe de classe de col, puis tiret, puis nous pouvons utiliser les xs pour le nombre de colonnes pourquoi nous voulons dans les petits appareils, sm pour les petits appareils ou tablettes, md pour les appareils moyens ou les ordinateurs de bureau, ou lg pour les grands ordinateurs de bureau. Ainsi, nous pouvons créer des divs, qui est affiché différemment sur les appareils plus petits ou plus grands. Il y a un exemple ci-dessous. Si nous voulons créer un div qui a deux parties et couvre toute la largeur de la page, chaque div a besoin de prendre six colonnes chacune, et la même chose, si nous voulons créer trois colonnes côte à côte, nous allons donner à chaque div une classe de quatre colonnes. Mettons cela en pratique dans notre projet. Retournez dans la page d'index. Si nous recherchons la div qui entoure le texte juste après la classe de texte d'entité, nous allons ajouter les colonnes Bootstrap. Donc, nous voulons que le texte prenne tout l'espace disponible sur une vue mobile, afin que nous puissions ajouter col-xs, pour les petits appareils, 12, donc nous allons prendre les 12 colonnes complètes sur un petit appareil. Si nous ne voulons pas qu'il soit pleine largeur sur des appareils plus grands, nous pouvons ajouter col-md-8, car cela prendra huit parties de 12 ou deux tiers, puis plus grand encore, sur de grands ordinateurs de bureau, col-lg-6, car cela prendra la moitié de la largeur de la page Web. Sauvons ça et jetons un coup d'oeil. Si nous faisons défiler jusqu'à la petite taille, vous pouvez voir que le texte prend toute la largeur. Mais une fois que nous avons frappé les appareils moyens, cette div n'est prise que huit parties. Parce qu'il ne prend que huit parties, il laisse quatre colonnes sur le côté droit. Donc, pour nous assurer que cette div reste au milieu de la page, nous pouvons ajouter un décalage sur le côté gauche. Donc, pour centraliser cette div, nous devons ajouter un décalage de deux, et la façon dont nous faisons cela est col, donc le premier est md puis le décalage de tiret, puis pour le décaler sur deux colonnes, nous avons défini cela sur deux. Sauvegardons ça et voyons si ça marche bien. Super. Donc, le div de huit colonnes est au milieu de la page avec deux colonnes dans le côté maintenant. Nous ferons de même pour les grands appareils car les grands appareils sont pris en six parties. Nous devons ajouter un décalage de trois. Donc col-lg-offset trois. On y va. Les documentations Bootstrap ont obtenu plus d'informations sur le système de grille et la compensation. Il y a aussi quelques exemples que vous pouvez jeter un oeil dans la section de compensation. C' est donc cette vidéo qui est presque terminée. Juste une autre chose que nous devons ajouter avant de partir, est que si nous réduisons le navigateur vers le bas, le texte est assez grand. Donc, nous allons descendre à la petite tablette ou les tailles mobiles. Nous devons nous assurer que le texte est plus petit. Nous pouvons donc le faire dans notre CSS en ajoutant une requête multimédia. Ajoutons un commentaire de style mobile juste au bas de la page. Alors ajoutons une requête multimédia, donc @media écran, et nous allons cibler les appareils avec une largeur maximale de 768 pixels. En utilisant 768 pixels, cela reste en ligne avec les requêtes média de Bootstrap. Si nous remontons en haut du système de grille, vous pouvez voir les tailles de requête média utilisées par Bootstrap. Nous allons donc définir dans notre requête multimédia pour les petits appareils de moins de 768 pixels. Pour réduire la taille de la police, nous devons ajouter la classe de texte d'entité, puis p, et nous devons montrer l'espace après et, là nous allons. Nous devons donc réduire la taille de la police. Réglons cela à 28 pixels et aussi la hauteur de la ligne, qui peut être la même, qui peut également être 28 pixels. Sauvegardons cela et retournez dans le navigateur. Si nous retournons dans le projet, puis réduisons le navigateur vers le bas. Vous pouvez voir que le texte est maintenant mis à l'échelle sur les périphériques plus petits et qu'il est installé dans le conteneur. À mesure que nous grandissons et que nous touchons la requête Media, nous obtiendrons le texte plus grand, donc cela semble beaucoup mieux. Pendant que nous sommes dans la requête média, nous pouvons aussi simplement faire les liens libres dans la vue mobile, ici au centre de la page, nous pouvons ajouter cela dans la section lia, parce que ce sont nos liens hypertexte d'élément de liste, donc text-aligner centre. On y va. Super. Donc c'est tout pour cette section. C' est tout le CSS terminé pour l'en-tête. Si vous vous joignez à moi dans la prochaine vidéo, nous continuerons avec le site Web et descendons à la section d'accueil. 5. Page d'accueil - Section de bienvenue: Dans la dernière vidéo, nous avons complété le HTML et le CSS pour la section d'en-tête. Ensuite, si nous regardons le site Web fini, nous allons commencer par la section de bienvenue. C' est une section assez simple, il y a juste un titre de niveau 2 en haut, il y a aussi une image divisée, puis quatre liens vers différentes parties du site Web. Commençons. Accédez à votre page d'index, puis copiez le commentaire de la section d'entités. Nous allons commencer à travailler juste en dessous de la balise d'en-tête de fermeture et coller cela dans. Ce sera la section de bienvenue. La section de bienvenue va être dans les balises de section, et la balise de section va avoir un ID de bienvenue, donc nous pouvons l'utiliser dans le CSS. L' ensemble div doit avoir une classe de conteneur. Contrairement aux sections précédentes, nous allons simplement utiliser un conteneur de largeur définie. On ne veut pas s'étirer trop loin. Ensuite, dans le conteneur, nous ajoutons le div habituel avec la classe de ligne. Ensuite, nous allons définir le nombre de colonnes bootstrap. Nous voulons que le titre de niveau 2 et l' image de diviseur soient la moitié de la largeur de la page Web, donc nous allons définir le nombre de colonnes à six et nous ajouterons un décalage de trois sur le côté gauche. Nous allons entourer le texte sur l'image avec un div, avec une classe de col-sm-6 et aussi pour le décalage, col-sm-offset-3. Ensuite, le titre de niveau 2, qui est « Bienvenue à Tranquil Spa », puis juste en dessous de l'en-tête, nous allons ajouter l'image, donc la source de l'image, cette image est également dans notre dossier d'images, images/divider-purple.png. Si nous regardons le projet fini, vous pouvez voir que le diviseur violet est sur la couleur de fond blanc. Mais plus bas, nous avons la couleur de fond violet, nous avons aussi une fracture avec les pots d'argent. On utilisera le diviseur en argent sur les sections. Après le chemin du fichier, nous pouvons ajouter le texte alt-texte du diviseur, et fermer cette image, puis copions simplement les commentaires div de fermeture. Le premier est pour les colonnes, le suivant est pour les lignes, et le dernier est pour le conteneur. Voyons à quoi cela ressemble, retour dans le navigateur et rafraîchir. On y va. L'image sur le texte est centrée. Nous devons faire un peu de travail avec le CSS, mais c'est correct pour l'instant. Ensuite, nous allons créer les quatre images et les quatre liens juste en dessous. De retour dans l'éditeur de texte, nous commençons juste en dessous de la dernière ligne de fermeture, mais toujours dans le conteneur principal. Créons une nouvelle ligne. Une classe div de ligne et nous allons également ajouter une classe personnalisée d'installations, nous pouvons l'utiliser sur le CSS. Chacun des liens individuels va mise de trois colonnes, donc nous pouvons créer quatre divs différents avec une classe de col-sm-3. Le premier, classe div de col-sm-3, donc l'image et le texte vont être un lien, donc nous allons juste laisser un vide. Dans le lien, ajoutons d'abord l'image. La source de l'image des images et la première image est makeup.png avec l'ancien texte, débarrassons-nous de la barre latérale. L' ancien texte est « Cheveux et maquillage ». Ensuite, juste après l'image, vous pouvez ajouter le texte pour le lien, donc les cheveux, puis pour obtenir le symbole et, nous utilisons l'esperluette, puis amp ; puis Make Up, puis ajoutons quelques commentaires aux divs de fermeture. L' extérieur est pour la rangée, puis l'intérieur est pour la div à trois colonnes. Parce que nous allons utiliser ces trois colonnes div quatre fois, copions la section et puis collez-la en dessous trois fois de plus, sauvegardez cela, et consultez sur le navigateur, et actualisez. Super, ça marche. Nous avons les quatre images, tous les hyperliens. Nous pouvons voir le soulignement une fois que vous survolez et aussi le texte est là. Changeons maintenant les images sur le texte. La première div va bien, passons à la deuxième image. La deuxième image a un nom de candles.png, le texte alt est « Spa Facilities » et aussi le texte est Spa Facilities. Ensuite, la troisième section a une image appelée lake.png et le texte est « Lakeside Retreats », et aussi la même chose pour le texte alt. Enfin, le dernier, le nom de l'image est pool.png, le texte est « All Our Facilities » et nous allons copier cela pour le texte alt aussi. Voyons cela dans le navigateur et actualisons. C' est bien pour l'instant. Ensuite, je vais passer à autre chose et ajouter du CSS pour cette section. Nous voulons nous assurer que le titre de niveau 2 est centralisé, nous avons besoin d'un espacement au-dessus et au-dessous des images. Nous allons également centraliser le texte et supprimer le soulignement lorsqu'il est survolé, et nous allons également changer la couleur du texte. Faisons cela dans le CSS personnalisé. Nous allons commencer par le titre de niveau 2 parce que nous allons l'utiliser plusieurs fois sur le site, nous voulons mettre ceci dans la section Global en haut, donc juste en dessous de l'image, nous pouvons avoir h2 là. Nous devons aligner le texte, au centre. Sur la taille de la police pour être 2em, et aussi pour créer un peu d'espace en haut et en bas, ajoutons un peu de marge. Marge supérieure, 30 pixels, et aussi une certaine marge sur le bas pour être 20 pixels. Sauvegardons cela et vérifions cela dans le navigateur. Maintenant, nous avons le texte au milieu, et aussi un peu d'espace au-dessus et au-dessous. Bien que nous soyons également dans la section globale, nous pouvons supprimer le soulignement des liens hypertexte lorsque nous survolons. Juste en dessous du h2, sélectionnons un : hover. Nous pouvons supprimer le soulignement en définissant la décoration du texte sur aucun. Réglons également la couleur du texte pendant que nous sommes ici. Lorsqu' il est survolé, il doit être 97689c. Maintenant, lorsque je survole, le texte devient violet et le soulignement est supprimé. Parce que nous avons défini la taille de la police h2 à 2em, cela va probablement être un peu trop grand quand nous atteindrons la taille mobile, alors passons à la requête média. Sous le texte de la fonction , ajoutez le h2. Nous allons juste réduire la taille de la police à 1,6 em. Maintenant, nous avons ajouté les styles globaux, nous pouvons commencer par ajouter une section Bienvenue et ajouter certains des styles spécifiques à l'accueil. Copions le commentaire pour style mobile et nous allons le coller juste au-dessus de la section de style mobile. Appelons ça la section d'accueil. Dans la section Bienvenue, nous donnons un ID de « bienvenue ». La section de bienvenue a une couleur de fond blanc. Ajoutons un peu de rembourrage au bas de la section afin que tout ce qui suit ne soit pas trop proche. Nous allons définir le fond de rembourrage à 30 pixels. Nous ne définirons également que le texte dans cette section pour être au centre. Dans la section globale, nous changeons la couleur des liens lorsque nous les avons survolés. Mais maintenant, nous devons définir la couleur pour remplacer le bleu par défaut. Bienvenue et puis un, parce que ce sont des liens et la couleur va avoir la valeur de 494646, qui est une couleur gris plus foncé. Ensuite, dans la section avec les images et le texte, nous voulons rendre le texte un peu plus grand et aussi les images individuelles, nous allons les rendre un peu plus petits et ajouter une marge sur le haut et le bas, juste espacer un un peu plus. Autour de cette ligne, nous allons regarder en arrière dans le HTML. Les quatre divs individuels étaient tous entourés d' une rangée et nous donnons à cette rangée une classe d'installations personnalisées. Utilisons notre maintenant. Augmentons la taille de la police. Taille de la police, définissons cela à 1,5 em, et aussi l'image des installations, nous allons définir l'affichage pour être bloc. Pour les rendre un peu plus petits, nous pouvons définir la largeur maximale à 60 pour cent, donc cela semble un peu mieux. Ensuite, pour ajouter un espace ici, nous allons définir la marge, nous voulons mettre 30 pixels en haut et en bas, et définir la gauche et la droite pour être auto. Voilà, c'est ce qui est fini avec la section Bienvenue. C' est la fin de cette vidéo et si vous me rejoignez dans la prochaine vidéo, nous continuerons avec le site Web et nous descendrons pour créer la dernière section Office. On se voit là-bas. 6. Page d'accueil - Section des offres - HTML: Notre site Web prend forme maintenant, nous avons terminé la section d'en-tête ainsi que l'image et le texte en vedette. Nous sommes ensuite passés à la création de la section d'accueil, qui contient des liens vers toutes les sections du site Web. Si nous regardons le site Web fini, la prochaine partie que nous allons créer est la dernière section des offres. Il va consister en un titre et un séparateur de niveau 2 similaires à la dernière section, puis nous allons créer une nouvelle ligne avec trois offres spéciales différentes. Les trois offres différentes sont des textes statiques pour l'instant, mais une fois que nous arriverons à la section WordPress plus tard dans le cours, nous nous assurerons que l'utilisateur peut se connecter et changer les valeurs, afin qu'il puisse garder les offres spéciales à jour même sans aucune connaissance technique. Commençons dans la page d'index, donc nous allons commencer avec un commentaire. Cette section va s'appeler les dernières offres, et nous allons faire juste en dessous de la section d'accueil comme nous l'avons fait dans la dernière vidéo, donc nous allons localiser la section de clôture et ensuite coller le commentaire juste en dessous, donc c'est la dernière offres. Les dernières offres auront aussi sa propre section et cela aura un ID des dernières offres, elles sont dans la section. Nous allons créer la div habituelle avec la classe de conteneur, et puis parce que la ligne que nous allons utiliser est à peu près la même que la dernière section, nous pouvons simplement copier la div avec la classe de ligne et nous pouvons réutiliser cela. Collez cela dans le conteneur, puis nous devons changer le titre de niveau 2 pour les dernières offres. Parce que cette fois, nous sommes sur un fond violet, changeons le diviseur pour être le divider-silver.png et jetons un coup d'oeil à cela. Il y a notre section avec le titre de niveau 2 sur le diviseur, donc nous allons juste ajouter une autre classe personnalisée qui va être une classe pour ajouter une marge au bas du diviseur. Si nous regardons le projet fini, nous devons nous assurer que les divs libres sous le diviseur sont légèrement poussés vers le bas de l'image, alors ajoutons la classe à la ligne de bas de marge. Nous allons ajouter une marge dans la vidéo suivante, dans le CSS, ajoutons simplement un commentaire de clôture au conteneur. Mettons les offres spéciales gratuites sur la ligne, alors créons un nouveau div avec la classe de ligne. Nous allons créer les divs d'offres spéciales gratuites mais nous devons mettre ces divs d'offres spéciales gratuites dans un conteneur, donc nous allons mettre un conteneur complet de 12 colonnes de largeur autour de ceux-ci. Div avec une classe de col-sm-12, et cela va créer un conteneur complet de 12 colonnes. Parce que les sections d'offres spéciales gratuites sont imbriquées, nous devons créer une nouvelle ligne pour ceux qui vont à l'intérieur. Dans la rangée, la première offre spéciale va être div classe col-sm-4, donc il prend un tiers de la page et aussi pour que nous puissions ajouter nos styles personnalisés, nous allons également ajouter une classe d'offre personnalisée. Pour commencer, nous devons mettre le prix, nous devons mettre le prix dans les balises de span, puis nous allons mettre le nom de l'offre spéciale dans un titre de niveau 3, puis deux balises de paragraphe distinctes juste en dessous. Pour le prix, l'intervalle, puis entre les deux, le premier avait un prix de 60$, puis en dessous de celui du niveau 3, le nom de l'offre. Le premier est l'offre familiale, je vais juste mettre une balise de pause là-dedans, puis les balises, donc la première ligne de texte était la piscine familiale, puis la deuxième ligne était super journée, alors voyons à quoi ça ressemble. Tout est là mais il y a encore un peu de travail à faire avec le CSS, mais continuons pour l'instant à ajouter le reste des offres. Si nous localisons le div, en fait faisons un commentaire d'abord, donc il suffit de copier le commentaire du conteneur et ensuite le premier est pour la classe d'offre. Le second est appelé sm-4, et puis c'est la ligne, en fait c'est la ligne imbriquée, puis juste en dessous de cela c'est l'enveloppe de 12 colonnes, puis le conteneur de ligne final. Copions la section complète de l'offre spéciale, puis collons deux fois juste en dessous. La deuxième offre spéciale avait le prix d'un $120 et c'est un forfait de mariage, donc le nom de l'offre était pour la mariée. La première ligne du texte était les cheveux et le maquillage, et enfin c'était le forfait complet, puis la dernière offre spéciale était le laissez-passer week-end qui avait un prix de 90$, donc le nom était le laissez-passer week-end. Le texte était des installations modernes, et le dernier avait le texte de cadeau parfait. Retour dans le navigateur, tout semble bien, c'est exactement comme nous le voulons. Rejoignez-moi dans la prochaine vidéo, et nous continuerons avec la section en ajoutant le CSS. 7. Page d'accueil - Section des offres - CSS: Dans cette vidéo, nous allons continuer avec la dernière section des offres. Dans la dernière vidéo, nous avons ajouté le HTML pour les offres séparées gratuites et dans cette vidéo nous allons ajouter le CSS pour le faire ressembler davantage aux projets finis. Nous allons ajouter la couleur de fond violet pour la section complète. Nous modifierons également la couleur de fond et du texte pour les offres individuelles gratuites. Nous veillerons également à ce que le cercle de tarification soit positionné horizontalement au milieu de la div et se chevauche également en haut. Nous le ferons avec un positionnement absolu. Si nous passons à notre CSS, nous pouvons créer une nouvelle section. Faisons cela en bas juste avant le style mobile. Voici les dernières offres. La dernière section des offres avait l'ID des dernières offres. Nous allons simplement l'utiliser pour créer la couleur de fond violet. Définissez la couleur de la police pour qu'elle soit blanche, et assurez-vous également que tout le texte est aligné. Tout d'abord, nous allons définir le text-align pour être au centre. Parce que nous utilisons une couleur d'arrière-plan violet ou des couleurs d'arrière-plan sombres, nous voulons que le div ait du texte blanc. La couleur d'arrière-plan violet a l'ID de 97689c. Jetons un coup d'oeil dans le navigateur. Maintenant, nous avons la couleur de fond violet et le texte blanc, donc nous pouvons passer aux trois divs d'offres individuelles. Si nous regardons en arrière dans la page d'index, les offres gratuites, nous leur donnons une classe d'offre personnalisée, nous avons utilisé sur les trois d'entre eux. Nous pouvons choisir ça maintenant. Donc la classe d'offre. Nous allons d'abord définir la couleur de fond sombre. L' arrière-plan des offres gratuites a un ID de 4a525f. On y va. Parce que ce seront des conteneurs pour le prix et des cercles, nous allons définir la position pour être relative. Pour les rendre un peu plus grands, nous ajouterons une hauteur minimale de 350 pixels de haut et un peu de rembourrage. Je vais ajouter 40 pixels en haut et en bas, puis 10 pixels à gauche et à droite. Ensuite, nous pouvons commencer à n'importe quel prix et cercles. Le prix et les cercles étaient enveloppés dans une balise span. Sélectionnez-les à l'aide de la classe d'offre, puis étendez. Commençons par changer la couleur d'arrière-plan. Les cercles auront la couleur de 8abbb1 et l'affichage va être réglé pour bloquer. Nous leur donnons une hauteur et une largeur de 100 pixels. Parce que le prix va être à l'intérieur, nous allons définir le text-align pour être au centre. Regardons et voyons à quoi ça ressemble jusqu'à présent. Nous avons les divs de prix gratuits apparaissant, nous avons une couleur de fond différente. Ensuite, nous devons en faire un cercle. Ensuite, nous devons regarder une position dans les cercles où nous les voulons. Pour faire ces cercles, on peut juste ajouter un rayon de bordure de 100 pour cent, ce qui fait de lui un cercle. Ensuite, pour rendre le texte aligné verticalement, nous pouvons également définir la hauteur de la ligne à 100 pixels, ce qui est la même que la pleine hauteur de la div, et cela déplace le prix au milieu du cercle. Parce que nous avons un conteneur relatif à partir duquel travailler, nous pouvons définir ces cercles de tarification pour avoir une position absolue. Nous allons commencer à référencer ces cercles à partir du côté gauche du conteneur. Nous allons ajouter une marge de 50 % à gauche pour mettre ça au milieu du conteneur. Maintenant, ce n'est pas tout à fait au milieu parce que nous devons compenser la moitié de la largeur du cercle. Faisons ça maintenant. Si nous définissons la gauche, nous pouvons définir la valeur à 50 pixels négatifs, ce qui est la moitié de la largeur et qui devrait les rendre centrés horizontalement. Ensuite, nous pouvons référencer le cercle par le haut. Mettons le haut. Maintenant, si nous fixions la valeur du haut à zéro, ce qui se passerait est qu'un cercle irait au sommet du conteneur, mais nous avons besoin que le cercle se chevauche de la moitié de la hauteur. Au lieu de définir le sommet à zéro, nous pouvons définir le sommet à 50 négatif, ce qui représente la moitié de la hauteur. On y va. C'est le positionnement exactement où nous le voulons. Juste pour terminer la section de tarification, nous allons simplement ajouter la taille de la police et le poids de la police. La taille de la police qui finit jusqu'à 2ems, et enfin le poids de la police va être gras. On y va. Ensuite, nous allons créer un espacement. Le nom de l'auteur se trouve dans un titre de niveau 3. Ajoutons une marge au bas juste pour pousser le texte favorisé et nous pouvons également augmenter la taille de la police aussi. En dessous de la section span, nous avons la classe d'offre, puis h3. Margin-bottom est de 50 pixels et modifions également la taille de la police pour être 1.2ems. Cela nous donne un peu plus d'espace sous le titre. Je vais également ajouter un peu d'espacement entre les deux lignes ci-dessous en ajoutant une hauteur de ligne supplémentaire. Les deux lignes étaient en balises P. L' offre p, nous pouvons augmenter la hauteur de la ligne à 2ems. Cela vous donne un peu plus d'espacement vertical. Maintenant, nous allons créer un peu d'espace entre le séparateur et aussi les sections spéciales gratuites. Si vous vous souvenez de retour dans la page d'index de la première ligne, qui avait le titre de niveau 2 sur l'image divisée. Nous avons également ajouté une classe personnalisée de margin-bottom. Nous pouvons ajouter ce CSS personnalisé, et pousser les divs libres vers le bas. Définissons la marge inférieure à 70 pixels et voyons à quoi cela ressemble. Super. C'est exactement comme cela que nous voulons qu'il apparaisse sur la vue du bureau. Si nous réduisons le navigateur vers le bas, jusqu'à une taille mobile, puis faites défiler vers le bas jusqu'aux offres gratuites, nous avons juste besoin de faire un peu de changement sur le bas de la marge parce que les divs libres se fondent en un quand ils sont empilés les uns sur les autres. Nous pouvons facilement corriger cela si nous trouvons la section avec la classe d'offre. Ensuite, nous pouvons ajouter une marge sur le bas de 60 pixels. Voyons voir à quoi ça ressemble. Ça a l'air mieux maintenant. Nous avons de l'espace entre les trois offres spéciales sur la vue mobile. C' est ça. C'est la fin de la dernière section de l'offre. Merci d'avoir écouté, et je te verrai dans la prochaine vidéo. 8. Page d'accueil - Section de la boutique en ligne: Dans la dernière vidéo, nous avons passé à la section Dernières offres du site Web. Dans cette vidéo, nous allons compléter la section Boutique en ligne. Maintenant, la section Shop Online est une section relativement simple. Nous allons utiliser un niveau similaire à celui de cap sur diviseur, comme nous l'avons fait dans les deux dernières sections. Nous allons ajouter un bouton, qui va être un lien vers une section Shop Here. Il y aura aussi une grande image de fond sur elle via le CSS. Dans l'éditeur de texte, je vais commencer dans la page d'index et créer une nouvelle section. Je vais coller le commentaire juste en dessous de la section Dernières offres. C' est ce qu'on appelle la section Shop Online. Cela a une balise de section avec un ID de shop-online, et un conteneur d'amorçage habituel sur la ligne. Donc div avec une classe de conteneur. Ensuite, dans le conteneur, nous avons la rangée. Nous allons copier l'en-tête et diviser la section de la dernière section. Nous allons copier la section à six colonnes et la coller dans notre propre ligne. Le titre de niveau 2 est le texte Shop Online. L' image, nous devons changer pour être l'image violette parce qu'elle est sur un fond blanc. Juste en dessous du séparateur, le a et href va être vide pour l'instant. La classe va être la classe de bouton bootstrap, donc btn btn-default. Ensuite, le rôle sera égal à bouton. Ensuite, fermez le lien et non le texte Shop Here, et jetons un coup d'oeil dans le navigateur. Ceci est notre diviseur de titre et aussi le bouton par défaut. Maintenant, nous pouvons facilement faire apparaître le bouton au centre de la page simplement en ajoutant une classe bootstrap. Pour le conteneur, juste après le nombre de colonnes, nous pouvons ajouter la classe bootstrap du centre de texte. Maintenant appuie sur le bouton au milieu de la div. C' est tout le HTML que nous avons besoin d'ajouter pour cette section. Nous fermerons quelques divs avec des commentaires. Celui-ci est la ligne de fermeture dans le conteneur final. Ok, alors ensuite, nous devons aller dans le CSS personnalisé. Je vais ajouter le style pour les paramètres par défaut du bouton et aussi à la grande image d'arrière-plan, tout comme le site final. Passons au CSS personnalisé, alors commençons avec le bouton. Donc, parce que nous allons utiliser le bouton plus tard dans le cours, nous allons l'ajouter à la section Global en haut. Je vais juste en dessous de l'image. La classe était btn-default. Remplacer les valeurs d'amorçage par défaut qui impliquent la ligne. Tout d'abord, la couleur de fond du bouton ne sera pas la couleur bleue, qui est 8393ca, et nous allons ajouter une bordure, une bordure de pixels libres, solide. La couleur sera ecf0f1 et un rayon de bordure de 5 pixels, puis quelques raquettes pour rendre la bordure un peu plus grande, 15 pixels en haut et le bouton et 30 à gauche et à droite, et la couleur du texte sera blanche. Jetons un coup d'oeil. Le bouton a l'air bien, nous avons juste besoin d'ajouter l'état du survol. Si nous revenons dans le CSS btn-default, puis survolons, nous changeons la couleur de fond pour être 97689c. Lorsque nous survolons le bouton, nous avons la même couleur pourpre que l'arrière-plan. Maintenant, revenons en arrière et créons une section Boutique en ligne. Nous allons copier les commentaires, et juste au-dessus du MOBILE STYLE à nouveau, nous appellerons ceci la section Boutique en ligne. Commençons par l'image d'arrière-plan. La section avait un numéro d'identification de la boutique en ligne. Nous pouvons changer l'arrière-plan en ajoutant l'arrière-plan, puis url, puis, entre parenthèses, nous pouvons ajouter le chemin du fichier. Donc point point pour revenir au répertoire de base, images barre oblique, puis les images que nous voulons est products.jpg, mais ne seront pas au centre. Enfin, ne pas répéter. En l'état actuel, l'image est en place, mais elle n'est prise qu'à la même hauteur que le contenu déjà en place. Nous pouvons changer cela en ajoutant la hauteur minimale. Je vais définir la hauteur minimale pour être la même hauteur de l'image, qui est de 852 pixels. Ensuite, modifions la couleur du texte de l'en-tête Shop Online. La couleur va avoir la valeur de 494646. Ensuite, enfin, juste pour séparer le bouton du diviseur, nous allons ajouter une marge en haut, donc l'ID shop-online et ensuite le btn-default. Poussons le bouton vers le bas en ajoutant une marge sur le haut de 25 pixels et voyons à quoi cela ressemble dans le navigateur. Ok, on y va, le bouton est maintenant poussé vers le bas du séparateur. C' est la fin de la vidéo. Merci de regarder, et si vous me rejoignez dans la prochaine vidéo, nous terminerons la page d'accueil bootstrap en ajoutant le pied de page. 9. Section du pied de page - HTML: Bienvenue de retour. Dans cette vidéo, nous allons créer la section pied de page pour notre page d'index. Si nous retournons dans notre éditeur de texte et sous la section boutique en ligne, copions simplement les commentaires et les collez ci-dessous, et nous appellerons ceci la section Pied de page. Nous n'avons pas besoin d'utiliser les balises de section comme les sections précédentes car il existe une balise de pied de page que nous pouvons utiliser en place. Nous utilisons les balises de pied de page. Parce que le titre de niveau 2 sur l'image pour la section de pied de page est assez similaire aux dernières sections, nous pouvons simplement copier cette section d'en haut. Nous avons copié le conteneur à partir de la section boutique en ligne et le coller entre les balises de pied de page. On n'a pas besoin du bouton. Donc, nous pouvons supprimer cette section. La section boutique en ligne sera « Keep in contact » et juste après le centre de texte, nous allons réutiliser la classe margin-bottom, que nous avons utilisée plus tôt dans la dernière section des offres. Cela va éloigner le contenu du diviseur. Sauvegardons et jetons un coup d'oeil à cela, et actualisons. Il y a notre cap de niveau 2 et le séparateur. Ensuite, nous devons créer une nouvelle ligne, qui va avoir l'adresse sur la gauche et certains des liens de navigation au milieu, puis certains des boutons de partage social sur la droite. Pour insérer ces trois sections, nous allons créer une nouvelle ligne juste en dessous de la dernière. Donc, un nouveau div avec la classe de la ligne, puis dans la ligne, nous allons créer trois divs supplémentaires, qui vont être quatre divs de colonnes. Classe Div, puis col-sm-4. Nous pouvons copier cette div, le coller en deux fois. Le premier div a l'adressage, donc nous allons être sémantiques et utiliser les balises d'adresse. La première ligne est Tranquil Spa, puis ajoutez la balise break. Ajoutons quelques lignes d'adresse, donc la ligne d'adresse 1 puis la balise de rupture. Dupliquez ces deux fois de plus pour créer les lignes d'adresse 2 et 3. Ensuite, la deuxième div avait la liste non ordonnée avec la navigation. Entre les tags ul, nous allons créer quatre éléments de liste et entre les balises de liste, nous allons créer des liens. Donc un href, et le premier lien va être à propos de nous. Cela fera un lien vers about.html et nous mettrons ce lien là pour quand nous créerons cela, et le texte est A propos. Copiez et collez ou dupliquez-le trois fois de plus. Le deuxième lien est le contact avec nous. Changeons cela maintenant et le lien va être contact.html. Le troisième lien est vers le blog. Le lien est blog.html, et le texte de Blog. Et enfin, c'est les dernières nouvelles. Nous pouvons simplement supprimer le lien là parce que nous allons générer cela dynamiquement dans WordPress. Alors jetons un coup d'oeil dans le navigateur. On y va, on a nos deux premières sections. Maintenant, nous avons juste besoin de créer la section des médias sociaux sur la droite. Pour la div, nous allons commencer avec les balises p et le texte de Follow Us, puis en dessous du texte Follow Us, nous allons utiliser les icônes Font Awesome pour les liens vers les médias sociaux. Nous ajoutons les icônes Font Awesome avec la balise i, puis ajoutons une classe. Donc, la première classe est fa. Nous en avons besoin pour toutes les icônes. Ensuite, l'icône Facebook est fa-facebook. Ensuite, pour rendre l'icône légèrement plus grande que la normale, nous ajoutons la classe de fa-lg, puis fermons. Ensuite, créez quatre autres liens. Le second est le lien vers Twitter. On a besoin de fa-twitter. Icône 3 est Google Plus, puis Pinterest, et enfin c'est YouTube. Alors gardons ça et voyons à quoi ça ressemble maintenant. Bien, nous avons les cinq icônes des médias sociaux où elles devraient être. Ensuite, la dernière chose que nous devons faire est d'ajouter la section copyright tout en bas de la page. Ajoutons ça maintenant. Donc, juste en dessous du conteneur mais stocké dans la section photo, nous allons ajouter un nouveau div avec une classe de conteneur fluide, donc il couvre toute la largeur de la page Web. Nous allons également ajouter un identifiant de copie pour le copyright, puis un div avec une classe de col-sm-12 pour faire un conteneur de 12 colonnes. Ensuite, le texte entre les balises p, nous allons ajouter le symbole de copyright, qui est esperluette, puis copier ; 2015 Tranquil Spa. Ensuite, ajoutons quelques commentaires. C' est la div de clôture pour la ligne. C' est le récipient à 12 colonnes et enfin le récipient à fluide. Jetons un coup d'oeil. Super, donc c'est tout le HTML que j'ai fait pour la page d'accueil. Si vous me rejoignez dans la prochaine vidéo, nous terminerons notre page d'accueil en ajoutant le CSS. 10. Section du pied de page - CSS: Bienvenue de retour. Dans cette vidéo, nous allons terminer notre page d'index en ajoutant le CSS pour la section pied de page. Si nous nous dirigeons vers notre CSS personnalisé, puis copions les commentaires. Juste pour la section de style mobile, nous appelons ceci la section « Keep in touch ». La section pied de page sera enveloppée dans les balises de pied de page. Nous allons ajouter une couleur de fond de violet. Pour faire ressortir le texte, nous allons définir la couleur sur blanc, puis changer la couleur d'arrière-plan pour qu'elle soit violette, soit 97689c. Ensuite, nous devons changer le diviseur pour être la couleur argent. En HTML, nous allons changer le diviseur de violet pour être diviseur silver.png, puis, créons un espace entre les lignes de l'adresse et aussi les éléments de la liste. De retour dans le CSS, nous pouvons le faire en sélectionnant les éléments de la liste de pied de page, ainsi que la section d'adresse, et augmentons la hauteur de ligne pour être 2ems, ce qui nous donne un peu plus d'espacement verticalement. Les icônes des médias sociaux sont un peu poinçonnées, donc je vais ajouter une marge sur le côté droit juste pour les séparer un peu. Je vais sélectionner Font Awesome icônes avec le i. Ajoutons une marge, sur le côté droit, 15 pixels. Ça a l'air un peu mieux. Ensuite, nous voulons changer la couleur d'arrière-plan de la section copyright en bas et aligner le texte au centre. Pour la section des droits d'auteur, nous vous donnerons un ID de copie. Commençons par définir le text-align pour être centre, la couleur d'arrière-plan pour être blanc, et nous allons définir la couleur de police pour 494646, et les hauteurs de la div pour être 60 pixels, et aussi définir la hauteur de la ligne pour être de 60 pixels pour aligner le texte, puis finalement, nous allons ajouter une marge en haut de la div, de 30 pixels, rafraîchir. Ça semble fonctionner, alors on verra juste quel est le problème. J' ai l'identité de la copie. Quand il a changé l'erreur d'orthographe qui revient à ID et enregistrez cela et actualisez. Ça a l'air mieux. Nous devons maintenant séparer sa section sur les droits d'auteur tout en bas de la page. Donc, ensuite, nous devons faire un peu de travail avec les éléments de la liste. Nous devons changer la couleur et aussi enlever les balles du côté gauche. Nous allons le faire dans la section Global en haut. Ajoutons ceci à la fin de la section Global. Tout d'abord, pour supprimer les points de puces, nous allons supprimer le style de liste, nous pouvons le définir à zéro. Comme il s'agit de liens, nous pouvons sélectionner le lien de l'élément de la liste de pied de page, et changer la couleur du lien pour qu'il soit blanc. Ensuite, faites la même chose pour l'état de vol stationnaire, pied de page, li a, puis survolez. La couleur du vol stationnaire sera la couleur grise que nous avons utilisée dans le texte, donc c'est 494646. Jetons un coup d'oeil. Tout fonctionne bien, bien. Tout semble bien pour la vue du Bureau, alors réduisons la vue vers la vue mobile et voyons si des modifications doivent être apportées. Oui, nous avons des rembourrages par défaut sur le côté gauche, et nous devons aussi aligner le texte pour être au centre. Il va déplacer le remplissage par défaut, ouvrir la section Global. Faisons cela juste au-dessus des éléments de la liste. L' UL, définissons le remplissage à zéro, qui semble mieux, et définissez le texte aligner vers le bas dans la requête multimédia. Nous allons le faire dans le pied de page, text-aligner pour être au centre. Pour séparer l'adresse et la liste de pied de page non ordonnée, je veux ajouter une bordure en bas. Donc encore une fois, nous allons faire sur la requête média, donc pied de page, liste non ordonnée, et aussi les balises d'adresse. Border-bas, nous allons définir à un pixel et la ligne à pointiller. Jetons un coup d'oeil. Ça a l'air bien. Si nous élargissons le navigateur, tout semble fonctionner correctement. C' est la fin de notre page d'index pour notre site bootstrap. Nous n'avons plus que quelques pages à faire, comme le blog, le contact et la page. Merci d'avoir écouté je vous verrai dans la prochaine vidéo. 11. Page de blog - HTML: Bienvenue de retour. Nous avons maintenant terminé notre page d'index, notre modèle Bootstrap. Dans ces prochaines vidéos, nous allons créer les dernières pages pour terminer notre modèle Bootstrap et ensuite nous pouvons commencer à convertir en WordPress. Dans cette vidéo, nous allons commencer par la page du blog. Si nous regardons le projet fini, nous pouvons avoir une idée de ce que nous allons créer. Nous allons réutiliser la section d'en-tête et aussi l'image d'arrière-plan. Mais nous allons changer le texte pour Tranquil Spa Official Blog. Ensuite, en faisant défiler vers le bas, nous allons avoir les billets de blog individuels sur le côté gauche. Nous en mettrons trois dans notre modèle. Nous aurons des liens vers des publications plus anciennes et plus récentes. Sur le côté droit, nous aurons une barre latérale. La barre latérale aura un peu de texte sur le site Web. Nous aurons une page d'archives où tous les articles de blog seront stockés par mois et par année. Nous allons également séparer les billets de blog en catégories, et si nous allons un peu plus loin sur la page, nous allons également réutiliser la section pied de page. La plupart de la barre latérale sera juste des liens vides pour l'instant. Ceux-ci seront générés dynamiquement dans WordPress. Nous allons simplement les ajouter dans Bootstrap en tant que liens vides pour obtenir l'aspect et la sensation du site. Commençons. Nous nous dirigeons vers notre éditeur de texte avec notre projet. Ensuite, nous allons créer une nouvelle page et enregistrez-le sous blog.html, et faire cela est enregistré dans le même niveau que la page d'index. Ensuite, si vous allez dans la page d'index que nous avons terminé plus tôt et sélectionnez tout et copiez. Ensuite, nous pouvons utiliser ceci comme point de départ pour notre page de blog et coller cela dans. Comme je l'ai mentionné précédemment, nous allons utiliser la même section d'en-tête. Si nous faisons défiler jusqu'à la fin de la balise d'en-tête de fermeture, qui est juste là, nous pouvons commencer par supprimer la section Bienvenue et supprimer section [inaudible] et continuer jusqu'au début de la section de pied de page, puis supprimer ça. À ce [inaudible], nous avons juste la section en-tête et pied de page. La première chose que je vais changer est le texte de la fonction. Nous allons juste changer ça pour Tranquil Spa Official Blog. On y va. Ensuite, nous allons utiliser un modèle Bootstrap pour nos blogs. Si nous nous dirigeons vers getbootstrap.com, puis sélectionnez la section Mise en route. Si nous faisons défiler vers le bas jusqu'aux modèles Bootstrap, vous verrez ces modèles par défaut fournis par Bootstrap. Il devrait y en avoir un qui s'appelle Blog. Donc, nous sélectionnons le Blog. Nous allons sélectionner certaines parties de ce site Web à utiliser comme modèle. La barre latérale est sur le côté droit et aussi le billet de blog sur la gauche. Cela va créer un bon point de départ pour notre blog. Pour obtenir le code pour cela, nous devons Ctrl-clic ou cliquer avec le bouton droit de la souris. Allez dans « Afficher la source de la page ». Nous allons copier le code avec le billet de blog sur la barre latérale. Si on fait défiler un peu plus loin. Nous devons copier le conteneur qui est juste en dessous du blog-masthead. Copiez le conteneur d'ouverture, puis vers le bas après les poteaux. Nous allons devoir copier jusqu'à la barre latérale. C' est à la fin de la barre latérale, la fin de la ligne, et à la fin du conteneur. Copiez toute notre section, puis retournez dans l'éditeur de texte entre l'en-tête et la section pied de page, nous allons coller cela dans. Pour rendre les choses un peu plus claires, nous pouvons ajouter quelques commentaires. Ajoutons le premier commentaire à la barre latérale. Si vous cherchez la fin du blog et collez-le juste en dessous. Modifiez une section de la barre latérale d'entité, puis faites défiler vers le haut. Puis jusqu'à l'article de blog d'ouverture, qui est juste au-dessus du conteneur. Collez ça. Cela peut être la section blog. Ensuite, nous allons jeter un oeil à ce que cela ressemble jusqu' à présent et nous verrons les changements que nous devons apporter. Nous avons notre section d'en-tête, puis nous avons l'exemple de billet de blog sur la gauche, sur la barre latérale exactement où nous voulions. Ensuite, nous avons la section pied de page en bas. De retour dans l'éditeur de texte, nous voulons juste supprimer le titre de blog bootstrap en haut. Faisons ça maintenant. Nous allons juste laisser la div complète avec l'en-tête du blog. Jetons un coup d'oeil à ça. C'est la rubrique enlevée. Par défaut sur le modèle Bootstrap que nous venons de copier. Il y a trois styles différents de billets de blog. Pour garder notre site Web cohérent, je vais juste utiliser le troisième billet de blog. Nous sommes retournés dans la section blog, et chaque article de blog individuel a une classe de billet de blog. Donc, nous savons où chaque bloc commence et se termine. C' est le premier. Je veux faire défiler jusqu'à la balise de fermeture pour le billet de blog et supprimer celui-ci. Je vais également supprimer le deuxième billet de blog. Recherchez la div de clôture, pour le billet de blog, puis sélectionnez cela et supprimez. Maintenant, il nous reste juste avec le troisième et dernier billet de blog. Pour le remettre, nous voulons copier le style, puis le coller deux fois ci-dessous. Vérifions dans le navigateur. Maintenant, nous avons des billets de blog gratuits de retour sur notre page, mais avec un style cohérent. Ensuite, nous allons changer le texte dans la section À propos de la barre latérale. Faites défiler jusqu'à la section de la barre latérale et si nous localisons la section À propos, nous pouvons simplement supprimer l'exemple de texte entre les balises P et mettons notre propre texte dans. Bienvenue sur le blog officiel Tranquil Spar. Ensuite, une deuxième phrase juste en dessous, également dans les balises P. Vous trouverez ici toutes les dernières nouvelles sur ce qui se passe ici au Spa. C' est la section A propos de nous. Conservera les archives comme il est pour l'instant et nous allons faire ce travail dynamiquement dans WordPress plus tard dans le cours. Dans la section Ailleurs, changeons-la en Catégories. Ajoutons quelques catégories là-dedans pour l'instant. Le premier, nous pouvons être changés en nouvelles, puis offres, puis enfin sans catégoriser. Ensuite, nous mettrons notre section sur les réseaux sociaux. Si nous copions le module div de la barre latérale et collez-le juste en dessous, nous pouvons changer les catégories pour Follow Us. Parce que nous avons tous les liens de médias sociaux déjà dans la section pied de page. On peut juste retourner dans notre page d'index. Peut localiser les icônes des réseaux sociaux tout en bas du pied de page. Si nous copions les cinq liens de médias sociaux, puis les collons dans la section du blog. Supprimez-les en premier et collez-les dans. Ensuite, sauvegardons cela et voyons à quoi il ressemble dans le navigateur. C' est un [inaudible]. On a le texte À propos de nous. Nous avons ensuite les Archives, la section Catégorie et la section des médias sociaux. C' est presque fini avec le blog HTML. Juste une autre petite chose que j'aimerais changer est si nous allons dans le conteneur pour le blog. Une chose que je voudrais changer pour le nombre de colonnes sur le blog sur la barre latérale. Par défaut, Bootstrap a la section blog prenant huit parties sur les appareils plus petits. J' aimerais que les nôtres soient 12 colonnes de large, appareils plus petits, puis passent à huit sur les appareils moyens. Ensuite, nous devons également descendre à la section de la barre latérale et faire la même chose pour le wrapper de la barre latérale. Pour rendre la barre latérale pleine largeur sur les appareils plus petits, nous pouvons changer cela en 12 colonnes, puis la changer en col-md-3. Pour prendre les trois colonnes sur les périphériques moyens. Ensuite, parce que nous changeons cela à moyen, nous changerons également le décalage sur les périphériques moyens à un. Tout comme un peu de distance entre le billet de blog sur la barre latérale, puis enregistrez cela. C' est juste terminé pour le HTML pour la section blog. Si vous me rejoignez dans la prochaine vidéo, nous continuerons avec notre page de blog en ajoutant le CSS. 12. Page de blog - CSS: Nous avons donc notre page de blog en place maintenant. Alors maintenant, faisons ressembler un peu plus au projet fini en ajoutant le CSS. Nous devons donc ajouter une image divisée en dessous du titre du blog pour chaque post. Nous ajouterons également le contour de chacune des publications individuelles sur la barre latérale. Maintenant, nous allons également ajouter des marges et des raquettes pour le rendre un peu meilleur. Commençons donc avec le titre du billet de blog. Nous devons rendre ce regard un peu meilleur et aussi à l'image juste en dessous. Donc, la façon dont nous faisons cela, si nous regardons chaque post individuel, le titre de niveau 2 a une classe de blog-post-titre. Alors passons à notre section CSS. Commençons donc par notre section de blog juste en dessous de la section Keep In Touch. Donc, je vais copier le commentaire et le coller dans. Nous appellerons ça la section Blog. Donc, nous allons commencer par le blog-post-titre. Donc, pour obtenir l'image d'arrière-plan juste en dessous du titre de niveau 2, nous pouvons ajouter l'URL d'arrière-plan. Ensuite, entre parenthèses, nous allons mettre le chemin vers notre diviseur violet que nous avons utilisé dans la page d'index. Donc, nous utilisons point point. Ensuite, dans le dossier Images, nous devrions avoir le diviseur purple.png. Ensuite, pour définir la position, ajoutons le centre et avec la barre latérale, puis définissez l'image pour ne pas répéter. Alors jetons un coup d'oeil à ça. Nous avons donc une image maintenant, mais elle répand toute la largeur du titre de niveau 2. Nous devons donc changer le positionnement. Donc, tout d'abord, nous allons définir la hauteur à 80 pixels et c'est la hauteur de la div complète. Ensuite, nous pouvons définir la taille de l'image et nous pouvons le faire en taille d'arrière-plan. Définissez donc la taille de l'arrière-plan sur 300 pixels de large et 40 pixels de haut. Jetons un coup d'oeil. Donc, ça a l'air un peu mieux, mais il chevauche toujours le texte. Déplaçons donc la position d'arrière-plan. Donc, tout d'abord, nous allons définir la position x pour être centre, puis le y, nous allons définir cela sur 35 pixels. Je devrais pousser un peu l'image vers le bas. On y va. Donc maintenant, l'image est claire du titre de niveau 2. Donc, ensuite, je vais juste ajouter un peu de marge au bas de la div juste pour repousser le texte. Nous allons donc définir la marge inférieure de 30 pixels. Ensuite, ajoutez le contour à la publication. Donc, si vous regardez le site fini, chaque article de blog individuel a le contour d'un pixel avec les coins arrondis. Alors faisons-le maintenant. Donc, si nous jetons un oeil en arrière dans le blog.html, vous pouvez voir que chaque billet de blog individuel a une classe de post de blog. Donc, copions cela et collez-le dans. Donc, tout d'abord, nous allons ajouter la bordure. Ça va être une ligne solide d'un pixel et la couleur va être 494646. Obtenons les coins arrondis, ajoutons le rayon de bordure de 10 pixels. Ensuite, nous ajouterons une marge. Donc, pour nous assurer que les billets de blog ont un espacement en haut et en bas, nous pouvons ajouter une marge de 30 pixels en haut et en bas et zéro à gauche et à droite. Ensuite, un peu de rembourrage juste à l'intérieur de la div de 20 pixels. Voyons voir à quoi ça ressemble. Donc ça a l'air beaucoup mieux maintenant. Ensuite, nous allons passer à la barre latérale. Je vais faire en sorte que les modules de la barre latérale ressemblent un peu plus aux billets de blog. Donc, tout d'abord, copions le commentaire. Cela peut être la barre latérale du blog. Donc, pour styliser la barre latérale, nous pouvons utiliser la classe du module de barre latérale parce que nous allons utiliser le même style de bordure que nous venons d'utiliser dans le billet de blog. Nous pouvons simplement copier ce CSS et le coller là-dedans. Jetons un coup d'oeil. On y va. Alors maintenant, les modules de la barre latérale, correspondent maintenant au style des billets de blog. C' est tout pour cette vidéo, merci de regarder et je vous verrai dans la prochaine vidéo où nous allons créer la page A propos du mur. 13. Page « À propos »: Passer de la page de blog que nous avons terminé dans la dernière vidéo. Dans cette vidéo, nous allons créer la page À propos de nous qui va être assez simple. Il va réutiliser l'en-tête et la section pied de page des vidéos précédentes. Nous allons avoir un titre de niveau 2 assez cohérent et diviser l'image. Nous allons le placer dans un texte Lorem Ipsum, vous pouvez changer pour n'importe quel texte que vous voulez. Ensuite, nous aurons également les liens que nous avons utilisés sur la page d'accueil vers différentes parties du site. Ensuite, la section Pied de page tout en bas. Alors passons à notre éditeur de texte et nous allons copier la page d'index. Donc, sélectionnez tout et copiez. Ensuite, commande et N ou Control N pour créer une nouvelle page. Collez cela dans et enregistrez ceci sous about.html, à nouveau au même niveau que la page d'index et enregistrez cela. Donc, à partir du bas de la page, nous pouvons garder la section Pied de page. Ce sera le même que la page d'index. Nous pouvons supprimer la section Boutique en ligne. On n'a pas besoin de ça. Nous pouvons également supprimer la section Dernières offres. On peut garder la section « Installations ». Ce sera nos quatre liens d'image. En fait, nous pouvons garder toute la section Bienvenue. Nous pouvons simplement réutiliser le titre de niveau 2 et l'image. Commençons donc par renommer la section Bienvenue en section À propos de nous. Mais assurez-vous que nous changeons l'identifiant de la section à environ. Ainsi, nous pouvons garder la même ligne de conteneur sur le même nombre de colonnes et changer le titre de niveau 2 sur A propos de nous. Je peux garder l'image pourpre. Alors voyons à quoi ça ressemble. C'est bon. Pour l'instant, nous pouvons résoudre les problèmes d'alignement dans CSS bientôt. Ensuite, nous voulons ajouter quelques paragraphes de texte. Donc, si nous allons sur Google et faisons une recherche pour Lorem Ipsum, je clique sur le premier lien et nous pouvons utiliser cette page, pour obtenir un exemple de texte. Donc, je vais juste générer deux paragraphes. Sélectionnez le premier paragraphe pour l'instant et copiez-le. Ensuite, après la balise de classe et de ligne pour le titre de niveau 2, je vais créer une ligne de plus. Donc, la div avec la classe de la ligne. Dans le premier paragraphe, je vais créer des balises P. Collez ensuite dans le paragraphe. Ensuite, juste en dessous de cela, nous allons créer un autre paragraphe. Ensuite, revenez à l'exemple de texte et copiez le deuxième paragraphe et collez-le dans. Vérifions ça sur le navigateur. On y va. Ensuite, nous allons nous diriger vers notre CSS personnalisé. Donc, pour commencer, nous voulons ajouter un remplissage tout en bas de la page juste pour séparer cette section du pied de page, le texte du lien n'est pas à sa place, donc nous allons définir le text-align pour être au centre. Nous allons également créer un peu de marge en haut et en bas des paragraphes. Donc, si nous revenons à notre custom.css, alors créez une section À propos de nous. Donc, donnez à cette section un identifiant d'environ. Commençons donc par ajouter le rembourrage au bas de la div. Je vais chercher les pixels, puis le texte aligner pour être au centre. Jetons un coup d'oeil. Ainsi, le text-align a aligné le texte au centre de la page. Il est également assuré que notre image de division est au milieu et aussi le texte du lien ci-dessous est maintenant 30 pixels de marge sur le bas de la div. Donc, la dernière chose que je veux faire est d'ajouter une marge en haut et en bas du texte. Donc, sélectionnons l'id about, puis les balises p. La seule chose que nous voulons faire dans ce p est d'ajouter une marge de 30 pixels en haut et en bas, et zéro à gauche et à droite. Puis actualisez. On y va. C' est donc le texte séparé et la page À propos de nous est terminée. Alors merci d'avoir regardé. Dans la vidéo suivante, nous allons créer la dernière page pour notre modèle Bootstrap, qui sera la page Contact. 14. Page de contact - HTML: Alors bienvenue. Dans cette vidéo, nous allons créer la dernière page de notre modèle Bootstrap, qui sera la page Contactez-nous. Donc c'est à ça que ça va ressembler. Nous avons donc la section Contactez-nous qui a deux conteneurs à six colonnes. Donc, celui sur le côté gauche sera pour les détails de l'adresse, puis sur le côté droit, nous allons intégrer un iFrame Google avec un emplacement au bord du lac, puis juste en dessous, nous allons ajouter une section pour nous envoyer un message, et cela couvrira toute la largeur de la page Web. Quand nous arriverons à la section WordPress, ce sera entièrement fonctionnel. Commençons donc dans notre éditeur de texte. Commençons par la page À propos, je vais copier tout cela, puis utiliser ceci comme point de départ pour notre nouvelle page, puis coller ceci dans. Sauvons ceci comme contact.html. Cette page utilisera le même pied de page, donc nous gardons toute la section de pied de page dedans. Pour l'instant, nous pouvons garder la section A propos de quel, mais nous pouvons simplement changer cela à la section Contactez-nous , puis changer l'identifiant de la section à Contact. L' en-tête de niveau 2 peut être changé en Contact et cela gardera cette ligne entière cohérente avec le reste du site Web, et la ligne suivante avec le texte. Nous pouvons supprimer tout le texte pour l'instant, nous n'en avons pas besoin, mais nous pouvons garder la ligne et nous allons le réutiliser. Donc, dans cette ligne, ce sera les sections de deux à six colonnes. Celui sur la gauche aura l'adresse, et la section sur la droite aura le Google Maps iFrame. Commençons donc par créer deux nouveaux divs avec une classe de col-sm-6. Je ferai exactement la même chose pour le Google iFrame. Donc, tout d'abord, nous allons commencer sur la div à gauche, qui aura les informations d'adresse. Tout d'abord, nous allons ajouter des CSS personnalisés. Donc, nous pouvons ajouter notre propre classe d'adresse et aussi, si nous regardons le site Web fini, vous pouvez voir que l'adresse a l'image de fond plus sombre et ceci provient d'un puits Bootstrap. Donc, ajoutons la classe de puits et l'adresse va être la même que la section de pied de page. Donc, si nous faisons défiler vers le bas de la page, puis copions les balises Address, et collez-le dans la div à gauche et c'est aussi une icône Font Awesome, qui est juste à gauche du nom. Alors ajoutons cela juste après la balise d'adresse d'ouverture. Ajoutons l'icône. Il a i tag avec une classe de fa fa-map-marker. Ensuite, juste en dessous de l'adresse, nous allons ajouter des informations de courriel et de téléphone. Donc, la section e-mail et téléphone a une icône Font Awesome. Donc, le premier est pour l'e-mail, et ceci est une classe de fa fa-envelope-o, puis juste après l'icône, nous pouvons ajouter le texte de l'e-mail. Je vais juste mettre un email générique là-dedans, alors écrivez à mail.com, puis ajoutez une balise de pause sur la deuxième icône. Ça pour le téléphone. Donc, cela a une classe de fa fa-téléphone et texte tout téléphone. Encore une fois, je vais juste mettre un numéro générique là-dedans. Alors jetons un coup d'oeil à cela, si nous retournons dans le navigateur et puis actualisons. Donc, nous avons la div sur le côté gauche montrant gentiment. Juste quelque chose à changer dans la section Email. On remonte. Donc nous avons juste quelques choses à changer là-bas, donc nous allons changer ça en deux points, puis en un symbole à, et nous y allons. Ensuite, nous devons créer l'iFrame sur le côté droit. Donc, si allez sur Google Maps, et si vous trouvez un emplacement agréable au bord du lac, et alors ce que vous devez faire est de cliquer sur le Menu, puis sélectionnez Partager ou Intégrer la carte et sélectionnez le deuxième onglet qui est Incorporer la carte, puis copiez le lien fourni par Google. Ensuite, si nous allons dans notre deuxième div, nous pouvons coller ceci dans et voyons à quoi cela ressemble. On y va, donc ça marche bien. Nous allons ajouter du CSS dans la prochaine vidéo pour cela, mais cela va bien pour l'instant. C' est donc cette ligne terminée. Ensuite, nous allons descendre et ajouter la section Envoyez-nous un message. Donc, revenons dans l'éditeur de texte, et si nous localisons la div avec la classe de ligne sur les installations, nous n'avons plus besoin de la classe d'installations, mais nous allons ajouter notre propre classe de zone de message, et puis tout le contenu entre cette rangée que nous pouvons nous débarrasser. Donc, si nous cherchons la classe dans le conteneur de ligne, ce sont toutes les images et tous les divs. Commençons par la section Message. Donc, créons une section pleine largeur. Nous allons donner à la div une classe de col-sm-12 et ensuite imbriquée à l'intérieur, nous allons également ajouter un div avec une classe de puits, sorte que cela se distingue un peu plus. Ensuite, à l'intérieur du puits, nous allons créer le formulaire HTML. Allons au projet fini et jetons un coup d'oeil. Donc, pour styliser, nous allons ajouter le texte en haut de Envoyez-nous un message, nous ajouterons ensuite des groupes de formulaires avec les entrées pour le nom, e-mail et la zone de texte du message, puis nous ajouterons un bouton Soumettre en bas. Commençons par le texte tout en haut. Nous ajouterons quelques balises p, puis le texte ou Envoyez-nous un message. Ensuite, juste en dessous, nous allons ajouter la première div avec la classe de form-group et c'est une classe Bootstrap que nous allons utiliser pour entourer les entrées libres. Donc, pour commencer, nous allons ajouter une entrée avec un type de texte et une classe de form-control, qui est également une classe Bootstrap. Ensuite, id du nom des entrées , puis le texte de l'espace réservé simplement de nom et fermer. Ensuite, nous allons ajouter une étiquette et cette étiquette sera pour les lecteurs d'écran. Alors donnons-lui une classe de sr-only. Pour lier cette étiquette à l'entrée à l'intérieur de la balise d'ouverture, nous pouvons ajouter la chute, puis la faire correspondre avec l'identifiant d'entrée du nom des entrées. Ensuite, entre les étiquettes d'étiquette, nous pouvons ajouter le texte pour apparaître de nom. Copions donc ce groupe de formulaires et nous allons l'utiliser pour la section Email, puis collez-le ci-dessous. Donc, dans ce groupe de formulaires, nous devons changer l'entrée pour être input-email et le texte pour être e-mail, puis dans les entrées, nous allons changer le nom d'entrée pour être input-email et le texte de l'espace réservé pour être e-mail, et puis collez dans le groupe de formulaires une fois de plus. Donc, cette fois, ce sera le message d'entrée et le nom du message. Au lieu d'utiliser l'entrée, nous pouvons simplement supprimer cela et cette fois parce que ce sera un message, nous pouvons ajouter une zone de texte. Ainsi, la zone de texte aura la classe de form-control. L' identifiant de l'input-message, qui est le même que l'étiquette, et le texte de l'espace réservé sera égal au message, puis le dernier attribut sera le nombre de lignes que nous voulons afficher par défaut. Donc, je vais régler ça pour être libre d'abord. Ensuite, pour fermer la section de la zone de texte, puis juste après la zone de texte, la dernière chose que je veux ajouter est l'entrée pour le bouton Soumettre. Entrées, donc nous avons un type de soumettre. Cela aura la classe familière que nous avons utilisée plus tôt de btn btn-default et cela aura les mêmes styles que nous avons utilisés sur les boutons de la page d'index. Enfin, la valeur, qui est le texte sur le bouton, sera Soumettre puis fermer et je devrais ajouter quelques commentaires de clôture. Ensuite, juste au-dessus de la ligne, il s'agit de la balise de fermeture de la section 12 colonnes. Ensuite, juste au-dessus de cela, c'est pour la classe de puits, alors sauvegardons cela et vérifions cela dans le navigateur. On y va. Il y a donc notre formulaire au bas de la page. C' est donc tout le HTML dont nous avons besoin pour la page Contactez-nous. Alors rejoignez-moi dans la prochaine vidéo et nous finirons la page de contact en ajoutant le CSS. 15. Page de contact - CSS: Bienvenue dans la dernière vidéo de cette section de modèle Bootstrap. Nous avons ajouté le code HTML pour la page Contactez-nous, puis nous ajouterons le CSS pour le faire ressembler un peu plus au projet final. Alors passons à notre CSS personnalisé. Si nous copions les commentaires, et que nous collons ceci juste en dessous de la section À propos de nous, nous allons appeler ceci la section Contactez-nous. Nous donnerons à cette section un identifiant de contact. Pour commencer, je vais ajouter un peu de rembourrage au bas de la div de 30 pixels, juste pour lui donner un peu d'espace depuis le pied de page. Nous allons également ajouter le texte aligné du centre, et cela nous assurera que l'image divisée est au milieu de la page. Ensuite, nous allons commencer dans la div de gauche. Commençons donc par ajouter un style pour la section d'adresse. Si nous revenons à la page de contact, nous avons ajouté une classe d'adresse personnalisée. Cette classe entourait l'ensemble de la section d'adresse. Donc, de retour dans le CSS personnalisé, nous pouvons l'utiliser maintenant. Tout d'abord, nous allons nous assurer que le texte est aligné à gauche. Nous allons ajouter un peu d'espace dans le haut, donc c'est une marge supérieure de 30 pixels. Pour rendre la taille de la police un peu plus grande, il suffit d' augmenter la taille de la police à 1,2 ems. Pour espacer les lignes, définissons la hauteur de la ligne à 2 ems. Jetons un coup d'oeil, et rafraîchissons. Ok, alors je veux changer la couleur des icônes pour correspondre au reste du site Web. Dans la classe d'adresse, nous pourrions cibler les icônes avec le I. Donc, changeons la couleur des icônes pour être 97689c. Jetons un coup d'oeil à ça. Ok, bien. Cela a changé l'icône en couleur violet rose. Tout va bien pour l'instant. Donc, la prochaine chose que je veux faire est de faire correspondre la marge de 30 pixels afin que l'iframe soit aligné en haut. Pour l'instant, l'iframe s'étire un peu trop grand, donc nous allons ajouter la largeur maximale de 100 pour cent pour garder cela dans le conteneur. Sélectionnez l'ID de contact et l'iframe. Correspondons le haut de la marge de la div gauche pour être de 30 pixels. Donc l'iframe ne devient pas trop grand, nous allons définir la largeur maximale à 100 pour cent. Sauvegardons et jetons un coup d'oeil à ça. Super, donc ça a l'air beaucoup mieux. Nous avons maintenant les deux divs alignés par le haut et aussi l'iframe ne s'étire pas trop large. Donc, la dernière chose que je veux changer est juste d'ajouter un peu de remplissage ou de marge sur le haut de la section des messages, donc cela reste cohérent avec le reste du site Web. Nous allons définir cette valeur à 30 pixels. Nous allons donc donner à cette section une classe personnalisée de zone de message. Nous avons juste besoin d'ajouter une marge sur le haut de 30 pixels et de rafraîchir. Grand site, semble bien sur la vue du bureau. Si nous réduisons le navigateur à la vue mobile, il n'y a pas grand-chose à faire, il y a juste une chose que je veux changer. Nous devons ajouter la ligne de texte pour être au centre de la vue mobile. Donc, nous pouvons le faire dans la requête média. Parce que nous avons également la classe de pied de page du centre text-align, nous pourrions simplement ajouter ceci à la fin. Donc, nous pouvons ajouter notre classe d'adresse, et enregistrer et jeter un oeil à cela. Super. Alors on y va. Donc ça a l'air beaucoup mieux. Maintenant, c'est la finition du modèle Bootstrap pour nos projets, et c'est la fin de cette section. Alors merci d'avoir écouté. Si vous me rejoignez dans la section suivante, nous pouvons commencer par convertir notre modèle Bootstrap en WordPress. 16. Configuration du Localhost et installation de WordPress: Bienvenue dans cette toute nouvelle section lorsque j'entre dans la partie passionnante du cours où nous allons commencer à convertir notre modèle Bootstrap en un thème WordPress. Juste avant de commencer, [inaudible] nous devrons télécharger un serveur web sur notre machine. Pour développer des sites Web WordPress sur notre machine localement, nous avons besoin d'installer un serveur web. Si vous allez vers MAMP, M-A-M-P, .info, et une build pour installer la dernière version de MAMP. Si vous cliquez simplement sur le bouton de téléchargement, cela est disponible gratuitement sur Mac et Windows. Cliquez sur le bouton de téléchargement pour commencer, puis téléchargez la dernière version. Jusqu' à présent, nous avons construit notre site Web dans Bootstrap, qui inclut HTML, CSS et JavaScript, tous fonctionnant dans le navigateur. Nous n'avons pas besoin d'outils spéciaux pour que le site apparaisse dans le navigateur. Mais parce que nous utilisons WordPress et WordPress est construit en PHP et utilise une base de données MySQL, nous devons installer MAMP pour créer un serveur local sur notre machine. Cela nous permettra de construire des sites WordPress sans les avoir en direct sur internet. Il suffit de mettre la vidéo en pause pendant le téléchargement et nous vous verrons dans une minute. Bienvenue de retour. Espérons que vous avez maintenant MAMP téléchargé. Si nous passons simplement à nos téléchargements et double-cliquez sur l'installateur, cela devrait vous conduire à travers le processus d'installation. Il devrait être assez similaire sur Mac et Windows. Vous devriez obtenir le script d'installation. Si nous continuons à travers et acceptons la licence et l'accord. Ensuite, nous allons installer pour tous les utilisateurs sur cet ordinateur. Ensuite, cliquez sur installer, et cela ne devrait pas prendre trop de temps à installer, donc nous donnons juste un moment pour terminer l'installation. Nous avons un MAMP et MAMP Pro a été installé avec succès. Nous allons juste utiliser la version gratuite MAMP. C' est tout ce dont vous aurez besoin pour ce cours, nous n'avons pas besoin de payer pour la version pro. Une fois que l'installation est terminée, il suffit de cliquer sur Fermer. Maintenant, nous avons MAMP installé. Si vous utilisez un Mac, si vous passez aux applications, il devrait être enregistré à l'intérieur. Si vous utilisez un ordinateur Windows, il doit être stocké à votre emplacement habituel, tel que le lecteur C. Si nous passons à MAMP et double-cliquez sur le MAMP avec l'icône de l'éléphant. Ensuite, vous devriez obtenir une fenêtre qui ressemble à ceci. Si nous allons dans les préférences, puis cliquez sur l'onglet ports, les ports Apache, qui est le serveur Web est utilisé sur le port 8888. Ensuite, si vous cliquez sur le serveur web. Par défaut, le chemin d'accès de la racine du document doit être htdocs. Si ce n'est pas le cas, il suffit de cliquer sur le dossier. Ensuite, une fois que vous êtes dans le dossier, si vous venez de trouver votre chemin vers le lecteur où MAMP est installé. Ensuite, si on descend pour trouver MAMP et puis s'ouvre. Ensuite, si vous recherchez le dossier htdocs, sélectionnez cela. Tout site Web pour lequel nous allons utiliser PHP, nous devons mettre le dossier du projet dans le htdocs, mais nous le ferons en un peu. Si nous commençons par cliquer sur Démarrer les serveurs et, espérons-le, si tout est installé correctement, vous devriez obtenir la page de démarrage qui vous indique que MAMP a été installé avec succès. Ok, super. Maintenant, MAMP est installé. Si nous nous dirigeons vers Google et si vous recherchez WordPress. Ensuite, une fois que c'est recherché, nous devons aller à wordpress.org. Si vous voulez jeter un oeil à la page d'accueil WordPress, hésitez pas à le faire. Mais je vais juste cliquer sur télécharger WordPress, puis télécharger la dernière version, qui est actuellement 4.3. WordPress ne prend pas du tout longtemps à installer. Cela ne prend que 10-15 secondes si vous avez une bonne connexion Internet. Une fois que c'est téléchargé, nous pouvons simplement nous débarrasser de cela, puis dirigez-vous vers les téléchargements, puis cliquez sur le fichier zip WordPress et décompressez cela. Maintenant, voici notre nouveau dossier de projet pour notre site Web. Je vais renommer ce tranquil-wp. Juste pour qu'il n'y ait pas de confusion, le dossier Bootstrap original, je vais changer cela en tranquil-bs. Ensuite, nous devons déplacer cela dans nos htdocs. Je vais juste ouvrir une nouvelle fenêtre. Ensuite, je vais trouver les htdocs. Si nous retournons dans le dossier MAMP, puis dans htdocs, puis faites glisser dans htdocs le dossier WordPress. Maintenant, nous avons WordPress installé dans notre racine de document ou les htdocs. Si nous revenons à MAMP puis cliquez sur la page de démarrage ouverte, cela devrait nous ramener à l'écran d'accueil du MAMP. Ensuite, si cliquez sur les outils en haut et cliquez sur phpMyAdmin. Cela devrait nous conduire à la zone d'administration pour créer des bases de données. Nous devons créer une nouvelle base de données pour WordPress. De la façon dont nous faisons cela, si nous sélectionnons l'onglet bases en haut, puis sous Créer la base de données, je vais mettre notre nom de base de données là. Je vais appeler le mien tranquil-spa, puis cliquez sur créer. Ensuite, en bas à gauche, nous devrions obtenir la base de données tranquil-spa apparaître dans la liste. Ensuite, nous allons créer un utilisateur pour cette base de données. Ensuite, si nous allons dans les onglets en haut de la page et cliquez sur les privilèges, puis nous allons sélectionner le nouvel utilisateur, ou ajouter l'utilisateur, qui est en bas. Ensuite, nous pouvons entrer les informations de l'utilisateur. Le nom d'utilisateur nous donnera le champ de texte. Je vais appeler mon utilisateur spa-admin. Ensuite, pour l'hôte, nous voulons sélectionner local. Ensuite, vous pouvez entrer le mot de passe de votre choix ou vous pouvez générer un mot de passe. Assurez-vous que si vous générez un mot de passe que vous le copiez. Nous allons l'utiliser juste dans un instant, puis faites défiler la page vers le bas et appuyez sur go. Il y a notre utilisateur spa-admin créé. Ensuite, nous devons revenir à WordPress et dire à WordPress les informations de base de données et les informations utilisateur que nous venons de créer. Nous fermons le navigateur pour l'instant et ouvrons votre éditeur de texte. Ensuite, si nous revenons aux htdocs où nous avons enregistré notre dossier tranquil-wp. Si vous faites simplement glisser cela dans l'éditeur de texte. Il est configuré la base de données WordPress. Si nous allons dans le dossier WordPress et sélectionnez wp-config-sample. Ensuite, nous pouvons entrer les informations de notre base de données. Faites défiler jusqu'au nom de la base de données. Ensuite, vous pouvez voir que nous avons juste besoin d'inclure notre nom de base de données ici. Supprimez cela. Nous avons appelé notre base de données tranquil-spa, si tranquil-spa. Ensuite, sous le nom de la base de données, nous pouvons inclure le nom d'utilisateur. Supprimez le nom d'utilisateur ici. Nous avons appelé notre utilisateur spa-admin. Mettez dans spa-admin ou quel que soit le nom que vous avez créé. Le mot de passe, que vous auriez dû copier dans le presse-papiers. On peut coller ça. Nous utilisons le localhost, donc nous pouvons simplement laisser l'hôte tel qu'il est. Ensuite, nous devons générer les clés sur les sels pour l'authentification. Où est le lien du site Web, que nous venons de copier ceci. Ensuite, dirigez-vous vers votre navigateur Web et collez-le dans. Cela devrait générer les clés qui sont uniques. Sélectionnez tout sur la page et copiez. Ensuite, remplacez-les par ceux que nous venons de copier. Collez les dedans. Ensuite, la dernière chose que nous devons faire à l'intérieur de ce fichier est de faire défiler vers le bas de la page. Nous pouvons changer le préfixe de table de base de données à partir du WP standard. Je vais changer le mien en tranquildb. Ça peut être tout ce que tu veux, ça n'a pas vraiment d'importance. Sauve ça. Ensuite, la dernière chose que nous devons faire pour ce fichier est de supprimer le mot exemple. Nous devons le renommer wp-config.php. Assurez-vous que c'est sauvegardé. Si vous vous souvenez quand nous avons téléchargé MAMP pour la première fois, nous sommes entrés dans les préférences sur les ports. Si vous vous souvenez que le port était 8888. Nous pouvons l'utiliser pour accéder à notre navigateur Web. Si vous allez dans le navigateur Web, puis tapez localhost, puis un deux-points, puis 8888 et puis entrez, cela devrait vous donner un index de tout le site Web qui est stocké dans le htdocs. Pour l'instant, nous n'avons que le spa tranquille. Si nous cliquons dessus, et j'espère que tout s'est bien passé pour vous, vous pouvez obtenir le script d'installation WordPress. C' est très simple à suivre. Tout d'abord, nous devons sélectionner notre langue, dont la mienne est l'anglais, le Royaume-Uni, puis sélectionner continuer. Ensuite, nous avons juste besoin d'un peu d'informations sur le site. Le titre du site sera Tranquil Spa. J' ai déjà mon nom d'utilisateur enregistré comme tranquil_admin, puis créez un mot de passe. Gardez à l'esprit que ce mot de passe va être différent de votre base de données. Cela va être de se connecter à l'administrateur WordPress. Créez un mot de passe fort de votre choix. Ensuite, tapez un e-mail, puis la confidentialité, nous pouvons décocher cela pour l'instant. Nous pouvons changer cela plus tard dans les paramètres une fois que nous avons terminé le site Web, puis cliquez sur installer WordPress. Là, nous allons, il démarre WordPress installé. C' est à quel point c'est rapide et facile de démarrer WordPress sur votre machine. Si vous venez d'aller à la connexion et nous [inaudible] pour aller au panneau de contrôle. Mettez le nom d'utilisateur et le mot de passe dans, et nous avons été emmenés sur le tableau de bord WordPress. Si vous voulez vérifier comment le site WordPress est à la recherche jusqu'à présent en utilisant le thème par défaut, nous pouvons simplement cliquer sur l'icône de la maison Tranquil Spa en haut. Ceci est notre site web, et c'est juste le thème standard qui vient avec WordPress. On y va, c'est WordPress maintenant installé. Merci de regarder, et nous vous verrons dans la prochaine vidéo où nous commencerons à importer nos fichiers Bootstrap dans WordPress. 17. Dossier de thème WordPress: D' accord. Maintenant, nous avons notre hôte local et WordPress tous installés. Nous allons maintenant travailler sur l'importance des dossiers bootstrap dans notre thème personnalisé. Si nous revenons au dossier MAMP puis sous les docs HT, nous pouvons trouver notre dossier tranquilwp. Ouvre ça. Ce sont tous les fichiers et dossiers inclus avec WordPress par défaut. La plupart du travail que nous allons faire pour le thème personnalisé sera dans le contenu WP, puis dans le dossier themes. Dans le dossier themes, il y a les thèmes standard par défaut qui sont inclus avec WordPress. 2015 est la plus récente. C' est celui que nous voyons quand nous avons ouvert notre site Web avant. Dans le dossier des thèmes, commençons avec notre thème personnalisé. Si vous allez dans un nouveau dossier, je vais appeler ça tranquilwp. Si nous ouvrons le dossier tranquilwp et aussi notre dossier bootstrap, nous pouvons commencer à mettre certains dossiers dans notre thème personnalisé. Je vais juste sélectionner tous les fichiers pour l'instant et copier, puis les coller dans notre dossier. Nous n'avons pas besoin du blog ou de la page de contact juste pour l'instant. Je vais juste me débarrasser de ça. La page d'index, nous devons changer cela à index.php afin que WordPress le reconnaisse. Nous utilisons une extension PHP là-bas. Nous devons garder les images, le JavaScript, le CSS sur le dossier des polices. Mais dans le dossier CSS, nous devons déplacer notre fichier CSS personnalisé et nous devrons le déplacer pour être au même niveau que notre page d'index. Si nous sélectionnons le CSS personnalisé, et il est remonté d'un niveau, et avec la page d'index sur les dossiers, parce que c'est là que WordPress exige que le CSS soit. En outre, il nécessite style.css, plutôt que la coutume. Nous allons changer cela en style.css. En plus d'être notre feuille de style personnalisée dans notre style.css, nous pouvons également inclure quelques informations WordPress importantes sur notre thème. Si nous retournons dans notre éditeur de texte, vous devrez peut-être actualiser car nous avons modifié certains fichiers et dossiers. Sur le tranquilwp, si nous allons au contenu, aux thèmes, puis tranquilwp, nous pouvons alors trouver la feuille de style que nous venons de renommer. Tout en haut de la page, si nous faisons juste de l'espace, nous devons retourner dans le navigateur Web. Alors dirigez-vous vers Google. Je vais juste faire une recherche. Si vous recherchez codex, codex est essentiellement la documentation WordPress. Nous l'utilisons beaucoup dans cette section, pour trouver beaucoup d'informations telles que les fonctions PHP. Pour l'instant, si vous recherchez simplement les feuilles de style de thème codex, il est donc un lien supérieur dont nous avons besoin, mais si vous cliquez simplement sur le saut à la feuille de style de thème, et cela va passer à la partie de la page dont nous avons besoin. Sous l'en-tête de feuille de style thème, WordPress nous donne un exemple du commentaire qu'il doit inclure en haut du style.css. Copions cet échantillon, puis collez-le en haut de notre feuille de style. Débarrassez-vous de cette barre latérale et nous pouvons commencer à éditer les informations. Tout en haut, sous le nom de thème, nous allons mettre notre nom de thème qui est WP tranquille. Ensuite, le site web thématique. Tu peux y mettre tout ce que tu veux pour l'instant. Tu veux juste mettre quelque chose de générique là-dedans pour l'instant. tranquilspatheme.com. Sur l'auteur, vous indiquez votre nom ou celui de votre entreprise. Si vous avez un site web, vous pouvez aussi le mettre là-dedans. Ensuite, vous pouvez mettre dans une description pour le thème. Je vais juste mettre dans un thème WordPress spa entièrement réactif, construit en utilisant Bootstrap 3. On y va. La version, nous pouvons partir à 1.0, et la licence que nous pouvons laisser. Nous allons changer certaines balises. Maintenant, gardez à l'esprit que les tags qui ont été mis dans la feuille de style, nous ne pouvons pas simplement mettre n'importe quelle étiquette que nous choisissons. Ils doivent être des balises approuvées par WordPress, que vous pouvez trouver dans le codex. Pour l'instant, je vais juste ajouter la barre latérale droite. Ensuite, ceux-ci sont séparés par des virgules. Mises en page réactives , en-tête personnalisé et menu personnalisé, images en vedette. Puis à la fin, la traduction vraiment. Maintenant, certains d'entre eux, vous ne comprenez peut-être pas ce qu'ils sont, mais au fur et à mesure que nous suivrons le cours, vous comprendrez de plus en plus ce que chacun d'eux est. Nous ajouterons des éléments tels que des images en vedette et nous préparons le thème à traduire dans différentes langues s'ils le souhaitent. Le domaine de texte, nous allons en faire le même nom que notre nom de thème. Ça va être tranquille. Nous l'utiliserons plus tard dans ce cours lorsque nous préparerons le thème pour la traduction. Nous pouvons supprimer les informations en bas. On y va. C'est tout ce que nous devons inclure dans la feuille de style pour l'instant. Sauve ça. Si nous revenons à notre dossier de thème, qui est dans les docs HT, puis ouvrez-le, puis allez, à nouveau, au contenu WordPress, thèmes, et tranquilwp. La dernière chose que nous devons faire avant d'activer notre thème dans WordPress est, si nous allons dans le dossier images dans notre thème personnalisé, si nous localisons le screenshot.png, nous devons déplacer cela sur un niveau dans le même que nous avons déplacé notre feuille de style dans avant. Ensuite, si nous allons à notre navigateur web, puis retour à notre tableau de bord WordPress. Si nous allons au Spa Tranquil dans le coin et survolons, puis cliquez sur le tableau de bord. Fondamentalement, le tableau de bord est vraiment simple à utiliser. le côté gauche, nous avons une liste de tous les liens où nous pouvons ajouter divers articles, pages. Nous pouvons changer des choses telles que les thèmes. Si vous descendez à l'apparence et sélectionnez des thèmes, comme vous pouvez le voir, actif est le thème 2015, mais nous voulons utiliser le thème Tranquil Spa que nous venons de créer. Si tout se passe bien, vous devriez voir votre thème apparaître sur cette page, puis cliquer sur Activer. On y va. Maintenant, si nous cliquons sur l'icône Accueil en haut à gauche, sur le site Visiter, j'espère que tout s'est bien passé pour vous, et votre thème devrait maintenant être activé. Comme vous pouvez le voir, tout fonctionne, mais il y a encore beaucoup de travail à faire pour le faire ressembler à notre modèle Bootstrap. Commençons par ajouter certains des dossiers dont nous avons besoin. De retour dans notre dossier thématique, dans les documents HT, une chose que vous pourriez vouloir faire est de configurer un raccourci sur votre bureau, ou si vous utilisez un MAC, vous pouvez ajouter l'une des balises de couleur afin que vous n'ayez pas besoin d' aller à travers le processus de recherche à chaque fois. MAMP, puis les docs HT, tranquilwp, contenu, thèmes, puis tranquilwp. Pour ce dossier tranquille, je vais juste créer la balise bleue, donc je peux simplement sélectionner le bleu et le trouver beaucoup plus rapidement. Si vous utilisez une machine Windows, vous voudrez peut-être enregistrer un raccourci sur votre bureau. Nous devons ajouter quelques fichiers de base dans notre dossier. Si nous passons aux parenthèses et faisons apparaître la barre latérale, je vais appuyer sur Commande et N pour créer une nouvelle page. La première page que nous devons ajouter est le header.php. Enregistrez simplement cela sous header.php, et assurez-vous que cela est inclus dans notre thème personnalisé, ainsi que la page d'index. Nous allons enregistrer ça pour l'instant, puis une nouvelle page. Enregistrez ceci comme footer.php. Ensuite, juste deux de plus à créer. Le prochain sera pour la barre latérale, et sauvegardons le sidebar.php. Je vais utiliser un raccourci cette fois, et l'enregistrer avec la page d'index. Enfin, le dernier fichier que nous allons enregistrer est pour les fonctions, donc une nouvelle page et enregistrez-le sous functions.php. Encore une fois, assurez-vous qu'il est au bon endroit. C' est tout pour l'instant. Je te verrai dans la prochaine vidéo. 18. Page d'index: D' accord. Bienvenue de retour. Dans cette vidéo, nous allons regarder la page d'index et nous allons commencer à réorganiser l'en-tête et le pied de page, et ajouter du contenu à notre fichier de fonctions. D' accord. Donc quelques choses avant qu'on commence. Si vous vous assurez que le MAMP, vous avez téléchargé dans la dernière vidéo est en cours d'exécution. Donc, si vous dites démarrer les serveurs, assurez-vous que vous cliquez dessus pour commencer. Ensuite, dans votre éditeur de texte, si vous ouvrez le tranquilwp, qui est le dossier de thème du projet, puis dirigez-vous vers votre navigateur Web, puis si vous tapez l'hôte local ,:8888 , puis slash forward tranquil-wp, et cela nous mènera à la page d'index sur laquelle nous devons commencer à travailler. Si vous avez besoin de revenir au tableau de bord WordPress, il suffit d'ajouter /admin à la fin de l'URL, et cela nous ramènera au tableau de bord. D' accord. Alors commençons. Dans l'éditeur de texte, nous avons créé notre en-tête et les fichiers de pied de page dans la dernière vidéo. Donc, nous allons mettre à la fois l'en-tête et le pied de page dans ces fichiers. Nous allons donc prendre l'en-tête et le pied de page de la page d'index. Donc, si vous allez dans le index.php, puis faites défiler vers le haut de la page, nous devons copier ou citer tout le contenu à partir du haut de la page Web, jusqu'à ce que nous arrivions à la balise d'en-tête de fermeture, qui est juste là. Donc copiez tout cela directement vers le haut, puis coupez cela, et maintenant la section d'en-tête va aller dans son propre fichier, qui est le header.php. Donc, collez cela là et enregistrez, et puis si nous revenons dans la page d'index, nous ferons exactement la même chose avec la section pied de page. Donc, faites défiler jusqu'au bas de la page, puis en dessous de la section boutique en ligne, si vous recherchez le commentaire de pied de page, puis coupez tout le contenu jusqu'à la toute fin de la page d'index. Alors coupez cela, puis dirigez-vous vers le footer.php, et collez-le dans et enregistrez. D' accord. Donc, si nous revenons au index.php. Donc, ce qui nous reste est juste le contenu principal de la page Web. Nous avons retiré l'en-tête et la section pied de page. Donc, parce que maintenant l'en-tête et le pied de page sont dans leurs propres fichiers, nous devons les relier à la page d'index. Pas tout à fait simple à faire. Si nous revenons au sommet où se trouvait la section d'en-tête, nous allons commencer à utiliser du PHP. Donc, pour commencer avec PHP, nous devons d' abord avoir le nom du fichier avec l'extension PHP, puis pour utiliser PHP dans la page, nous utilisons un crochet d'angle d'ouverture puis un point d'interrogation, puis PHP. C' est donc la balise d'ouverture et la balise de fermeture est le point d'interrogation, puis le crochet d'angle de fermeture. D' accord. Ensuite, entre le support d'ouverture et de fermeture, nous utilisons la fonction d'en-tête WordPress get. Donc get_header. Parce que c'est la fonction, nous utilisons les crochets bouclés, puis un point-virgule à la fin, et ensuite nous faisons exactement la même chose mais utilisons get pied de page tout en bas de la page. Donc encore une fois, nous allons utiliser les balises d'ouverture et de fermeture PHP, puis à l'intérieur des balises, nous utilisons une fonction WordPress get foot, les crochets, puis le point-virgule. Donc efficacement ce que nous avons créé est un en-tête et un modèle de pied de page, et chaque fois que nous voulons les réutiliser dans WordPress, plutôt que de retaper sur le même code encore et encore, nous pouvons simplement utiliser le PHP et utiliser l'en-tête get ou la fonction get pied de page. Donc et enregistrez la page d'index, puis ensuite nous devons passer à notre functions.php, et parce que toutes les fonctions vont être en PHP, nous devons nous assurer que tout le contenu cette page est entre l'ouverture et fermeture des balises PHP. Commençons donc par créer une fonction PHP. Si vous n'avez pas utilisé PHP auparavant, il utilise le mot-clé function. Une fonction est fondamentalement juste un morceau de code auquel nous donnons un nom, et nous pouvons l'appeler quand nous en avons besoin. Donc, pour configurer cela, utilisez la fonction, puis le nom après, qui est tranquilwp_setup, puis à la fin du nom de la fonction, nous utilisons les crochets bouclés, puis utilisons un ensemble d'accolades, et toutes les informations que nous mettons entre les accolades va être le code qui est exécuté lorsque le thème est configuré. Donc, nous allons ajouter plus à cela plus tard, mais pour l'instant, nous allons juste ajouter un support de thème pour les fichiers RSS ou automatiques. Donc, nous faisons cela par add_theme_support, et dans les guillemets, tapez automatic-feed-links, puis un point-virgule à la fin, et assurez-vous que c'est le flux là. Assurez-vous donc que les informations RSS arrivent à la section de tête correctement. Nous allons également ajouter la prise en charge des thèmes pour la balise title, ce qui permet à la fois aux thèmes et aux plug-ins d'accéder au titre du document, afin que nous puissions le modifier dynamiquement. Donc add_theme_support, et n'oubliez pas les guillemets là-dedans. Celui-ci va être la balise de titre. Donc titre-tag. Donc, ensuite, nous devons dire à WordPress d'exécuter cette fonction lors de la configuration du thème. Donc, si nous sortons des accolades et alors nous devons ajouter une action et le support, puis le point-virgule à la fin. Cela va prendre deux paramètres. Donc, le premier dans les guillemets est après _setup_theme, puis séparé par une virgule, nous devons mettre le nom de la fonction, qui est tranquilwp setup. Donc, nous allons simplement copier cela et coller cela entre les guillemets. Juste un morceau de PHP que nous devons ajouter dans le fichier de fonctions avant de passer à autre chose, c'est si nous allons au sommet. D' accord. Donc, nous allons utiliser une instruction PHP if. Donc, si vous n'en avez pas vu un avant, il n'y a vraiment rien à craindre. Je vais commencer par taper et ensuite on parlera exactement de ce qui se passe. Donc nous allons juste vérifier si une condition est remplie, et si c'est le cas, nous exécutons le morceau de code entre ces accolades. Donc, le morceau de code que nous voulons exécuter est que nous voulons ajouter une variable appelée la largeur du contenu, et cela va être réglé à 660 pixels. Cette valeur va contrôler la largeur maximale de tout morceau de contenu qui est dans le thème WordPress, et nous l'utilisons pour nous assurer que l'utilisateur ne peut pas télécharger quelque chose comme une image qui est beaucoup trop grande pour la conception et provoque des problèmes de mise en page, puis nous mettrons notre condition entre les crochets en haut. Donc, je vais utiliser le point d'exclamation puis isset puis entre deux crochets plus bouclés, nous allons mettre notre variable qui est la largeur du contenu. Donc, cette instruction if vérifierait normalement si cette variable existe en utilisant isset, mais parce que nous utilisons le point d'exclamation avant, il vérifie le contraire. Donc, si la largeur de contenu variable n'est pas définie, utilisez la variable entre ces accolades et assurez-vous que le contenu n'est pas plus grand que 660 pixels de large. D' accord. Voilà donc les fonctions terminées pour cette vidéo. Nous allons ajouter plus à cela au fur et à mesure que nous progressons dans le cours, mais juste une chose que je veux vous montrer avant de terminer cette vidéo est maintenant passons à notre PHP sur notre site Web. Nous devons nous assurer que le débogage est activé, et je vais juste vous montrer exactement pourquoi. Si nous allons sur Chrome, puis nous allons visiter le site, c'est à quoi le site regarde maintenant, il ne semble pas très joli, mais il fonctionne. Donc, si nous passons à notre page d'index et puis faisons une erreur de frappe, donc par exemple si nous allons au PHP en haut de la page, et par exemple, si nous ne mettions pas la balise de fermeture après PHP, puis si nous actualisons le navigateur, vous pouvez voir que nous avons un écran blanc. Donc, parce que nous avons un écran blanc, nous savons que nous avons fait une erreur quelque part, mais nous n'avons aucune indication pour nous montrer exactement où nous nous sommes trompés. Donc, pour nous donner une indication de exactement quelle ligne de code nous avons mal tourné, nous devons aller dans notre dossier WordPress, qui est dans le htdocs. Donc, nous trouvons MAMP, htdocs, tranquilwp, et ensuite nous devons retourner dans le fichier de configuration, où nous voyons les informations de notre base de données. Donc il suffit de double-cliquer pour ouvrir cela, puis si vous faites défiler vers le bas tous les mots de passe et les informations de base de données, puis les clés et les sels. En bas de la page, si vous recherchez le débogage WP define, par défaut, il est défini sur false. Donc, nous allons définir ceci sur true, puis enregistrer cela, mais n'oubliez pas de le changer à false si vous voulez télécharger ceci sur un serveur Web. Alors enregistrez cela et puis actualisez dans Chrome, puis cela nous donnera une ligne d'erreur, et il nous indique exactement où nous avons mal tourné. Donc, dans notre page d'index à la ligne 3. Jetons un coup d'oeil. Donc, nous pouvons voir que le problème était sur la première ligne, mais WordPress n'a pas découvert qu'il y avait un problème jusqu'à ce qu'il trouve du HTML sur la ligne trois. Donc, il peut ne pas être exactement sur la ligne, mais cela donne une bonne indication exactement où se trouve le problème. Donc, nous pouvons simplement fermer le PHP, enregistrer puis rafraîchir, et tout devrait fonctionner à nouveau. D' accord. C'est la fin de cette vidéo. Je te verrai dans la prochaine vidéo. Nous allons commencer à travailler sur l'en-tête et le pied de page. 19. En-tête et pied de page: Maintenant, nous allons rendre notre section de tête et le pied de page plus dynamiques, compatibles avec WordPress. Retour dans un éditeur de texte si vous allez dans le fichier header.php. Pour le moment, nous n'avons que du HTML statique. Nous allons vouloir rendre cette dynamique en ajoutant quelques fonctions WordPress et quelques PHP. Commençons par rendre la langue dynamique. Plutôt que d'avoir la langue en haut, nous allons ouvrir les balises PHP exactement de la même manière que nous l'avions fait auparavant. Ensuite, dans le PHP, nous allons ajouter language_attributes, et puis parce que c'est une fonction, nous utilisons les crochets et le point-virgule, ce qui permet à WordPress d'ajouter la langue dynamiquement, et Ensuite, nous allons ajouter le jeu de caractères dynamiquement. Plutôt que d'avoir le jeu de caractères égal à UTF-8, nous pouvons permettre à WordPress de le faire dynamiquement. Encore une fois, les balises d'ouverture et de fermeture PHP. Maintenant, si vous voulez les copier et les coller dans plutôt que de retaper, vous pouvez le faire. Je vais utiliser la fonction bloginfo, puis à l'intérieur des crochets, puis nous ajoutons le charset entre les guillemets, puis un point-virgule à la fin. Maintenant, soyez prudent lorsque vous tapez les fonctions PHP parce que, comme vous l'avez vu dans la dernière vidéo avec le débogage, si nous avons juste un caractère mal typé ou hors de place, les chances sont que vous allez obtenir un écran blanc, alors faites attention à cela, et alors plutôt que notre titre statique Tranquil Spa, modifions cela pour permettre à WordPress d'inclure cela. Encore une fois, entre les balises PHP, nous pouvons ajouter le titre WordPress avec wp_title, puis à l'intérieur des crochets, il suffit de laisser les guillemets vides, puis le point-virgule à la fin, puis faites défiler vers le bas juste avant la tête de fermeture juste à la fin là. Si nous trouvons juste la ligne juste avant, et alors je ne vais pas inclure la fonction wp_head, ce qui permet essentiellement à WordPress d'ajouter des scripts aux données dans la section head quand il en a besoin. Encore une fois, entre les balises PHP en tapant wp_head, puis les crochets et le point-virgule. Ensuite, dans la balise body d'ouverture, nous pouvons ajouter la classe de corps WordPress. Entre PHP, nous utilisons la fonction body_class, et les crochets et le point-virgule, puis WordPress ajoutera la classe body_class dans la section droite. Faites défiler vers le bas jusqu'à la section d'en-tête. La prochaine chose que nous allons changer, c'est le spa Tranquil. Le lien Tranquil Spa est celui en haut à gauche de la page d'accueil, qui est notre section logo et notre lien vers la page d'accueil. Il y a deux morceaux de PHP que nous devons inclure ici. Je vais juste me débarrasser de la barre latérale pour l'instant juste pour nous donner plus de place. Tout d'abord, nous devons changer le nom du site, qui est Tranquil Spa. Nous devons inclure le PHP pour rendre ce nom dynamique. Collez dans les balises d'ouverture et de fermeture PHP, et je vais le mettre sur une ligne séparée juste pour que ce soit plus clair. On y va. Entre PHP. PHP utilise le nom echo pour faire écho au contenu du navigateur, puis nous utilisons la fonction WordPress de get_bloginfo. Le bloginfo que nous voulons est le nom du site. Mettez en nommage là et le point-virgule à la fin. Maintenant, WordPress est généralement au nom de notre site, qui est Tranquil Spa. Ce sera le texte qui apparaît dans le coin supérieur gauche où se trouve le logo. Mais nous devons faire de ce texte un lien actif. Parce que nous n'avons plus de index.html, parce que nous utilisons PHP. Nous devons dire à WordPress de relier ce nom à notre home_url. Encore une fois, nous allons le faire entre les balises PHP, puis écho. Il y a quelques façons différentes que nous pouvons faire cela dans WordPress. Mais je vais utiliser l'URL d'échappement, qui nettoie l'URL et m'assurer qu'il n'y a pas de code malveillant là-dedans. Echo esc_url. Ensuite, entre parenthèses après, nous allons mettre le lien vers le home_url. Ensuite, l'ouverture et la fermeture des crochets bouclés à nouveau, puis le point-virgule. Il y a nos deux morceaux de PHP. Le premier fournit le lien vers home_url, et le second fournit le nom du site Web. Puis remontez à la section de la tête. Nous allons ajouter les liens CSS d'une manière légèrement différente. Si nous supprimons le lien pour le CSS personnalisé et aussi le CSS Bootstrap. Nous les ajouterons dans le fichier functions dans un instant. Enregistrez cela, puis ouvrez notre barre latérale et dirigez-vous vers le footer.php. n'y a pas beaucoup de choses à faire avec le pied de page. L' une des choses que nous voulons changer, c'est l'année. Parce que nous voulons que cela change dynamiquement chaque année, nous pouvons ajouter quelques PHP au bas d'ici. Plutôt que d'avoir 2015 codé en dur, nous pouvons faire écho au navigateur la date. Ensuite, entre les crochets, nous pouvons mettre la majuscule Y, qui est la façon dont PHP ajoute l'année. En utilisant PHP, vous pouvez également ajouter les jours et les mois dans différents formats. Nous examinerons cela plus en détail lorsque nous ferons les articles de blog. Puis tout en bas de la page, puis juste avant la balise de fermeture du corps. Ici, nous allons ajouter une autre fonction PHP, qui est le wp_footer. Cela permet à WordPress d'ajouter des données scriptées à la section pied de page. Sauvegardez ça. Ensuite, nous pouvons supprimer le JavaScript Bootstrap. Nous allons lier ceci avec le CSS dans le fichier functions. Parce que WordPress est déjà livré avec jQuery, nous pouvons supprimer cela aussi. Attachez ça un peu, puis appuyez sur « Enregistrer ». Maintenant, nous avons retiré le CSS de la section d'en-tête et les scripts de la section de pied de page. Nous devons permettre à WordPress de les ajouter à nouveau dans le site Web. Nous allons le faire de la façon dont WordPress recommande en mettant en file d'attente les scripts. La façon dont nous faisons cela est si nous allons au functions.php. Si vous allez dans la section inférieure après add_action, assurez-vous que vous êtes toujours dans les balises PHP. Créons une nouvelle fonction PHP. Celui-ci va s'appeler tranquil_scripts. Ensuite, les supports, puis ensuite les accolades. Il suffit d'ajouter un commentaire ici pour que nous sachions exactement ce que nous faisons. Cette section va ajouter les styles à la fonction. Pour les ajouter correctement dans le thème, nous devons utiliser le WordPress ou wp_enqueue_style. Ensuite, dans les crochets bouclés, et aussi entre les guillemets, nous allons donner un nom à la première feuille de style. C' est le bootstrap-core, puis séparé par une virgule. Le deuxième paramètre que nous devons inclure est le chemin du fichier vers le CSS Bootstrap. Ajoutons cela dans WordPress. Nous tapons get_template_directory_uri, puis les crochets. Ensuite, nous ajoutons le chemin du fichier en utilisant le point. Ensuite, dans les guillemets, nous ajoutons le lien à notre fichier d'amorçage, donc /css/bootstrap.min.css. Puis un point-virgule à la fin. On va juste se débarrasser d'une barre latérale pour l'instant. Ici, nous donnons un nom à la feuille de style. Ensuite, nous ajoutons le répertoire des modèles. Ensuite, en ajoutant au répertoire du modèle, le chemin d'accès du fichier CSS. Parce que nous avons un CSS Bootstrap et nous avons aussi le CSS personnalisé. Nous pouvons simplement copier ceci et le coller directement ci-dessous. Nous avons juste besoin de changer le nom et le chemin du fichier. Ceci est pour notre fichier personnalisé. Ensuite, nous incluons également get_template_directory. Ensuite, nous devons changer le chemin du fichier. Parce que notre feuille de style personnalisée est dans une racine de document plutôt que dans le dossier CSS, nous pouvons simplement changer cela en style.css. Ensuite, nous faisons une chose très similaire pour ajouter les scripts à nouveau. Ajouter des commentaires de scripts d'ajout. C' est JavaScript de retour, cela fonctionne de la même manière que la feuille de style. Il suffit de copier ce lien et de le coller dans. Mais cette fois, au lieu du style file d'attente, nous mettons en file d'attente le script. Ensuite, nous ajoutons le nom du début. Je vais appeler ça le bootstrap-js. Nous utilisons get_template_directory de la même manière. Mais cette fois, le chemin du fichier est dans notre dossier JS. N' oublie pas la barre oblique avant. Ensuite, nous devons lier ceci à la version minifiée bootstrap. Bootstrap.min.js. Cela remplace le JavaScript de la section pied de page. Après cela, ajoutez une virgule. Nous avons inclus le nom du script, la source du script. Maintenant, nous devons inclure toutes les dépendances. Maintenant, parce que Bootstrap nécessite jQuery, nous devons nous assurer que jQuery se charge avant Bootstrap. Nous le faisons en ajoutant un tableau. Ensuite, entre parenthèses, nous mettons le nom de la dépendance, qui est jQuery, séparé par une virgule. La dernière valeur que je vais mettre est un booléen de vrai. Ceci active le lien scriptable vers la section pied de page. Dans le fichier footer.php, nous avons inclus la fonction wp_footer. Parce que nous avons ajouté cela dans, WordPress sait exactement où ajouter le script maintenant. Maintenant, cette fonction est configurée. Nous devons faire une chose similaire à celle que nous avons faite tôt. Pour la configuration du thème, nous devons ajouter l'action. En dehors de la fonction, en dessous de la dernière accolade, nous pouvons coller dans l'add_action et remplacer after_theme_setup, nous avons wp_enqueue_scripts. Ensuite, le deuxième paramètre est le nom de notre fonction, qui est tranquil_scripts. Nous pouvons copier cela et le coller dans et enregistrer cela. Parce que vous avez le débogage à activer, si nous actualisons le navigateur, espérons que nous ne devrions pas avoir de problèmes. Vous pouvez commencer à voir que certaines choses changent. Nous avons quelques couleurs apparaissant, ce qui signifie que le CSS personnalisé doit être lié correctement. Aussi le CSS Bootstrap doit être lié correctement. Parce que vous pouvez voir que le système de grille, tels que les sections libres, est configuré correctement. On manque les images, mais on s'en occupera bientôt. Il n'y a pas de quoi s'inquiéter. Enfin, si nous réduisons simplement le navigateur à une taille plus petite, à la taille du mobile ou de la tablette, nous pouvons vérifier que le JavaScript fonctionne en cliquant sur le bouton déroulant. Si tout fonctionne bien pour vous, c'est génial. Si vous avez une liste déroulante, cela signifie que le JavaScript fonctionne. Félicitations pour aller aussi loin, et je vous verrai dans la prochaine vidéo, où nous allons ajouter la navigation WordPress. 20. Menu WordPress avec navwalker: Bienvenue de retour. Dans cette vidéo, nous allons nous concentrer sur l'ouverture et le fonctionnement de notre navigation. Parce que WordPress et Bootstrap utilisent différentes classes personnalisées pour la configuration du menu, nous devons inclure un moyen de convertir nos classes Bootstrap en WordPress. Heureusement, quelqu'un a déjà créé un outil utile appelé Bootstrap nav walker. Si vous allez sur Google et avez une recherche pour Bootstrap navwalker, alors vous devriez obtenir le premier lien, qui est la page GitHub et vous pouvez voir que nav walker est une classe WordPress nav walker personnalisée pour implémenter Twitter Bootstrap dans nos thèmes personnalisés WordPress. Nous pouvons commencer par appuyer sur le bouton « Télécharger ». Il devrait télécharger assez rapidement, c'est juste un fichier zip. Ensuite, si vous passez à l'installation, l'installation est assez simple à suivre. Nous commençons par copier la fonction. Donc, nous copions cela, puis dirigeons vers le functions.php. Cela va être inclus dans la fonction tranquilwp_setup. Juste en dessous de la fonction title-tag, collez-le dans. Cela inclut le fichier navwalker dans notre projet. Retournez au navigateur. Ensuite, pour l'utilisation, copiez le tableau nav walker, puis passez à un éditeur de texte dans le header.php. Il localisera la navigation. Nous devons trouver la navigation principale qui se trouve sur la page d'accueil, qui contient les liens vers la page d'index, le blog, et aussi les dernières nouvelles. Nous devons remplacer la liste complète non ordonnée. Nous pouvons donc supprimer toute cette section. Mais assurez-vous de quitter la div environnante avec la classe hors effondrement. Ensuite, collez dans le tableau entre ces balises. On va juste attacher ça un peu. Ce tableau formate correctement notre thème WordPress pour inclure un menu déroulant bootstrap. Nous pouvons laisser toutes les valeurs par défaut telles qu'elles sont sur le côté droit. La seule chose que nous devons changer est la classe de menu. Nos classes de menu bootstrap lorsque nav, navbar-nav, puis aussi navbar-droit, parce que notre menu était aligné à droite. Tout le reste que nous pouvons laisser par défaut. Puis revenez au navigateur. Ensuite, nous devons enregistrer le menu. Copiez le register_nav_menus, puis dans functions.php, juste en dessous où nous avons inclus le lien de navigation marcheur. Juste en dessous, nous pouvons coller cela là-dedans. Cela enregistre la navigation avec le thème. Nous attachons juste cela, puis changeons le THEMENAME pour tranquilwp et sauvegardons cela. Cela définit le menu avec le lien d'accueil et les liens de blog en haut de la page Web comme notre menu principal. Nous y reviendrons plus tard dans le cours et enregistrerons les menus photos. La dernière chose que nous devons faire est d'espérer qu'il est téléchargé pour vous maintenant, dirigez-vous vers vos téléchargements, puis décompressez le paquet que nous venons de télécharger, et ouvrez. Ensuite, nous devons faire glisser le fichier PHP dans un thème personnalisé. Ensuite, ouvrez également votre dossier de thème, puis faites glisser dans le dossier PHP et collez-le dans le répertoire racine, comme dans la page d'index. Je vais le faire maintenant. Maintenant, tout devrait fonctionner. Si nous allons à l'éditeur de texte, puis enregistrez cela, puis dans Chrome et dans WordPress, puis rafraîchir WordPress. Ensuite, nous pouvons créer notre menu principal. Dans le tableau de bord à gauche, accédez à l'apparence, puis aux menus. Ensuite, créez un menu, puis changez le nom du menu en Menu principal. Ensuite, faites défiler vers le bas quand il est coché les deux cases en bas et cela s'assure que le menu principal est le menu principal et aussi que les nouvelles pages que nous créons automatiquement sont ajoutées au menu. Sauvegardez ça. Ensuite, visitons le site et voyons si le menu fonctionne bien. Notre menu fonctionne. Nous pouvons voir qu'il est apparu en haut de la page. Nous n'avons que le lien Accueil et l'exemple de page pour l'instant parce que nous n'avons pas créé le blog ou la dernière section. Mais c'est très bien. Cela signifie que tout fonctionne correctement. C' est tout, nous allons laisser cette vidéo pour l'instant. Je te vois dans la prochaine vidéo. Nous corrigerons tous les liens pour les images. 21. Chemins d'accès aux fichiers d'images: Notre thème WordPress personnalisé, il commence à prendre forme maintenant. L' un des principaux problèmes que nous pouvons voir est que les images que nous avons incluses dans le modèle Bootstrap n'apparaissent pas sur le site WordPress. On doit réparer ça maintenant. Pour commencer, la majorité des images se trouvent dans la page d'index. Nous nous dirigeons vers index.php. Pour que les images apparaissent, nous devons changer correctement le chemin du fichier. Le premier est dans la section « Bienvenue », et c'est le diviseur violet. A l'intérieur de la source de l'image, nous allons démarrer les balises php, les balises d'ouverture et de fermeture. Ensuite, nous utilisons la même fonction que nous avons utilisée pour inclure le chemin du fichier pour le CSS. Donc écho esc_url. Ensuite, entre parenthèses, nous allons get_the_templates_directory_uri , puis une paire de crochets. Assurez-vous de mettre à nouveau le point-virgule à la fin. Ouvrez la barre latérale. Nous obtenons l'uri du répertoire de modèle, qui est notre dossier de thème. Ensuite, nous allons inclure dans le dossier « Images », qui est dans le répertoire racine. Assurez-vous que vous avez une barre oblique juste avant car elle n'est pas ajoutée automatiquement. Sauvegardons ça et vérifions que ça marche avant d'aller plus loin. On y va. Voilà notre image pourpre. Nous allons juste « Copier » ceci pour économiser beaucoup de frappe. Si nous copions tout de la barre oblique avant le dossier images jusqu'à la balise Opening php, puis descendons à la section Facility, puis juste « Coller » avant chacune des images. Le maquillage, les bougies, l'image du lac et la piscine. Ensuite, nous avons l'image d'argent dans la section Dernières offres. « Collez » cela et faites défiler vers le bas pour voir s'il y a plus que nous devons changer. Il y a une autre image dans la section Boutique en ligne. Sauvegardons cela et voyons à quoi cela ressemble et « Actualiser » le navigateur. On va aller quelque part maintenant. Ça a l'air mieux. Nous devons inclure l'image d'arrière-plan principale, mais c'est dans l'en-tête. On va le faire maintenant. Dans le fichier header.php, faites défiler jusqu'à la section Feature et « Coller » devant l'image au bord du lac, puis enregistrez et actualisez cela. Bien. On va aller quelque part maintenant. Faites défiler vers le bas jusqu'à la section pied de page. Il n'y a que quelques images que nous devons inclure dans la section Pied de page, qui est l'image de séparation et aussi l'image de fond « Shop Online ». Le footer.php fait ensuite défiler vers le haut pour le diviseur. « Coller » cela dans et « Enregistrer » puis « Actualiser ». Il est écrit : « Une image divisée. » Ensuite, c'est juste l'image de la section « Shop Online » et nous l'avons ajoutée comme image d'arrière-plan dans le CSS. Dirigez-vous vers le « Style.css », puis faites défiler vers le bas jusqu'à la section Boutique en ligne. Pour que cela fonctionne correctement dans WordPress, nous devons supprimer la barre oblique et les deux points. Enregistrez cela, puis actualisez. C' est l'image est apparue en arrière-plan, que nous devons nous assurer que le bouton « Boutique en ligne » est en dessous du diviseur. Je pense qu'il nous manque une étiquette de pause. Retour à la page d'index, nous avons l'en-tête et l'image du diviseur, puis le bouton juste après. Je vais juste ajouter la balise break dedans, puis rafraîchir, et j'espère que cela devrait fonctionner. C' est génial. On y va. Ça marche parfaitement maintenant. Je pense que c'est toutes les images couvertes dans la page d'index. Je vais juste faire défiler vers le haut et vers le bas et voir s'il manque quelque chose. Super. Notre page d'accueil ressemble maintenant à ce qu'il devrait faire. Nous avons maintenant toutes les images en place et cela ressemble exactement au modèle Bootstrap que nous avons créé. Merci de regarder et nous vous verrons dans la prochaine vidéo. 22. Créer la front-page.php: Bienvenue à tout le monde. Dans cette vidéo, nous allons jeter un oeil sur la façon dont WordPress traite modèles et le système de hiérarchie pour sélectionner quel modèle utiliser. Nous nous dirigeons vers Google et nous recherchons la hiérarchie de modèles WordPress. Le premier lien qui apparaît devrait être celui dont vous avez besoin. Si nous sélectionnons cela, donc nous serions repris sur le site WordPress et si nous faisons simplement défiler vers le bas, nous pouvons trouver la liste des modèles que WordPress reconnaît et je vais vous donner une idée de la façon dont WordPress utilise cela. Il y a un diagramme visuel que nous allons jeter un oeil dans un instant. Mais si nous faisons défiler un peu plus loin vers le bas de la page, nous pouvons trouver plus de détails sur la façon dont WordPress traite les modèles. Par défaut, WordPress utilise la page d'accueil ou la page d'accueil pour afficher les derniers articles de blog et ce n'est vraiment pas ce que nous voulons pour ce design. Dans notre conception Bootstrap, nous avons une page d'accueil et ensuite nous gardons notre billet de blog séparé dans sa propre page de blog. Nous devons changer notre thème WordPress, nous devons utiliser le front-page.php comme nouvelle page d'accueil. Dans cette vidéo, nous allons prendre le contenu de la page d'index et nous allons créer le front-page.php. Nous utiliserons ensuite notre page d'index pour être la page par défaut pour afficher les articles de blog ou le contenu WordPress. faisant défiler vers le bas, vous aurez une idée de certains des modèles que nous construisons dans ce cours. Il y a un modèle pour le seul post qui a la page d'index comme modèle de secours si aucun de ceux-ci n'existe, nous allons également créer un modèle de page que WordPress utilisera s'il ne peut pas trouver un modèle plus spécifique. Encore une fois, si aucun d'entre eux ne peut être trouvé, il retournera par défaut à la page d'index et il y a divers modèles personnalisés que nous pouvons construire. Nous les regarderons plus tard dans le parcours. Si vous voulez jeter un oeil à la vue d'ensemble visuelle qui vous donne un joli diagramme visuel de la façon dont WordPress traite les modèles, quels modèles il recherche dans un ordre plus particulier. Commençons à créer notre nouvelle page d'accueil. Si vous retournez dans le tableau de bord WordPress , puis sur le tableau de bord sur la gauche si vous descendez aux pages, je vais juste supprimer l'exemple de page, nous n'avons pas besoin de cela. Ensuite, nous allons cliquer sur « Ajouter un nouveau ». Nous allons simplement appeler cette page d'accueil, puis cliquer sur « Publier ». Ensuite, dirigez-vous vers l'éditeur de texte et nous allons créer le front-page.php que nous avons cherché auparavant. Tout d'abord, allez dans la page d'index, sélectionnez tout et copiez, puis Commande N ou Control N pour créer une nouvelle page, puis collez-le dans, puis enregistrez-le tout de suite sous front-page.php. Ce sera maintenant notre page d'accueil du site. Nous pouvons supprimer tout le contenu de la page d'index, tout entre les balises get en-tête et get pied de page tout en bas. Sélectionnez simplement tout le contenu, puis faites défiler vers le bas et supprimez, ne laissant que l'en-tête et le pied de page. Nous allons juste enregistrer cette page pour l'instant et nous reviendrons à cela dans la prochaine vidéo où nous allons commencer à créer la boucle WordPress pour parcourir tout le contenu des billets de blog, alors enregistrez. Ensuite, si vous revenez au tableau de bord, puis sur les paramètres, sélectionnez l'onglet « Lecture ». Si nous allons à la première page qui est en haut, nous avons mentionné au début de cette vidéo que par défaut, WordPress utilise la page d'accueil pour afficher les derniers articles de blog. Nous allons changer cela pour être une page statique. Je vais changer ça à la page d'accueil à créer. Je vais changer cela, puis cliquez sur « Enregistrer les modifications ». Espérons que tout cela devrait fonctionner à nouveau. Cliquez sur « Visiter le site » actualiser et maintenant il semble fonctionner correctement. On vient d'avoir quelques liens de menu en haut, donc je vais juste me débarrasser de tout ça maintenant. Retour en apparence sur les menus, nous pouvons supprimer l'exemple de page. Nous n'avons pas besoin que dans le menu et aussi le lien de la page d'accueil, puis enregistrez le menu. Puis revenons à notre première page, donc tout fonctionne à nouveau. Merci d'avoir regardé. Je te verrai dans la prochaine vidéo. 23. Boucle WordPress et page.php: Donc, dans cette vidéo, nous allons jeter un oeil à la célèbre boucle WordPress. Donc, si vous venez de vous diriger vers Google et alors vous allez chercher la boucle WordPress. Nous devrions être amenés directement au codex. Alors cliquez sur le premier lien, qui nous amène au site WordPress. Donc, la boucle est le code PHP utilisé par WordPress pour afficher les messages. En utilisant la boucle WordPress traite chaque poste à afficher sur la page actuelle et le format en fonction de la façon dont il correspond aux critères spécifiés dans les balises de boucle. Tout code HTML ou PHP dans la boucle sera traité sur chaque post. Donc, fondamentalement, ce que cela signifie, c'est, plutôt que ce que nous faisons dans notre modèle de blog bootstrap, où nous créons trois articles de blog distincts. Pour enregistrer la répétition de ce code encore et encore, nous créons simplement un exemple de billet de blog dans la boucle. WordPress continuera à boucler, tirant dans tout le contenu des billets de blog jusqu'à ce qu'il n'y ait plus de messages à afficher. Donc, défilant vers le bas. Donc, pour commencer à utiliser la boucle WordPress, nous devons copier les balises de boucle d'ouverture. Donc, si nous copions là où il dit que la boucle commence ici, copiez la première ligne de PHP. Ensuite, entre l'en-tête get et get pied de page, collez-le dans et puis copiez la fin de la boucle, qui est juste en dessous. Ensuite, collez ceci en laissant un peu d'espace entre les deux pour le contenu. Donc, si vous connaissez un peu de PHP, cela devrait sembler assez familier. Sinon, fondamentalement tout ce qui se passe est WordPress vérifie si les messages sont disponibles et bien que les messages ne sont pas disponibles, il va faire une boucle à travers le contenu que nous tirons ici très bientôt. Ensuite, s'il n'y a plus de messages, il se termine alors la boucle. Ensuite, sinon s'il n'y a pas de messages égaux au navigateur. Le mot désolé, aucun message ne correspond à vos critères. Donc maintenant la boucle est en place, nous devons tirer dans le contenu du post de colonne. Nous allons le faire en ouvrant les balises PHP. Ensuite, entre ces balises, nous tirons le contenu et les crochets et le point-virgule. Donc, cela va imprimer le contenu des messages tout en postant disponible. Nous n'avons actuellement aucun message sur le site WordPress mais nous allons les créer dans la prochaine vidéo. Alors sauvegardons ça. Bien que nous utilisions ceci comme modèle de sauvegarde ou comme modèle par défaut pour les publications, nous devons également créer un modèle par défaut pour les pages si aucun modèle spécifique n'existe. Alors créons la page. PHP que nous avons regardé au début de cette vidéo. Donc, si nous sélectionnons simplement tout le contenu et copier, puis faire une nouvelle page et coller là. Cette page va être enregistrée en tant que page.PHP. Alors sauve ça, on y va. Comme il s'agit du modèle par défaut pour les pages plutôt que pour les publications, nous devons changer le message d'erreur, pour désolé, aucune page ne correspond à vos critères, et enregistrer cela. Donc, si vous me rejoignez dans la prochaine vidéo, nous allons commencer à créer des billets de blog WordPress. 24. Page d'index de blog Partie 1: Maintenant, nous allons commencer par ajouter quelques articles de blog à notre site Web. Nous allons également créer la page de blog pour qu'ils soient affichés sur. Pour obtenir du contenu pour les billets de blog, je vais aller sur Google et chercher un certain Lorem ipsum, pour obtenir un exemple de texte pour les messages. Cliquez sur « Lorem Ipsum », puis faites défiler jusqu'au générateur. Je vais générer cinq paragraphes de texte afin que nous ayons beaucoup de contenu pour le post. Cliquez sur « Générer », puis copiez les cinq paragraphes, puis revenez dans le tableau de bord WordPress. Une fois que vous arrivez au tableau de bord, cliquez sur « Messages ». Nous pouvons garder le post d'échantillons Hello World pour l'instant. Je vais générer cinq nouveaux messages. Cliquez sur « Ajouter un nouveau message », puis donnez-lui un titre de votre choix. Je vais appeler ce billet de blog un, puis dans la zone de texte, coller dans l'ipsum Lorem. J' ai déjà créé les nouvelles sur la catégorie bureau. Il vous suffit de sélectionner « Ajouter une nouvelle catégorie » et de taper une catégorie de votre choix, telle que des promotions. Ensuite, appuyez sur « Entrée », puis vous obtenez la nouvelle période de catégorie là-bas. Juste en dessous des catégories se trouve également la zone pour les balises. Vous pouvez également ajouter quelques balises. Tapez et appuyez sur « Entrée ». Je vais créer de la beauté, cheveux, du maquillage, et ça va faire pour l'instant. Cliquez sur « Publier », puis ajoutez de nouveaux en haut, et je vais faire cinq nouveaux billets de blog au total. Nous avons beaucoup de contenu à utiliser. Vous pouvez soit créer le vôtre, soit suivre avec moi. La prochaine sera l'offre du mois d'août. Maintenant, je colle dans l'exemple de texte sur la catégorie bureau. J' ajouterai quelques balises, puis cliquez sur « Publier ». Sur le troisième, il peut s'agir d'une nouvelle ou d'une lettre d'information d'août. Cela peut être la nouvelle section sur les balises, peut être des nouvelles et des mises à jour, coller dans le contenu, puis appuyez sur « Publier ». Je vais juste en faire deux de plus. Ajoutez la nouvelle publication, puis l'exemple. Collez cela dans et cela peut être non catégorisé. Maintenant, je vais publier et puis un de plus. Exemple de post 2, puis publiez cela. Donc, nous avons maintenant cinq messages au total, donc nous avons beaucoup de contenu à utiliser. Sur la page d'accueil, nous avons seulement le lien vers la page d'accueil. Ensuite, nous devons créer la page du blog. Retour dans le tableau de bord un aller à Pages, Ajouter Nouveau, appelez ceci la page de blog, puis appuyez sur « Publier ». Nous devons dire à WordPress que c'est la page pour afficher les messages de blog, donc nous allons à Paramètres, Lecture, et changer la page des messages pour être le blog que nous venons de créer, puis enregistrer les changements. Ensuite, consultez le site et vérifiez si la page du blog a été ajoutée au menu. Ok, c'est génial. Ensuite, nous devons transférer le contenu du blog de notre projet bootstrap dans WordPress. Si on trouve notre dossier bootstrap, le mien est toujours sur le bureau. Puis ouvrez-le, puis faites glisser le blog.html dans votre éditeur de texte, et nous pouvons commencer à copier une partie du contenu sur WordPress. Nous n'avons pas besoin de l'en-tête ou de la section pied de page. Ce que nous devons faire est de faire défiler vers le bas jusqu'à la section du blog, puis nous devons copier toute la section du blog. Copiez ceci et continuez à descendre jusqu'à ce que nous trouvions la barre latérale. Il y a les modules de la barre latérale. Ensuite, copiez tout jusqu'à la section pied de page. Copiez, puis allez dans le index.php, puis collez tout cela juste en dessous get_header. Je vais commencer à travailler avec cela maintenant. Je le rends amical WordPress. Nous allons commencer par couper la barre latérale et mettre la barre latérale dans le fichier sidebar.php. Si nous cherchons la div blogue-latérale de clôture, alors regardez la div juste avant cela, puis copiez les modules jusqu'au nombre de colonnes. Découpez le contenu. On devrait juste rester avec le conteneur à 12 colonnes. Ensuite, allez dans le sidebar.php, collez-le dans et enregistrez, puis revenez dans la page d'index, et espérons que vous devriez avoir une idée de ce que nous faisons ici. De la même manière que nous avons obtenu l'en-tête, et aussi de la même manière que nous remettons le pied de page, nous allons faire exactement la même chose. Entre la div de la barre latérale, ouvrons les balises PHP, puis tapez get_sidebar, les crochets et le point-virgule, puis enregistrez cela. J' espère que cela a du sens. Nous avons coupé la barre latérale, l' avons mise dans son propre fichier, puis l'avons rajoutée en utilisant PHP. La prochaine chose que nous devons faire est, nous devons ajouter notre billet de blog à la boucle WordPress que nous avons ajouté plus tôt. Nous n'avons besoin que d'un des billets de blog bootstrap pour travailler, et nous en avons actuellement trois, donc supprimons deux d'entre eux. Si nous localisons la fin des articles de blog, il y en a un et il y en a deux, donc cela nous laisse juste avec un billet de blog. Nous n'avons pas vraiment besoin du contenu ou du texte, donc nous pouvons le supprimer pour faire plus d'espace. On va juste attacher ça pour savoir ce qu'on fait. Donc, nous avons eu le conteneur, la ligne, et le nombre de colonnes, puis le billet de blog là-bas. En l'état actuel, c'est le contenu de notre billet de blog et nous voulons nous assurer que cela est dans la boucle WordPress. Ainsi, chaque fois qu'il fait une boucle à travers un billet de blog, il imprimera le titre du billet de blog, aussi la date, l'auteur, puis le contenu. Nous pouvons commencer à entourer cela avec la boucle WordPress. Donc, si nous coupons la boucle d'extrémité ouverte et ensuite coller ceci juste au-dessus de la div avec la classe de post de blog. Donc, nous le collons. Si nous coupons la fin de la boucle, puis collez-le à la fin du blog. Je colle ça juste là. Nous découpons tous les paragraphes du texte, nous devons donc ajouter le contenu. Nous coupons les balises PHP pour le contenu, puis collons cela juste au-dessus de la fin de la boucle. Donc, c'est le contenu dans. Maintenant, juste pour s'assurer que nos divs sont tous en place. Nous avons la div avec le billet de blog et je pense que nous avons juste besoin d'une balise de fermeture après le contenu. Oui, que beaucoup se passe avec le post de blog ouverture div. Je vais juste mettre un commentaire là de blog post. Je vais faire de l'espace entre la fin de la boucle. Il y a maintenant la boucle et quelques informations de blog là-dedans. Rendez-vous sur notre site Web pour voir à quoi il ressemble et vous donner une indication visuelle de ce que fait la boucle. Donc, si vous sélectionnez le blog, puis faites défiler vers le bas. Donc, nous pouvons voir que certains articles de blog commencent à apparaître sur la gauche et notre barre latérale est en train d'être retirée. Mais l'un des problèmes que nous avons jusqu'à présent est que nous créons cinq articles de blog différents. Mais lorsque nous faisons défiler vers le bas, nous obtenons le même billet de blog encore et encore, et c'est parce que dans la page d'index, il tire le contenu, qui est le texte Lorem Ipsum pour toutes les informations telles que le la date et l'offre est tout HTML statique. Donc, nous devons maintenant convertir ceci en PHP. Ainsi, WordPress peut extraire les informations correctes pour les billets de blog que nous avons créés. Alors commençons ça maintenant. Nous commencerons par le titre de niveau 2 de la nouvelle fonctionnalité. Je veux séparer ceci sur une ligne différente donc c'est plus clair. Alors ouvrez le PHP. Encore une fois, je vais juste copier ces balises PHP parce que nous allons les réutiliser encore et encore. Pour obtenir le titre, nous tapons le_ titre. Sauvegardons cela et revenons sur le blog et actualisons. Maintenant, nous pouvons voir que nous avons des titres différents. Ce sont les titres des cinq articles de blog que nous avons déjà fait. Vous passez le curseur sur eux, vous pouvez voir que ces titres sont des liens. Habituellement, dans le blog, vous n'aurez pas besoin du lien vers le post complet. Donc, nous pouvons le faire dans WordPress en ajoutant le permalien. Donc, nous pouvons entourer ce PHP dans une balise de lien. Donc, un href va être égal à, alors nous collons dans notre PHP. Pour en faire un lien, nous tapons le permalien. N' oubliez pas les crochets et le point-virgule. Nous devons dire à WordPress où lier ces deux-là. Alors faites-le en ajoutant un titre. Le titre sera égal à, coller dans le PHP. Ensuite, nous tapons le_title_attribute. Mettons-le sur des lignes séparées pour que ce soit plus clair. Donc, quand il est de fermer l'ouverture d'une balise, juste après l'attribut title, puis ajouter la fermeture d'une balise après le titre. Alors jetons un coup d'oeil à cela et actualisons dans le navigateur. Donc c'est un bon début. Nos articles de blog sont maintenant bleus, ce qui indique qu'il s'agit maintenant d'un lien. Retournez dans l'éditeur de texte. Ensuite, nous ferons la même chose avec la date et l'auteur. Donc, à partir de la date, collez dans le PHP. Écho au navigateur get_the_date. Ensuite, à l'intérieur des parenthèses, nous devons dire à WordPress quel format nous aimerions que la date apparaisse. Donc, à l'intérieur des citations, passez en trois paramètres. Donc, le premier est un F majuscule, qui en PHP signifie le mois, puis séparé par une virgule. Un petit j est pour le jour du mois. Ensuite, comme nous l'utilisons dans la section pied de page, nous pouvons utiliser la majuscule Y pour obtenir l'année. Le prochain, nous ferons l'auteur. Donc, nous allons changer le nom de l'auteur, coller dans le PHP. L' auteur est assez simple. C' est juste l'auteur_auteure. Puis le support et le point-virgule. Sauvons ça et jetons un coup d'oeil. Super. Donc maintenant, il poster dans le nom d'utilisateur, qui est tranquil_admin. Il nous donne également la date à laquelle le message a été créé. Tout devrait être pareil parce qu'ils vont tous créer en même temps. Donc, pendant que nous sommes dans la section post de blog, je voudrais ajouter un peu plus d'informations au blog. Juste en dessous de l'auteur, je voudrais ajouter quelques informations qui montrent quelle catégorie et quelle étiquette nous avons utilisé pour tous les messages. C' est donc assez simple à faire. Si nous allons juste au-dessous de la section auteur que nous venons de faire là-bas. Je vais aussi ajouter des icônes de police impressionnantes pour les rendre un peu mieux. Donc Font Awesome est ajouté avec la balise i et la classe est fa. Donc, nous allons d'abord ajouter les balises. Donc, l'icône Font Awesome pour les balises est fa-tag. Alors fermez ça. Ensuite, nous pouvons générer les noms des balises en tapant the_tags. Sauvegardons cela et vérifions que cela fonctionne bien et actualisons. On a donc une photo de l'apparence de l'étiquette. Ensuite, nous allons descendre à un billet de blog où nous avons quelques tags, nous avons des nouvelles et des mises à jour, puis ici commence à fonctionner correctement. Ensuite, ajoutez une balise de pause. Nous commencerons dans les catégories. Donc, une Icône impressionnante de police. Donc, je classe fa, et cela pourrait être fa-folder-open, puis ajouter un peu de PHP. Cette fois, nous utilisons the_category et puis sauvegardons. Alors jetons un coup d'oeil. Nous avons donc l'icône Font Awesome apparaissant, mais nous avons les noms des catégories apparaissant ci-dessous. Nous voulons nous assurer qu'ils sont en ligne avec le dossier. Nous voulions aussi qu'ils soient séparés par des virgules. Donc, c'est assez simple à corriger si nous allons entre parenthèses et aux citations. Tout ce que nous devons faire est d'ajouter une virgule, qui est le séparateur, puis un espace. Il y a donc un espace entre chacune des catégories, puis actualiser. Maintenant, nous les avons également maintenant en ligne avec l'icône Font Awesome. Pour que cela ressemble un peu plus aux balises un, nous allons juste ajouter les catégories de mots devant lui. Donc juste avant la catégorie, nous allons ajouter des balises PHP et ensuite nous allons faire l'écho ou nous pouvons utiliser un raccourci qui est un e avec un trait de soulignement avant. Alors le mot que nous allons faire écho est catégorie. Puis un deux-points, on a des trucs d'espace là-bas aussi. C' est donc un espace avant le nom de la première catégorie. Donc, enregistrez, puis actualisez. Ça a l'air bien, ça a l'air beaucoup mieux qu'avant. Donc j'espère que cela a eu du sens pour vous. Eh bien, ajoutez une Icône de police impressionnante. Puis tout de suite après, nous utilisons en PHP echo pour faire écho à la catégorie de mots. Ensuite, tout de suite après le mot, nous utilisons la fonction catégorie pour imprimer toutes les catégories associées à l'article de blog. Alors, sauvegardez ça. Certains d'entre vous ont peut-être remarqué que vous faites défiler la page vers le haut et vers le bas, que ces billets de blog sont assez longs. Normalement sur un blog, vous avez juste une brève introduction, peut-être juste un paragraphe ou deux. Ensuite, si vous cliquez sur le blog ou le titre, vous prenez ensuite dans le billet de blog complet sur une page séparée. Nous pouvons le faire assez facilement dans WordPress. C' est juste un cas de changement du contenu pour être l'extrait. Donc, enregistrez, et il devrait maintenant être une version raccourcie des billets de blog. Juste comme ça. Donc, un peu plus tard sur le cours, nous allons créer le modèle pour le billet de blog complet. Vous voulez cliquer sur le titre. Tellement heureux dirait que cela est venu pour l'instant. Donc, nous allons terminer cette vidéo là. Nous faisons vraiment de bons progrès. Nous allons maintenant aller contenu WordPress, qui est généré dynamiquement plutôt que les messages de bootstrap statiques. Merci de regarder, et nous vous verrons dans la prochaine vidéo. 25. Page d'index de blog Partie 2: Bienvenue de retour. Nous faisons de bons progrès avec notre blog WordPress. Nous avons maintenant WordPress qui tire le contenu de tous nos articles de blog et les affiche sur la page du blog. Nous avons utilisé l'extrait WordPress pour raccourcir le contenu des messages, juste être quelques phrases. Maintenant, nous voulons ajouter un bouton Lire la suite à la fin du texte. Cela peut également être lié à l'article de blog complet de la même manière que le titre. Pour ajouter le bouton Lire la suite à la toute fin, nous pouvons l'ajouter dans notre page d'index immédiatement après l'exemption. Fais juste un peu d'espace là-bas. Créons un lien, puis à l'intérieur des guillemets, en collant les balises PHP. Cette fois, nous allons faire écho au navigateur, get_permalink (), et point-virgule à la fin, puis fermer la balise « a » et y ajouter la balise de fermeture. Maintenant, nous avons le lien, nous devons ajouter le texte. PHP à nouveau, et nous utilisons à nouveau un raccourci, donc _e juste faire écho au navigateur. Ensuite, à l'intérieur des crochets, le premier paramètre sera le texte que nous aimerions afficher, qui sera Read More, puis court trois points après. Alors sauvegardez et voyez si ça marche bien. C' est à la fin de chacun des articles de blog, donc c'est bon. Un petit changement que vous aimeriez faire est, je n'aime pas les crochets à la fin du texte, donc je vais juste les supprimer et juste en faire les trois points. Voyons comment faire ça. Si nous nous dirigeons vers les codecs WordPress, et nous chercherons les codecs pour WordPress. Ensuite, recherchez en haut l' extrait et cliquez sur la référence de fonction à l'extrait. Faites défiler un peu plus loin, et il donnera quelques informations sur la façon de l'utiliser et quelques exemples. Mais si vous allez un peu plus loin à mi-chemin et cherchez le titre qui dit supprimer les trois points entre crochets en utilisant des filtres. Si nous copions simplement la fonction, alors dirigez-vous vers le functions.php. Collons ceci dans mais en dehors de la fonction d'installation. Faites défiler vers le bas de la page et nous allons coller ceci sous l'add_action pour les scripts. À la minute, nous reviendrons dans les points sur les crochets, mais nous voulons juste supprimer ces crochets et enregistrer cela. Ou vous pouvez mettre tout ce que vous préférez. Voyons si ça marche. Retournez à la page du spa et rafraîchissez. Bien, tout fonctionne correctement. Les crochets ont été supprimés. Nous voulons juste changer ce titre pour qu'il soit de la même couleur que le site bootstrap, qui est le gris foncé. Si nous cliquons simplement sur Inspecter les éléments et puis le sélectionnons avec la loupe, nous pouvons voir que le cluster utilise Bootstrap est blog-post-titre. Copiez cela, je vais changer cette couleur dans le style.CSS. Jetons un coup d'oeil pour la section blog et puis nous allons coller ceci juste en dessous de la section titre que nous avons créée précédemment. Parce que c'est maintenant un lien, nous allons ajouter le « a » et nous allons définir la couleur pour être la valeur de 494646. Enregistrez cela et actualisez. Le titre est maintenant de la même couleur que le site Bootstrap. Vous avez peut-être déjà remarqué que nous manquons l'image de fantaisie qui sépare le titre du blog et le reste du contenu, c'est parce que nous avons encore les points et la neige fondante. Nous allons les supprimer, puis rafraîchir, et cela remet les images dans le blog. Si nous revenons au bas de la page, vous pouvez voir que ce sont les boutons « Précédent » et « Suivant ». Nous allons maintenant les faire fonctionner dans WordPress. Retournez dans la page d'index. Si vous regardez la section Pages, et nous pouvons garder les liens [inaudibles] tels qu'ils sont. Mais nous n'avons plus besoin de ces liens parce que nous allons les mettre d'une manière WordPress. Nous pouvons simplement supprimer les liens hypertexte de Précédent et Suivant. Pour obtenir la page suivante des messages, insérez le php. Ensuite, pour obtenir les prochains messages, nous tapons next_posts_link puis nous voulons que le bouton dise « Les anciens messages », donc nous tapons cela à l'intérieur des crochets. Ensuite, nous allons copier ce morceau de PHP et ensuite nous allons le coller juste au-dessous entre les éléments de la liste. Mais cette fois, au lieu de next_posts, il est changé en précédent. Ensuite, nous allons changer « anciens messages » pour être « plus récent » et enregistrer, et espérons, cela devrait fonctionner correctement, puis rafraîchir. Cela provoque la disparition des boutons et vous vous demandez peut-être pourquoi. Eh bien, la raison est qu'il n'y a pas une page précédente ou une page suivante à visiter parce que nous avons seulement cinq ou six billets de blog, et par défaut, WordPress met 10 billets de blog dans une page. Juste pour tester si le pager fonctionne, retournez sur le tableau de bord, puis descendez dans les Paramètres, sur Lecture, puis changez les pages de blog pour afficher au maximum de 10 à cinq, puis enregistrez les modifications. Ensuite, j'espère que si tout fonctionne correctement, lorsque nous faisons défiler vers le bas de la page dans le blog, nous devrions maintenant obtenir une page ici parce que nous avons seulement cinq messages. Cela va comme le bouton « Ancien Post » et il y a les six post là-bas. Ensuite, cliquez sur « Messages plus récents », nous obtiendrons les cinq premiers. Félicitations pour aller jusqu'ici et faire fonctionner les billets de blog. Merci d'avoir regardé. Si vous me rejoignez dans la vidéo suivante, nous allons créer une instruction PHP « if else », qui changera le texte de la fonctionnalité en haut de la page en fonction de la page sur laquelle nous sommes. Je te verrai là-bas. 26. Texte de caractéristique dynamique: Donc, si nous allons sur notre site Web, toutes les pages telles qu'il est, dire Full Responsive Premium Spa thème pour WordPress en haut, et cela vaut pour la page d'accueil, la page de blog, et toutes les autres pages que nous allons créer tels que les dernières nouvelles, le contact avec nous et À propos de nous. Je veux donc m'assurer que le texte de la fonctionnalité en haut de la page reflète la page sur laquelle nous sommes plutôt que simplement du texte statique. La raison pour laquelle c'est le même texte sur chaque page est parce que si nous allons dans le header.php, nous avons juste du HTML statique. Donc, je vais changer cela dans cette vidéo en ajoutant une fonction php. Donc, si nous supprimons tout le texte entre les balises P, mais assurez-vous que les balises sont toujours en place, puis ouvrez le php, puis les crochets de fermeture, nous allons ajouter dans notre propre fonction personnalisée, et Je vais appeler ce FeatureText, puis les crochets et le point-virgule. C' est tout ce que nous devons faire dans la section d'en-tête. Nous allons créer cette fonction de texte de fonctionnalité dans le functions.php. Ensuite, si vous descendez au bas de la page des fonctions, juste en dessous de la dernière fonction mais toujours dans les balises php. Faisons un peu de place pour ces cellules. Donc, le mot-clé fonction, puis un nom de fonction qui était FeatureText, puis les crochets, puis paire d'accolades. Donc, à l'intérieur de cette fonction va être une instruction if else. Donc WordPress vérifiera si une certaine page est affichée. Si une certaine page est affichée, nous allons définir l'affichage correct du texte dans le FeatureText. Donc, nous allons commencer par utiliser une instruction if. Donc, si is_front_page. Donc, si nous regardons actuellement la page d'accueil, alors voulez faire écho au navigateur, le texte que nous venons de découper de la section d'en-tête, qui est Fully Responsive Premium Spa Theme pour WordPress. Donc entièrement réactif, puis une balise break, et PREMIUM SPA THEME, suivi de la balise break, FOR WORDPRESS, puis enregistrez cela. Ensuite, juste après l'accolade, nous allons utiliser autre si plutôt que d'autre parce que nous pouvons utiliser autant d'autres if que nous le voulons. Ainsi, lorsque nous parcourons le site Web, chaque fois que nous créons une nouvelle page, qui est la page Contactez-nous, nous créerons une nouvelle condition pour cette page, puis nous imprimerons le texte approprié. Donc, d'autre part, et les accolades. Donc, la condition pour le blog est que nous vérifions is_home. Donc, la classe WordPress est la page d'accueil comme la zone où les principaux messages de blog sont affichés. Donc, nous avons la première page, et puis nous avons is_home, pour la maison des billets de blog, celui-ci fera écho au navigateur, et un point-virgule à la fin du premier aussi. Alors faire écho au navigateur. Si c'est le blog, nous voulons que cela dise Tranquil Spa Official Blog. Alors sauvegardons cela et jetons un coup d'oeil si cela fonctionne. Alors actualisez le site WordPress. Cela semble fonctionner jusqu'à présent, nous avons sélectionné la page du blog et le texte est changé pour Tranquil Spa Official Blog. Maintenant, si nous revenons à la page d'accueil, nous obtiendrons le texte original que nous avons défini pour que tout fonctionne bien. Donc, nous allons laisser cela pour l'instant et nous continuerons à ajouter aux fonctions chaque fois que nous ajoutons une nouvelle page au blog. Alors merci d'avoir regardé. Dans la vidéo suivante, nous allons créer le modèle de page pour afficher tous les articles de blog uniques. 27. Modèle de publication de blog unique: Donc, dans notre page de blog, nous avons les messages abrégés, et dans cette vidéo, nous voulons nous assurer que si nous cliquons sur le bouton Lire la suite ou sur le titre, que ce lien vers une page qui va montrer le post complet, et nous le faisons en créant un modèle appelé single.php. Alors dirigez-vous vers votre éditeur de texte et créez une nouvelle page, et enregistrez-le sous single.php, avec tout le reste des fichiers PHP. WordPress a deux types différents de modèles de page que nous pouvons utiliser. Il y a le modèle à usage unique, nous allons utiliser pour la page Contact et À propos de nous, et qui ne sera utilisé que sur une page particulière, ou il y a aussi un modèle global, qui est un peu plus général modèle. Nous devons mettre un commentaire en haut de la page. Donc, la page unique va être lâchement basée sur notre page de blog. Nous pouvons réutiliser une grande partie du contenu. Copiez le contenu de la page Index, puis collez-le dans le fichier single.php, et comme cela va être un modèle global, nous devons ajouter un commentaire en haut. Toujours WordPress est le nom du modèle. Ajoutez les commentaires. Ce sera le nom du modèle, donc il va être Single Post Template. Cela aura certaines des mêmes fonctionnalités que la page du blog, mais avec seulement un ou deux petits changements. Par exemple, dans la page du blog, nous avons le titre qui renvoie à l'article complet, mais nous ne voulons pas cela parce que nous sommes déjà sur le post complet. Supprimons le lien hypertexte entourant le titre, supprimez le lien hypertexte, de sorte que la fermeture d'une balise. Nous pouvons également supprimer l'attribut title, le permalien, et jusqu'à l'ouverture d'une balise. Enregistrez cela et dirigez-vous vers le blog et cliquez sur l'un des articles du blog. C' est la seule page sur laquelle nous travaillons maintenant, et nous devons toujours ajouter le titre en haut de la page. Maintenant, vous pouvez voir quand on clique sur le lien en haut, ce n'est plus un lien, c'est juste le titre du blog. Nous devons changer la version raccourcie du post pour être la pleine longueur. Nous le faisons en changeant les extraits au contenu. Enregistrez cela, puis actualisez. Ensuite, nous avons toute la longueur du post. Ensuite, je veux juste me diriger vers la feuille de style et ajouter un peu de hauteur de ligne, juste pour créer un peu d'espace entre les balises, la catégorie et le texte ci-dessous. Si nous passons à la style.css et copions un commentaire, je veux coller ceci juste en dessous de la barre latérale du blog, le À propos de nous, le Contactez-nous. Je vais le mettre juste avant le style mobile. Collez cela et nous appellerons ceci le Blog Single Post. Jetons juste un coup d'oeil à la classe que nous devons cibler ici. Si nous allons dans la page d'index, je veux ajouter du style aux balises et à la catégorie. La classe qui les entoure est blog-posts-meta. Je viens de remarquer qu'il y a une petite erreur. Nous devons déplacer la balise P de fermeture pour commencer avant les balises et la catégorie, puis se terminer juste après. Sinon, ça ne marchera pas. Mettons ça et sauvegardons ça. Retournez à la feuille de style, puis collez dans la classe. N' oubliez pas de mettre un point devant lui parce que c'est une classe, puis ajoutez simplement un espacement de ligne avec la propriété de hauteur de ligne de deux M, et actualisons le navigateur et voyons à quoi cela ressemble. D' accord. Cela n'a toujours pas changé, donc il y a toujours un problème quelque part. Si on jette un coup d'oeil. C' est parce que nous avons modifié la balise de paragraphe de fermeture sur la page Index, mais nous ne l'avons pas fait dans le fichier single.php. Alors dirigez-vous vers single.php, puis déplacez simplement la balise p de fermeture, et mettez ceci après la catégorie, et enregistrez cela. Voyons si ça marche maintenant. Je pense que cela fonctionne, nous manquons juste les tags là-bas juste parce que je ne pense pas que ce post a des tags, ce qui n'est pas le cas. Si nous essayons la Newsletter d'août, nous avons les tags, nous avons juste besoin d'ajouter une balise de pause dedans. Juste après l'auteur et après la fermeture d'une balise, la balise break. Espérons que cela devrait résoudre tout cela maintenant. Super. Ça a l'air beaucoup mieux. Nous avons maintenant une certaine hauteur de ligne entre les balises et les catégories. Ça a l'air bien maintenant. Ensuite, si nous descendons un peu plus la page, nous pouvons également supprimer le bouton Lire la suite, parce que nous n'avons pas besoin de cela. En fait, nous pouvons déplacer tout le lien et simplement le tirer un peu plus et économiser, puis rafraîchir ça, et voilà. C' est le bouton Read More supprimé. Une chose dont nous devons être conscients lors de la construction de thèmes WordPress est que parfois les utilisateurs peuvent télécharger des messages qui sont vraiment longs. était qu'à cinq paragraphes, donc cela semble assez bien sur la page, mais si quelqu'un télécharge un article en lecture, il peut vouloir le diviser en différentes pages. Nous voulons peut-être ajouter un pager avec précédent et suivant à la fin du post, il suffit de le diviser un peu. La façon dont nous pouvons le faire est que nous pourrions permettre aux utilisateurs de mettre une balise de rupture dans. Si nous choisissons un billet de blog, nous choisirons simplement un article sur lequel nous sommes maintenant, qui est la newsletter d'août, et si nous choisissons juste un point dans lequel vous voulez ajouter un biper, nous pouvons ajouter un commentaire là-dedans, qui est le même qu'un commentaire HTML, qui dit Page suivante. Je vais juste copier ceci et le coller en une fois de plus, puis mettre à jour ce post, et revenir sur le site. Jetons un coup d'oeil à ça. Maintenant, nous avons notre billet de blog apparaissant, et il a coupé après deux paragraphes, où nous allons mettre le point de rupture de page suivant, ce qui est génial. Ensuite, nous devons simplement ajouter un biper au bas des messages, ce qui nous permettra de passer à la page suivante. Nous pouvons le faire dans le single.php et ajouter ceci juste en dessous du contenu, alors ouvrez le PHP, puis la fonction WordPress que nous allons ajouter un wp_link_pages, crochets et point-virgule, puis enregistrer et actualiser la page du blog. Maintenant, nous pouvons voir en bas, nous avons le nombre de pages, donc nous avons 1, 2 et 3, et ils semblent tous fonctionner correctement. La dernière chose que nous voulons faire est d'ajouter un biper au bas du post afin que nous puissions passer au post suivant ou précédent si vous le souhaitez. Retour dans single.php, descendez au pager, et au lieu de dire les messages suivants, nous prenons juste le S de la fin et cela reliera au post précédent ou suivant, et nous n'avons pas besoin du texte entre crochets, parce que le nom du poste est mis dans WordPress dynamiquement. Enregistrez cela, puis actualisez le navigateur. On y va. Maintenant, nous avons la newsletter d'août et nous pouvons lier à la publication précédente ou suivante simplement en cliquant sur les boutons en bas. Nous faisons de bons progrès, et la dernière chose que nous devons faire est juste au texte en haut de la page pour le seul billet. Nous le ferons à nouveau dans la page Fonctions et nous ajouterons une autre instruction Elseif. Elseif, en fait, au lieu d'ajouter une nouvelle instruction là-dessus, nous pouvons simplement l'ajouter à celle is_home. Juste parce que nous allons utiliser le même texte de Tranquil Spa Official Blog. Donc juste après is_home, nous utilisons les deux tuyaux, ce qui signifie tout, donc si nous sommes sur la page d'accueil ou si la page est unique, puis imprime le texte Tranquil Spa Official Blog. Enregistrer et actualiser. D' accord. Bien. C'est donc le modèle terminé pour le billet de blog unique, et si vous me rejoignez dans la vidéo suivante, nous allons permettre aux utilisateurs d'ajouter des commentaires aux messages. 28. Ajouter des commentaires au blog: Bienvenue de retour. Dans cette vidéo, nous allons créer la fonctionnalité permettant aux utilisateurs de commenter les messages. La façon dont nous le faisons est de créer une nouvelle page. Ce sera un modèle de page. Enregistrez ceci sous comments.php, et enregistrez-le dans le même répertoire que tous vos PHP. Alors pour cela, nous ne allons pas réinventer la roue, nous allons juste copier la page des commentaires du thème 2014, qui est inclus avec le téléchargement WordPress. Si vous allez à votre installation WordPress dans htdocs, puis ouvrez trunquil-wp. Ensuite, si vous allez dans le contenu sur les thèmes, je vais utiliser le thème 2014, puis ouvrir le comments.php. Sélectionnez tout et copiez, puis collez le contenu dans comments.php et enregistrez-le. Nous pouvons laisser à peu près tout le comments.php tel qu'il est. Nous allons juste déplacer les références WordPress 2014 juste à partir de là. Certains avantages de l'utilisation du modèle à partir de l'un des thèmes inclus, il avait quelques fonctionnalités intéressantes telles que vérifier si un message est protégé par mot de passe. n'y a qu'une ou deux petites choses qu'on doit changer. Si nous faisons défiler vers le bas jusqu'à la ligne printf, et nous allons personnaliser cela légèrement en changeant une pensée pour commenter, puis sur la ligne suivante changer les pensées en commentaires, puis enregistrer cela. Ensuite, pour inclure cela dans notre thème, nous devons passer au modèle single.php. Alors je vais mettre ça sous le biper. Nous avons besoin de style WordPress où se trouve dans le billet de blog, nous voulons que les commentaires apparaissent et c'est généralement au bas du post. Alors mettons ceci juste en dessous du biper. Quand j'ajoute un commentaire juste ici, ce commentaire je vais dire charger le modèle de commentaires. Ensuite, ouvrez les balises PHP, puis utilisez la fonction de template de commentaires. Alors sauvegardez. Il va passer à un billet de blog et rafraîchir. Vous devriez voir en bas du post, nous avons l'installation maintenant pour laisser des commentaires. Allons de l'avant et ajoutons quelques exemples de commentaires, et vérifions que tout fonctionne bien. Voici nos premiers commentaires. Nous pouvons également répondre aux commentaires. Vous dites bonjour là-bas, puis poster les commentaires et vérifier que tout fonctionne. Il y a nos deux commentaires là-dessus, donc c'est bien. Ensuite, je veux juste aller dans le CSS, ajouter un style personnalisé et m'assurer que les commentaires s'intègrent un peu plus avec le reste du site Web. Alors dirigez-vous vers notre style.css. Ensuite, je veux ajouter un peu de style dans le bas de la page. Copiez les commentaires et ajoutez-le juste en dessous la fiche unique post et changez le commentaire pour être la section commentaire. Pour commencer, je veux m'assurer que la section des commentaires en bas a un style similaire dans les modules de la barre latérale et aussi dans les billets de blog. La façon dont je vais le faire est de copier le même style que nous avons utilisé dans le module de la barre latérale. Il suffit donc de copier cette section et de trouver le sélecteur. Donc, nous ouvrons les outils de développement Chrome avec l'élément inspecter. Nous devons trouver l'ID du conteneur qui entoure toute la section des commentaires. Cliquez sur la loupe, puis recherchez le conteneur environnant. C' est le div avec l'ID des commentaires, puis la classe de la zone des commentaires. Ajoutons ça maintenant. Le div avec un ID de commentaires, puis la classe de comments-zone, puis coller dans le style. Voyons voir à quoi ça ressemble. Bien, le style correspond maintenant au reste de la page. Ensuite, je veux juste mettre en évidence les commentaires juste pour qu'ils se démarquent un peu plus du reste de l'arrière-plan. Nous donnerons un fond gris foncé et ajouterons également une planche ronde et aussi un peu une marge juste pour les séparer. Donc la classe dont nous avons besoin est comment-body. Donc, tout d'abord, nous allons commencer par l'arrière-plan et la couleur de fond est eee. Ensuite, le rayon de bordure est de 10 pixels pour correspondre au reste du site. Puis la marge, 30 pixels en haut et en bas, 0 à gauche et à droite. Alors sauvegardons et actualisons. Ensuite, je veux ajouter l'image de division entre l'en-tête et les commentaires. Voyons le sélectif [inaudible]. Cliquez sur la loupe et l'en-tête. C' est ce qu'on appelle une classe de commentaires h2 titre. Ajoutons ça maintenant. Donc h2 et ensuite la classe des commentaires-titre. Ensuite, il est recadré le même style que nous avons utilisé dans le titre du billet de blog. Donc, nous faisons défiler jusqu'à la section du blog et cherchons le titre du billet de blog. Nous pouvons copier exactement le même CSS, ce qui nous donne l'image et aussi le style. Collez ceci dans la section titre des commentaires et enregistrez, et jetons un coup d'oeil. Donc ça a l'air bien. Ensuite, je veux ajouter un peu de marge au bas des commentaires et aussi une ligne pointillée à travers pour séparer la section de réponse. Pour ce faire, nous devons utiliser la classe de liste de commentaires. Ajoutons une marge, marges au bas de 60 pixels, puis bordure sur le bas de 1 pixel et la ligne pointillée. Jetons un coup d'oeil. On y va. Ensuite, ce que nous devons faire en ce moment, faisons un peu de style dans la section de réponse. Je vais faire de la zone de texte la pleine largeur. Allons chercher la classe pour ça. Le sélectif pour cela est la zone de texte avec l'idée de commentaires. Donc, tapez dans la zone de texte, puis ID des commentaires. Définissez la largeur de la zone de texte sur 100 % et ajoutez une marge au bas de 20 pixels. Puis actualisez. Donc maintenant, c'est toute la largeur. La dernière chose et je veux faire est de styliser le bouton de soumission. Nous allons faire la même chose que le bouton de soumission que nous avons utilisé sur le site bootstrap. Il a la même couleur bleue que le reste du site. Voyons ce qu'est le sélectif. L' entrée a un ID de submit. Nous pouvons simplement ajouter l'ID de soumission sur les paramètres par défaut du bouton dans la section globale. Juste après le bouton par défaut séparé par une virgule, ajoutez également l'ID de submit. Ensuite, faites la même chose dans l'état de vol stationnaire. Soumettez le survol, puis revenez à la section des commentaires. Sous la section zone de texte, ajoutez également l'ID d'envoi et faisons correspondre le bouton à la zone de texte en donnant une largeur de 100 %. Alors sauvegardons cela et voyons à quoi cela ressemble et rafraîchir. Nous n'avons plus besoin des outils de développement. Donc ça a l'air beaucoup mieux maintenant, ça a l'air bien. Une chose que vous ne savez peut-être pas est jusqu'à présent lorsque nous avons ajouté les commentaires et que nous cliquons sur le bouton de réponse. Dès que vous appuyez sur Répondre, nous sommes amenés au bas de l'écran à la réponse. C' est bien pour l'instant quand nous voulons faire un ou deux commentaires. Mais sur une page, il y a des dizaines ou des centaines de commentaires. Nous ne voulons pas être ramenés au bas de la page. Nous voulons que la boîte de commentaire apparaisse juste en dessous du post sur lequel nous avons commenté. Heureusement, WordPress a du JavaScript pour le faire. La façon dont nous pouvons ajouter le JavaScript est par note de tête au functions.php. Si nous allons chercher la section de script de file d'attente dans la configuration du thème juste en dessous du JavaScript Bootstrap, nous allons ajouter le script de réponse commun. Donc, nous allons d'abord vérifier si le post est singulier. Maintenant, nous allons mettre en file d'attente le script comme ci-dessus, avec wp_enqueue_script. Le nom du script est réponse de commentaire, et un point-virgule à la fin de cela. Alors, sauvegardez ça. Si vous allez sur WordPress et actualiser, maintenant si vous cliquez sur le bouton de réponse, et cela ne fonctionne pas pour certaines raisons. Donc, on va juste vérifier pourquoi. Cela vous mènera au bas de la page. Jetons un coup d'oeil sur ça. Nous devons nous assurer que c'est dans les accolades. Alors coupez cette section maintenant que nous venons de faire et collez-la dans les accolades ou dans la fonction. Sauvegardez ça et voyons si ça marche maintenant. Cliquez sur la réponse, et nous y allons. Maintenant, plutôt que d'être emmené tout en bas de la page, nous avons maintenant le JavaScript activé, et cela vous fait que la boîte apparaît juste en dessous des commentaires qui y répondront. Alors que nous allons une telle section de commentaires entièrement fonctionnelle. Merci d'avoir écouté, et nous vous verrons dans la prochaine vidéo. 29. Rendre votre barre latérale dynamique: Bienvenue, les gars. Dans cette vidéo, nous allons jeter un oeil à la barre latérale. Nous allons nous assurer qu'il est pleinement fonctionnel. Nous allons nous assurer que le module d'archives et la section de catégorie seront dynamiques, ce qui signifie que WordPress remplira les catégories et les mois de l'année par les articles de blog disponibles. Nous allons donc les filtrer à la façon dont nous aimerions les afficher. Le texte qui se trouve dans les archives se trouve dans la section catégorie. C' est juste actuellement statique HTML. C' est juste ce que nous avons tiré du site Bootstrap. Je vais changer ça maintenant. Nous allons changer cela dans le sidebar.php. Passez à ça maintenant. Nous commencerons par le mois de l'année. Si nous supprimons simplement tous les éléments de la liste pour l'instant, je vais le remplacer par une fonction PHP WordPress. Ouvrez les balises PHP. Ensuite, à l'intérieur de cela, nous allons le remplacer par wp_get_archives, avec les crochets et un point-virgule, puis enregistrer cela, et retourner sur le blog et rafraîchir. Maintenant, nous allons utiliser tous les mois Bootstrap de l'année, que nous avons mis plus tôt. Maintenant, nous sommes juste à gauche avec les mois générés WordPress. Actuellement, je n'ai reçu que des messages dans le mois d'août. Juste pour lui donner un peu plus de contenu, je vais juste ajouter un post de plus. Je vais juste copier l'exemple de texte. Alors ajoutez un post de plus. Je vais appeler ça les nouvelles de septembre, puis coller un peu de texte là-dedans. Cela peut aller dans la catégorie des nouvelles, et un tag de nouvelles, puis publier cela. Retournez ensuite à la section blog. Maintenant, nous avons des messages de deux mois séparés. Nous pouvons voir que WordPress les ajoute automatiquement. Nous allons faire exactement la même chose avec la section catégorie. Retournez au sidebar.php et trouvez la section de catégorie, qui est juste en dessous des archives, puis supprimez les éléments de liste gratuits que nous avons là-dedans. Ouvrez PHP, et la fonction PHP que nous utilisons est wp_list_categories et enregistrez cela, puis actualisez le blog. Maintenant, le module de la barre latérale sous les catégories a les catégories WordPress, que nous allons entrer lorsque nous créons les blogposts. Nous avons un titre de catégories supplémentaires là-dedans que nous ne voulons pas, donc la façon de supprimer qui est de retour dans sidebar.php, dans la fonction WP Lists Categories, entre parenthèses, nous pouvons supprimer le titre entre les guillemets en tapant dans title_li est égal, nous pouvons simplement laisser ce vide afin qu'aucun titre n'apparaisse. Nous allons enregistrer et rafraîchir. Il nous reste juste avec notre niveau de direction que nous avons mis en nous-mêmes. Maintenant, WordPress a mis les mois et les catégories dans. Nous pouvons sélectionner ces liens maintenant. Cela devrait remplir la page du blog pour afficher les messages uniquement par catégorie du mois que nous sélectionnons. Nous avons sélectionné News là-bas et nous vérifierons que tout fonctionne en faisant défiler vers le bas. On vient d'y avoir deux messages, tous les deux pour la catégorie des nouvelles. Donc, si nous sélectionnons Septembre, nous devrions juste obtenir le seul message que nous avons fait aujourd'hui. Maintenant, essayons un de plus. Essayons la section Offres. Nous venons de recevoir un billet de blog avec la catégorie Offres. Que tout semble fonctionner bien. Si vous me rejoignez dans la vidéo suivante, nous allons créer le fichier archive.php, qui contrôle la mise en page de cette vue. 30. Modèle d'archives: Bienvenue de retour. Dans la dernière vidéo, nous avons corrigé les modules de la barre latérale. Lorsque nous sélectionnons le mois de l'année ou les catégories, WordPress et [inaudible] est en baisse dans les billets de blog à ce que nous avons sélectionné. Dans cette vidéo, nous allons créer le archive.php, qui va être le modèle qui contrôle l'apparence du blog lorsque nous sélectionnons sur l'une de ces archives. Pour commencer, dirigez-vous vers les parenthèses ou votre éditeur de texte, puis créez une nouvelle page et enregistrez cette page sous archive.php. Assurez-vous qu'il se trouve dans le répertoire du projet. Nous allons utiliser le single.php comme point de départ. Sélectionnez tout, copiez, puis collez-le dans notre nouvelle page, qui est l'archive, et enregistrez-le. Puis revenons en haut de la page, nous allons créer les commentaires. Le commentaire dont nous avons besoin, nous allons appeler ceci Le modèle pour afficher les pages d'archive, et enregistrer cela. La page va ressembler à peu près la même lorsque nous cliquons sur les archives que lorsque nous avons cliqué sur le billet de blog. Jetons un coup d'oeil à la vue complète. Nous n'avons pas besoin de faire quoi que ce soit dans le modèle d'archives pour l'instant, mais nous voulons aller dans la page des fonctions et nous assurer que le texte sur la zone en vedette est changé à Tranquil Spa Official Blog. Mais nous allons faire quelque chose d'un peu différent cette fois. Nous allons ajouter un peu plus de PHP, qui s'affichera juste en dessous du texte. Il nous montrera la catégorie que nous avons sélectionnée ou le mois que nous affichons. Retour dans l'éditeur de texte, et passez au functions.php, puis il devrait être à la fin de votre page Fonctions. Nous devrions avoir la fonction de texte de fonction. Nous allons continuer cette section avec une autre déclaration elseif, juste après la dernière. Tapez else, puis la condition et les accolades. La condition que nous voulons vérifier est si la page est archive, et si c'est le cas, nous allons faire écho au navigateur pour commencer avec le même texte de Tranquil Spa Official Blog. On va copier et coller ça. Comme nous l'avons déjà mentionné, sous le texte, nous allons mettre une nouvelle ligne. Cette ligne va montrer le mois ou la catégorie que nous affichons, alors assurez-vous qu'il va sur la ligne suivante. Je vais juste faire écho à une balise de pause, et m'assurer que cela va à entre guillemets, juste comme ça. Pour commencer, nous allons faire écho à la catégorie ou au nom de la balise. Nous allons le faire en tapant single_term_title, puis le texte que nous voulons apparaître avant le titre est, navigation, puis un deux-points et un espace. Sauvegardons ça et voyons à quoi ça ressemble. Actualisez le navigateur. Maintenant, nous avons le texte du blog officiel Tranquil Spa, puis la balise de pause, et tout suite, nous avons le texte de navigation que nous venons de mettre. Le texte de navigation est ensuite suivi de la catégorie, qui est, actuellement, offres. Cliquons sur les nouvelles et vérifions que ça marche. Maintenant, nous avons la section des nouvelles. Je vais essayer un de plus. Promotions. Bien. Maintenant, c'était assez simple de mettre ça là-dedans, mais ça va être un peu plus difficile à tirer dans le mois du post, mais je vais vous montrer comment le faire maintenant. Tout d'abord, nous devons mettre une autre instruction if, qui vérifie si l'archive est filtrée par le mois en cours. Nous mettons entre parenthèses, si c'est mois, puis les crochets après, puis créons les accolades. Pour commencer, nous devons savoir quel mois de l'année il est actuellement. Je vais stocker cela dans une variable, donc le signe $. Je vais appeler cette variable le MonthNum, et définissons cela égal à get_query_var, puis entre parenthèses , et les guillemets. On va mettre le numéro du mois, puis un point-virgule à la fin. Ensuite, nous allons créer deux variables, une pour le mois et une pour l'année. Nous commencerons par le mois. Nous allons définir cela égal à la date PHP, et le premier paramètre que nous allons transmettre est le format. Les formats que nous voulons renvoyer sont un F, qui renvoie le mois en cours dans le formulaire long, comme Janvier ou Février, puis séparé par une virgule. Ensuite, nous voulons retourner l'horodatage de l'unité. Nous allons le faire en tapant mktime, et ensuite nous devons passer certains paramètres. Le premier est l'heure. On n'a pas besoin de mettre quoi que ce soit là-dedans. La seconde, c'est la minute. Encore une fois, c'est zéro. Le troisième est le second. Ça va être zéro. Le quatrième est pour le mois. Parce que nous avons créé une variable appelée MonthNum, nous pouvons simplement copier cela, et nous pouvons coller cela dans. Cela devrait retourner le mois en cours. Ensuite, nous créons la variable d'année. Année sera égale à, et nous ferons la même chose que le numéro du mois, donc get_query_var. Cette fois, nous allons passer dans le mot, l'année, et un point-virgule à la fin. Maintenant, nous allons créer deux variables avec le mois et l'année. On doit faire écho au navigateur. Echo, tout d'abord, le texte, qui va être, post from, avec un espace juste après, puis points à la variable. Le premier sera le mois, et ensuite nous ajouterons un espace. Mettez les guillemets simples avec un espace entre les deux, puis nous ajouterons la dernière variable, qui était l'année, avec le point-virgule, et appuyez sur « Enregistrer ». Ensuite, dirigez-vous vers WordPress et actualisez. Nous allons sélectionner l'une des archives et voir si cela fonctionne. Ça a l'air bien. Nous avons le message à partir du texte, puis nous avons ajouté sur la variable mois, puis la variable pour l'année. Vérifions les mois d'août et voyons si ça marche. Tout semble fonctionner correctement. Nous avons le post affiché du mois en cours. Nous avons également affiché les catégories de la balise actuelle. Maintenant, si vous me rejoignez dans la prochaine vidéo, nous continuerons avec le site Web en ajoutant la dernière page de nouvelles. 31. Page des dernières actualités: Bienvenue de retour. Dans cette vidéo, nous allons créer la page Dernières nouvelles. Maintenant, la page Dernières nouvelles va être assez similaire à la page Blog. Mais nous allons juste ajouter un filtre WordPress, nous allons remplir à la colonne post pour afficher seulement ceux qui sont étiquetés avec la catégorie news. Pour commencer, dirigez-vous vers les parenthèses et créez une nouvelle page, et enregistrez cette page sous page-news.php. Ensuite, parce que cela va être assez similaire à la page du blog, nous pouvons simplement copier la page d'index. Sélectionnez tout le contenu et copiez, puis collez-le dans la page d'actualités, puis enregistrez-le. Contrairement aux derniers modèles que nous avons créés, ce sera un modèle à usage unique, donc nous allons seulement lier ceci à la page Dernières nouvelles. Pour nous assurer que nous pouvons lier cela à une page WordPress, tout en haut, nous allons ajouter un commentaire qui lui donnera un nom de modèle. Ajoutez donc les commentaires en haut, puis ajoutez un nom de modèle. Cela s'affiche dans le tableau de bord, et cela s'appellera les dernières nouvelles, et enregistrez cela. Maintenant, nous allons lui donner un nom de modèle. Si nous nous dirigeons vers WordPress, puis passons au tableau de bord, sélectionnez les pages sur la gauche, puis allez dans Ajouter Nouveau, et créons les Dernières Nouvelles. Cette fois, si nous allons à la page Attributs sur le côté droit, nous pouvons sélectionner un modèle à utiliser. Cette fois, nous pouvons sélectionner le modèle Dernières nouvelles car nous avons ajouté le nom du modèle en haut. Sélectionnez Dernières nouvelles, puis Publier, et cela doit être automatiquement ajouté à la page d'accueil. Nous avons donc la maison, le blog, et maintenant les dernières nouvelles. Je pense qu'on a une erreur d'orthographe. On va juste éditer ce titre là. Ajoutez le « t » à la fin et mettez à jour. Super, alors maintenant nous avons la page d'accueil, le blog, et les dernières nouvelles. Maintenant, nous avons utilisé la page d'index comme modèle pour les dernières nouvelles. Nous devons maintenant filtrer ces messages vers le bas pour ne montrer que les messages qui ont la catégorie des nouvelles. Retournez au fichier page-news.php. Pour ajouter le filtre de catégorie, ouvrez le PHP, puis nous utilisons la fonction WordPress, qui est query_posts, puis entre parenthèses, nous allons dire à WordPress quels messages à interroger ; ceux avec le nom de catégorie. Donc category_name égal à news et un point-virgule à la fin, et enregistrer. Si nous revenons sur le site et actualisons, donc maintenant lorsque nous cliquons sur la section « Dernières nouvelles », nous devrions juste être affiché avec les messages qui ont la catégorie de nouvelles. Ça marche bien, donc c'est bien. Vous avez peut-être remarqué que nous devons ajouter le texte ou le texte de la fonction en haut. Nous allons le faire dynamiquement dans le functions.php. Cette fois, nous allons le faire un peu différemment. Nous allons demander à WordPress de tirer dans le nom du site, qui sera Tranquil Spa, puis nous allons ajouter une balise de pause. Ensuite, en dessous, nous ajouterons le titre de la page, qui devrait être Dernières Nouvelles. Passez au fichier de fonctions. Nous allons ajouter une autre instruction else-if. Assurez-vous de ne pas ajouter else-if à l'accolade bouclée de fermeture pour les instructions if. Va à la suivante en bas. Else-if, entre parenthèses est modèle de page. Le modèle de page va être le page-news.php. Cette fois, l'instruction else-if vérifie le nom du modèle réel, puis les accolades. S' il s'agit d'un modèle de page de nouvelles, nous ajouterons le nom du site en saisissant les informations du blog. Entre parenthèses, tapez simplement un nom, et cela va tirer dans le nom du site, puis nous allons faire écho au navigateur une balise de rupture, mettons ceci sur une ligne séparée, puis nous obtiendrons le titre de la page de Dernières nouvelles. Tapez simplement le_title et enregistrez et actualisez. On y va. Maintenant, nous avons tiré le titre du site, puis le titre de la page. Si jamais nous devons modifier l'une de ces informations, elles s'afficheraient automatiquement. On y va. C'est donc la section Dernières nouvelles terminée. Merci de regarder, et nous vous verrons dans la prochaine vidéo. 32. Ajouter des images de fonctionnalité à nos publications: Bienvenue de retour. Dans cette vidéo, nous allons ajouter le support de thème pour les vignettes de publication et cela permettra aux utilisateurs lors de la création d'un nouveau billet de télécharger également une image en vedette pour rendre le post un peu plus agréable afin que ce ne soit pas seulement du texte brut. La façon de le faire est que nous devons aller à notre functions.php, puis nous devons ajouter le support de thème pour les vignettes de publication. Passez à functions.php, puis sauvegardez en haut dans la configuration. Nous le faisons de la même manière que les flux et la balise de titre que nous avons ajoutée au début. Donc, dans la configuration ajouter le support de thème. Ensuite, à l'intérieur des crochets, nous allons mettre les vignettes post-vignettes et le point-virgule et enregistrer ça. Maintenant, nous avons inclus le support de thème. Si nous allons sur le tableau de bord WordPress, puis si nous allons dans la section blog. Choisissez l'un des billets de blog, puis sélectionnez « Modifier la publication ». Ensuite, faites défiler vers le bas. Vous devriez voir qu'il y a maintenant une boîte d'image en vedette est apparue. Nous pouvons l'utiliser pour définir une image à joindre à la publication. Il suffit de sélectionner cela, nous pouvons avoir un fichier de téléchargement ou nous pouvons utiliser la médiathèque. Pour l'instant, je vais juste aller à la section Sélectionner les fichiers dans la section de téléchargement, puis sur le bureau dans le dossier d'amorçage, et les images, j'ai inclus une image appelée le thumbnail.jpg. Nous pouvons l'utiliser si vous le souhaitez, ou vous pouvez choisir l'un des vôtres. Ensuite, je vais juste mettre quelques textes alt de l'image du lac, puis définir l'image en vedette, puis mettre à jour le post. Ensuite, nous retournerons dans le blog et faisons juste un de plus. Cette fois, je vais sélectionner le deuxième post puis ajouter l'image en vedette de la même manière. Cette fois, nous allons simplement aller à la médiathèque et utiliser la même si vous voulez, puis définir cela et mettre à jour. Si vous allez dans le blog à la minute, ne vous inquiétez pas que vous ne pouvez pas voir l'image tout de suite. Il y a quelques petits pas que nous devons faire en premier. Passez au index.php et puis nous devons chercher l'extrait, qui est le texte. Faites défiler vers le bas jusqu'aux balises PHP avec l'extrait. Pour montrer l'image juste au-dessus de l'extrait, ouvrez les balises PHP, puis nous définissons la vignette de post, les crochets et le point-virgule, et sauvegardez cela. Si vous actualisez le navigateur maintenant, vous devriez obtenir les images apparaissant. On y va. C'est les deux premières images que nous avons mises avant. Cela fait juste que le post semble beaucoup mieux. Nous pouvons ajouter un peu plus de couleur au poste. Cela est ajouté à la page d'index, mais nous avons également des billets de blog apparaissant dans la page d'actualités et aussi dans le single.php. Allez sur la page d'index et copiez la vignette de la publication. Ensuite, si vous allez dans le single.php, et cette fois plutôt que l'extrait, cela ira juste au-dessus du contenu. N' oublie pas de sauver. Aussi dans les nouvelles de la page, cela ira juste au-dessus de l'extrait. Collez ça et en toute sécurité. Cela devrait maintenant être nos images affichées sur le post dans les nouvelles, l'index, et aussi la page unique. Si vous souhaitez modifier la taille par défaut de l'image qui s'affiche, nous pouvons le faire sur le tableau de bord. Alors dirigez-vous vers le tableau de bord, les paramètres, puis les médias. Vous pouvez définir les images par défaut pour la vignette, moyenne ou grande. Si vous voulez définir, par exemple, la vignette comme image par défaut dans le blog, dirigez-vous vers le blog, puis dans la page d'index mettrait ensuite entre crochets la vignette, puis enregistrez cela. Ensuite, si vous actualisez le blog, nous devrions maintenant obtenir la petite image miniature par défaut. Vous pouvez faire la même chose pour les moyennes ou les grandes. Mais je vais juste supprimer cela pour l'instant et juste laisser le dimensionnement standard de l'image. Cette page est presque terminée. Juste un peu de CSS à ajouter. Je veux juste ajouter une certaine marge au bas de l'image et aussi faire l'image à 100 pour cent du conteneur. Si nous allons dans le style.css, puis nous allons ajouter cela dans la section blog. Jetons un coup d'oeil pour la section blog. Ensuite, au bas de cette section, nous pouvons réutiliser la classe de post de blog, mais ensuite sélectionner l'image. J' ajouterai une marge au bas de l'image. Juste de 20 pixels et définissez la largeur de l'image à 100 pour cent. Enregistrez, puis actualisez le blog. On y va. C' est à regarder beaucoup mieux et laissez-nous maintenant terminé avec la section blog. Je vous verrai dans la prochaine vidéo où nous allons ajouter le menu WordPress au pied de page. 33. Menu du pied de page WordPress: Bienvenue de retour. Dans cette vidéo, nous allons créer le menu WordPress pour la section pied de page. Actuellement, si nous faisons défiler vers le bas jusqu'au pied de page qui a la liste non ordonnée que nous avons mise dans le modèle Bootstrap, nous voulons rendre le menu de pied de page plus dynamique comme le menu dans la barre de navigation. Alors, allons dans le tableau de bord et créons un nouveau menu. Accédez à Apparence, puis Menus, puis sélectionnez Créer un nouveau menu. Je vais appeler ce menu le menu Pied de page, puis créer le menu. Sur la gauche, sous l'onglet Pages, nous pouvons sélectionner les liens que nous voulons ajouter à ce menu. Nous n'avons pas encore créé la page À propos de nous ou la page Contactez-nous, mais nous pouvons ajouter le Blog et les Dernières nouvelles. Sélectionnez ces deux, puis sélectionnez Ajouter au menu, et le blog va juste au-dessus des dernières nouvelles. Enregistrez cela, et puis si nous nous dirigeons vers le functions.php, nous pouvons enregistrer le menu. Donc, revenez dans functions.php, puis recherchez la section register_nav_menus que nous avons faite tôt dans le cours. Ensuite, en dessous de cela, nous devons ajouter le menu de pied de page. Nous copions simplement le menu principal, puis collez ceci juste en dessous. Le surnom est le pied de page, puis le nom du menu est le menu Pied de page. Enregistrez-le dans le tableau de bord, puis actualisez la page du menu. Maintenant, la page est actualisée, assurez-vous que vous êtes toujours dans le menu Pied de page, puis sélectionnez l'onglet Menu Pied de page sous l'emplacement du thème et enregistrez-le. Ensuite, nous allons ajouter le marcheur de navigation au fichier de pied de page de la même manière que nous l'avons fait dans la section de tête. Alors passez au header.php, et puis si nous cherchons la barre de navigation, qui est tout de wp_nav_menu jusqu'aux crochets de fermeture, qui est juste là. Copiez donc cette section, puis passez dans le footer.php, puis recherchez la navigation qui est juste au-dessus des icônes des médias sociaux. Si nous localisons la liste non ordonnée, puis nous pouvons supprimer toute la section de liste non ordonnée avec la section À propos, le Contact, le Blog et la section Dernières nouvelles. Donc supprimez-les, mais assurez-vous de quitter le conteneur extérieur puis ajoutez les balises PHP. Ensuite, dans les balises, collez dans le navwalker. Celui-ci n'a pas besoin d'autant d'informations que l'en-tête. Pour le nom du menu, ce sera le pied de page. Nous pouvons supprimer l'emplacement du thème et aussi la profondeur car ce n'est qu'un seul niveau. Je vais juste parler de ça. Le conteneur est la liste non ordonnée qui a été supprimée auparavant. Donc, changez de div à UL. Nous n'avons pas besoin d'augmenter la classe de menu, l'ID de conteneur ou la classe de conteneur pour celui-ci, donc nous pouvons les supprimer, et tout ce que nous pouvons laisser tel quel, puis enregistrer cela. Juste pour terminer le menu Pied de page, nous allons ajouter les deux dernières pages, donc Aller aux pages, puis Ajouter Nouveau. Ensuite, nous allons ajouter dans la page À propos de nous, donc À propos de nous, puis cliquez sur « Publier », puis sur « Ajouter nouveau ». La dernière page qui va dans le menu du pied de page est la page Contactez-nous, alors contactez-nous, puis « Publier ». Ajoutez ensuite ces deux dernières pages au pied de page, donc Apparence et Menus, sélectionnez le Menu Pied de page, puis sélectionnez la page Contactez-nous et la page À propos de nous que nous venons de créer ici, « Ajouter au menu », puis réorganisez ces dernières en l'ordre correct. Donc, la page supérieure était À propos de nous, puis c'était Contactez-nous, puis le blog, et les dernières nouvelles, puis appuyez sur « Enregistrer le menu », puis allez sur le site. Donc, il semble que nous avons réussi à ajouter ces pages, le menu du haut aussi, donc nous allons les supprimer dans un instant. Mais si on descend au fond, on peut vérifier si tout fonctionne correctement. Alors sélectionnez le Blog, il y a notre section blog et les dernières nouvelles. Ça a l'air bien. Nous n'avons pas encore créé la page À propos de nous ou Contact. Nous allons simplement supprimer ces liens de menu du haut. Revenez donc dans le tableau de bord, l'apparence et les menus. Ensuite, sélectionnez le Menu principal en haut, et nous pouvons facilement les supprimer du menu en les sélectionnant. Ensuite, sélectionnez et supprimez. Faites de même pour la page Contactez-nous, puis enregistrez ce menu. Donc, c'est comme ça que ça devrait maintenant. Maintenant, j'ai tous les menus fonctionnant correctement sur le site Web. Merci d'avoir regardé. Prends soin de toi. 34. Ajouter les widgets de barre latérale: Bienvenue de retour. Dans cette vidéo, je vais vous montrer comment rendre notre barre latérale plus modulaire en ajoutant des widgets WordPress. Un widget de barre latérale est essentiellement juste l'un des blocs que nous avons déjà créés, mais nous allons le mettre dans WordPress. Cela donne à l'administrateur du site la possibilité de réorganiser et de modifier les choses dans la barre latérale s'il le souhaite. La façon de commencer, c'est si nous passons aux Codecs et si nous cherchons la section sur Wigdetizing Themes. Il est assez facile de faire fonctionner les widgets dans notre thème. À la minute, si nous passons au tableau de bord, puis si nous allons dans l'Apparence, il n'y a actuellement aucune option pour les widgets. Nous allons changer cela en l'ajoutant à notre fichier de fonctions. Si nous cherchons la section sur la façon d'enregistrer une zone de widget, puis copions l'exemple de code, puis passez au functions.php. Je vais coller cela juste avant la fonction de texte de la fonction. Collez ça là-dedans. Nous n'avons pas besoin des balises php car elles sont déjà à star à la fin du fichier de fonctions. On peut les enlever. Ensuite, c'est juste un cas de changement de certaines valeurs, donc le nom de notre barre latérale va être barre latérale. Ensuite, l'ID, nous pouvons le changer à tout ce que nous voulons parce que nous avons utilisé la barre latérale dans la section bloc de ce côté, je vais l'appeler la barre latérale. Je vais appeler ça un blog. Puis quand c'est un WordPress ce qui va avant et après le widget. Si vous allez dans le sidebar.php, et ce que nous faisons essentiellement est de remplacer ces modules de barre latérale. Nous devons dire à WordPress tout le contenu de ces modules est entouré par la div avec une classe de module de barre latérale. Changeons la div avant le widget pour avoir la classe égale au module de barre latérale, et c'est la div de fermeture. Maintenant, c'est bien. Puis avant et après le titre, nous retournons dans la barre latérale. Le titre sous la forme d'un titre h4 ou de niveau 4. Modifiez avant le titre pour être h4, puis h4 après le titre, puis enregistrez cela. Si vous revenez aux codecs WordPress, puis faites défiler vers le bas jusqu'à la façon d'afficher de nouvelles zones de widget, nous devons copier l'exemple de code et le coller dans notre barre latérale. Copiez cette section. En fait, je vais juste copier tout sans les balises php. Copiez et allez dans le sidebar.php, puis faites défiler vers le haut et collez-le juste avant tout le reste du code. Nous donnons à notre barre latérale l'ID de sidebar_blog. Changez-le en zones où se trouve le droit de la maison. Nous allons changer cela en sidebar_blog, et la même chose en bas, nous allons le changer en sidebar_blog aussi. Alors, sauvegardez ça. Maintenant, si nous retournons dans le tableau de bord et appuyez sur « Actualiser », vous devriez voir que lorsque nous allons à l'Apparence, nous avons maintenant une option de widgets. Sélectionnez cela. Maintenant, nous pouvons voir une liste de tous les widgets disponibles, et nous pouvons également faire des widgets personnalisés. Tout ce que nous avons à faire est de simplement les faire glisser dans la barre latérale, et la plupart des widgets que nous ajoutons, ils seront les mêmes que notre site bootstrap. Mais le premier que nous voulons ajouter est une boîte de recherche. Nous n'avons pas encore de boîte de recherche dans le site, alors pourquoi ne pas utiliser un widget préfabriqué ? Faites simplement glisser la zone de recherche sur la barre latérale, et je vais créer le widget À propos de nous. On va le faire avec la zone de texte. Faites glisser le texte vers la barre latérale. Le titre de ceci était About. Pour le contenu, nous pouvons copier le texte à partir du sidebar.php. Copiez toutes les balises, puis collez-les dedans. Nous n'avons pas besoin de la balise p pour pouvoir les supprimer. Je veux fermer dans p tag là. Enregistrez-les, puis sélectionnez « Ajouter automatiquement des paragraphes ». Nous pouvons fermer celui-ci maintenant, ainsi que la boîte de recherche. Avant d'aller plus loin, vérifions simplement le site, et voyons si tout fonctionne bien. Rendez-vous sur le blog. Il semble que nous ayons une erreur dans le sidebar.php. Dirigez-vous vers le sidebar.php et c'est sur la ligne 5. Il semble que nous manquons juste quelques balises d'ouverture de php, de fermeture. En haut, ouvrez le php, et alors que beaucoup est le fermé à l'intérieur là. Avec le démarrage de la balise, la fermeture et la balise de départ là. On a juste besoin de fermer ça et d'économiser, et ça devrait être correct maintenant, alors rafraîchissez-vous. Bien. Maintenant, nous avons la boîte de recherche dans la barre latérale. Nous avons la section À propos de nous montrer deux fois. Allez dans la barre latérale et supprimez le module de la barre latérale de la section À propos de nous et enregistrez. Maintenant, il nous reste juste avec le widget À propos de nous. Ensuite, nous ferons les archives et les catégories. Retour dans WordPress, dans le tableau de bord, Apparence et Widgets. WordPress le rend vraiment facile pour nous dans les archives et les catégories. Vous pouvez voir sur la gauche les archives et les catégories ont déjà été créées pour nous. Faites glisser dans les archives et donnez-lui le titre. Ensuite, enregistrez, et faites de même avec les catégories. Déposez la fin juste en dessous. Donnez-lui un titre de catégories et sauvegardez. Ensuite, nous pouvons les supprimer maintenant de notre pied de page. Le module de barre latérale pour les archives, je peux aller et aussi pour les catégories, nous allons le faire aussi. Enfin, nous allons faire la section Abonnés, ce sera un widget de texte comme la section À propos de nous. Pendant que nous sommes dans la barre latérale, copions le contenu. Nous devons copier la police de certaines icônes pour Facebook, Google, Pinterest et YouTube. Découpez-les. Je peux en fait simplement supprimer le module maintenant, et enregistrer cela. De retour dans les widgets, faites glisser une autre zone de texte dans la barre latérale. Le titre est Followers. Collez le contenu et appuyez sur « Enregistrer ». Ensuite, revenez dans le blog et vérifiez, tout fonctionne. Bon avec la section Recherche, À propos, Archives, Catégories et médias sociaux. Super. Beaucoup de ces barres latérales ressemble à peu près à la même chose qu'avant, il est maintenant beaucoup plus modulaire et il permet à l'utilisateur connecté ou à l'administrateur du site de pouvoir modifier ou ajouter de nouveaux widgets. C' est à peu près tout ce qui a été fait pour faire ça. Je veux juste ajouter un peu de CSS, en particulier pour la zone de recherche juste parce que le bouton Rechercher a besoin d'un peu de place. Je vais également faire en sorte que la boîte de recherche ressemble davantage aux boutons de saisie que nous avons utilisés dans le site Web Bootstrap. Passons au style.css, puis copions un commentaire. Ensuite, nous allons faire une section de la barre latérale. Juste au-dessus du style mobile, changez le commentaire pour être barre latérale. Chacun des modules de la barre latérale a une classe de module de barre latérale. On va commencer par ça. La classe du module de barre latérale, puis nous allons commencer par l'entrée. Pour espacer, nous allons avoir une marge de 10 pixels. Je vais définir la largeur maximale à 100 pour cent. Sauvegardez et jetez un oeil. Maintenant, il y a un peu d'espacement autour des entrées. Ensuite, nous devons obtenir l'ID de la classe pour le bouton d'entrée. Allez dans les outils de développement, puis sélectionnez la loupe, puis cliquez là. Nous pouvons voir que nous avons l'ID de searchsubmit, puis revenons à la feuille de style. Créez l'ID. En fait, au lieu de mettre les styles ou de dupliquer les styles dans la barre latérale, nous allons simplement les ajouter, ouvrir la section globale. Si nous recherchons les styles pour le bouton, Par défaut, nous allons utiliser exactement les mêmes styles pour cela. Nous pouvons également ajouter cela à la fin. L' ID a été searchsubmit, puis enregistrez-le. Nous allons également ajouter le vol stationnaire. ID de searchsubmit, puis survolez. Enregistrez cela, puis actualisez. Maintenant, cela fonctionne, donc nous avons le même style pour le bouton, et le survol fonctionne aussi. Cela dit, tout fonctionne et c'est ainsi que vous ajoutez des widgets personnalisés aux thèmes WordPress. 35. Page « À propos »: Dans cette vidéo, nous allons créer la page À propos de nous. Nous avons déjà le modèle pour cela dans la conception bootstrap, donc cela va être assez simple à faire. Allez dans votre éditeur de texte, créez une nouvelle page et enregistrez cette page en tant que page-about.php, et pour commencer, nous allons copier le modèle de nouvelles de page. Copiez donc le contenu et collez-le dans le modèle about. Nous n'avons pas besoin de la barre latérale ou de la section blog, donc nous pouvons presque tout supprimer de cette page. Nous supprimerons cela et modifierons les commentaires en haut pour que le nom du modèle soit About Us. Ensuite, passez au tableau de bord WordPress, puis ensuite, nous allons ajouter ce modèle à la page que nous avons créée. Alors allez sur les pages, puis recherchez la page À propos de nous et appuyez sur Modifier. Ensuite, nous pouvons changer le modèle pour le modèle À propos de nous, puis mettre à jour cette page. Maintenant, nous pouvons aller sur le site Bootstrap. Si nous ouvrons le dossier, puis ouvrons la page À propos de nous dans l'éditeur de texte. Je vais réduire cela, puis faire glisser about.html dans l'éditeur de texte, puis nous pouvons copier toute la section et copier toute la section À propos de nous. Nous n'avons pas besoin de l'en-tête. On l'a déjà. Nous n'avons pas besoin de section de fonctionnalités. C' est fait dans WordPress. Copiez la section À propos de nous, jusqu'à la balise de section de fermeture. Copiez cela, puis revenez dans la page À propos de nous et collez-le entre l'en-tête et le pied de page. Ensuite, nous avons juste besoin de corriger le chemin du fichier image, donc je vais juste copier le PHP à partir de la page d'index. Il suffit de chercher une image. En fait, nous avons besoin de la première page pour ça. Copiez donc le chemin du fichier PHP, puis allez dans la page À propos de nous. On va commencer par le haut. Nous allons utiliser l'image du séparateur pour commencer, alors collez-la dans, et assurez-vous que vous avez la barre oblique avant le dossier des images. Ensuite, faites défiler vers le bas. Ajoutez ceci à toutes les autres images. Ensuite, appuyez sur Enregistrer, puis dirigez-vous vers la page À propos de nous et voyez si cela fonctionne. Donc, vers le bas dans le menu du pied de page, la section À propos de nous. Que tout semble fonctionner. Nous avons seulement besoin de changer le texte sur l'image en vedette et nous faisons le dans les fonctions, de la même manière que tous les autres. Donc, trouvez la fonction de texte d'entité. Nous allons permettre à WordPress de tirer le titre de la page de la même manière que nous l'avons fait avec le modèle de nouvelles. Donc, nous aurons le nom du site de Tranquil Spa, puis la ligne suivante sera le titre de la page. Si nous ajoutons ceci à la même instruction elseif, alors copiez le modèle de page. Copiez chaque modèle de page, puis les crochets, et mettez le symbole tout, qui est les deux tuyaux, puis collez-le dans. Mais cette fois, le modèle de page est pour la page-about. Enregistrez cela et actualisez la page. Tout ça marche. Nous avons le titre du site, puis le titre de la page ci-dessous. Tout est terminé maintenant avec la page À propos de nous. 36. Page de contact: Voici la page Contactez-nous que nous avons créée dans le modèle Bootstrap. Maintenant, nous allons convertir cela à WordPress d'une manière similaire à la page arc que nous avons créé dans la dernière vidéo. Donc, il va être assez simple de convertir maintenant à la plupart du travail acharné dans Bootstrap. Donc, comme d'habitude, nous allons créer une nouvelle page et services page-contacts.php. Ensuite, nous allons utiliser le modèle de nouvelles de page pour commencer avec. Copiez donc tout le contenu, puis collez-le dans. Ensuite, revenez aux commentaires. Nous ferons la même chose qu'avant, mais cette fois avec des modifications à Contactez-nous. Alors, sauvegardez ça. Si vous allez sur WordPress, puis dans le tableau de bord, puis recherchez la page que nous avons créée. Donc, le Contactez-nous et éditer. Ensuite, changez le modèle que nous allons utiliser pour être Contactez-nous, puis obtenez cette page. Ensuite, sauvegardez dans l'éditeur de texte. Nous allons donc supprimer toute la section de bloc et aussi la barre latérale, jusqu'au pied de page. Donc, laissant l'en-tête et le pied de page dans. Ensuite, nous devons trouver la page Contactez-nous que nous créons dans Bootstrap. Retournez dans le dossier traquil-bs. Faites ensuite glisser le contact ou le code HTML dans votre éditeur de texte. Ensuite, nous allons copier cette section qui est la barre de contact. Regardez donc les commentaires de la section Contactez-nous. Copiez ensuite jusqu'à la balise close and section, qui se trouve juste avant le pied de page. Alors copiez ça. Ensuite, collez ceci entre l'en-tête et le pied de page. Puis revenez en haut de la page. Donc quelques petits changements à faire sur cette page. Tout d'abord, nous avons obtenu le titre de niveau 2, qui est juste du texte statique. Donc, nous allons changer cela pour être WordPress php. Donc php, le titre de soulignement. Puis fermez-le. Maintenant, utilisez php, c'est tirer dans le titre de la page. Nous devons réparer les chemins du fichier image. Donc, je vais retourner dans la première page et aussi copier la même partie que nous avons fait la dernière fois, qui est le php. Encore une fois, n'oubliez pas la barre oblique avant. Donc, revenez dans la page de contact et collez-le avant l'image divisée. Je ne vois plus ça. Non, je pense que c'est bon. Alors voyons que ça marche. Alors retournez sur le site. Ensuite, dans le menu du pied de page, sélectionnez la page Contact. Ok, bien. Donc, la seule chose à faire est la section technologie des fonctionnalités. Donc, nous devrions savoir comment le faire maintenant, si vous allez à Functions.php, et nous allons utiliser le même nom d'info blog et aussi le titre de la page. C' est donc assez simple à ajouter. Nous pouvons ajouter cela à la même fonction. Copiez donc ce modèle de page, puis collez ci-dessous. Nous devons mettre le lien génial et changer la page sur les contacts de la page. D' accord. Donc, enregistrez, puis actualisez. C' est donc la page Contactez-nous maintenant terminée, et rejoignez-moi dans la prochaine vidéo lorsque nous créerons la page d'atténuation. 37. Page 404 personnalisée: Cette vidéo est tout au sujet de la création d'une page 404 personnalisée. Une page 404 est l'endroit où vous allez lorsque la page n'est pas trouvée. Donc essentiellement quand vous êtes un peu perdu sur le site. Si nous allons à l'URL dans la barre supérieure et nous tapons la page non reconnue, comme beaucoup de A, puis appuyez sur « Entrée », donc c'est la page à laquelle vous êtes amené. Nous avons la boucle WordPress et certaines des informations de la barre latérale, qui est l'un des modèles de sauvegarde. Mais nous voulons quelque chose d'un peu plus agréable et aussi peut-être quelques options et quelques liens pour remettre l'utilisateur en camion. Si nous passons à l'éditeur de texte et comme d'habitude, créez une nouvelle page et enregistrez cette page comme 404.php, et copiez la page À propos. Nous l'utilisons comme base pour notre page 404. Collez cela dans et enregistrez. Modifiez le nom du modèle en haut. On va appeler cette page 404. Rafraîchissez ça. Maintenant, nous avons le modèle À propos de nous utilisé lorsque nous avons trouvé la page 404. Tout d'abord, je vais commencer dans la zone de texte de l'entité. Il suffit d'ajouter un peu de texte juste pour que l'utilisateur sache qu'ils sont perdus et qu'il doit revenir sur la bonne voie. Allez dans le function.php, puis dans l'accolade de fermeture après le titre, nous allons ajouter une autre instruction elseif. Mais cette fois, ce sera si la page est 404 et ensuite les accolades. Donc, si la page est la page 404, nous allons juste égaler un peu de texte. Vous pouvez mettre le texte que vous voulez, mais je vais mettre « Whoops, on est un peu perdus. » Alors voyez si ça marche bien. Nous avons un petit problème, vérifions ça et voyons ce que c'est. Je pense qu'il manque juste un point-virgule à la fin. Maintenant, nous avons le texte qui apparaît là-bas. Ce que je vais créer, c'est que je vais supprimer l'exemple de texte, puis nous allons créer quatre divs séparés, que vous allez partager avec quelques liens. Les liens seront vers Archives, Catégories, Messages récents, tous par les tags. Nous allons mettre ces liens avec les widgets d'une manière similaire à la façon dont nous les avons utilisés dans la barre latérale. Passez au modèle 404. Au lieu de About Us comme titre de niveau 2, nous allons simplement mettre du texte pour dire « Revenons sur la bonne voie ». Ouvrez le php_echo et fermez le PHP. Le texte sera  : « Revenons sur la bonne voie » avec un deux-points à la fin. Il y a un problème là-bas. Jetons un coup d'oeil. Parce que nous avons utilisé un guillemet unique, nous devons changer les guillemets environnants pour être doubles, puis n'oubliez pas le point-virgule à la fin. Il semble maintenant que nous avons la, Revenons sur la piste niveau 2 cap. Nous pouvons supprimer l'exemple de texte après l'ipsum Lorem. Supprimez le premier paragraphe et aussi le deuxième paragraphe, mais gardez la ligne environnante, nous allons réutiliser. Nous allons créer quatre divs séparés pour les widgets. Donc, ajoutez un div avec une classe, la classe bootstrap de col-sm-6. Ensuite, il suffit de copier cette div et de coller trois fois de plus. Nous avons donc quatre sections. Nous avons abordé les widgets plus tôt dans le cours dans la section de la barre latérale. Nous pouvons également utiliser des widgets dans différentes parties de l'offre du signe. Ajoutons-les ici. Ouvrez le PHP et puis il tire le widget. Nous utilisons le_widgets, puis entre parenthèses, nous utilisons le nom du widget que nous voulons extraire. Tout d'abord, pour obtenir les archives, nous utilisons WP_Widgets_archives, puis un point-virgule à la fin de là. Les catégories sont exactement les mêmes. Mais au lieu d'archives, ce sont des catégories, et ensuite nous allons fournir un lien pour les messages récents. Alors, collez ça. Mais cette fois entre parenthèses, il s'agit de wp_widgets, puis de messages récents ou de messages récents. Ensuite, pour obtenir une liste des balises disponibles, au lieu des archives, c'est Tag_Cloud. Donc Tag_Cloud et enregistrez cela, puis actualisez le navigateur. Il semble qu'il y ait un problème avec les messages récents. Cela doit être récent, alors retirez les s à la fin là. On y va. Maintenant, l'utilisateur peut revenir à une page de travail en sélectionnant certains des liens ci-dessous. En passant, si vous voulez utiliser des widgets différents ou des liens différents, vous pouvez les trouver dans les codecs sous la section widget. Vous n'avez pas besoin d'utiliser les quatre que j'ai montrés là-bas. Maintenant tout fonctionne, je veux juste ajouter un peu de style, juste pour le rendre compatible avec le reste du site Web. Nous allons mettre la même bordure d'un pixel avec les coins arrondis autour de chacune des quatre sections. Allez dans le style.css et il va créer une section 404. Copiez l'un des commentaires, puis dirigez-vous vers le bas. Je vais faire les commentaires sur la page 404. Donc, les widgets, vous avez une classe de widgets. Pour garder le style cohérent, nous allons utiliser les mêmes styles que ceux que nous avons utilisés pour la barre latérale ou les modules de la barre latérale. Si vous allez à la section de la barre latérale, recherchez la classe des modules de la barre latérale, puis copiez tous ces éléments. Ensuite, collez ces à nouveau dans la section du widget. Sauvegardez ça, puis jetez un oeil. Nous avions besoin de ça maintenant, ça semble beaucoup mieux, et ça a juste l'air un peu vieux avec les boîtes étant sur des hauteurs égales. Donc juste pour rendre ce look un peu meilleur, je vais ajouter une hauteur minimale de 300 pixels, puis rafraîchir cela. Maintenant, assurez-vous que les sections avec peu de contenu prennent un peu plus de hauteur. Merci de regarder, et c'est la fin de notre page 404. 38. Organiser notre code en utilisant la partie « get template »: Lors de la construction de sites Web ou de tout type de codage en général, une chose que nous voulons essayer d'éviter est de retaper le même code encore et encore. Si nous allons sur notre page d'accueil, nous avons la section des installations. Nous avons utilisé est une ou deux fois sur le site maintenant. Nous avons donc réutilisé le même code. Donc on en a à la une. Si nous descendons également à la page À propos de nous, nous réutilisons la même section en bas. C' est aussi dans la page 404 que nous avons créée dans la dernière vidéo. Une façon de réduire la quantité de lignes de code dans notre site Web, et de rendre notre site un peu plus organisé, est d'utiliser la partie get template. Il s'agit essentiellement d'une section de notre site Web, que vous mettez sur son propre dossier. Nous pouvons alors l'appeler dans notre page la même manière que nous l'avons fait avec l'en-tête et le pied de page. Pour obtenir le code de cette section, nous allons créer une nouvelle page. Je vais appeler ceci le content-facilities.php. Commençons par aller à la première page de notre site. Si nous cherchons la section des installations, qui est cette partie ici. C' est la div avec la classe de rangée sur les installations. Recherchez la balise close et row. Alors découpez ce contenu. Alors coupez cela en vous assurant que vous laissez toujours le conteneur en place. Ensuite, dans le fichier que nous venons de créer, nous pouvons coller ceci dans et ensuite enregistrer cela. Ensuite, retournez dans la première page, et dans la même section que nous venons de supprimer ce contenu, ouvrez les balises PHP. Ensuite, nous utilisons gets_templates_part. Ensuite, entre parenthèses, nous utilisons le nom du modèle que nous venons de créer. Ses installations de contenu. Sauvegardons ça et dirigeons vers la première page et voyons si ça marche bien. Oui, donc c'est tout là. Juste pour montrer qu'il le tire du modèle. Si nous faisons juste une erreur d'orthographe là-bas et ensuite rafraîchir. Vous verrez maintenant que cela est en train d'être supprimé. Corrigons ça et sauvegardons. Copiez cette section de PHP, et nous ferons la même chose dans la page 404 sur la page bowers. Donc, nous allons commencer par la page sur, puis chercher la div avec la classe des installations. Trouvez dans les balises de fermeture et de ligne, supprimez cette section, puis collez-la dans PHP. La même chose avec la page 404, sorte que la balise de fermeture des installations de ligne. Lay down coller dans la partie get template et appuyez sur « Enregistrer ». Allons sur le site et voyons si ça marche. Nous savons que tout de la page fonctionne bien. Allons à la page À propos de nous et c'est juste là. Tapons une adresse que nous reconnaîtrons et nous vérifions à la page 404. Il y a encore la section des installations en bas. Nous pouvons l'utiliser avec n'importe quelle section du site Web que vous voulez ou si vous créez dans votre propre thème personnalisé. Si vous trouvez que vous créez dans le même HTML encore et encore, il suffit de le mettre dans son propre modèle et de tirer vers l'intérieur, vous obtenez une partie de modèle. Cela rend vraiment votre site beaucoup plus organisé. Donc c'est tout, et je vous verrai dans la prochaine vidéo où nous allons créer le modèle personnalisé pour la page de recherche. 39. Modèle de recherche personnalisée: Bienvenue les gars. Cette vidéo porte sur la création du modèle de recherche. Il y a quelques vidéos lorsque nous avons créé le widget de barre latérale, nous avons également ajouté une boîte de recherche. Si vous recherchez quelque chose dans la boîte de recherche, comme des nouvelles, vous pouvez voir que cela devrait fonctionner à peu près directement en dehors de la boîte. n'y a rien qu'on ait vraiment à faire pour que ça marche. Mais une chose que nous pouvons faire est de donner à notre thème un modèle de recherche personnalisé car pour le moment, il est juste de retour par défaut à la page d'index. C' est pourquoi nous avons la mise en page assez similaire au blog. Ce qui est très bien pour l'instant parce que nous voulons que la page de recherche ressemble au blog. Mais nous allons créer un modèle personnalisé afin que nous puissions ajouter le texte de la fonction en haut et nous allons également afficher le terme dans la section de fonctionnalité recherchée par l'utilisateur et imprimer également une déclaration au cas où aucun résultat de recherche n'a été trouvé. à l'éditeur de texte, nouvelle page, enregistrez comme search.php. Il semble assez similaire à la page du blog. Copiez le contenu de la page d'index pour commencer et collez-le dans. Juste pour vérifier que le modèle de recherche fonctionne réellement et qu'il remplace la page d'index, il suffit de taper du texte aléatoire là et d'enregistrer puis d'actualiser. Nous y allons. Nous pouvons juste voir que le texte que nous avons créé est en haut et cela signifie que le modèle prend effet. On va bouger ça maintenant. peu près tout le travail que nous devons faire maintenant pour ce modèle se trouve dans la page des fonctions, car nous allons travailler dans la section d'en-tête pour créer le texte de la fonctionnalité. Passez au functions.php, puis en dessous du 404, nous allons ajouter d'autres instructions elseif juste sur l'accolade bouclée là. Donc elseif is_search. En haut du texte, nous allons juste faire un blog officiel Tranquil Spa. Copiez cela, puis collez-le dans et voyons si cela fonctionne. Ci-dessous, nous allons ajouter une balise de pause et un point-virgule à la fin là. Ensuite, en dessous de cela, nous allons imprimer les résultats de recherche ou le terme de recherche que l'utilisateur a recherché et au lieu de faire écho à cela au navigateur, nous allons utiliser printf, puis entre parenthèses, nous sommes va commencer par taper du texte brut. résultats de recherche pour, puis le deux-points. Ensuite, pour afficher dans les résultats de la requête de recherche, utilisez le pourcentage et le s, puis mettez une virgule après cette section, puis utilisez la fonction get_search_query, donc get_search_query et tout cela doit être entouré de parenthèses. Donc un avant, un à la toute fin avec un point-virgule. La raison pour laquelle nous utilisons printf au lieu de l'echo est que nous l'utilisons dans formatage dans les résultats de recherche et printf nous permet de le faire. Enregistrez cela et vérifiez si cela fonctionne en appuyant sur « Actualiser ». Vous pouvez essayer cela quelques fois de plus pour vérifier que cela fonctionne. nous avons les nouvelles comme terme de recherche actuel, alors changeons cela pour les cheveux et cela semble fonctionner très bien. Je vais en faire une de plus. Je ne vais pas poster ça, donc nous allons juste vérifier Lorem Ipsum et nous devrions avoir beaucoup de post pour ça. Tout fonctionne bien. Si vous remarquez lorsque nous recherchons quelque chose avant tels que les cheveux, nous avons reçu le message d'erreur de désolé aucun message correspondant à vos critères. Nous voulons rendre cela un peu plus spécifique à la recherche plutôt que aux messages. Passez au search.php, puis faites défiler vers le bas, et donc nous trouvons le message d'erreur là, donc supprimez-le et à la place, nous allons ajouter notre propre message personnalisé de désolé, pas de correspondances pour et puis il tire le mot que l'utilisateur recherché. Nous allons juste ajouter à la fin là la fonction de get_search_query, puis le point à concaténer, petit texte sur cela, alors commencez par ouvrir à nouveau les guillemets et une virgule de s'il vous plaît chercher à nouveau. Sauvons ça et jetons un coup d'oeil. Il y a un message d'erreur là, alors jetons un coup d'oeil à cela. C' était une erreur d'orthographe là, qui devrait être get_search_query. Maintenant que ça fonctionne, nous avons le message d'erreur. Désolé, pas de correspondances pour, Je vais juste besoin de l'espace après le mot pour et puis rafraîchir. Pour les cheveux, s'il vous plaît chercher à nouveau. Merci de regarder, et c'est ainsi que nous créons une page de recherche personnalisée dans WordPress. 40. Champs personnalisés avancés partie 1: Bienvenue dans cette vidéo sur les champs personnalisés avancés. Jusqu' à présent, tous les changements que nous avons apportés au thème, nous avons fait encoder dans l'éditeur de texte, mais si l'utilisateur final de votre thème veut modifier certaines informations, du texte ou des images, nous devons fournir un moyen pour qu'ils changent contenu rapidement et facilement sans savoir comment coder et une excellente façon de le faire est d'ajouter des champs personnalisés avancés. Si vous allez sur le site, qui est advancedcustomfields.com, c'est le site pour un plugin vraiment facile à utiliser, que nous allons implémenter dans notre thème dans cette vidéo. Parce qu'il s'agit d'un plugin, nous pouvons l'ajouter facilement dans le tableau de bord. Accédez au tableau de bord, puis sélectionnez des plugins, puis ajoutez de nouveaux. Dans le cas où vous n'avez pas utilisé un plugin WordPress auparavant, c'est juste un moyen d'ajouter des fonctionnalités supplémentaires à l'appel WordPress, et il y a des milliers de différents plugins WordPress disponibles, et cela vaut vraiment la peine d'une recherche rapide pour trouver quelques de grandes fonctionnalités à ajouter. Je vais rechercher des champs personnalisés avancés, puis Entrée. La version que je vais utiliser est la première qui arrive, qui est les champs personnalisés avancés, puis sélectionnez « Installer maintenant ». Une fois que vous avez reçu le message de réussite en bas, puis cliquez sur « Activer Plugin ». Maintenant que c'est activé, nous obtenons une nouvelle option dans le tableau de bord, alors descendez aux champs personnalisés et cliquez dessus. Je vais vous montrer comment faire cela en passant par la première page, en changeant certaines zones là-bas, comme le texte sur les sections du bureau. Je vais entrer un groupe de champs, qui est un groupe de champs que vous souhaitez modifier. Sélectionnez le bouton « Ajouter un nouveau » et gardez cela organisé. Je vais appeler cette section la première page, puis le publier, puis je vais ajouter un champ, et un champ est l'une des zones que vous voulez changer. Si nous allons dans notre première page, donc retour dans l'hôte local et le site Tranquil. Je vais commencer par changer le texte de la fonction à l'avant, et ce sera un champ. De retour dans le tableau de bord, l'étiquette de champ est le nom, donc nous allons appeler cela le texte de la fonction, et si vous appuyez simplement sur Tab, WordPress générera automatiquement le nom du champ, et c'est le nom que nous ajouterons au code plus tard. Le type de champ est correct comme texte, puis nous pouvons ajouter quelques instructions qui apparaissent dans le tableau de bord pour l'utilisateur. Je vais changer ceci pour utiliser ce champ pour changer le texte de la fonction principale, et obligatoire, oui, vous ne serez pas toujours là. Vous pouvez créer une valeur par défaut si vous le souhaitez, mais parce qu'elle est nécessaire, elle n'est pas vraiment nécessaire pour l'instant. Ajoutez ce champ là. Maintenant, nous avons inclus notre champ de texte d'entité, et nous avons le nom de champ de feature_text. Je vais juste copier ce nom, puis dans la section de la fonction, si nous recherchons la fonction FeatureText, et dans la section de la première page, nous pouvons supprimer ce message de spa premium entièrement réactif. Supprimez cela, puis nous mettons dans la fonction, le_field, puis entre parenthèses, nous mettons dans le nom du champ que nous venons de créer. Nous l'avions copié auparavant, donc collez dans feature_text et enregistrez. Si vous revenez à la page d'accueil et actualisez. n'y a rien là pour l'instant parce que nous devons l'ajouter dans le tableau de bord. Parce que nous voulons seulement que ces champs personnalisés apparaissent sur la page d'accueil, nous devons changer l'emplacement pour être le type de page égal à la page d'accueil, puis mettre à jour, donc revenir en haut et appuyer sur « Mettre à jour ». Maintenant, si nous allons à la première page, puis éditer la page, puis faites défiler vers le bas, nous devrions voir la section de texte de fonctionnalité que nous venons de créer. Maintenant, nous avons ceci dans le tableau de bord. L' utilisateur peut ajouter ou modifier différentes parties du site sans connaître de code. Vous pouvez remettre l'en-tête, donc FULLEMENT RÉPONSIVE, et la balise break, PREMIUM SPA THEME, et la balise break, FOR WORDPRESS, et mettre à jour, puis afficher la page. On y va, donc c'est notre texte de retour en place. Si nous revenons à éditer la page, une chose que je veux juste supprimer est l'éditeur de contenu parce que notre page est générée via le modèle. Pour supprimer cela, allez simplement dans les champs personnalisés avancés, puis dans la section Masquer à l'écran, vérifiez simplement l'éditeur de contenu, puis mettez à jour, puis actualisez la section de la page d'édition, et maintenant c'est parti. Voilà, c'est ainsi que vous ajoutez un champ personnalisé dans WordPress. Nous continuerons la première page dans la vidéo suivante. Nous commencerons dans les champs personnalisés à la dernière section Office. 41. Champs personnalisés avancés partie 2: Maintenant, nous comprenons un peu plus sur la façon d'utiliser les champs personnalisés avancés en modifiant la zone de texte en vedette. Nous allons continuer avec la première page et je vais vous montrer comment le faire pour la dernière section des offres. Retournez dans le tableau de bord, puis dans l'onglet Champs personnalisés, puis cliquez sur la « Page d'accueil ». Parce que nous allons créer les actions d'offre spéciale gratuite, ce que vous allez être assez similaire, je vais ajouter un onglet à la section est désactivé. Ajoutez un nouveau champ et l'étiquette pour cela peut être Offre 1 et le type de champ sera un onglet, puis ajoutez-le. Ensuite, un deuxième onglet pour l'offre 2, et changer le champ de texte pour être un onglet, et le même pour l'offre numéro 3. Encore une fois, changez cela pour être un onglet, puis fermez. Maintenant, commençons avec l'Offre 1. Cette fois, nous allons ajouter un champ. Ce champ sera le prix de l'offre. Nous choisirons le nom du champ généré. Parce que c'est le prix, nous avons besoin de le changer du texte pour être le nombre, nécessaire ? Oui. Je fermerai le terrain. Maintenant, nous avons le prix de l'offre. Ce sera pour la première offre. Donc, nous pouvons simplement glisser et mettre ceci sous l'onglet Offre 1. Alors nous allons créer maintenant le nom de l'offre. Cela peut être correct comme texte, requis ? Oui, puis fermez. Puis mettre est le nom de l'offre juste en dessous du prix de l'offre. Ensuite, puisque chacune de ces offres spéciales comporte deux lignes de texte, nous ferons deux champs distincts. Donc, offrez la ligne 1, nous allons le mettre comme nécessaire aussi. Ensuite, ajoutez également la ligne d'offre 2, c'est bon. Le texte est-il nécessaire ? Oui. Je vais fermer nos champs et aussi fermer celui-ci. Ensuite, faites-les glisser vers le haut dans le premier onglet. Maintenant, parce que nous allons utiliser les mêmes champs pour l'offre 2 et l'offre 3. Si nous allons simplement dans les champs de l'offre 1, nous pourrions simplement cliquer sur « Dupliquer ». Je vais garder le texte du prix de l'offre comme le même. Mais nous devons changer le nom du champ, que j'ai besoin d'offer_price_2, puis fermer. Celui que nous venons de créer, qui est le offer_price_2, puis faites-le glisser sous l'onglet Offer 2, qui est juste là. Sous le prix de l'offre, nous dupliquerons le nom de l'offre. Je supprime simplement la copie et change ceci en offer_name_2 pour le nom de champ unique. Alors fermez ça. Offer_name_2, faites-le glisser vers le bas vers l'onglet Offre 2 en dessous du prix. Je vais donc devoir dupliquer la ligne d'offre 1 et la ligne d'offre 2. Alors dupliquez celui-là. Offrez la ligne 1, gardez-la. Ceci, je vais changer le nom unique en offer_2_line_1, puis fermer. Donc offer_2_line_1, faites glisser ceci vers le bas dans la deuxième section, juste en dessous du nom, et nous pouvons dupliquer ceci. Cette fois, sa ligne d'offre 2. Cette fois, son offer_2_line_2, et gros plan. J' espère donc que cela a du sens jusqu'à présent. Donc nous avons l'onglet pour la ligne d'offre 1 et la première offre a un prix, un nom, puis les deux lignes, puis un deuxième onglet pour l'offre 2 et encore, nous avons le prix, nom et les deux lignes, s'assurer que chacun possède un nom de champ unique. Maintenant, nous avons juste besoin de faire une troisième fois pour l'offre 3. Donc dupliquez le prix, gardez le même nom ci-dessous offer_price_3. Fermez ensuite ce champ et faites glisser l'offer_price_3 jusqu'à l'offre 3. Après le prix de l'offre, nous avons besoin de nouveau nom de l'offre. Donc, nous dupliquons offer_name_3. Puis fermez cela et faites glisser le nom de l'offre 3 en dessous du prix. Ensuite, nous avons presque fini maintenant, nous avons juste besoin de copier la ligne 1 et la ligne 2. Donc, offrez la ligne 1 et puis le nom du champ est offer_3_line_1, puis fermez, et faites glisser cela à son bon endroit et dupliquez la ligne 2, cette fois le nom unique est offer_3_line_1, puis faites glisser cela vers le bas. Maintenant, nous n'avons pas appuyé sur le bouton « Uptake ». Je vais te montrer pourquoi on va le mettre dans les onglets maintenant. Si vous allez sur la page d'accueil, puis sélectionnez « Modifier la page », nous avons maintenant l'Offre 1, Offre 2 et Offre 3 dans des onglets individuels alors que si nous n'avons pas mis les onglets dans, nous aurions une longue liste de champs et cela peut devenir déroutant pour l'utilisateur. Donc, si nous allons dans le front-page.php et alors nous pouvons ajouter le PHP pour lier aux champs personnalisés. Alors descendez à la dernière section des offres qui va vraiment décider mais pour vous donner une petite chambre. Tout d'abord, si nous supprimons le prix de la première offre, puis ouvrons le PHP, puis nous utilisons la même chose que la dernière vidéo, le_field, puis entre parenthèses, tapez le nom du champ. Le premier, si nous revenons dans le tableau de bord sur les champs personnalisés, le prix de l'offre avait le nom du champ de l'offre sur ce prix d'appel. Nous allons lier cela là, puis copier ceci, puis coller ceci à la place de l'en-tête de niveau 3. C' est ce qu'on appelle le nom de l'offre. Changez donc offer_price en offer_name. Le pool de famille, collez le PHP dans, et c'est le offer_line_1. Great Day Out est changé en offer_line_2. C' est tout pour le premier champ, donc si nous sauvegardons cela, puis passez à la page d'accueil et faites défiler vers le bas. Vous devriez maintenant voir que nous avons une section des dernières offres vide car nous n'avons pas mis le texte en place sur la page Modifier. Offre 1, parce que tout est vide, nous n'avons rien à voir, mais nous allons arranger ça bientôt. Continuez à passer à la deuxième offre. Ceci est offer_price_2, puis offer_name_2. Texte de la première ligne. Nous devons changer cela en offer_2_line_1, puis offer_2_line_2, puis en bas au troisième. Enfin, le prix. Donc offer_price_3. Puis en dessous, offer_name_3. Puis le texte. Donc son offer_3_line_1. Enfin, c'est offer_3_line_2. Alors, sauvegardez ça. Maintenant, notre page d'accueil devrait être vide ou au moins l'offre devrait être vide de toute façon. Il ne reste plus qu'à remettre le contenu dans la section Modifier la page. Donc, si vous voulez partir et faire ça vous-même, n'hésitez pas à le faire. Sinon, suivez-moi. Tout d'abord, le prix de l'offre était de 60$, le nom de l'offre était OFFRE FAMILLE, ligne 1 était Family Pool, puis Great Day Out, puis allez à l'offre 2. Il s'agissait de 120$, le nom de l'offre était POUR LA MARIÉE, ligne d' offre 1 était Hair & Make Up, la ligne 2 était le Package complet, puis sur l'offre 3. Le prix était de 90$, et c'était le PASS WEEKEN, la ligne 1 était Modern Equipements, puis la ligne 2 était le cadeau parfait. Ensuite, mettez à jour cela et allez à la page d'accueil. Jetons un coup d'oeil à ça. Il nous manque juste un des champs là-bas. Voyons quel est le problème. Offre_3_line_2, ça a l'air correct. Allons dans le tableau de bord dans Champs personnalisés. Jetons un coup d'oeil à cela et voyons quel est le problème. Je pense qu'on a deux traits de soulignement là-bas. Mettons juste à jour cela et revenons à la première page, actualisons. Toujours rien dans, pas de minutes ajoutées, je vais changer le nom du champ. Offre numéro 3, qui doit ajouter le cadeau parfait dans cela et mettre à jour cela. On y va. Tout ça marche maintenant. Je veux juste ajouter une règle horizontale blanche juste pour séparer les deux lignes là-bas. Il suffit d'ajouter ceci entre offer_line_1 et offer_line_2. Offer_line_1, juste après la balise p de fermeture, ajoutez une heure dedans. Puis copiez. Ensuite, la même chose après offer_line_2, faites la même chose dans la deuxième offre. Après la ligne 1 et 2, la même chose dans la troisième offre 2. Enregistrez, puis actualisez le navigateur. Voilà, tu y vas. C' est ainsi que vous utilisez les champs personnalisés avancés dans les thèmes WordPress. N' hésitez pas à continuer et à ajouter autant de champs que vous le souhaitez sur le site. Mais je vais laisser ça là pour l'instant. Merci d'avoir écouté et vous verra dans la prochaine vidéo. 42. Images d'en-tête personnalisées: Dans les deux dernières vidéos, nous avons examiné les champs personnalisés avancés et nous avons autorisé l'administrateur à modifier certaines choses telles que le texte sur le site Web. Dans cette vidéo, nous allons rendre notre site encore plus personnalisable en permettant l'administrateur ou à un certain utilisateur de changer l'image en arrière-plan sans savoir comment coder. WordPress nous permet de le faire dans ce que nous appelons des en-têtes personnalisés. Si vous passez à Google et recherchez les en-têtes personnalisés du codex, ce devrait être le premier résultat. Donc, allez à la section d'en-tête personnalisée, puis si nous faisons défiler la page, et si nous cherchons l'exemple, alors copiez cet exemple, puis allez dans le functions.php. Cela peut aller tout en bas, mais toujours dans les balises PHP. Nous n'allons pas avoir la largeur fixe, donc nous pouvons supprimer cette hauteur ou la hauteur fixe. Je vais juste commenter ces deux lignes, et puis nous avons le chemin d'image par défaut au cas où l'utilisateur ne télécharge pas une image. Donc, l'image par défaut va être le lakebg, et c'est notre dossier images, donc c'est bon. Enregistrez cela et montrait une chose de plus dans le tableau, qui est les téléchargements. Cela permet à l'utilisateur de télécharger une image, donc les téléchargements sont égaux ou supérieurs à et cela va être un booléen de vrai. Ensuite, si nous allons dans le header.php, nous pouvons changer l'emplacement de l'image. Donc, trouvez ce fichier, puis faites défiler vers le bas jusqu'à la section d'entité en bas et ensuite nous pouvons supprimer la source de l'image, donc tout entre les guillemets doubles. Plutôt que d'avoir cette image, qui est retirée de notre dossier de thème, nous pouvons utiliser l'en-tête personnalisé. Donc, entre les balises php, nous utilisons la fonction WordPress de l'image de soulignement d' en-tête et sauvegardons cela, puis passez au tableau de bord WordPress, vers le bas à Apparence, puis Personnalisez, puis sélectionnez le « Header Image » et nous pouvons ajouter une nouvelle image. Donc, c'est la vignette des messages, donc nous allons télécharger une nouvelle image. Donc, dans votre dossier d'images, il y a un second arrière-plan et maintenant qui est lakebg2. Sélectionnez cette option et Ouvrir, puis placez dans les anciens arrière-plans du lac textile, puis sélectionnez cette option et ignorez le recadrage, puis Enregistrer et publier. Donc, une fois que j'ai enregistré, il suffit de cocher le X dans le coin, puis aller à Visiter le site et il y a notre nouvelle image comme arrière-plan. Donc maintenant, il est vraiment facile pour les propriétaires du site de changer l'image d'arrière-plan. Ils ont juste besoin d'aller dans le tableau de bord et de personnaliser comme nous venons de le faire, et c'est la fin de cette vidéo. Alors merci d'avoir regardé. 43. Ajouter le cours de publication: Bienvenue de retour. Notre thème WordPress commence à prendre vraiment bonne forme. Cette vidéo est tout au sujet de rendre les billets de blog encore plus personnalisables en ajoutant la fonction de classe post. Si vous voulez en savoir plus sur la classe de poste, dirigez-vous vers le Codex WordPress et recherchez la fonction de classe de poste. Eh bien, fondamentalement, l'ajout d'une classe de poste pour notre thème permet aux auteurs de thème WordPress d'avoir un meilleur contrôle CSS sur les messages. Ainsi, par exemple, nous pouvons définir des valeurs CSS pour les publications par leur ID ou par le nom de la catégorie. Donc, nous pouvons peut-être avoir le blog avec différentes couleurs d'arrière-plan en fonction du nom de la catégorie ou de la balise. Donc, à titre d'exemple, je vais mettre cela dans notre thème, et autoriser le style par l'ID. Donc, actuellement, si nous allons dans notre blog, et si nous allons dans la section blog. Ensuite, si nous allons dans les outils de développement Chrome, cliquez avec le bouton droit Inspecter les éléments, puis si nous utilisons la loupe, et si nous recherchons l'un des blogs qui a la classe de billet de blog, puis regardez, vous pouvez voir que le div a une classe de billet de blog, mais il n'y a pas d'ID individuel. Donc, si nous voulions styliser des messages individuels, nous ne pourrions pas le faire parce que tous les messages ont la même classe. Nous allons donc ajouter un identifiant individuel à chacun de ces billets de blog. Donc, je vais juste fermer cela pour l'instant, et puis si vous revenez au Codex, et sous le titre d'utilisation, copiez le PHP. Ensuite, allez à la page d'index, puis trouvez la div avec la classe du billet de blog, puis supprimez simplement cette ligne, puis collez dans le PHP. Donc, cela va maintenant ajouter un ID personnalisé à chacun des articles de blog. Nous venons de supprimer la classe du billet de blog. Alors ajoutons ça maintenant, puis sauvegardons ça. Ensuite, si nous actualisons le blog, et il va revenir dans les outils de développement, comme nous l'avons fait auparavant, puis appuyez sur la loupe et sélectionnez le billet de blog. Maintenant, si vous regardez sur le côté droit, vous pouvez voir que le poste a la classe de billet de blog, mais juste après, il y a maintenant un ID généré. Donc, si nous voulions styliser ce post individuel, nous avons maintenant une référence pour le CSS, et vous pouvez l'utiliser de la même manière, si vous voulez utiliser le nom de la catégorie ou l'une des autres valeurs là-bas. Nous allons juste aller au CSS et vérifier que cela fonctionne bien. Donc, nous avons un numéro de billet de blog de 50 là-bas, et puis nous en avons un seul ci-dessous. Donc, c'est le post tous les 40, et vous pouvez voir que c'est 38, 36, 34. Donc, nous allons juste se diriger vers le style.css. Ensuite, si vous allez à la section blog, nous allons juste ajouter un style ici. Donc, l'identifiant de post-50, qui est le top, et pour vérifier que cela fonctionne, nous allons juste lui donner une couleur d'arrière-plan. Maintenant, je vais mettre ça sur bbb, et sauver ça, et 50 était le top. Je vais frapper Rafraîchir. Alors on y va. Donc, les couleurs d'arrière-plan ont changé en gris, et c'est parce que cela a un ID unique. Donc, le style n'aura lieu que pour ce billet de blog. Donc, j'espère que cela vous donnera quelques idées sur la façon dont vous pouvez personnaliser et styliser votre thème. Merci d'avoir regardé et je vous verrai dans la prochaine vidéo. 44. Rendre notre formulaire de contact fonctionnel: Bienvenue de retour. Plus tôt dans le cours, nous avons créé la page Contactez-nous, et le lien est en bas dans le pied de page. Si nous allons dans la page Contactez-nous, avons toujours le design bootstrap tout en bas de la section Envoyez-nous un message. Mais cela ne fonctionne pas vraiment à la minute parce que c'est juste du HTML et du CSS. Dans cette vidéo, nous allons nous assurer que cela fonctionne en utilisant un plugin populaire appelé Formulaire de contact 7. Donc, nous allons passer au « Tableau de bord » et sélectionnez le « Plugins », puis dans la zone de recherche, alors nous allons à « Ajouter nouveau » d'abord, puis dans la zone de recherche, recherchez le formulaire de contact 7. Formulaire de contact 7 est l'un des plugins WordPress les plus populaires pour créer des formulaires de contact. Appuyez sur « Installer maintenant », et juste eu quelques instants à installer, puis allez à"Activer Plugin ». Une fois que vous l'avez installé, vous devriez maintenant voir qu'il y a une nouvelle option dans le tableau de bord appelée Contact. Cliquez dessus, et par défaut il y a déjà un formulaire de contact à titre d'exemple. Cliquez sur « Modifier », et quand nous jetons un oeil sur comment il est construit. Donc cette section va être notre formulaire de contact. Dans un instant, nous allons nous diriger vers le modèle de contact et ensuite nous allons découper la section contact et la coller dans. Nous devons remplacer certaines des valeurs du formulaire en utilisant le même formatage que le formulaire de contact nécessite. Lorsque vous travaillez avec ce formulaire, chacune des sections est une entrée particulière. Nous devons mettre le type d'entrée et aussi le reste de l'information entre les crochets. Pour commencer, jetons un coup d'oeil au premier exemple. Cela va créer une entrée avec le type de texte, puis suivie de l'étoile. L' étoile signifie que cela est nécessaire, donc l'utilisateur doit entrer le nom avant de pouvoir le soumettre, puis votre nom, qui est le nom de l'entrée, puis des exemples assez similaires ci-dessous. Nous avons le type du type d'e-mail d'entrée, qui est un champ obligatoire, et le nom est votre adresse e-mail. Nous pouvons également ajouter des valeurs sur les entrées telles que les zones de texte et les boutons de soumission. Je vais juste supprimer ceci pour l'instant, et ensuite nous allons passer à notre page Contact. Nous devons aller au page-contact.php, puis nous allons copier la section complète pour le formulaire de contact, puis chercher la div avec la classe de puits, qui est juste en bas, alors cherchez cela, puis trouvez la div de fermeture ou la balise de fermeture. Copiez toute cette section. En fait, je vais couper ça parce que tu n'en as plus besoin, et sauver ça, alors on peut coller ça dans le formulaire de contact. La première chose que nous voulons faire est de supprimer les balises de formulaire car elles sont ajoutées automatiquement. Supprimez l'ouverture et la balise de fermeture. Ensuite, nous devons remplacer nos types d'entrée, donc supprimez simplement la section d'entrée complète, tout d' abord pour le nom. Ensuite, nous les remettrons dans le même format que nous avons précédemment cherché dans l'exemple. Donc, entre ces crochets, le premier a un type de texte et c'est pour le nom, donc nous voulons que cela soit nécessaire, alors mettez l'étoile là-dedans, le nom de votre nom de trait d'union, alors nous devons remettre nos cours, donc la classe et ensuite un deux-points. Ensuite, le premier sera form-control, et nous avions aussi un identifiant là-dedans, donc id avec le deux-points des entrées-name, et nous pouvons également ajouter le texte de l'espace réservé, donc espace réservé, nous n'avons pas besoin de deux-points après cela, donc juste un espace. Puis entre les guillemets, mettez le nom du nom. C' est tout ce que nous avons à faire pour l'entrée de nom. Je vais juste copier ceci et ensuite passer à l'entrée