Comment créer efficacement des sites Web WordPress avec Divi

1. Introduction: Bonjour et bienvenue à la façon de construire efficacement des sites WordPress avec Divi. Mon nom est Chris, et je travaille en freelance en tant que développeur web depuis trois ans, souvent avec WordPress. Au fil des ans, je suis venu apprendre à construire des sites WordPress de la bonne façon, et ce que je veux dire par cela est comment construire des sites efficacement qui sont également en mesure d'être facilement mis à jour et de maintenir sur la piste. Vous voyez quand j'ai construit mon premier site web, j'ai décidé de construire mon propre thème à partir de zéro. J' ai pris un cours de sept heures juste pour apprendre les bases, puis j'ai passé les semaines suivantes à travailler sur mon site à temps plein pour le faire fonctionner. Non seulement cela m'a pris beaucoup de temps à construire, chaque fois que je voulais le mettre à jour, même juste pour changer du texte sur une page d'apprentissage, j'avais besoin de sauter dans le code back-end et de mettre à jour le site manuellement. Croyez-moi, c'est une douleur dans le cul et je me suis demandé comment les pigistes professionnels et les agences font des sites WordPress ? Ils ne passent pas 40 heures par semaine à construire un seul site, qu'est-ce qui me manque ici ? Eh bien, ce n'est que lorsque j'ai passé des mois et des années à travailler en freelance avec WordPress, à parler à d'autres développeurs et à travailler pour des agences que j'ai réalisé la bonne façon de développer des sites WordPress. Maintenant, ne vous méprenez pas si vous voulez créer votre propre thème à vendre comme un produit sur une forêt à thème ou des marchés similaires, soyez mon invité. Mais pour construire rapidement et [inaudible] personnaliser des sites Web WordPress pour les clients, vous ne voulez pas avoir à réinventer la roue chaque fois que vous êtes chargé d'un nouveau développement de site. Donc, dans ce cours, je vais vous apprendre comment développer et mettre à jour des sites WordPress beaucoup plus rapidement en personnalisant un thème premium comme Divi. Divi est maintenant ce que j'utilise pour développer tous mes propres sites Web ainsi que des sites Web pour les clients, et j'ai trouvé que c'est l'un des thèmes les plus polyvalents et efficaces pour créer la mise en page ou le design que vous voulez. Donc, si vous êtes prêt à apprendre la bonne façon de développer des sites Web WordPress, cliquez sur la vidéo suivante et commençons. 2. Ce dont vous aurez besoin pour ce cours: Avant de commencer, vous allez avoir besoin de quelques choses. Numéro 1, quelques compétences antérieures. Vous allez avoir besoin de connaissances de base en HTML, CSS et PHP, et quelques compétences de webmaster de base, à savoir comment héberger et utiliser des outils pour mettre à jour votre site Web. S' il s'agit de votre premier cours sur le développement web et que vous n'êtes pas familier avec les bases, je vous recommande certainement de regarder ma première classe de partage de compétences « Comprendre le développement Web », qui vous donnera les connaissances des débutants pour participer à cette classe. Quant à notre pile technologique, c'est très basique. Numéro 1, nous allons avoir besoin d'un serveur qui est un endroit pour héberger votre nouveau site Web. Nous allons avoir besoin de WordPress et nous allons avoir besoin de Divi. Hébergement nous avons couvert dans la compréhension du développement web et nous avons couvert un peu d'installation WordPress. Divi bien sûr, est un thème premium personnalisé, donc il ne vient avec un coût. Enfin, les outils dont vous avez besoin pour développer votre site WordPress incluent, un éditeur de code, un client FTP, et si vous construisez votre site localement, un serveur web PHP, comme MAMP sur Mac, ou WAMP sur PC. Mais encore une fois, tout ça a été couvert dans ma dernière classe. Vous devriez maintenant comprendre cela et être prêt à le mettre en pratique. Si ce n'est pas le cas, passez en revue certaines de ces parties de la classe précédente, et revisitez-nous ici lorsque vous serez prêt. Je pense que ça couvre ce dont nous aurons besoin pour commencer. Je vais vous voir dans la prochaine vidéo où nous allons discuter WordPress et Divi, et comment ensemble, nous pouvons construire des sites WordPress super rapide, et pourtant entièrement personnalisable en même temps. 3. Introduction à Wordpress: Si vous avez suivi mon cours précédent de compréhension du développement web, vous auriez été présenté à WordPress travers la leçon bonus à la fin de la classe. Pour résumer, WordPress est essentiellement un système de gestion de contenu libre et open source basé sur PHP et MySQL. Essentiellement, c'est un tas de code qui jette les bases d'un site Web basé sur le contenu. Mais qu'est-ce que je veux dire quand je dis site Web basé sur le contenu ? Eh bien, si vous avez déjà lu un blog en ligne ou lu des pages d'un site Web d'entreprise, alors vous avez interagi avec un site Web basé sur le contenu. Il s'agit simplement d'un site Web qui peut afficher du contenu, qu' il s'agisse d'un tas de pages ou de billets de blog qui sont publiés régulièrement. La plupart des sites, je dirais, correspondent à ce modèle de site basé sur le contenu. est-à-dire que le site Web est simplement une source de contenu où le but principal du site est de permettre aux utilisateurs de consommer du contenu. C'est ça. Pour comparer cela avec ce qu'on appelle une application Web. Les applications Web fournissent des fonctionnalités personnalisées. Par exemple, Google Docs. C' est un endroit où vous pouvez écrire, modifier et afficher des documents partagés. Facebook, une autre application Web pour les réseaux sociaux et la connexion avec des amis, et Dropbox une application pour le stockage de fichiers. Maintenant, alors que les sites Web basés sur le contenu qui sont construits sur WordPress pourraient être considérés comme des applications aussi, ils partagent tous une fonctionnalité de base, qui est de partager du contenu. Alors que tous les exemples que j'ai mentionnés précédemment, ils font tous quelque chose de très différent. Fondamentalement, à moins que vous ne vouliez développer un nouveau logiciel pour rivaliser avec Facebook ou ABNB, alors la plupart du temps quand quelqu'un dit qu'il veut un site Web, il parle probablement d'un site Web basé sur le contenu. WordPress est certainement le logiciel le plus populaire pour développer ces sites. En fait, selon certaines sources, il alimente près d'un tiers de l'Internet. La popularité d'une plate-forme particulière est une bonne chose parce que cela signifie qu'il y a une énorme communauté de développeurs qui fournissent un soutien et créent des milliers de thèmes et plug-ins pour votre site WordPress. Attendez, que sont les thèmes et les plug-ins ? Je suis content que tu l'aies demandé parce que j'étais sur le point de les couvrir en ce moment. Lorsque vous installez un site WordPress, vous obtiendrez le design suivant. Fondamentalement, ils ressemblent à ça. Cela sera personnalisé en fonction de ce que vous mettez dans le formulaire lors de l'installation. Nous allons passer en revue l'installation plus tard. Mais fondamentalement, c'est votre titre de blog et ceci est votre slogan, qui finit par être un sous-titre. C' est dynamique à partir du moment où vous effectuez l'installation. Mais ce regard avec la partie et le monde Hello ici sera le même si vous sortez un site WordPress en ce moment en même temps que ce cours a été enregistré. L' avertissement ici est que WordPress change de thème chaque année, ils font ressortir un nouveau thème par défaut. Si vous suivez ce cours plus tard dans l'année ou 2019, 2020, le thème par défaut a probablement changé d'ici là. Mais pour le moment, quiconque installe WordPress obtient ce thème qui s'appelle 2017. Même si c'est 2018, ils n'ont pas encore sorti le thème 2018. Ce que nous voulons faire maintenant juste pour vous montrer des thèmes et des plugins est aller dans notre tableau de bord WordPress. Je suis actuellement déconnecté, donc je vais devoir entrer mes informations de connexion. Je les ai sauvés ici. Ce sont ceux que nous allons utiliser dans la vidéo ultérieure sur l'installation de WordPress. Mais c'est fondamentalement tout ce que vous configurez lorsque vous installez WordPress. Ce que vous obtenez est le tableau de bord WordPress. C'est ça. Le front de votre site Web est ce que nous avons vu auparavant. C' est ce que tu verras. Si vous êtes connecté, vous obtiendrez cette barre ici, qui vous montre simplement que vous êtes connecté, puis vous pouvez entrer et faire le tableau de bord. Ensuite, selon les plugins ou les choses que vous n'avez pas stockées, il pourrait y en avoir plus ici. En fait, en utilisant Divi, il y aura de nouveaux boutons qui viennent ici. Aussi certaines parties de la page que vous êtes en mesure de modifier en tant qu'Admin, vous serez en mesure de modifier, connecté. C' est votre face avant du site. C' est votre tableau de bord qui utilise uniquement votre site Web voir et peut aller dans. Ensuite, tous ces champs, tous ces petits menus, trucs que seuls les administrateurs peuvent voir. La première chose dont je veux parler, c'est des thèmes. Vous allez à Apparence, cliquez sur les thèmes, et vous pouvez voir ici le thème dont je parlais 2017 est installé. Si vous l'avez installé en 2015, vous l'auriez obtenu comme thème par défaut. En 2016, vous auriez eu cela comme thème par défaut. Vous pouvez y aller et vous pouvez prévisualiser en direct et voir à quoi ressemblerait votre thème si vous utilisiez ce thème. Plutôt que de basculer tout de suite, vous pouvez avoir un peu d'aperçu si vous l'aimez. Super. Vous pouvez activer et publier ou vous pouvez modifier certains paramètres ici, puis activer et publier et vous obtiendrez ce thème. Maintenant, pour expliquer un peu les thèmes, c'est fondamentalement comme l'apparence de votre site Web. Ça va organiser la mise en page et tout ça. Si nous regardons l'aperçu de 2017 ici, il y a cette grande image avec votre titre de blog et sous-titre. Désolé, le slogan est ce qu'ils appellent ça dans WordPress. Ensuite, vous avez la barre de menu, et c'est une chose de parallaxe, donc l'image ne change pas, mais le contenu vient du bas. Maintenant, il y a bien sûr, une certaine personnalisation avec cela. Nous pouvons définir ceci sur une page avec contenu statique sur elle plutôt qu'une liste de tous les articles de blog. Il y a beaucoup de choses que nous pouvons faire, mais fondamentalement la peau ou la mise en page est dictée par le thème. En fait, l'une des raisons pour lesquelles j'aime utiliser Divi comme thème, c' est qu'il commence par une jolie basse ou qu'il ne fait rien de fou avec la mise en page. Il a juste une barre de menu, la barre latérale. C' est assez minime, ce qui est bon parce qu'il nous donne beaucoup de place pour la personnalisation. Une fois que nous installons Divi et commençons à l'utiliser, vous commencerez à comprendre les thèmes un peu mieux. Mais les autres choses principales que nous branchons dans WordPress sont bien nommés plugins. Vous pouvez entrer ici et vous pouvez voir quels plugins nous avons déjà installés. Ce sont quelques plugins par défaut qui sont fournis avec cette installation WordPress. Si nous voulions ajouter de nouveaux, il y a des milliers et des milliers de plugins. Que sont les plugins ? Les plugins sont essentiellement des fonctionnalités supplémentaires qui peuvent aller dans votre projet. Si nous voulions ajouter éditer une méta-description, ce que nous ferons dans une prochaine vidéo. Je vais passer en revue certains des plugins les plus populaires. Nous pouvons ajouter un plugin SEO. Nous pouvons ajouter des choses comme Google Analytics. Il y en a quelques-uns qui font des fonctionnalités très basiques, qui est juste le clonage d'une page, semble très basique, mais WordPress ne l'inclut pas par défaut. Quelqu' un duplique les pages. Celui que j'utilise. Quelqu' un a fait un plugin avec lequel vous pouvez dupliquer des pages. Pour résumer les thèmes et les plugins. Thèmes comme votre peau, c'est la mise en page, c'est sur quoi le site est construit. Vous dictez ce qui se passe dans les pages, mais la mise en page et le style de base sont déterminés par le thème. Les plugins donnent à votre site Web de nouvelles fonctionnalités qu'il n'avait pas auparavant. Il y a un compromis de plugins parfois ils ajoutent trop. Il peut peser votre site Web. Si tout ce qu'il nécessite est un petit changement de code et que vous êtes heureux d'entrer et de changer le code, alors vous allez bien. Sinon, il est parfois préférable d'utiliser un plugin. Cela devrait établir ce qu'est un thème et un plugin. Je veux vous montrer une fois que nous allons dans un certain thème, il y a une option à personnaliser. Maintenant, cela est configuré par le développeur de thème. Ils choisissent ce qu'il faut mettre dans ce menu personnalisé. Vous n'êtes limité que par ce que le développeur de thème décide de mettre ici. Mais ce que nous pouvons faire, c'est mettre dans notre propre logo. Nous pouvons changer le titre du site et le slogan, ce qui est la chose qui vient ici. Nous pouvons choisir de ne pas les montrer du tout. Certains de ces changements apparaîtront en direct comme nous les faisons. On peut changer le schéma de couleurs. Ici, ce sera du texte clair sur un fond sombre plutôt que du texte sombre sur un fond clair. Nous pouvons créer des menus ici. Nous pouvons créer des widgets ici, ce qui probablement le mieux pour les faire dans le tableau de bord. Mais fondamentalement, nous allons juste créer un changement. J' aime ce fond sombre, donc je vais cliquer dessus et puis je vais cliquer sur Publier. Ça va faire de nos changements des vies. Maintenant, ce n'était qu'un aperçu. Maintenant, c'est en direct parce qu'il dit publié ici. Maintenant, c'est probablement le premier endroit où vous iriez pour personnaliser votre thème. Mais vous pouvez aller très loin. Quelle profondeur vous pouvez aller est que vous pouvez réellement creuser dans le code. Vous pouvez aller ici à l'éditeur. Vous avez le contrôle complet du code source de votre thème. WordPress nous donne un avertissement. Vous avez la possibilité de gâcher ensemble de votre site Web si vous gâchez avec les modèles PHP. Il n'est pas conseillé de faire des choses ici sans savoir ce que vous faites et ce que vous essayez de réaliser. Je vais cliquer sur comprendre. Ensuite, nous voyons nos fichiers thématiques ici. Celle-ci est les feuilles de style qui ont tous nos styles. Ensuite, nous avons tous ces fichiers de modèles, que je vais expliquer un peu plus tard dans le cours. Fondamentalement ce que je voulais sortir ici, c'est ce qui rend WordPress puissant. Vous disposez d'options de personnalisation de niveau supérieur qui vous permettent de modifier les choses. En cliquant sur personnaliser à nouveau, vous pouvez aller dans les constructeurs visuels et cliquer et changer les choses, comment vous feriez sur n'importe quel site Web sans code. Mais si vous avez besoin d'aller plus loin, peut-être qu'il y a quelque chose ici que vous pouvez changer. Vous pouvez aller directement dans le code et toute la base de code est complètement open source. J' ai une installation locale juste ici. Alors je peux te montrer. C'est quelque chose que je vais mettre en place plus tard dans le cours dans l'Installation de WordPress localement. Mais comme vous pouvez le voir, c'est WordPress juste ici. Oui, il y a aussi une base de données qui est complètement modifiable, mais voici tous vos fichiers. Si nous allons dans le contenu WP et nous allons dans les thèmes, alors nous allons en 2017, cela correspondra à ce qui est ici. Vous voyez que nous avons la feuille de style ici. Feuille de style là-bas. Le fichier functions.php, très important est là, et il est aussi là. Vous pouvez l'éditer ici ou vous pouvez l'éditer ici. Le point que je fais est la personnalisation complète de la base de code et aussi l'avantage d'avoir un tableau de bord dans lequel vous pouvez entrer et changer les choses sans avoir à creuser dans le code. C' est ce qui rend WordPress vraiment puissant. C' est pourquoi c'est un CMS très populaire. 4. Introduction à Divi: Divi est un thème premium créé par une société appelée Thèmes Élégants. Malheureusement, comme nous l'avons mentionné précédemment, Divi est un thème payant, et au moment de l'enregistrement de ce cours, il est $89 par an pour avoir les droits d'utiliser Divi. Maintenant, si 89$ vous semble beaucoup, comprenez juste la valeur possible ici. Avec un abonnement de 89$ par an, vous pouvez créer autant de sites Divi que vous le souhaitez. Si vous êtes en freelance ou que vous dirigez une agence, ce $89 devient une évidence car vous ne payez qu'une fois par an, et vous êtes en mesure d'offrir cette valeur à tous vos clients. Mais, c'est à vous de décider. Je ne peux parler que pour moi quand il s'agit de Divi, et je dois dire que cela en vaut la peine. Il y a quelques alternatives que nous discuterons dans une seconde alors restez à l'écoute. Pour l'instant cependant, je veux en expliquer plus sur Divi, et pour cela, il est temps de revenir à l'ordinateur. Nous allons voir comment installer Divi dans une vidéo ultérieure. Mais juste pour vous donner une démonstration rapide, après avoir installé et activé Divi, votre site Web changera à cela. C' est fondamentalement Divi par défaut, et il peut ne pas paraître aussi impressionnant à première vue, mais la puissance de Divi est dans l'accumulation de page. Donc, ce que je vais faire est de cliquer sur « Nouvelle page » et nous pouvons commencer à voir ce que les constructeurs de page Divi aiment. Maintenant, dans une page wordpress traditionnelle ou post wordpress sans Divi, c'est ce que vous utiliseriez. Donc vos options ici et vous pouvez mettre dans un titre. Donc, ici serait un titre 1, donc je vais mettre dans leur direction 2, et être comme bien, appelons-le juste la rubrique 2 Je ne sais pas quoi mettre là-dedans, et ensuite vous avez le paragraphe blah, bla, bla, bla, bla. Vous pouvez le gras, vous pouvez le mettre en italique, vous pouvez l'aligner au centre à gauche, à droite, en faire une citation, insérer un lien, tout ça, mais c'est à peu près tout. Vous pouvez aller au texte et le modifier dans le style HTML. Donc, vous verrez que lorsque nous avons quitté aligné quelque chose, il met dans un style à aligner à gauche, donc juste pour démontrer qu'un alignement à gauche, désolé, texte en ligne à droite, et il le change là, mais nous pouvons aller en HTML et Changez-le à gauche et il est à gauche. Maintenant, c'est l'éditeur normal de Wordpress, mais le pouvoir de Divi est dans le générateur de page, comme je l'ai déjà dit. Je vais cliquer sur ce gros bouton violet pour utiliser le générateur de page. J' aime utiliser l'éditeur par défaut parce que vous pouvez voir la structure, mais vous pouvez également utiliser un constructeur visuel qui vous permet de créer des choses, et de le voir visuellement tout de suite. Dans cette démo pour vous montrer la puissance de Divi, je pense que va être plus impressionnant d'utiliser le constructeur visuel, donc je vais sauter là-dessus. Il demande si vous voulez faire la tournée, vous pouvez certainement faire cette tournée, je vais juste commencer à construire parce que je l'ai fait avant. Vous avez votre page qui est aussi vide, mais vous avez ceci qui est votre section, vous ligne, vous pouvez ajouter à une autre ligne. Vous pouvez en faire une ligne à deux colonnes, puis vous pouvez insérer des modules. Je suis juste en cours d'exécution rapide comme une démo, vous verrez ce que nous pouvons faire plus en détail plus loin sur la piste. Mais laissez-moi voir ce que je vais mettre dans une image. Je n'ai pas encore d'images. Quelles photos ai-je ? J' ai une photo de moi. Donc, je peux mettre ça là, et ça prendra la moitié de la page parce que j'ai mis en place une mise en page à deux colonnes. Ensuite, je peux peut-être mettre un texte, et peut-être que la première partie du texte sera un gros titre disant : « Salut, je suis Chris. » Vous pouvez voir que ces changements se produisent vivants devant vous, c'est la puissance du constructeur visuel de divi. C' est essentiellement ce qu'un générateur de pages fait, pas nécessairement de cette manière visuelle, mais il vous permet de construire une page basée sur des sections, lignes, des colonnes et des modules. Cela diffère légèrement entre les différents constructeurs de page, mais c'est généralement une bonne structure, une bonne hiérarchie pour regarder les choses : sections, colonnes, lignes et modules. C' est certainement comme ça que ça marche dans Divi. Donc, si vous aimez cela, par exemple, peut-être que vous vouliez mettre dans une autre section, et qu'il peut s'agir d'une section pleine largeur ou d'une section régulière, alors il va vous demander à nouveau, combien de colonnes voulez-vous dans votre rangée ? Peut-être quatre colonnes, vous pouvez voir ici. Maintenant, je peux appuyer sur le bouton et ajouter plus de modules. Vous pouvez également ajouter un module de code personnalisé, suffit de mettre le code que vous voulez et il est toujours aligné. Je suppose que les plus grands avantages de la construction de page est la mise en page, car nous pouvons facilement créer ces mises en page réactives à quatre colonnes. Si je devais le faire, je ne pense pas que ça marche quand tu as un constructeur visuel. Donc, vous pouvez voir ici que c'est réactif, qui était à gauche et qui était à droite. Mais maintenant, depuis que je l'ai réduit, il va dans un cadre plus rétréci. C' est la puissance d'utiliser un thème premium d'ailleurs, il est certainement tout optimisé pour mobile afin que vous puissiez avoir ces mises en page fluides, mais aussi vous pouvez profiter des modules. Alors ce qui serait cool, comme un compteur de cercle. Ensuite, tout ce que vous devez faire est de mettre un nombre. Vous avez ce cercle qui s'anime directement juste en le mettant comme. Pour coder cela prendrait tellement plus de temps, mais vous obtenez ces éléments ou leurs modules de code dans Divi que vous pouvez simplement jeter des choses dans alors disons sur 50 pour cent complet. Ensuite, vous appuyez sur « Tick », puis vous descendez ici, puis vous pouvez publier ou enregistrer le brouillon. C' est donc essentiellement le constructeur de pages Divi et c'est ce qui fait de Divi un outil puissant pour développer sur la presse web. Mais il est important de noter que Divi n'est pas le seul thème qui vient avec un générateur de page. J' ai l'impression que ce serait négligent de parler de Divi et rien d'autre. L' un des plus populaires était autrefois connu sous le nom Visual Composer et maintenant il est appelé WP boulangery page builder. Je ne sais pas pourquoi ils ont changé le nom pour cela, mais vous pouvez toujours le trouver en utilisant le constructeur visuel du terme de recherche. Vous pouvez aller à leur page, et ils prétendent être le numéro un mot de presse page Builder plugin. Donc, il a la façon très similaire de construire des pages avec des sections, des lignes, des modules différents. Mais la grande différence entre cela et Divi est que c'est pour n'importe quel thème wordpress. Ces deux-là sont ceux que j'ai utilisés personnellement. J' ai utilisé ce générateur de page sur un thème appelé Fortuna. Ainsi, vous pouvez voir si vous allez dans les forêts de thème, qui est un endroit où vous pouvez trouver des thèmes premium, vous trouverez quelques thèmes avec compositeur visuel ou WP Bakery page builder comme quelque chose qui est inclus. Si je fais défiler ici [NOISE] c'est tout. C'est beaucoup de démos. [ Rires]. Donc, la fonctionnalité met en évidence, évidemment, il doit être pleinement réactif, à l'heure actuelle, tout doit être réactif. Compositeur visuel, dont ils n'ont pas encore changé le nom, vient avec ce plugin et aussi premium appelé Revolution Slider, donc ce n'est qu'un exemple. Je suis sûr que vous trouverez d'autres thèmes qui ont Visual Composer l'installer également. Il y en a un autre qui s'appelle Elemental, lequel mon ami Louis, sur lequel mon ami Louis, comme m'a mis. Il dit que c'est le meilleur constructeur de pages, c'est le nouveau. Il prétend également être le constructeur de page wordpress numéro un. Il n'a pas autant d'utilisateurs que le constructeur de page de boulangerie WP parce qu'ils ont été autour plus longtemps. Mais il jure par elle et il a en fait une version gratuite. Donc, si vous avez un budget, je vais juste cliquer sur le prix ici. Si vous êtes sur un budget, vous pouvez obtenir la version pas pro, je suppose que la version gratuite, avoir des fonctionnalités similaires. Si vous voulez en savoir plus sur l'élémentaire, il y a une vidéo que vous pouvez regarder ici, je ne vais pas la jouer parce que vous pouvez la regarder à votre temps. Je n'en ai pas personnellement utilisé un avant, mais certainement essayer si j'étais sur un budget. Donc, comme je l'ai dit, le reste du cours se concentre uniquement sur Divi, car il serait juste trop de temps pour vous montrer comment le faire sur chaque constructeur de page, et beaucoup de principes sont les mêmes. Donc, le point que j'essaie de traverser ici est la puissance d'utiliser un générateur de pages avec un thème premium, il nous permet de créer des sites Web beaucoup plus rapidement. Mais nous utilisons wordpress, et si le générateur de page est configuré correctement, nous avons encore beaucoup d'options de personnalisation ; nous pouvons construire des sites Web basés sur un design que le client nous donne ou que nous avons trouvé avec nous-mêmes. Cela nous donne un grand équilibre entre pouvoir construire des pages relativement rapidement, mais pouvoir ensuite personnaliser et éditer tout ce dont nous avons besoin. Si vous êtes prêt à passer de la théorie et de la vidéo suivante, nous allons enfin rester coincés dans la construction de notre site wordpress en utilisant Divi. Donc je suis excité de te voir dans la prochaine vidéo. 5. Installation de Wordpress - Localement: Dans cette vidéo, nous allons installer WordPress. Maintenant, il y a deux façons de faire ça. Nous pouvons installer WordPress sur un hôte, donc il est en direct sur Internet. Nous pouvons le faire en utilisant cPanel, et c'est en fait assez facile, ou nous pouvons héberger localement. Héberger localement signifie simplement que nous configurons notre propre serveur, il y a un peu plus de configuration qui se poursuit, mais ensuite il est complètement hébergé juste sur notre ordinateur. Ce n'est pas du tout sur internet, en gros. Il y a des avantages et des inconvénients aux deux, mais l'installation locale est un peu plus compliquée, donc j'ai pensé que nous allions passer en revue d'abord. Si vous voulez juste sauter cette partie et aller directement à l'installation de WordPress directement sur votre hébergement, vous pouvez simplement sauter en avant et vérifier cela. Mais ce que je vais faire en premier, parce que ce dont nous avons besoin en premier est WordPress lui-même. Donc, je vais aller à wordpress.org. En fait, avant même de télécharger WordPress, nous allons avoir besoin d'un nouveau dossier pour héberger notre site Web. Donc, je vais aller dans mon dossier de code, et je vais mettre, comment dois-je appeler ceci, site Wordpress Skillshare. Maintenant, j'ai un répertoire où je peux stocker notre site Web. Je vais cliquer sur ce bouton ici sur « wordpress.org » assurez-vous d'aller à wordpress.org, pas wordpress.com, et puis vous pouvez simplement cliquer sur ce bouton ici pour télécharger la dernière version. Donc, je vais naviguer à l'endroit où notre site WordPress va être, cliquez sur « Enregistrer » et qui va enregistrer comme fichier ZIP à cet emplacement. Donc si je vais ici, il y a le fichier ZIP, je peux l'extraire en double-cliquant sur « Mac », et voici notre configuration WordPress ici. Donc je vais déplacer cela dans ce répertoire, débarrasser de ce répertoire qui a été créé par le fichier ZIP, et me débarrasser du fichier ZIP. Maintenant, l'autre chose dont vous allez avoir besoin est un serveur pour exécuter ceci. Comme je l'ai dit dans le dernier cours, le serveur que j'utilise s'appelle MAMP. C' est parce que j'utilise un Mac, vous pouvez utiliser WAMP. Je veux entrer dans beaucoup de détails ici parce que je l' ai couvert dans ma classe précédente sur la compréhension du développement web. Mais fondamentalement, les lettres dans MAMP représentent Mac, Apache, MySQL et PHP. Donc, les choses importantes à noter ici est que WordPress est construit sur PHP et MySQL, donc c'est pourquoi nous avons besoin de cela dans la pile. Apache n'a pas vraiment d'importance pour la raison pour laquelle nous utilisons Apache. Puis M signifie Mac, parce que j'utilise un Mac. Si j'exécutais Windows, j'utiliserais WAMP, qui est toutes les mêmes lettres sauf W pour Windows, puis LAMP pour Linux. Pour ne pas trop vous confondre, si vous n'avez pas MAMP déjà téléchargé et installé, vous pouvez cliquer ici. Si vous avez besoin d'aide pour configurer cela, regardez certainement la vidéo sur l'installation d'un serveur de ma classe précédente. Donc j'ai déjà MAMP installé, donc je vais entrer ici. Ce que je dois faire, si vous vous souvenez du dernier cours, c'est directement MAMP vers le répertoire du projet. Désolé, peut-être que j'ai fait ça un peu vite. Voici une annonce, très ennuyeux. Je vais aller dans les préférences MAMP, puis je vais aller dans le serveur Web. Comme vous pouvez le voir, des liens vers la dernière classe Skillshare que j'ai faite, que je viens d'appeler le cours Skillshare Directory dans celui-ci. Celui-ci que je stocke dans le code, je vais aller sur le site WordPress Skillshare et je vais cliquer sur « Sélectionner ». Ensuite, je vais cliquer sur « OK » et puis je vais cliquer sur « Démarrer le service ». Cela prendra un peu de temps, mais vous devriez, espérons-le, voir ces deux s'allumer en vert, et soudainement votre page de démarrage MAMP commence. Donc, si vous voulez accéder rapidement à votre site Web, vous pouvez cliquer sur « Mon site Web » et ce qui se passera est qu'il fera apparaître WordPress. Donc, à ce stade, tout ce que vous devez être clair, c'est les fichiers WordPress dans ce répertoire. Maintenant, il y a deux aspects à WordPress. L' un est le code, qui est tous les fichiers de code que nous avons ici. Fondamentalement, les templates PHP et tout le reste qui va avec, les trucs frontaux qui sont stockés dans les thèmes, mais nous avons un peu d'avance sur nous-mêmes. Ensuite, l'autre partie est la base de données. Donc, vous avez besoin des deux pour exécuter WordPress. Nous avons notre serveur ici, qui fonctionne en fait MySQL, comme nous pouvons le voir ici, mais nous n'avons pas encore de serveur configuré pour WordPress. Encore une fois, si vous configurez cela sur cPanel sur votre hôte, vous n'avez même pas à le faire, il s'installe automatiquement. Mais parce que nous le faisons localement, il va mettre en place une nouvelle base de données pour nous. Donc, après avoir choisi la langue, je suis amené à cet écran, qui m'informe que je dois configurer la base de données. Malheureusement, à travers la configuration WordPress, ils ne sont pas en mesure d'affecter la base de données, mais les informations que nous allons mettre dans et puis l'onglet suivant, nous allons dans ce qu'on appelle un fichier wp-config, qui est l'endroit où vous stocker ces informations ci-dessus ici, qui permet à WordPress de se connecter à sa base de données. Encore une fois, si vous utilisez cPanel et que vous le faites directement sur votre hébergement, tout est fait automatiquement, sorte que vous n'avez pas à vous inquiéter à ce sujet. Donc peut-être que si c'est un peu trop compliqué, il suffit de l'héberger via une installation en un clic, qui sera la prochaine vidéo. Sinon, si vous voulez vraiment l'héberger localement, continuez. Ce que nous devrons faire, c'est, comme il est dit, créer une base de données. Donc, je vais retourner dans la page de démarrage ici, allez dans Outils et cliquez sur « phpMyAdmin ». Si vous avez perdu cette page, l'URL n'est que l'hôte local. Puis le port, qui pour moi c'est 8888/phpMyAdmin. Maintenant, ce que nous allons devoir faire ici, c'est de mettre en place une nouvelle base de données, et nous pouvons le faire en cliquant sur « Nouveau ». Donc ici, je vais juste appeler ce Wordpress de compétences. Donc maintenant, nous avons une base de données vide dans notre phpMyAdmin, ce qui est tout ce dont nous avons besoin pour que WordPress vienne et crée toutes les tables et les données de début pour commencer essentiellement avec WordPress. Donc, heureusement, nous n'avons pas besoin de créer nous-mêmes toutes les tables de la base de données. Nous pourrions également configurer un utilisateur ici comme je l'ai fait ici, mais nous n'avons pas besoin de le faire non plus. Donc, ce que nous pouvons faire, c'est qu'il y a un utilisateur par défaut que nous pouvons utiliser, qui est juste l'utilisateur root. Si je retourne ici, mettons-le en pratique. Je vais copier le nom de la base de données, mettre là, et puis pour le nom d'utilisateur et le mot de passe, je peux juste mettre root. Il n'est pas si important de changer votre nom d'utilisateur et mot de passe et de configurer tout cela parce que nous l'exécutons localement. En gros, personne ne pourrait pirater votre base de données, moins que j'aie accès à votre ordinateur. Alors que si c'était en ligne, vous ne voudriez probablement pas utiliser root et root parce que ce serait beaucoup plus hackable. Hôte de base de données, nous pouvons laisser comme localhost et préfixe de table. Donc c'est toujours une bonne idée de laisser ça comme wp_ juste pour suivre la convention. Donc, lorsque nous cliquons sur « Soumettre » ici, espérons que la connexion sera réussie. Donc, cela confirme que tous les détails sont corrects, et nous pouvons simplement cliquer sur « Exécuter l'installation » et maintenant WordPress va mettre en place la base de données pour nous. Donc pour le titre du site, je vais l'appeler Christopher Dodd parce que c'est mon nom. Nom d'utilisateur, je vais juste l'appeler Admin. Je vais utiliser leur suggestion, et c'est toujours une bonne idée d'enregistrer les noms d'utilisateur et les mots de passe. Je vais donc ouvrir un fichier d'édition de texte et cliquer sur « Nouveau document ». Donc je vais mettre ça ici pour que je ne l'oublie pas. Ce sera votre login WordPress. Oui, assurez-vous de tenir cela parce que vous allez en avoir besoin à chaque fois que vous vous connectez à votre site WordPress. Je vais mettre mon adresse e-mail afin que je puisse être contacté à propos de ce site, parce que nous faisons localement, nous n'avons pas besoin de décourager les moteurs de recherche d'indexer le site, parce que ce n'est même pas sur Internet. La dernière étape consiste à cliquer sur « Installer WordPress », et il dit qu'il est maintenant installé. Maintenant, ce que je veux que vous fassiez est de retourner à votre phpMyAdmin et juste rafraîchir. Vous pouvez donc vous rafraîchir ici ou vous pouvez vous rafraîchir ici, et tout à coup vous verrez qu'il y a toutes ces tables. Certains d'entre eux, je suis sûr, auront déjà beaucoup de données mises en place. Donc, passer par et faire cela manuellement serait ridicule, si heureusement, WordPress met tout cela pour nous dans la fameuse installation de cinq minutes. Maintenant, nous pouvons nous connecter à notre site Web, ou si nous voulons juste le voir, c' est notre site Web. Donc, si nous voulons vous connecter, vous pouvez saisir ceci, et bien. Maintenant, l'avantage de l'hébergement local est, numéro 1, si vous voulez le garder complètement privé et vous ne voulez certainement pas que quelqu'un le voit. Ce n'est pas sur Internet, donc personne ne peut le trouver. En outre, vous avez accès aux fichiers directement sur votre ordinateur, sorte que vous pouvez modifier n'importe quoi vraiment rapidement et facilement. Vous n'avez pas à télécharger, télécharger. On pourrait juste passer et ouvrir avec notre éditeur de code. Oui, il y a des avantages, des avantages et des inconvénients à avoir localement contre hébergé depuis le début. L' un des inconvénients est que nous allons devoir migrer le site pour l'obtenir sur Internet, mais ce n'est pas grave parce que je vais vous montrer comment faire cela à la fin du cours. Donc, c'est comment installer WordPress localement. N' oubliez pas que chaque fois que vous démarrez votre ordinateur, vous devrez redémarrer votre serveur pour accéder à ce site Web. Il ne fonctionne pas sauf si le serveur est en cours d'exécution. Mais oui, c'est tout. Maintenant, vous avez une nouvelle installation WordPress pour travailler avec. Dans la vidéo suivante, je vais brièvement couvrir comment faire cela directement sur cPanel sur le Cloud, sur Internet, sur votre compte d'hébergement, ce qui est juste un peu plus facile. Alors je te verrai sur la prochaine vidéo. 6. Installation de Wordpress - cPanel: Dans la dernière vidéo, nous avons mis en place WordPress localement. Mais dans cette vidéo, je vais vous montrer comment configurer WordPress sur cPanel, sur votre hébergement. C' est en fait assez simple, cPanel rend cela très facile. Ce que je vais faire, c'est ouvrir une nouvelle fenêtre et je vais aller à un domaine que j'ai déjà configuré. Si vous avez fait le dernier cours avec moi, vous vous souviendrez skillsharecourse.space. Il n'y a actuellement rien là-bas, donc je vais obtenir cette erreur. Mais vous pouvez accéder à votre site Web cPanel en mettant dash cPanel. Maintenant, si vous ne suivez pas ici, fondamentalement ce que j'ai déjà fait est que j'ai créé un domaine et ensuite j'ai lié à ce domaine à l'hébergement et si tout cela est nouveau pour vous, retournez certainement à la classe précédente, qui comprend le développement web et consultez les sections sur le déploiement de votre site Web sur Internet. Découvrez la différence entre le domaine et l'hébergement, si vous n'êtes pas familier avec cela. Mais fondamentalement, nous partons du point final de la dernière classe. Si tout cela n'a pas de sens, je vous encourage à y retourner et à suivre ce cours. Quoi qu'il en soit, nous sommes maintenant sur cPanel et comme vous le voyez, j'ai déjà un tas de connexions parce que j'ai géré cPanel sur beaucoup de comptes. Mais ce que j'ai fait pour mon site web, j'ai déjà mis en place un nom d'utilisateur cPanel. J' utilise le même mot de passe que nous l'avons fait pour notre installation locale. Mais je ne pouvais pas utiliser admin parce que j'avais déjà utilisé celui-là avant. Donc, le cours Skill Share est le nom d'utilisateur dans mon instance. Je vais cliquer sur « Connexion » et maintenant je suis dans cPanel. Maintenant, lorsque vous êtes dans cPanel, tout ce que vous devez faire pour installer WordPress est d' aller dans les applications Web, puis cliquez sur « WordPress ». La bonne chose à propos de l'installation via votre cPanel est que vous n'avez pas besoin de configurer la base de données. Je clique simplement sur ce bouton, installe cette application et je ne veux pas de répertoire, je vais juste l'avoir directement sur le domaine racine. Tout le reste va bien, ce que je vais faire est d'utiliser les mêmes détails de connexion que nous avons définis pour la version locale. Idéalement, vous ne voudriez pas que votre mot de passe soit le même pour cPanel et WordPress, mais après ce cours, je vais supprimer de toute façon, donc ça n'a pas vraiment d'importance. Pour l'email de l'administrateur, je vais mettre dans mon email afin que ce site puisse me joindre en cas de problèmes ou de notifications, titre du site Web sera Christopher Dodd et je vais mettre mon slogan comme Développeur Web WordPress. Nous pouvons tout laisser par défaut, puis cliquer sur « Installer ». Aussi, si vous avez pris la dernière classe sur le développement web permanent, vous m'auriez vu le faire avant aussi, c'est très rapide et assez facile. Donc, juste comme ça, votre site WordPress est maintenant installé et vous pouvez aller ici et soudainement je suis sur mon nouveau site WordPress et si je voulais aller dans l'administrateur, je vais dans l'administrateur comme ça et c'est juste le nom d'utilisateur et mot de passe que j'ai configurés dans le processus d'installation. Là, vous l'avez, nous avons une nouvelle installation WordPress. Donc, à partir de ce point, vous pouvez décider, je veux dire, vous avez probablement déjà décidé, mais à partir de ce point, vous pouvez travailler sur le cloud ou vous pouvez travailler sur l'installation locale. Il semble que je l'ai déjà configuré localement ici et il est généralement plus facile de travailler avec des fichiers locaux et je vais migrer dans une vidéo ultérieure. Je vais le faire sur l'hébergement local. Mais vous pouvez tout aussi bien le faire directement à partir de l'hébergement en ligne. Cela couvre la mise en place de WordPress. La prochaine étape consiste à changer ce thème. C' est le thème par défaut de WordPress et bien sûr le thème que nous utilisons est Divi. Mais il y a un concept important à apprendre sur la construction thèmes ou la personnalisation de thèmes et c'est le thème enfant. Dans la vidéo suivante, nous allons créer un thème enfant et parler de ce qu'est un thème enfant et pourquoi vous devriez en utiliser un. Je te verrai dans la prochaine vidéo. 7. Création d'un thème Divi Child: Donc, parce que nous parlons de mettre en place un nouveau thème dans notre site WordPress, je commence ici dans la section Thèmes. En réalité, nous ne pouvons pas ajouter un thème Divi à partir d'ici, car c'est un thème premium. Juste pour vous montrer, si nous devions cliquer sur « Ajouter un thème », nous pouvons rechercher tous les thèmes déjà disponibles sur WordPress.org, et tous ceux-ci, lorsque vous les installez, devraient être gratuits ou au moins gratuits pour commencer. Ils pourraient facturer plus pour une version premium plus tard, mais si vous vouliez juste aller avec un thème gratuit, alors vous pourriez regarder juste ici. Parce que nous utilisons un thème premium, dans le cas de Divi, nous devons récupérer ce fichier d'eux, et la façon dont nous le faisons est de nous connecter à notre compte Thèmes Élégants. En fait, avant de sauter là-dedans, je voulais juste noter que je vais créer mon site WordPress sur l'hôte local, donc je le fais localement. Rappelez-vous, je l'ai aussi fait dans un domaine distant aussi bien, Skillsharecourse.space. Si vous vous souvenez d'avant, nous avons mis en place WordPress sur notre hébergement sur Internet avant, mais il va être un peu plus compliqué d'accéder à ces fichiers. Ce que je vais faire avec mon installation locale c'est que je peux juste aller directement ici et éditer ces fichiers. Dans le cas où vous exécutez votre site WordPress complètement sur l'hébergement, complètement à distance, et que vous ne l'hébergez pas localement, vous devrez trouver un moyen d'accéder à ces fichiers et la meilleure façon pour moi de le faire c'est FTP. Maintenant, parce que nous avons couvert FTP dans la dernière classe, je ne reviendrai plus, mais si vous avez besoin d'aide pour accéder aux fichiers sur votre serveur distant, revenez certainement à comprendre le développement web et consultez la leçon sur FTP. Avec cela hors du chemin, je vais aller à Thèmes Élégants et je vais me connecter, et je vais prendre la dernière version de Divi. Lorsque vous vous connectez à Thèmes élégants, vous obtenez cet Espace Membres, où vous pouvez voir vos téléchargements. Ils ont d'autres choses que vous pouvez télécharger ici aussi, y compris Monarch, qui est un plug-in de partage social que j'utilise. Allez à Divi, puis cliquez sur « Télécharger » et vous verrez que j'ai celui-ci entre parenthèses, parce que j'ai déjà téléchargé Divi, mais juste pour m'assurer que j'ai la dernière version, je vais enregistrer cela et bang, je l'ai téléchargé. Maintenant que vous l'avez téléchargé, vous pouvez revenir à votre tableau de bord WordPress, puis dans votre section Thème, cliquez sur « Télécharger Thème », allez dans ici et le télécharger. Maintenant, parce que je suis local, ce n'est pas en train de télécharger, c'est en fait juste tout faire sur mon propre ordinateur. Télécharger est un peu un faux terme ici, mais cela n'a pas d'importance. C' est la même chose. Ce sera la même chose de le faire sur votre hébergement à distance aussi. Si vous n'êtes pas convaincu que vous voulez l'activer, vous pouvez d'abord prévisualiser en direct, mais parce que nous partons de zéro, aucun progrès n'a été réalisé. Il est complètement sûr de cliquer simplement sur « Activer ». Nous avons Divi installé, et je veux que vous remarquiez ce qui se passe ici quand nous allons sur notre site WordPress. Voyez comment c'est complètement différent. Ne vous méprenez pas, les types de poste que nous avions avant, nous avons toujours Hello World, nous avons encore ces commentaires factices, et nous avons encore un exemple de page, mais comment tout est disposé est complètement différent. Si vous vous souvenez avant, nous avons eu ce thème avec la petite plante pop et le titre là-bas, nous avons Divi maintenant, qui à première vue, semble assez ours, mais c'est en fait une bonne chose, parce que nous peut plus facilement le personnaliser à ce que nous voulons. Il est préférable de commencer à partir d'un point de départ nu et de pouvoir construire dessus, que d'avoir toutes ces mises en page fantaisie et d'avoir ensuite à comprendre comment revenir à une mise en page régulière. Ce que je vais faire maintenant, avant de commencer à personnaliser notre installation Divi, est de créer un thème enfant, ce qui est le point principal que je veux faire dans cette vidéo. Pour en savoir un peu plus sur les thèmes enfants, j'ai copié une URL ici. Ceci est sur le codec WordPress.org. Vous pouvez en savoir plus sur les thèmes enfants ici. Il parle de pourquoi utiliser un thème enfant, comment créer un thème enfant, et les différents fichiers de modèle et tout, mais peut-être que ce qui n'est pas couvert est ce qui est vraiment un thème enfant ? Un thème enfant est fondamentalement un nouveau thème. Il va y avoir un nouveau thème ici, mais essentiellement il n'y aura que quelques fichiers différents là-dedans, et il fait référence à un thème parent. Dans ce cas, ce sera Divi, qui sera le thème parent. Le point d'un thème enfant est que nous pouvons apporter des mises à jour ou des modifications au thème parent, sans toucher réellement le thème parent. Ce qui se passe, c'est quand nous créons ce thème enfant, et je vous montrerai dans une seconde, l'installation WordPress examinera le thème enfant, il ira d'abord à ces fichiers, mais s'il ne peut pas les trouver, ça ira directement au parent. C' est juste vraiment propre. Si vous allez faire l'édition du thème, il est préférable de simplement laisser ce propre tel quel, ne pas entrer et changer ce qu'il a fait Divi, mais si vous voulez faire des modifications, il est préférable de le mettre dans un thème enfant. La façon la plus simple de penser à un thème enfant, je dirais, est que c'est juste un thème dans lequel vous mettez toutes vos personnalisations tout en profitant du thème parent, et en gardant vos personnalisations et le thème principal séparément, tout en étant en mesure de tirer parti de ces deux avantages. Encore une fois, je parle juste théorique ici, nous allons en fait voir un thème enfant en ce moment. Tout d'abord, pourquoi utiliser un thème enfant ? On en a déjà parlé un peu. C' est un excellent moyen d'en apprendre davantage sur le développement de thèmes, mais la principale raison est de garder les choses propres. Vous allez avoir vos fichiers modifiés dans un thème et vous aurez le thème original non modifié dans son propre dossier de thème. Nous pouvons suivre les étapes ici, mais parce que nous utilisons Divi, Divi a en fait un tutoriel sur la façon de créer un thème enfant spécifiquement pour Divi. Je vais taper dans Divi thème enfant, et ici, j'ai accédé à cela quelques fois. Il est juste appelé le guide ultime pour créer un thème enfant Divi. Parce que je fais ça localement, je peux aller directement dans ce répertoire ici. Ce que je dois faire est d'aller dans le répertoire themes. Je vais aller contenu WP. Je vais aborder les thèmes. Oups, j'ai accidentellement ouvert les deux. Je vais aller dans les thèmes et vous pouvez voir ici Divi. Maintenant, nous ne voulons pas y toucher, comme nous l'avons dit précédemment, nous voulons garder Divi propre et cela signifie que lorsque nous mettons à jour Divi, cela ne cassera aucune de cette personnalisation. Au lieu de cela, nous allons créer un nouveau dossier appelé Divi child, et vous pouvez appeler cela comme vous voulez. Divi enfant est juste le nom le plus descriptif possible. Pour qu'un thème enfant fonctionne, il y a un fichier essentiel dont vous avez besoin, et c'est un style.css. Je vais faire défiler vers le bas où il vous donne le code exact à mettre. Ici, vous pouvez voir la direction que je viens de vous donner avec la création d'un répertoire DIVI-child dans le répertoire themes, puis l'étape suivante consiste à ajouter le style.css. Vous pouvez simplement copier et coller ceci directement. Je vais copier ça et je vais créer un nouveau fichier avec mon éditeur de code, Atom. Atom est maintenant ouvert. Je vais créer un nouveau fichier. Je vais mettre cette copie et coller le code. Je vais « Enregistrer sous », et je vais retourner dans mon répertoire WordPress. Je vais aller dans mon répertoire Thèmes, trouver mon thème enfant, Divi-child, et je ne vais pas l'appeler « fz3temp-2", c'est juste ridicule. Il doit être appelé style.css. Certainement ne change pas ça. C' est le nom de fichier que WordPress va chercher, alors assurez-vous que c'est style.css. C' est la base du thème de votre enfant. Une autre chose que vous devriez mettre est un fichier PHP de fonctions, et cela va mettre en file d'attente votre feuille de style de thème parent, qui signifie qu'il va regarder cela d'abord, il obtiendra l'information, mais alors il faudra les styles du thème parent. Encore une fois, il suffit de copier et de coller. Je vais prendre ça. Je vais créer un nouveau fichier dans atom, collez-le dans. Je vais enregistrer cela comme functions.php. Encore une fois, c'est très important ce que vous appelez ces, car ce sont tous des fichiers de modèle WordPress. WordPress recherchera spécifiquement ces noms. Je vais appeler ça function.php. Essentiellement, c'est tout ce dont vous avez besoin. Vous pouvez créer une miniature pour votre thème enfant Divi, mais vous n'avez vraiment pas besoin de le faire. Tu pourras juste lire le nom. Si vous voulez faire preuve de créativité, vous pouvez changer la vignette, mais ce n'est vraiment pas important. Ce qui va se passer maintenant, c'est que nous allons revenir dans notre section Thèmes de notre site Web. Au fait, cette zone ici, tout ce qu'il fait est de référencer les dossiers ici. Vous pouvez voir Divi, 2015, 2017, 2016. Ce sont tous les thèmes ici. Donc, si nous actualisons la page, vous verrez notre nouveau dossier, l'enfant Divi est là et il n'a pas de vignette, parce que comme je viens de le mentionner, nous n'avons pas mis de vignette, mais n'a vraiment pas d'importance. Nous pouvons entrer et cliquer sur « Activer », et maintenant nous allons passer à notre thème enfant. Si tout s'est bien passé, nous pouvons recharger et c'est exactement le même site. Vous pourriez penser, bien, Chris, si ça doit être exactement pareil, pourquoi avons-nous créé un thème enfant ? La raison pour laquelle, comme je l'ai dit, est juste de mettre vos modifications dans un fichier différent. Ce que nous pouvons faire, c'est mettre plus de fonctions ici. Ce que nous pouvons faire est d'ajouter des styles personnalisés ici, ce qui, en passant, nous allons faire quelques personnalisations de thème dans ce cours, sorte que vous voyez réellement ce que c'est de mettre à jour un thème enfant et quelles modifications nous allons réellement faire, mais pour l'instant, notre base théorique, nous pouvons mettre tous les changements que nous voulons dans ce thème et ensuite nous n'avons pas à modifier le thème original. Espérons que vous comprenez ce qu'est un thème enfant à l'heure actuelle, du moins d'un point de vue théorique. Comme je l'ai dit, nous allons réellement éditer ce thème enfant, créer quelques modifications. C' est une très bonne pratique d'avoir un thème enfant. Je dirais que c'est une des choses que je n'ai pas faites quand je commençais, et j'aimerais le faire. C' est juste une bonne pratique à faire et aussi cela rend les choses beaucoup plus propres. Vraiment important que vous obtenez ce thème enfant mis en place, et avec cela fait, il est temps de vraiment rester coincé dans Divi et faire quelques personnalisations. Je te vois dans la prochaine vidéo. 8. Commencer avec Divi: Dans cette vidéo, nous allons vous expliquer comment commencer avec Divi. Ce que je veux dire par là, c'est, changer certains des paramètres par défaut ici. Évidemment, la première chose qui me distingue, c'est que nous avons le logo Divi au lieu de notre propre logo. Le menu est terrible, nous avons « Sample Page » et « Uncategorized ». C' est juste un comportement par défaut, nous montrons sur notre page une collection de tous les articles de blog. ce moment, nous avons juste un billet de blog qui dit, « Bonjour le monde », qui est juste un morceau de contenu factice que WordPress commence avec. Mais si nous avions plusieurs billets de blog, ce serait un index que nous pourrions faire défiler. Il est aussi mis dans la barre latérale. Enfin, il est mis dans un pied de page avec, « Designed by Elegant Themes » « Powered by WordPress ». C' est très Divi pour le moment, les Menus sont faux, le contenu factice, et nous avons une barre latérale. La première chose, comme je l'ai mentionné, est que je veux mettre à jour le logo du site. Maintenant, il y a deux endroits où vous pouvez personnaliser votre thème. Vous pouvez utiliser le « Theme Customizer », comme nous l'avons fait auparavant. Divi offre beaucoup d'options ici. L' endroit que j'aime regarder en premier quand je change d'options pour Divi est, si je vais dans le « Tableau de bord », nous avons un nouveau menu ici qui n'était pas là avant évidemment, il est juste mis dans Divi, où nous pouvons aller dans nos « Options Thèmes ». Encore une fois, les deux endroits que vous devriez regarder pour personnaliser Divi avant de creuser dans n'importe quel code seraient, « Theme Options », « Theme [inaudible] « , et « Module Customizer », je n'ai pas eu à utiliser beaucoup, mais, c'est aussi un endroit où vous pouvez créer des personnalisations. Maintenant, une fois que vous arrivez aux options de thème « Général » de Divi, qui est le premier onglet qui apparaît, vous obtiendrez le premier champ comme « Logo », ce qui est approprié parce que c'est la première chose que je voudrais changer. Je vais aller dans un dossier que j'ai préparé de fichiers pour ce cours WordPress. J' ai ce logo, c'est un logo assez terrible, que j'ai créé. Je viens de tracer une image de mon visage et je vais juste l'utiliser comme mon site web. Maintenant, pour des raisons de S.E.O, vous allez vouloir mettre quelque chose d'un peu plus descriptif ici. En fait, le titre devrait probablement être un peu différent. Ici, je vais dire, « Christopher Dodd, développeur Web. » Ensuite, je vais cliquer sur « Définir comme logo » et ce sera le logo. Il y a beaucoup d'autres options ici dans les options Divi, mais pour l'instant je vais juste cliquer sur « Enregistrer les modifications » et puis je vais voir le site. Comme vous pouvez le voir, mon visage est maintenant le logo du site. Ce que je veux faire ensuite, c'est changer cette première page. Ce que je dois faire pour cela est, par défaut, et cela se produit dans n'importe quel thème WordPress, est qu'il montrera tous les messages de blog qu'il fournira un index de blog. Souvent, la plupart des sites Web que vous ne voulez pas simplement afficher votre index de blog. Il est important de savoir comment changer cela et c'est une question très simple. Tu vas juste dans « Paramètres  », je crois qu'il est en train de lire. Ensuite, votre page d'accueil affiche la chose que vous allez devoir changer. En ce moment, il affiche les derniers messages mais nous pouvons créer une page statique. J' aurais dû créer une page à l'avance, mais utilisons simplement l'exemple de page pour l'instant. Je vais cliquer sur « Enregistrer les modifications ». Maintenant, quand nous revenons à la page d'accueil, nous avons la page d'exemple et c'est bon parce qu'il est mis dans du contenu là-bas. Vous pouvez voir à quoi cela ressemblerait maintenant avec une page au lieu de l'index de blog sur la première page de votre site Web. La prochaine chose que je veux faire est de mettre à jour mon menu. Je vais retourner dans « Dashboard ». La façon d'accéder au menu est par « Apparence », puis cliquez sur « Menus ». Je vais donner un nom à mon menu et je vais l'appeler « Menu principal ». Vous pouvez voir que j'ai déjà fait ça avant parce que j'ai des suggestions à venir. Cliquez sur « Créer un menu ». Maintenant, j'ai ce menu et avant que nous y mettions des pages, ce qui, d'ailleurs, nous n'en avons pas vraiment, je vais cliquer sur « Afficher l'emplacement », qui est « Menu principal ». « Enregistrer le menu » pour s'assurer qu'il apparaît à cet endroit. Parce que nous n'avons qu'une seule page, je vais ajouter une seule page au menu. « Enregistrer le menu » à nouveau. Quand je vais ici, avant de vous rafraîchir, assurez-vous de regarder cela et vous verrez bientôt que lorsque je le rafraîchissement, il arrive avec mon nouveau menu, qui n'a qu'un seul élément en ce moment. Juste pour être clair, la raison pour laquelle il est bleu et pas sombre comme le reste de ceux-ci est parce que, c'est la page active. instant, nous n'avons qu'une seule page donc elle sera bleue pour la première page, mais nous pouvons ajouter plus de pages. Juste pour montrer le menu, nous n'avons pas beaucoup de pages vers lesquelles lier, mais nous pouvons créer nos liens personnalisés. La meilleure façon de créer un lien fictif, c'est juste de mettre un hachage. Mais nous pouvons dire que peut-être, nous voulons avoir un « onglet Portefeuille », peut-être que nous voulons avoir un « onglet Services », et peut-être que nous voulons un « onglet pour le blog ». Ce que vous verrez ici, c'est que vous avez tous ces liens maintenant. Je vais me débarrasser de « Sample Page » parce que c'est la page d'accueil, nous n'avons pas vraiment besoin de l'avoir comme un lien de menu. Mais une autre chose que je vais vous montrer sur les menus est que nous pouvons avoir des menus imbriqués. Je vais te montrer ça maintenant. Disons juste que, vous aviez un blog et vous aviez des sujets différents, alors peut-être que l'un des sujets est, « WordPress. » Il va ajouter à ce menu. Ce que je peux faire pour en faire un élément de sous-menu d'un autre élément de menu est de cliquer dessus. Au fait, je peux le faire glisser à différentes positions dans le menu mais, si je le fais glisser juste un peu vers la droite, vous pouvez voir qu'il est un peu en retrait. Je l'ai mis dedans. Il va maintenant dire, « Sub Item » et c'est un « Sub Item » de « Blog ». Pour voir ce changement, je vais cliquer sur « Enregistrer le menu », puis je vais actualiser. Comme vous pouvez le voir, nous avons le lien « Portfolio », puis vous avez le lien « Blog », et puis vous avez ce sous-lien de blog qui est « WordPress ». C' est tes menus. La prochaine chose importante est probablement le « Theme Customizer ». Je vais aller sur la page. Cliquez sur « Personnaliseur de thème ». Vous pouvez le faire à partir de l'extrémité avant ou de l'extrémité arrière. Comment vous le feriez dans le backend serait, « Apparence », puis, « Personnaliser » ici. Mais, vous pouvez le faire pendant que vous êtes sur le site Web. Ce qui est puissant dans Divi, c'est que nous pouvons modifier les paramètres « Typographie », nous pouvons augmenter la « Taille du corps du texte ». Ce sont des changements généraux comme la typographie qui vont se dérouler sur notre site, à moins que nous ne les remplacions. Cela nous permettra de changer la police d'en-tête et la police de corps, afin que nous puissions changer ce que vous voulez. Choisissons, je pense que [inaudible] est assez dans s'ils l'ont. Non. Et « Anaheim » ? Non. C'est un peu carrée, n'est-ce pas ? Tu comprends le point. Tu peux mettre ce que tu veux là-dedans. Puis, police du corps. Je vais faire « Abel ». Wow, ce n'est pas très lisible. Ce n'est pas génial non plus. Ils sont très élégants mais pas très lisibles. Droid Sans, c'est bon, Droid Sans fera l'affaire. On peut changer la couleur du lien du corps. Comme vous pouvez le voir ici, c'est un lien. Nous pouvons modifier et puis soudainement cela change. Je vais créer par défaut parce que le bleu a historiquement été la couleur du lien donc beaucoup de gens savent qu'un texte bleu est un lien, et nous pouvons changer la couleur du corps du texte. Peut-être que nous voulons plus d'évanouissements qui recommanderaient probablement ou plus noir. Nous pouvons le faire aussi. Donc, vous avez le point. Je vais cliquer sur Publier pour que ces modifications soient en direct. Je vais revenir ici, les paramètres de mise en page. Tu as beaucoup de réglages à Divi pour être honnête. Vous pouvez être très emporté et vous pouvez juste traîner ici et en fait c'est probablement une bonne recommandation pour juste traîner ici et voir ce que vous pouvez personnaliser. Jouez car il s'agit de la couche supérieure de personnalisation dans Divi. Le niveau le plus profond serait d'écrire du code, mais c'est probablement le premier endroit où vous devriez regarder ceci et les options de thème dont j'avais parlé auparavant. Nous pouvons également changer le schéma de couleurs global. Vous obtenez l'image. Nous pouvons personnaliser les choses qui arriveront à l'ensemble de notre site Web à travers ce menu. Nous avons donc le logo, nous avons notre propre menu, et nous avons changé la page d'une des publications en une seule page que nous allons modifier plus tard. Mais la barre latérale sur la page d'accueil, ce n'est pas un bon regard en ce moment. Donc ce que je vais faire, c'est aller aux menus et je vais aller dans les widgets. C' est un peu déroutant, mais votre barre latérale est configurée avec des widgets. Donc, si vous voulez trouver votre barre latérale et personnaliser les widgets à l'intérieur de celui-ci, vous pouvez y aller. Maintenant, ils jettent beaucoup de choses ici dont vous n'avez probablement pas besoin. Je vois à peine personne ayant un méta menu dans la barre latérale. Catégories que vous pouvez mettre dans si vous pensez que c'est bon, archives si vous pensez que c'est ce que vous voulez afficher à votre public, mais nous pouvons probablement nous débarrasser de beaucoup de cela. Donc, ce que je vais faire est juste de supprimer toutes ces archives, commentaires récents, recherche. Vous pouvez rechercher la barre supérieure, en fait la barre de menus. On n'a pas vraiment besoin de fouiller deux fois. Je vais juste laisser des messages récents parce que personnellement j' aime avoir des messages récents dans ma barre latérale, et je vais lui donner un titre de messages récents afin que les gens sachent que ce sont mes messages récents. Je pense qu'il a des messages récents par défaut. Si je rafraîchis la page maintenant, vous pouvez voir que la barre latérale ici a changé. Au lieu de voir tous ces widgets dont nous n'avons pas vraiment besoin, nous venons d'obtenir les messages récents. C'est génial. En même temps, je ne veux pas avoir de barre latérale sur la première page de mon site web de toute façon. Vous verrez que nous construisons cette première page avec Divi, je vais vouloir que la première section soit pleine largeur et aussi je ne veux pas confondre un utilisateur avec trop de liens sur la première page. Donc je ne veux pas vraiment que cette barre latérale apparaisse du tout. Avec Divi, il est assez simple de désactiver la barre latérale. Je vais cliquer sur « Modifier la page » et il y a en fait plus sur la droite ici, paramètres de page Divi. Donc, ici sur la mise en page, il est réglé pour inclure la barre latérale droite ce moment, mais je pourrais déplacer la barre latérale vers la gauche si je le voulais, ou je peux aller pour la largeur qui se débarrasse complètement de la barre latérale. J' aime ça. Je vais cliquer sur mise à jour et il est dit page mise à jour. Donc, je peux cliquer sur Afficher la page et soudain il n'y a pas de barre latérale. Donc, si je vais vérifier un billet de blog, disons bonjour monde, je peux y accéder comme ça avec l'URL, et si nous regardons le post, nous pouvons voir le post là-bas et nous pouvons voir la barre latérale. Donc, si vous voulez éteindre complètement ce côté, il y a des façons de le faire. Nous pouvons le cacher avec CSS. Nous pouvons également changer le modèle. Mais si vous êtes heureux de modifier cela pour chaque page individuelle, vous pouvez le faire via Modifier la page. Donc la dernière chose que je voulais changer était le pied de page. ce moment, il dit Designed by Elegant Themes, propulsé par WordPress. Mais nous n'avons pas vraiment besoin de primo thèmes élégants ou WordPress si nous ne voulons pas. En fait, c'est un bon espace pour mettre des informations sur les droits d'auteur ou un lien vers notre propre site, ou si vous êtes capable de le faire et le client ne dérange pas peut-être que vous voulez mettre le design par et vous y lierez. Mais demandez certainement à votre client ou à quiconque vous construisez le site si vous pouvez le faire d'abord si vous voulez le faire. Essentiellement, il n'y a pas besoin d'avoir des thèmes élégants et des liens WordPress ci-dessous dans votre pied de page. Donc, ce que je vais faire, c'est que je vais changer ça en allant dans le Theme Customizer. Qui rappelez-vous, nous pouvons entrer dans le nom de notre site Web, faire défiler vers le bas, cliquez sur Theme Customizer, ou bien sûr, nous pouvons aller dans l'apparence personnalisée à travers le tableau de bord aussi bien. Je peux juste aller au pied de page qui est en fait juste une partie de la barre du bas de l'enregistrement complet, la partie que nous essayons d'éditer. Donc, je peux aller à l'option de la barre inférieure et je peux modifier les crédits photo. Donc, je vais juste dire copyright Christopher, et puis je peux mettre du HTML là aussi. Donc, je pourrais mettre une balise de lien et je peux l'obtenir pour un lien vers un autre site Web. Encore une fois, je mets juste un hachage juste pour être un détenteur de place et vous pouvez voir maintenant le texte est un peu différent pour indiquer qu'il s'agit d'un lien. Vous pouvez également désactiver complètement les crédits photo afin qu'il n'ait même pas besoin de dire copyright Christopher du tout. Ainsi, vous pouvez simplement le désactiver complètement ou vous pouvez activer cela et avoir votre texte personnalisé. En bas à droite, vous avez peut-être remarqué ces liens qui viennent de Divi. Si je clique simplement sur Publier ici, je vais vous montrer où vous pouvez y accéder. J' ai les options de thème déjà ouvertes ici. Vous pouvez mettre dans votre Facebook, votre Twitter, vos liens Google Plus et donc quand quelqu'un clique sur ces liens, il ira à ces liens. Honnêtement, j'ai Facebook et j'ai Twitter et pas un gros utilisateur de Google Plus. Donc souvent je cache cette section et je mets mes propres liens sociaux. J' aime aussi créer des liens vers d'autres profils, pas seulement ces trois. Donc, je ne suis pas sûr pourquoi Divi a choisi ceux-ci probablement parce qu'ils sont les plus sympathiques blogueurs, mais j'aime faire un lien vers YouTube et Instagram. Je crée habituellement ma propre petite photo avec ces liens là-dedans. Donc, fondamentalement, nous avons la base de notre site Web. Nous avons une page d'accueil et un menu qui ne fait rien pour l'instant, mais nous y arriverons. chose la plus importante dont notre site a besoin en ce moment est le contenu. Donc, dans la prochaine vidéo, nous allons parler d'ajouter du contenu, parce que si vous n'avez pas de contenu, vous n'avez rien à afficher et il est même difficile organiser votre site Web quand vous n'avez rien sur celui-ci. Nous allons donc ajouter du contenu dans la prochaine vidéo, et dans les vidéos suivantes, nous allons continuer avec quelques personnalisations et la création de pages. Alors je te verrai sur la prochaine. 9. Ajoutez du contenu à votre site Web: D' accord. Donc, cette vidéo, nous allons tout parler de contenu et nous allons ajouter du contenu à notre site WordPress. Rappelez-vous, WordPress est la plate-forme la plus populaire pour construction de sites Web basés sur le contenu et pour un site Web basé sur le contenu, pour être un bon site Web basé sur le contenu, il a besoin d'avoir du contenu assez évidemment. Dans WordPress, il y a quelques types de contenu différents que nous pouvons ajouter, dans WordPress, il y a deux choses appelées Types de Post, ce qui est un peu déroutant parce que l'un d'eux est en fait appelé Postes. Mais essentiellement les types de poste fonctionnent de la même manière. Divi ajoute en fait un troisième type de poste appelé Projets, et je n'ai pas vraiment expliqué ce qu'est un type de poste, mais fondamentalement c'est juste un moyen d'ajouter dynamiquement du contenu. Donc, nous pouvons voir ici sur le menu des messages, nous pouvons regarder tous les messages. Nous pouvons ajouter de nouveaux messages, nous pouvons catégoriser nos messages et nous pouvons les étiqueter. Si j'accède à des pages, cela n'autorise pas les catégories et les balises, mais il nous permet d'afficher toutes les pages et d'ajouter de nouvelles pages. Si nous allons à des projets qui est ajouté par Divi, nous pouvons aller à tous les projets, vous catégoriser et tags. Donc, la différence entre les messages et les pages est que les messages, vous pouvez les considérer comme des billets de blog. Ils ont donc une heure fixe et ils sont ajoutés à ce qu'on appelle votre flux RSS. Donc, si quelqu'un veut s'abonner à votre blog via un lecteur de blog, quand vous publiez un nouveau billet de blog, il va être averti. Donc, à bien des égards opposés comme un peu comme une page, mais il a juste une date dessus et il est juste construit pour être comme un billet de blog. Donc, en passant sur les pages, les pages sont assez similaires aux messages comme mentionné, la différence est que les pages n'ont pas de date sur elles, sauf si vous deviez spécifiquement mettre une date dans le contenu. Ils n'ont pas de catégories et ils n'ont pas de balises, car les pages sont généralement utilisées pour la navigation ou pour construire une page spéciale qui ne représente pas vraiment le contenu habituel du site Web. Par exemple, si nous allons sur l'un de mes sites de blogueurs préférés appelé Nomadic Matt, sur nomadic matt.com. Nous pouvons voir ici que la première chose que nous regardons est une page, elle ajoute à la navigation parce qu'il nous relie à ses différents livres ici. Mais vous pouvez voir ici dans cette section qu'il nous relie à ses billets de blog, et essentiellement nous avons eu la même chose, nous avons une page et je suppose que vous pourriez considérer cela comme une page aussi. Mais si vous regardez le post, il est évident que c'est un billet de blog. Tu dois sortir ici, et il met la barre latérale là-dedans. Donc oui, c'est un peu une différence subtile, mais les messages que vous pouvez considérer comme des billets et des pages de blog sont fondamentalement n'importe quoi d'autre. Bien sûr, dans Divi, Il est un peu différent dans le sens où vous avez un troisième type de poste et qui est des projets. C' est ce qui rend Divi vraiment bon pour la construction de sites Web de portefeuille personnel, c'est parce que peut-être vous voulez mettre vos projets précédents, portefeuille de travail client précédent, tout ce que vous voulez appeler dans une section distincte. Donc Divi rend cela facile en vous donnant un autre type de poste, et c'est ce qui est connu comme un type de poste personnalisé parce qu'il ne vient pas par défaut avec WordPress. Heureusement pour nous, Divi le met automatiquement en place, donc nous n'avons pas eu à le mettre en place nous-mêmes. D'accord. La dernière partie du contenu dont il faut parler est les médias et, en gros, si nous passons aux médias maintenant, je vais ouvrir un nouvel onglet et nous avons toutes les images que nous avons déjà mises sur le site Web ici. Nous pouvons ajouter de nouvelles images en ajoutant de nouvelles ici. Donc, fondamentalement, les médias eux-mêmes ne font rien, à moins que je mette un document ici et y relie quelqu'un. Mais nous pouvons intégrer des médias dans des pages postales et des projets. Donc les médias la plupart du temps vont être des images que vous voulez peut-être mettre des fichiers audio ici. Peut-être que vous voulez mettre des fichiers vidéo ici et peut-être que vous voulez juste stocker des documents. Donc, je suppose que les médias sont juste un autre type de contenu, mais il va de pair et incorporé avec des messages, des pages et des projets. Maintenant que je vous ai donné un aperçu, il est temps de créer du contenu. Donc, je vais aller dans le post et cliquer sur Tous les messages, et vous pouvez voir ici dans le tableau que nous pouvons voir notre premier post, et il nous donne le titre, l'auteur, et la catégorie, qui dans WordPress vous devez avoir une catégorie. Donc, si vous n'avez pas de catégories configurées, il dira simplement non catégorisé. Donc ce que je vais faire maintenant, c'est parce que bonjour monde est juste un billet de blog factice, je ne me soucie pas vraiment à ce sujet. Je vais l'écraser et recommencer à zéro. Donc, je vais cliquer sur Ajouter Nouveau pour ajouter un nouveau post, et en passant, la fonctionnalité entre cela et les pages et les projets à peu près exactement la même chose. Donc, il n'y a pas de courbe d'apprentissage avec avoir à créer des pages et des projets, c'est exactement la même chose fondamentalement. Donc, je vais dire que c'est un billet de blog sur Comment construire un site Divi. Si je clique sur l'onglet pour passer au champ suivant, il va créer l'URL pour moi. Parce qu'il s'agit d'un billet de blog, ce qu'il va faire dans l'URL, est de mettre la date de publication, ce qui sera supposé être la date d'aujourd'hui entre le domaine et le titre de l'article dans l'URL. Je n'aime pas vraiment ça et ça n'a pas vraiment aidé avec le SEO ou quoi que ce soit. Donc je vais juste changer ça dans une seconde. Qu' il y a une différence entre les messages et les pages, les pages ne le font pas. Donc, après que j'ai mis un nom et puis aller à la section suivante, va créer un lien avec cela et ici, nous avons l'éditeur par défaut WordPress pour créer des blogposts et dans cette situation, vous voulez utiliser la valeur par défaut WordPress éditeur. Vous pourriez utiliser le Divi Builder, que nous avons couvert plus tôt. Mais je n'utiliserais que le Divi Builder pour construire pages parce que j'aime garder mes billets de blog en utilisant par défaut, ce qu'on appelle l'éditeur WYSIWYG ici, comme dans ce que vous voyez est ce que vous obtenez. Une des raisons pour lesquelles il est vraiment important de créer vos blogposts en utilisant WordPress est intégré éditeur WYSIWYG plutôt que le Page Builder est si vous deviez passer à un autre thème, tout votre billet de blog serait cassé, parce que Page Builder ce qu'il fait est, il insère du code sur la page que Divi interprète. Donc, si vous deviez changer votre thème plus tard, tout ce contenu sera bloqué dans Divi. Alors ne vous méprenez pas, j'aime Divi et je pense qu'il est très puissant lorsque vous voulez construire des pages en utilisant le Générateur de pages. Mais en ce qui concerne les publications qui sont le contenu régulier de votre site Web, vous ne voulez pas avoir à revenir en arrière et à les reconstruire. Il est donc préférable d'utiliser cette zone ici. D'accord. Donc, je vais aller sur un site qui me donne juste Lorem Ipsum pour mettre du contenu factice. Laisse-moi aller à n'importe lequel d'entre eux. Je vais mettre ça. Donc, c'est votre paragraphe de base que je veux ajouter quelques en-têtes. Je vais entrer et mettre un sous-titre, puis vous pouvez aller plus loin avec les titres pour faire la rubrique 3, qui est encore plus petits sous-titres. Je vais l'appeler sous-sous-titre, et ensuite je vais juste placer dans ce même texte. Je pense que c'est un thème Divi, donc vous pouvez changer l'extrait. Lorsque WordPress affiche un aperçu de votre billet de blog, il montrera cet extrait. Sinon, il affichera juste un extrait basé sur ce qui est déjà sur la page. Ce que vous pouvez faire est de modifier la mise en page afin que vous puissiez masquer la barre latérale en utilisant Divi. Vous pouvez enregistrer un brouillon si vous ne souhaitez pas le publier encore, et vous pouvez affecter une catégorie. Je vais le faire maintenant. Je vais donner à ce post une catégorie parce qu'il est basé sur la façon de construire un site Divi. Je vais aller un peu plus large avec le sujet et je vais dire cela basé sur le développement WordPress comme la catégorie. Les catégories sont puissantes car vous pouvez sectionner votre contenu en fonction d'un regroupement particulier. Vous pouvez également le faire avec des balises, mais les balises sont secondaires aux catégories. Habituellement, vous avez juste besoin de catégoriser votre contenu, mais vous pouvez également l'étiqueter si vous voulez ajouter ce qu'on appelle une taxonomie supplémentaire. La dernière chose et ce qui est vraiment important est de définir une image en vedette. Je n'ai pas d'image spécifiquement pour ces messages, alors peut-être que je vais aller en télécharger une dès maintenant. Donc, je vais juste trouver une image, juste une image aléatoire. Je ne devrais pas faire ça parce que c'est à quelqu'un d'autre mais c'est juste à des fins de démonstration. Habituellement, vous voulez utiliser des images auxquelles vous avez les droits ou vous n'allez pas avoir de problèmes pour copier. Je vais l'enregistrer et je vais le mettre dans les fichiers pour le cours WordPress et ensuite je vais le télécharger. Cela deviendra mon image en vedette fondamentalement. Encore une fois, je vais texter pour SEO, comment construire un site Divi. J' aurais vraiment dû avoir une photo d'un site Divi spécifiquement pour ce billet de blog, mais encore une fois, c'est juste à des fins de démonstration. Une chose que nous pouvons faire avant de cliquer sur Publier, si vous voulez voir à quoi il ressemble avant de le publier réellement, vous pouvez cliquer sur Aperçu et soudainement vous avez un titre, vous avez votre nom d'auteur, vous avez le date à laquelle il a été publié, quelle catégorie il est sous, et combien de commentaires, et vous pouvez voir ceci est la belle mise en page. C' est essentiellement fait par Divi et WordPress. Je vais cliquer sur Publier ici et maintenant le billet de blog va devenir en direct. Vous pouvez afficher une publication une fois que le chargement se termine et vous pouvez voir votre post fait. Voilà, très gentil. Maintenant, les deux choses que j'ai dit que je voulais changer, c'est que je voulais me débarrasser de ce truc de rencard. Je ne pense vraiment pas que cela aide avec le référencement et cela n'aide probablement pas les gens à trouver votre site Web plus facile non plus. Donc, si vous allez à permalinks dans vos paramètres WordPress, je vais juste aller et changer les paramètres communs pour le nom de poste afin que vous puissiez voir ici dans l'exemple, il ne va pas avoir la date, puis le post. Il va juste passer directement au nom du poste et le mettre sur votre domaine. En passant, ces paramètres permalien que vous pouvez passer par et mettre à jour. Peut-être que vous vouliez juste l'année et ensuite le poste. Pour cela, vous pouvez utiliser ces balises ici si vous voulez vraiment le faire. La plupart du temps, c'est juste plus facile et mieux d'avoir juste le nom du poste dedans. Nous allons enregistrer les modifications et maintenant si je retourne à ce post que nous avons créé, je vais aller à d'anciens messages, puis juste sauter en avant pour cliquer sur la vue. Il aura juste le domaine racine et ensuite comment construire un site Divi, ce qui est bon pour le référencement aussi. Vous devez toujours intégrer le référencement en tête. SEO pour ceux d'entre vous ne savez pas est de le rendre optimisé pour les moteurs de recherche afin qu'il soit plus facile d'obtenir votre site Web à classer dans Google ou tout autre moteur de recherche. Maintenant que nous avons créé le post, créer un projet est fondamentalement la même chose. Je ne vais pas passer par l'ensemble en créant un type de post de projet ici, mais ce que vous pouvez voir est exactement la même interface. Vous pouvez voir ici nous pouvons ajouter des catégories de projet, nous pouvons ajouter des balises de projet ici aussi. Ceux-ci sont séparés pour les catégories de publication et les balises. Une des choses à ce sujet étant un type de publication distinct est que les catégories et les balises disponibles seront uniques à ce type de publication. Dans les messages, ils auront leurs propres catégories et balises, mais essentiellement il s'agit d'un duplicata de messages qui place dans une catégorie différente dans le sens, donc il est complètement coupé des messages. La prochaine chose est Pages, qui encore est exactement la même. Nous pouvons regarder nos pages ici et ensuite quelques mots après pour indiquer des pages spéciales. Vous pouvez voir ceci ici est notre page d'accueil. Il y a un tableau de bord, un tableau de bord. Si vous exécutez le commerce électronique, vous pouvez avoir une page de panier de tiret, vous pouvez avoir une page de retrait de tiret, et ce tiret signifie simplement qu'il s'agit d'une page spéciale et il vous indique simplement laquelle de ces pages est votre , votre page de panier et tout cela. C' est un brouillon que j'ai créé plus tôt, et puis bien sûr, le brouillon ici est toutes les pages qui sont en mode brouillon, donc vous ne les avez pas encore publiées. Essentiellement, ce que vous allez vouloir faire de votre site Web est d' avoir le plus de contenu possible. Il est difficile de classer votre contenu lorsque vous n'avez qu'un seul billet de blog, et il est difficile de naviguer dans différentes parties de votre site Web lorsque vous n'avez qu'une seule page. Donc, vous devriez vraiment y aller, créer de nouveaux billets de blog, et essentiellement mon conseil à quiconque démarre un site Web est écrire au moins cinq billets de blog d'abord, ou d'écrire cinq pages et de concevoir tout cela d'abord, et ensuite commencer à le mettre dans WordPress, car il est difficile de créer ces menus, de créer ces mises en page, et de créer tout le reste quand vous n'avez pas encore vraiment de contenu dans votre site Web. N' oubliez pas que les sites Web basés sur le contenu sont censés être remplis de contenu. Ce que nous pourrions faire, c'est de créer tous ces nouveaux postes, mais essentiellement le processus est le même pour chacun d'eux. Je vous encourage à passer par et à créer du contenu, peut-être même du contenu fictif si vous voulez juste jeter du contenu fictif là-dedans, c'est tout bon. Je vais sauter un peu en avant et je vais mettre peu mon propre contenu et je vous verrai dans la prochaine vidéo. Dans la prochaine, nous allons construire des pages, ce qui est un peu plus impliqué, parce que nous allons utiliser le générateur de page et nous allons construire la page d'accueil. Je te vois dans la prochaine vidéo 10. Utiliser le créateur de page Divi: Donc, dans la dernière vidéo, nous avons parlé d'ajouter du contenu. Entre cette vidéo et celle-ci, j'ai ajouté plus de billets de blog dans la section post comme vous pouvez le voir ici. Mais aussi dans les projets, je suis entré et j'ai mis quelques projets. Pour être clair, non, je n'ai pas travaillé pour Amazon, Facebook ou Google. Je pensais juste qu'ils seraient des exemples faciles pour montrer ce que vous devriez mettre dans vos projets. Maintenant que nous avons du contenu ici, nous avons quelques messages, nous avons quelques projets, nous pouvons maintenant commencer à construire des pages qui apportent une partie de ce contenu dynamiquement. Bien sûr, lorsque nous allons sur notre site Web, la première page qui doit être réparée est notre page d'accueil. Ceci est juste un exemple de page qui est venu de WordPress, il est donc temps d'entrer et de le changer à la façon dont nous aimerions. Comme je l'ai déjà rétrogradé, avec Divi, une fois que vous cliquez sur Modifier, vous pouvez utiliser le Divi Builder. Je vais juste supprimer tout cela, puis cliquez sur « Utiliser Divi Builder ». En fait, si vous voulez supprimer cela, ce que Divi ferait, c'est qu'il mettrait ce texte que vous aviez avant comme un module de texte juste ici. Donc tu ne le perdrais pas. Je savais juste qu'on allait s'en débarrasser, alors je me suis débarrassé de ça à l'avance. Mais j'aurais pu tout aussi facilement le faire de la manière opposée, que je vais juste démo maintenant. Juste comme une référence dans le cas où vous voulez changer une page qui a été faite dans le WordPress Wheezy, nous avons dû le faire, mais voulons changer à Divi. Si je clique dessus, il mettra le texte que nous avons comme module de texte dans la première colonne de la première ligne de la première section, qui par défaut est une ligne d'une colonne. Maintenant, j'ai rétrogradé avant l'utilisation de Visual Builder, qui pour certains d'entre vous peut préférer cela. Juste pour vous montrer que à nouveau, fondamentalement, vous passez le curseur sur les différentes parties de votre page et vous pouvez modifier. C' est la section. Ainsi, vous pouvez cliquer sur le « Gear » et vous pouvez modifier les paramètres de section comme ça. Vous pouvez cliquer sur votre « Ligne », et vous pouvez mettre à jour les paramètres de ligne comme celui-ci, et vous pouvez modifier vos paramètres de texte pour ce module, ajouter une autre ligne avec le nombre de colonnes que vous voulez, puis vous pouvez ajouter dans un autre également. Nous avons une spécialité régulière pour la largeur. En tant que préférence personnelle, j' aime pas vraiment utiliser le Visual Builder parce que c'est un peu bizarre avec ces différentes choses qui survolent. C' est juste une préférence personnelle. Si vous souhaitez utiliser un Visual Builder, utilisez certainement par tous les moyens Visual Builder. Mais ma préférence est le constructeur par défaut. Je vais juste revenir dans l'édition, et voici le constructeur par défaut. Maintenant, pourquoi j'aime le constructeur par défaut est que c'est juste beaucoup plus clair où sont les sections. Donc, je peux ajouter une ligne ici, et je peux ajouter une ligne de deux colonnes, et je peux mettre des modules ici, et je peux voir le nom du module. Cela me donne juste une bonne vue de la structure de la page, tandis que l'autre vous montre exactement à quoi il ressemble sur la page. Mais alors peut-être est un peu plus difficile de modifier la structure. Donc pour moi j'aime ça, peut-être que c'est parce que je suis plus un développeur. Tout à fait à vous de quelle façon vous voulez le faire. Maintenant, ce que je veux faire est de nous créer une page d'accueil pour ce site. Le site que je construis, et vous l'avez probablement rassemblé à l'heure actuelle, est un site personnel. J' ai un logo sur mon visage. J' ai un blog de services de portefeuille, et le site Web que j'ai appelé juste mon nom. Divi est bon pour cela et je pensais juste que ce serait un sujet facile à commencer avec, vous n'avez pas besoin de faire un site sur votre marque personnelle ou profil du tout. Juste pour vous le dire, c'est le site que je cherche à construire. Encore une fois, à titre d'exemple, nous allons construire un site Web de portefeuille de pigistes. Mais les mêmes principes s'appliquent à tout ce que vous voulez construire. En termes de design web moderne populaire, souvent vous verrez, tout comme sur mon site Web ici, qui est mon site Web de portefeuille actuel, vous verrez ce qu'on appelle l'image de héros. Il faut juste un peu à charger. Mais c'est essentiellement une image pleine largeur. Tout cela est construit sur Divi aussi d'ailleurs, donc nous allons construire quelque chose de similaire. C' est une image pleine largeur, et elle a un peu de ce que je veux que les gens voient, et ce qu'on appelle un appel à l'action. C' est juste un bouton en gros, mais tout cela est un appel à l'action parce que je suis en train d' amener les gens à prendre une action dès le moment où ils voient le site Web. C' est juste un peu sur le design. Ce que je vais faire, c'est, parce que je veux qu'il soit pleine largeur, je dois réellement faire un type de section différent dans Divi. Je vais cliquer sur « Section pleine largeur » et je vais faire glisser cela au-dessus de ce que nous avons déjà. Vous pouvez voir ici qu'il n'y a pas de lignes car vous n'obtenez qu'une seule ligne avec la section pleine largeur. Mais ce que je vais faire ici, Insérer des modules. Ces modules sont un peu différents pour notre section pleine largeur à une section de largeur régulière. Mais ce que je vais faire ici, c'est que je vais faire un en-tête pleine largeur, ce qui me permet de mettre dans des textes de titre, un bouton ou deux boutons en fait, et aussi de mettre dans cette image d'arrière-plan. Je dirai bienvenue sur mon site comme titre. Je fais des sites WordPress. Ensuite, pour ce bouton, je vais voir mon portfolio. Vous pouvez avoir deux boutons là-dedans. Je ne vais pas m'embêter avec le deuxième bouton. Vous pouvez le mettre dans l'URL, et parce que nous ne l'avons pas encore construit, je vais juste le mettre dans un hachage en tant que détenteur de place. Vous pouvez mettre des images ici, mais ce que nous voulons est une image d'arrière-plan et dans Divi, vous allez dans les paramètres d'arrière-plan. Juste ici est si vous voulez une couleur unie comme arrière-plan, voici si vous voulez un dégradé, voici si vous voulez un fond d'image, et voici si vous voulez un arrière-plan vidéo. C' est vraiment cool. Vous avez peut-être vu sur d'autres sites Web, ils ont un arrière-plan vidéo. Divi rend cela vraiment facile à faire en utilisant l'option Fond vidéo ici. Je vais revenir à l'image, et je vais aller à Upload Files. Je l'ai déjà là. C' est l'image de héros que j'utilise sur presque tous mes sites Web, et je vais lui donner un meilleur nom. Je vais taper mon nom. Christopher Dodd, image de héros. Alors ici, assurez-vous qu'il est pleine grandeur. Définir comme arrière-plan. Ne vous inquiétez pas que ce soit coupé en ce moment. Il se peut que nous devions ajuster la taille de l'arrière-plan et la position de l'image. Donc ma tête ou la partie la plus importante est en haut à droite. Je vais me positionner en haut à droite, et j'espère que ça a l'air bien. Sinon, on peut s'amuser avec ça. La taille de l'image d'arrière-plan que nous pouvons définir pour couvrir, ce qui signifie que cela va couvrir toute la section. C' est bien parce que nous en avons besoin. Je vais appuyer sur « Enregistrer et quitter ». Maintenant, je vais prévisualiser les changements. Nous aurions pu aussi facilement appuyer sur Update. Peu importe, parce que nous ne travaillons pas encore vraiment sur un site Web en direct, mais si vous mettiez à jour une page sur un site Web existant, vous voudrez probablement en prévisualiser d'abord. Donc, comme vous pouvez le voir, nous avons cette image pleine largeur, bienvenue sur mon site Web, je fais des sites WordPress, voir mon bouton portefeuille. suite, je vois que nous allons devoir faire un changement, c'est-à-dire que ce n'est tout simplement pas assez grand. Comme vous pouvez le voir ici, mon visage est un peu coupé, il a l'air effrayant, en fait, avoir juste mes dents. La partie supérieure de mes dents juste en haut et donc ce que je vais vouloir faire, c'est forcer ça à avoir une certaine hauteur. Maintenant ce que je fais et c'est quelque chose que je vous ai montré dans la dernière classe, c'est de jouer avec votre site Web dans le navigateur avant de faire des modifications permanentes. En utilisant l'option de commande I sur Chrome, en utilisant Mac, je peux faire apparaître les outils de développement. Vous voyez ici, c'est déjà réactif. Donc maintenant ça a l'air un peu mieux. Mais encore une fois, sur un écran plus grand, ça va me couper le visage. Ce que je veux faire est d'inspecter ici et cela va faire apparaître la rubrique mais si je vais plus loin dans la chaîne, je peux voir ici et vous pouvez recueillir à partir des noms de classe, ceci est la section, e-T est le préfixe que Divi utilise, donc quand vous voyez e-t, p-b, e-t, p-b, e-t, p-b, aussi, c'est un bon conseil si vous voulez aller voir site Web de quelqu'un d'autre et voir s'il est construit sur Divi. Vous pouvez vérifier le code et s'il a et_pb_, alors il est très probable qu'ils utilisent Divi aussi. Donc c'est plutôt cool, vous pouvez espionner les sites d'autres personnes. Ce que je veux faire ici, c'est juste vérifier que je peux affecter cela tout d'abord. Je vais changer la hauteur. Désolé, je devrais reculer un peu. Si je sélectionne ceci, je peux appliquer un style directement à l'aide de ce panneau. D' accord. C'est ce que je fais ici. Je vais mettre 800 pixels. D' accord. C'est cool et tout, cela a rendu la section plus grande, mais l'élément qui a mon image dedans n'est évidemment pas là. Je vais juste annuler cela, ce que je peux faire en cochant cette case et je vais aller d'une couche plus profonde. Comme vous pouvez le voir ici dans ce calque, vous pouvez voir qu'il fait référence l'image d'arrière-plan là-bas et je peux activer et désactiver cela. Maintenant, quand je vais là-haut et que je lui donne une hauteur, voilà, ça devient plus grand. Maintenant 800, c'est un peu beaucoup. Je n'en ai pas besoin pour aller jusqu'au bout. Probablement juste besoin de là. Même à pleine largeur. En fait, je vais fermer parce que c'est aussi large que je peux avoir. Même à pleine largeur, vous pouvez encore voir mon visage et un peu de mes bras. Je pense que je vais juste en faire 500 pour l'instant. Il est important de noter que le faire ici ne rendra aucun changement permanent. C' est juste pour vous de jouer et d'affecter la sortie à l'écran, afin que vous puissiez comprendre ce qu'il faut changer dans votre tableau de bord. Ce que je vais faire, c'est retourner et trouver ce module. Nous étions sur cette section et puis une couche plus profonde est cette section aussi appelée mais en HTML mais comme vous pouvez le voir ici, la classe est le module pb. Ce que nous devons faire est de revenir en arrière et de trouver cela dans notre constructeur de pages Divi. Je vais aller ici, dans le paramètre du module pleine largeur et ici vous pouvez ajouter dans CSS personnalisé. Vous pouvez également ajouter ceci dans votre style.css et essayer de le référencer mais dans ce cas, nous affectons juste un seul élément, donc il est sûr de le faire à partir d'ici. Je vais mettre en hauteur 500. Une des fonctionnalités sympas que Divi a mis en place depuis qu'ils ont mis à jour leur thème est, une fois que vous cliquez sur quelque chose, il vous dira ce que la classe est que vous allez affecter. Nous pouvons aller vérifier ce et_pb_full width_header_0. Je peux retourner sur notre site ici et vérifier, c'est ça ? Comme vous le voyez ici, et, pb_full width, en-tête, zéro, qui correspond ici. Ce style doit être appliqué à cet élément. Je vais faire défiler vers le bas et je vais cliquer sur « Enregistrer et quitter ». Ensuite, je vais en prévisualiser à nouveau. Cela actualisera la page. Voilà, tu y vas. Maintenant, ce sera toujours 500 pixels de hauteur. C' est un bon exemple de la façon dont vous creuseriez dans le code pour changer les options de style et d'autres choses. Mais comme vous le verrez dans la vidéo suivante, nous allons creuser encore plus profondément dans le code pour effectuer des personnalisations plus sérieuses. La section suivante que je vais construire sur ce site, sera un peu une section blurb, il parlera de mes principaux points de vente en tant que freelancer. Je vais juste supprimer toute cette section et ensuite je vais aller ici et commencer une nouvelle section, juste pour pouvoir commencer à partir de zéro. Ce que je vais faire, c'est que je vais avoir trois blurbs et que je veux qu'ils aient tous une largeur égale. Je vais cliquer sur choisir ceci. C' est ce que j'aime à propos du constructeur Divi par défaut, vous pouvez clairement voir qu'il y a trois colonnes ici et vous pouvez cliquer sur l'un d'eux pour ajouter un module à eux. Je vais cliquer sur le premier, ajouter un blurb et un blurb est fondamentalement juste un élément qui a un titre, un peu de contenu, un lien et une icône. Donc, je dirai un oeil pour le design, est l'un de mes points de vente. On n'a pas besoin de le lier si on ne veut pas. Donc, je ne vais tout simplement pas mettre un lien là-dedans et puis je peux utiliser bibliothèque d'icônes de Divi en cliquant, « Utiliser l'icône ». Vous pouvez également télécharger une image et utiliser une image, mais je vais utiliser une icône et j'ai juste besoin de trouver quelque chose qui communique le design. Je pourrais avancer rapidement ici un peu pour vous les gars parce que je vais créer deux blurbs supplémentaires et juste copier le processus pour celui-ci mais laissez-moi juste trouver une icône qui communique le design. Je ne veux pas passer toute la journée là-dessus, donc je vais juste choisir ce truc de basket qui, je pense, est dribble. D' accord. Ici, vous pouvez changer l'étiquette d'administration. Je vais changer ça en design et vous verrez pourquoi dans une seconde. Maintenant, je peux voir sans y entrer, ce qui va dire. Donc je l'ai étiqueté comme design, donc je sais que c'est le blurb design. Je vais avancer rapidement ici, mettre deux blurbs supplémentaires et vous verrez le résultat en une seconde. D'accord. J' ai donc mes trois blurbs là-dedans et je vais prévisualiser les changements maintenant pour voir à quoi ça ressemble. Bon, on y va. Comme vous pouvez le voir, cela semble un peu bizarre parce que les titres s'alignent à gauche et les icônes sont au milieu. En outre, il serait bon d'avoir du contenu sous eux. Donc je vais y retourner et réparer ça. Donc je viens de l'avant et je l'ai envoyé rapidement, je suis passé par ça. Je vais cliquer sur l'aperçu et maintenant vous pouvez voir le texte est centré et il y a un peu de blurb. Comment j'ai fait ça juste pour vous donner un résumé, je suis allé au contenu pour ajouter ce petit peu de contenu, puis je suis allé à l'onglet de conception, puis je bas jusqu'au texte et je l'ai aligné comme centre pour le faire. Ça a l'air plutôt bien. Rappelez-vous que tout cela est réactif parce que nous l'avons construit sur Divi. Si je vais comme ça, ça va s'empiler l'un sur l'autre. S' il y en avait quatre, par exemple, il aurait pu arriver à cette taille d'écran et fait deux rangées de deux, donc très intelligent. Parfois, vous pourriez avoir besoin de le changer, mais la plupart du temps Divi est assez bon pour le rendre réactif. En fait, une chose que je veux faire est d'ajouter une autre ligne ici et de mettre dans le titre de ces blurbs. En utilisant l'éditeur WYSIWYG standard de la presse web, je vais faire une rubrique 2 et je vais dire, « Pourquoi m'embaucher ? » Je vais juste donner à ça une étiquette d'administrateur de cap. Maintenant, ce que je vais faire est d'ajouter une nouvelle section et je vais faire une ligne d'une colonne et encore, mettre la même chose que j'avais avant le texte. Cela va être notre cap, aller aligner le centre, faire un titre 2 dire, « Consultez mes clients précédents. » Je vais appeler ça les clients. Vous pouvez mettre ce que vous voulez là-dedans, il est juste plus facile de comprendre quelle section est quoi. Je vais ajouter une ligne et je vais mettre dans une section pleine largeur. Oh, pas une section pleine largeur, mais une ligne d'une colonne et ici je peux apporter du contenu dynamique. Il y a un élément ici. Vous pouvez faire un portefeuille filtrable ou vous pouvez simplement faire un portefeuille normal. En fait, nous n'avons pas configuré de catégories de portefeuille, mais si vous avez des catégories de portefeuille, vous pouvez filtrer. Cela va définir le nombre maximum de messages qu' il affichera et vous pouvez montrer quelles choses afficher. Les catégories qu'on n'en a pas vraiment, alors je vais cacher ça. Pagination, nous n'en aurons pas vraiment besoin, mais vous pouvez l'activer. Mettons ça et voyons comment ça se passe. Je vais revenir ici et je vais prévisualiser les changements. Consultez mes clients précédents. Maintenant, il va aller ces gros blocs, que je ne sais pas pourquoi Divi fait cela par défaut parce qu'ils ont souvent l'air moche. C' est l'onglet de contenu, sorte que nous pouvons changer le contenu et même faire l'arrière-plan. Avancé est où nous pouvons mettre en CSS personnalisé, ID et classes et changer notre visibilité sur téléphone, tablette ou bureau, mais l'onglet Design est ce que nous recherchons et ce que nous avons ici est un champ appelé Layout. Nous pouvons changer cela de pleine largeur à grille, ce qui dans ce cas, je pense que ça va être beaucoup mieux. Vous avez 70 options de personnalisation supplémentaires, c'est ridicule. Je ne vais pas m'embêter avec ça pour l'instant jusqu'à ce que je vois quelque chose que je veux changer. Retour à l'aperçu des modifications. Vous allez vouloir faire de ces logos probablement la même hauteur et la même largeur si vous voulez qu'ils apparaissent bien, mais comme vous pouvez le voir, cela tire du contenu dynamique. Ce que je veux dire par là, c'est dès que j'ajoute un nouvel élément de portefeuille ici, qui s'appelle Projets dans Divi, qui apparaîtra ici à condition qu'il n'ait pas atteint le maximum. Maintenant, je viens de comprendre une autre erreur que j'avais ici, qui est que j'ai oublié de déplacer le titre ci-dessus. Vous pouvez déplacer un module comme celui-ci très facilement, et ce titre va maintenant afficher ci-dessus. Prévisualisons ça. Maintenant vous avez cette section, qui est l'image du héros avec l'appel à l'action, vous avez « Pourquoi m'engager ? » donc vous avez les blurbs. Vous pouvez vérifier les clients précédents, qui d'ailleurs, si vous cliquez sur l'un d'eux, je fais un nouvel onglet. Vous pouvez obtenir une page entière sur plus d'informations sur ce projet et la même chose vaut pour tous ces projets. Il aura la même disposition de la page si vous voulez entrer. C' est tout le contenu factice donc il n'y a rien de nouveau à voir ici, c'est juste pour un exemple. Enfin, je veux mettre dans une autre section. Cela va être assez similaire, donc ce que je peux faire est de dupliquer ou de cloner la section comme ils l'appellent. Je vais changer cela au lieu de Clients, je vais dire, « Lisez mon blog. » C' est là que nous pouvons mettre dans un autre ensemble de contenus dynamiques. Je vais supprimer le portfolio en cliquant ici et je vais me débarrasser de ce module, puis insérer un nouveau module là et je peux aller sur le blog. Maintenant, je peux filtrer par catégorie, je peux changer le format de date méta. Je peux choisir de montrer la sortie ou de ne pas montrer la sortie. Je ne vais pas montrer l'auteur parce que tout est écrit par moi. Je ne vais pas montrer les catégories parce qu'il n'y a qu'une pagination. Vous pouvez activer l'option Lire la suite, vous pouvez désactiver l'image en vedette si vous le souhaitez. Mais la seule chose que je sais que je vais vouloir changer est que je ne veux pas de cette disposition pleine largeur, donc je vais changer cela à Grid à nouveau et trop d'options. Je vais cliquer sur « Enregistrer et quitter », puis Aperçu des modifications. Si nous faisons défiler vers le bas, nous avons une belle section disposée qui montre des billets de blog. Comme vous pouvez le voir ici, l'extrait va être le même pour chacun d'entre eux parce que j'ai mis dans le même passage standard Lorem Ipsum, mais j'ai changé l'image en vedette pour juste rendre un peu plus clair sur ce que nous faisons ici et encore une fois, c'est tout à fait réactif. Vous voyez comment ça se rétrécit maintenant et maintenant, ça passe à une nouvelle ligne. Même cela a été centré les choses dans le pied de page. Une autre chose à noter est le menu s'est effondré en cela. Oui, tout est réactif avec Divi et le générateur de pages et nous avons deux sections de contenu dynamique ici. Évidemment, il y a quelques autres éléments avec lesquels vous pouvez travailler. La meilleure chose à faire est probablement de jouer un peu, alors je vais ici et vérifier les différents modules, voir ce qu'ils font. Mais fondamentalement, les principes sont avec le constructeur de page Divi, vous avez une section qui est en bleu. Vous avez une ligne, et vous avez des colonnes, que la quantité de colonnes est configurée dès que vous créez une nouvelle ligne. Vous ne pouvez pas réorganiser les lignes, mais vous pouvez toujours dire, par exemple, que vous vouliez déplacer le blog dans l'une des colonnes. Vous pouvez le faire et ensuite simplement supprimer cela, de sorte que vous pouvez déplacer le module d'un espace différent vers un espace différent. Vous pouvez également réorganiser les lignes comme nous vous l'avons montré auparavant. Nous pouvons réorganiser des sections comme celle-ci si nous voulions cette section ci-dessus et nous pouvons nous en débarrasser. Les principes principaux sont les sections, les lignes et les colonnes, et les modules. Le deuxième principe est la différence entre ce contenu statique et contenu dynamique qui extrait d'autres types de contenu provenant de différentes parties de votre site Web. J' espère que c'est une bonne introduction au Page Builder et comment construire des pages avec Divi et WordPress. Dans la vidéo suivante, nous allons passer en revue la personnalisation de votre code. Dans cette leçon, vous avez vu un peu de personnalisation quand je suis entré et a changé ceci pour avoir une hauteur de 500. Nous pouvons aller dans et inspecter l'élément et voir ce changement juste là, mais nous allons examiner les autres façons que vous pouvez personnaliser votre code, y compris l'ajout d'un blog de code créant des styles. Aussi, comment comprendre quelle partie de la page à style et la différence entre CSS en ligne, dont nous avons parlé un peu, mais nous allons aller plus en détail dans la leçon suivante. Avant de le faire, cependant, je vais m'assurer de sauver cela. J' ai à l'occasion, vient de fermer cette page sans sauver mes progrès. Vous devrez cliquer sur « Mettre à jour » ici et maintenant ces changements sont permanents et sont en ligne et vous avez votre site Web. Je te vois dans la prochaine vidéo. 11. Personnaliser avec du code - Basic: Dans la dernière vidéo, nous avons créé la première page de notre site Web en utilisant le Divi Page Builder. Comme vous pouvez le voir, nous avons pu utiliser le générateur de page pour créer une très bonne page d'accueil avec un contenu dynamique, peu près en utilisant zéro code, en plus de mettre un style là-dessus. C' est la puissance du constructeur de page, nous pouvons construire des mises en page comme celle-ci et utiliser des éléments de Divi sans écrire de code, ce qui nous fait gagner beaucoup de temps. Mais que faire si nous voulons ajouter du code personnalisé dans ? Si nous allons dans la page d'édition ici, et nous ajoutons simplement une nouvelle section à ajouter dans un module, c'est la liste des modules disponibles avec Divi. Si tu voulais créer un compteur de cercle, c'est cool, tu l'as juste là. Vous voulez mettre dans le formulaire de contact, une galerie, il y a des fonctionnalités vraiment cool hors de la boîte ici dans Divi. Mais que se passe-t-il si vous voulez construire quelque chose qui est personnalisé, ce n'est pas vraiment dans cette liste ? L' une des façons dont nous pouvons le faire est d'utiliser un bloc de code. C' est comme un module nu dans Devi, nous pouvons mettre ce que nous voulons ici afin que nous puissions commencer à utiliser un peu de code pour construire quelque chose de personnalisé et ensuite encore utiliser ou profiter du système de Divi, comment il a les sections, lignes et colonnes, donc nous obtenons toujours ces colonnes réactives, mais nous pouvons construire nos propres éléments en utilisant HTML, CSS, et nous pouvons même mettre un peu de JavaScript. Je pense que le meilleur exemple de ceci est de vous montrer un projet client récent. C' est quelque chose que j'ai fait plus tôt dans l'année pour un client en Australie. J' ai construit ce site web basé sur la conception PSD et tout construit dans Devi. Une des choses qui était dans le design qui ne vient pas vraiment standard dans Divi, ce sont ces, je ne sais pas comment vous les appelleriez, une galerie d'images sur le vol stationnaire, elle ouvre un peu de texte. C' était probablement une explication terrible, mais vous pouvez voir comment ça fonctionne ici. Il y a juste ces images fanées et quand vous placez votre souris dessus il devient un peu plus sombre et du texte apparaît à l'écran. Ce que j'ai fait pour ça, je vais juste entrer et te montrer tout de suite. Tout ce que j'ai fait pour arriver à ce point est, je viens de me connecter avec l'administrateur WordPress, est retourné à la page et ensuite utilisé la barre supérieure pour éditer. Maintenant, je peux descendre ici et vous pouvez voir la mise en page. Je vais l'ouvrir côte à côte. Vous pouvez voir la structure telle qu'elle est dans le Divi Page Builder, puis vous pouvez voir le résultat ici. C' est la section que je l'ai appelée Highlight Image Box, et si nous allons dans ces Highlight Image Box, vous pouvez voir du HTML personnalisé, et en fait ce qui donne le comportement de survol est un CSS que je me suis stylé. Allons en fait et créons quelque chose de similaire dans notre projet. Je suis de retour dans notre propre projet et juste à des fins de démonstration, je ne veux pas passer trop longtemps coder des éléments personnalisés, je veux juste vous montrer le potentiel ici est, je vais juste créer un Div, qui va ont une bordure qui rend évident de voir que nous mettons du code personnalisé. Mais essentiellement les possibilités sont infinies avec cela, vous pouvez coder ce que vous voulez. Je vais mettre un Div. Je vais juste mettre un Div avec le mot « Box » à l'intérieur, et puis lui donner une frontière. Je vais sauver et sortir et juste voir ce que cela apparaît comme. Prévisualiser les modifications. Si on descend, on verra notre boîte ici. La hauteur de la boîte est faite proportionnellement au contenu à l'intérieur de celle-ci. Si nous ajoutons plus de texte à cela, ça va s'agrandir. Si nous voulions fixer la hauteur, peut-être que nous voulons le faire, alors je vais retourner ici, mettre quelques styles. Maintenant, vous pouvez voir que la boîte est 300. Juste pour que ça paraisse un peu plus propre, je vais faire une autre boîte. Je l'ai probablement fait trop vite. Ce que j'ai fait ici, c'est que j'ai cliqué sur ce bouton pour dupliquer, changer ceci à la case 2. Ensuite, je peux déplacer ce module ici pour une mise en page de deux colonnes, et je peux prévisualiser les modifications. On y va. On a la boîte 1, la boîte 2. Évidemment, ce n'est pas trop impressionnant, mais j'essaie juste de prouver un point ici. Vous pouvez créer tous les éléments personnalisés que vous voulez et aller dans tous les détails, vous pouvez essentiellement insérer le code que vous voulez. Ce n'est qu'un exemple très basique. Maintenant, dans le cas de ce projet client que je viens de vous montrer avant, je n'ai pas fait de styles en ligne. Surtout lorsque vous répétez des styles encore et encore, vous voudrez le mettre dans CSS et appliquer une classe. Vous pouvez voir cette boîte et cette boîte sont les mêmes, et ils ont les mêmes styles. Chaque fois que vous copiez et collez quelque chose encore et encore, dans n'importe quel développement, n'importe quel codage, il y a probablement une meilleure façon de le faire. Vous pouvez placer les styles ou n'importe quel code que vous répétez constamment dans un certain endroit, puis vous pouvez le référencer encore et encore. Dans le cas de ces styles, nous pouvons réellement mettre ce style dans le fichier CSS, puis le référencer en utilisant une classe. Encore une fois, si cela est trop avancé pour vous, assurez-vous de revenir en arrière et de regarder si la première de mes classes Skillshare Comprendre le développement Web. Mais ce que nous voyons ici est un style en ligne. Les styles en ligne sont corrects si vous affectez juste un élément et il n'a pas de sens de construire des classes et des ID et d'autres choses si vous n'allez pas réutiliser ce code. Mais si vous allez l'utiliser une fois, certainement vous pouvez mettre un style en ligne. Si vous voulez le rendre réactif, vous devrez peut-être le déplacer dans CSS. Mais certainement dans ce cas, nous répétons les mêmes styles dans une autre boîte. Ce serait beaucoup plus propre de sortir ces styles et de les mettre en classe. Dans WordPress, je vais vous montrer comment vous faites ça. Je vais prendre ça, changer ça en classe et je vais appeler la boîte de classe avec bordure. Je vais perdre mon presse-papiers, mais je me souviens de ce que j'ai écrit. Je vais copier ça, et ensuite je vais aller ici et remplacer ça par la classe. Maintenant, il pourrait ne pas sembler que j'ai sauvé beaucoup de personnages, mais si je devais créer beaucoup plus de styles pour cela, vous verrez que c'est beaucoup plus efficace. Où puis-je mettre dans le CSS ? Il y a en fait quelques endroits. La première place que vous pouvez mettre dans votre CSS personnalisé, est en allant à Divi, Theme Options, puis en faisant défiler vers le bas, et en fait, il vous donne une boîte à mettre dans votre CSS personnalisé. L' autre endroit où vous pouvez le mettre est dans votre fichier style.css, auquel je peux accéder en allant à l'apparence, en cliquant sur l'éditeur ; cela va dire, « Attention, vous modifiez le code source ici. » Je vais cliquer sur comprendre. Si vous vous en souvenez, nous avons configuré notre thème enfant ici afin que nous puissions mettre dans des personnalisations de code personnalisées. On pourrait mettre des styles personnalisés ici. Vous pouvez le mettre dans un ou l'autre, mais dans ce cas, c'est quelque chose à voir avec le thème. Nous pourrions vouloir réutiliser ces boîtes encore et encore. Il ne s'agit pas simplement d'une personnalisation fixe ou d'un niveau de surface. En fait, il construit quelque chose. Encore une fois, c'est un choix personnel, mais pour moi, je voudrais le mettre dans mon style.css. Je vais créer une règle de classe ici. Qu' est-ce que c'était encore, c'était boîte avec bordure, je vais l'ouvrir et puis le mettre dans le style. Si je clique sur le fichier de mise à jour, cela mettra à jour le fichier CSS, et je devrais être en mesure de prévisualiser les changements ici, qui en passant, si vous avez un aperçu ouvert et il va juste l'actualiser. Ensuite, si je fais défiler vers le bas, vous pouvez voir ici que le style ne s'appliquait pas. Je vais juste aller inspecter l'élément et m'assurer qu'il y a une classe dessus. Oui, il y a une boîte avec bordure. Mais ce que je pense que nous vivons ici est un problème classique avec le développement WordPress et c'est la mise en cache. Si vous n'êtes pas familier avec la mise en cache, c'est essentiellement un moyen pour le site Web d'enregistrer une copie de lui-même afin qu'il se charge plus rapidement à l'avenir. Parfois, votre fichier CSS sera mis en cache et les modifications que vous avez apportées, même si elles sont dans le fichier ne s'afficheront pas réellement sur votre site Web. Il existe un moyen simple d'actualiser votre cache ou des pages particulières. Vous avez juste à aller dans les outils de développement. Si je fais un clic droit sur le bouton de rechargement en ce moment, je fais juste un clic droit. Ça ne marchera pas. Mais si j'ouvre des outils de développement en utilisant l'option de commande I, en utilisant Chrome sur Mac, et je fais un clic droit ici. Je suis capable de vider le cache et de recharger dur. Je vais cliquer dessus et j'espère que nos changements se rencontreront. On y va. Nous avons nos boîtes, mais bien sûr, nous avons oublié de mettre dans le style qui en fait une hauteur fixe. Je vais mettre ça ici. La bonne chose à propos de cet éditeur CSS est qu'il vous donne des avertissements et d'autres choses. J' ai cliqué sur la mise à jour, elle est actualisée. Je peux rafraîchir la page à nouveau. Soudain, nous avons ces deux boîtes. Là, vous avez une forme de personnalisation, construire des éléments personnalisés, des modules personnalisés, puis les coiffer soit en ligne ou en le mettant dans votre styles.css, sorte que vous pouvez aller aux options de thème Divi. Mais qu'en est-il si vous utilisez un élément ? Tu aimes ça, mais il y a juste quelques choses qui ne vont pas. Peut-être que vous ne vouliez pas cette frontière sur ces billets de blog. Vous pouvez tout aussi facilement éditer les modules créés par Divi, ainsi que les modules créés par vous. Nous pouvons comprendre comment le faire en inspectant ces modules. Je vais faire un clic droit sur l'un d'eux, cliquez sur inspecter. Ça va m'emmener ici à l'endroit où se trouve cet élément particulier. ce moment, il inspecte ce cap. Mais si je monte jusqu'à ce que je trouve la colonne réelle, donc j'ai cette colonne. Je peux aller plus loin et aller à l'article. Je peux faire défiler jusqu'à ce que je trouve ce qui lui donne cette frontière. Je peux voir ici, il y a un style ici, dot et_pb_blog_grid et aussi et_pb_post qui lui donne une bordure d'un px solide avec une couleur de ce gris. Si je clique dessus, vous verrez que pour tout ce qui a ce style ou cette classe, il est maintenant caché et je le remets et maintenant on l'enlève. Maintenant, ce que nous pourrions faire est d'affecter tout de suite. On pourrait dire « frontière zéro » et tout d'un coup nous n'avons pas de frontières sur ces grilles de blog. Mais bien sûr, le changer ici dans votre inspecteur, c'est juste un terrain de jeu, ce n'est pas sauver quoi que ce soit en direct sur le site Web. Ce que j'aime faire, c'est juste annuler ces autres styles. Je ne sais pas pourquoi ce n'est pas permanent et copiez toute cette section. Ensuite, ce que je vais faire dans le style.css descendre et juste se débarrasser de tous ces champs commentés. Cela remplacera, espérons-le, le style que Divi y met. Je suis en fait plus enclin à mettre cela dans le Divi Theme Options, CSS, juste parce que c'est juste une modification sur quelque chose que le crédit de Divi, mais c'est juste une préférence personnelle et je suppose que c' une bonne démonstration de l'endroit où vous peut le mettre autre que votre style.css. Si vous le mettez dans la partie CSS personnalisée de vos options de thème Divi et cliquez sur Enregistrer, il sera alors enregistré. Je retourne ici et rafraîchis la page. Comme vous pouvez le voir, il n'y a plus de frontières, et si nous allons regarder à l'intérieur, nous pouvons voir que notre style ici. Il y a celui de Divi qui est juste à l'intérieur du thème des parents. Mais comme vous pouvez le voir, nous avons fait notre propre style où nous avons dit border none et qui écrase ce style ici. C' est un peu de CSS. Vous pouvez certainement étudier plus sur CSS et comment remplacer les choses. Mais essentiellement ce que je voulais couvrir, voici comment vous allez réellement modifier des parties de votre site Web. J' espère que ça a du sens maintenant que nous pouvons construire des trucs dans le constructeur de page, nous pouvons nous occuper du poids lourd. Mais si nous avons besoin de faire quelques personnalisations, que ce soit pour construire un élément personnalisé et toujours utiliser le système de grille. Je peux juste le démontrer ici. Vous utilisez toujours le système de grille est toujours réactif. Il profite du système de grille de Divi. Vous pouvez également affecter les modules déjà existants que Divi crée. Vous pouvez remplacer les styles fournis avec ces modules pour les faire ressembler comme vous le souhaitez. Voilà, vous pouvez voir que tout est toujours réactif. Tu n'enlèves que cette frontière. J' espère que tout cela a du sens. Si ce n'est pas définitivement mettre une question dans les discussions. Dans la prochaine vidéo, nous allons aller encore plus loin et faire quelques personnalisations avancées dans Divi, peut-être réparer certaines de ces boîtes parce qu'elles ne font rien en ce moment. Mais dans la vidéo suivante, il y a en fait une couche que nous pouvons aller plus loin et c'est pour appliquer les modèles PHP et la structure de notre page. Je te verrai dans la prochaine vidéo. 12. Personnaliser avec du code - Advanced: Je ramasse cette vidéo là où on s'est arrêté. Je suis toujours dans un aperçu, comme vous pouvez le voir sur l'URL ici, mais je ne me soucie pas vraiment de ces boîtes. Je ne vais pas réellement enregistrer les modifications, je vais juste cliquer sur « Afficher la page » et il demande, si je veux laisser les modifications peuvent ne pas être enregistrées. Si vous voulez partir sans enregistrer, vous pouvez cliquer sur « Quitter », mais c'est un bon avertissement si jamais vous essayez de quitter l'éditeur sans enregistrer votre progression, c'est une bonne chose à avoir. Vous verrez ici, parce que nous n'avons pas modifié la structure de la page, notre style s'applique toujours, mais nous n'avons plus cette section avec les cases. Dans cette vidéo, je veux vous montrer comment nous faisons quelques personnalisations avancées. Ce que nous avons fait dans la dernière vidéo est essentiellement avec les boîtes, nous avons construit du HTML et avec ceux-ci nous l'avons stylé avec CSS. En fait, nous avons stylé les boîtes avec CSS aussi, et ce que nous pouvons faire aussi bien que mettre dans certains JavaScript personnalisé, mais que se passe-t-il si nous voulons changer la structure d'une page dynamique, dire un billet de blog ou un projet ou changer quelque chose en nature d'une manière structurelle ? Cela n'a peut-être pas beaucoup de sens, juste moi le dire, mais nous allons creuser et vous montrer un exemple tout de suite. Si je fais défiler vers le bas et aller à l'un de nos billets de blog, tous ceux-ci vont être affichés sur le même modèle, je vais vous montrer ce que je veux dire par là en seulement une seconde. Ouvrez ces onglets dans des onglets distincts et comme vous pouvez le voir, c'est le même modèle. Vous avez le titre, vous êtes passé, et puis la personne qui a écrit l'article, vous avez la date, vous avez la catégorie, désolé, j'ai juste cliqué sur la catégorie, et puis vous avez le nombre de commentaires. Vous avez l'image en vedette, puis vous avez le contenu. C' est exactement la même chose pour ça, tout est dynamique. Mais une chose que je voulais changer récemment avec l'un de mes sites Web était que je ne voulais pas que ce titre et ces métadonnées apparaissent au-dessus de l'image. Je voulais qu'il apparaisse en dessous de l'image, essentiellement je voulais que cette image en vedette montre ci-dessus et aussi peut-être que je voulais personnaliser cela aussi bien. J' aime le fait qu'il apporte dynamiquement le nom de l'auteur, la date et la catégorie, et la quantité de commentaires. Mais peut-être que je veux personnaliser le libellé de ce peut-être mettre la catégorie est ou posté sur, qui est tout un changement structurel dans WordPress. Juste pour faire la différence entre ce que nous venons de faire dans la dernière vidéo et dans cette vidéo, fondamentalement, nous pouvons changer n'importe quoi à voir avec le style en utilisant CSS et nous pourrions ajouter des choses au contenu avec HTML. Mais en termes de contenu dynamique qui est tiré par un modèle en PHP, nous allons en fait devoir creuser le modèle et le modifier pour que ce changement affecte le modèle de blog standard. La façon dont nous pouvons le faire est de creuser directement dans le code WordPress. J' ai mon répertoire de thèmes ici, je vais juste revenir en arrière pour que vous puissiez voir, c'est notre projet et juste pour que vous sachiez où aller. Voici du code que vous ne voulez probablement pas toucher du tout en dehors du fichier de configuration et assurez-vous qu'il se connecte à la base de données, mais nous l'avons déjà, le dossier dans lequel vous allez éditer le plus souvent et à peu près rien else est ce dossier Thèmes et ensuite aller dans votre thème enfant, rappelez-vous, c'est pourquoi nous avons créé ce thème enfant. C' était pour que nous puissions mettre tout sur les personnalisations dans le seul dossier et les référencer. Comme je l'ai dit, je veux mettre cette image en vedette au-dessus de ce titre et de ces métadonnées, et la façon de le faire est à travers le modèle unique. Dans WordPress, nous allons passer sur hiérarchie de modèles dans une future vidéo mais juste pour l'instant, sachez que si vous créez un billet de blog ou une page, il utilise le modèle single.php. Pour effectuer cette modification, ce que je dois faire est d'aller dans le dossier parent et de trouver le single.php. Je vais copier cela et ensuite je vais aller dans mon thème div et le coller. Maintenant, juste pour être clair ce qui se passe ici est parce que j'utilise un thème enfant, WordPress va d'abord regarder dans cette photo, et il va chercher un single.php et fondamentalement tous les fichiers de modèle, et s'ils ne peuvent pas le trouver ici, il va le charger ici. C' est pourquoi nos sites Web fonctionnent toujours si nous n'avons pas tous les modèles ici, parce qu'il regarde ici d'abord pour voir si ce sont des personnalisations qui doivent être faites, et s'il n'y a rien, cela va juste au thème parent. Mais essentiellement ce que nous faisons ici, c'est que nous prenons le modèle du thème parent, puis nous sommes en mesure de le modifier dans l'enfant pour effectuer des personnalisations. Je vais faire un clic droit sur cela et éditer dans Atom. Maintenant, vous ne comprendrez probablement pas tout ici et c'est bien, mais je vous recommande d'essayer de vous familiariser, en savoir plus sur la hiérarchie des modèles, en savoir plus sur les fonctions. C' est un processus en cours et je ne comprends sûrement pas absolument tout ce qui se passe dans les fichiers de modèle. Mais je peux le comprendre juste en ayant un air comme si vous pouvez voir ce div ici pour le contenu principal, cela va jusqu'ici, et vous avez quelques fonctions div. Vous pouvez dire que div parce qu'ils ont et soulignent pb. C' est un spécial pour div et vous pouvez les faire correspondre avec ce que vous voyez sur la page, sorte que vous pouvez voir ce div avec le contenu principal. Si je retourne dans notre site Web en direct et que j'inspecte et jette un oeil au HTML, je peux voir l'id div main-content. Si je descends et regarde la zone de contenu fine, je vais juste copier et coller cela parce que vous pouvez effectivement cliquer ici, appuyez sur « Commande F » sur le Mac et trouver la zone de contenu en cherchant, alors vous pouvez voir cette div ici, zone de contenu . C' est ainsi que j'irais pour comprendre comment ce modèle se rapporte à cela. Mais il a beaucoup de contenu dynamique, et ce que nous allons devoir faire est de savoir où le PHP saisit la vignette et l'amener à la placer au-dessus du titre et non au-dessous du titre. Avant de faire nos changements, je voulais juste fournir des instructions supplémentaires et un avertissement supplémentaire à ceux d'entre vous qui hébergent déjà votre site Web sur Internet. Fondamentalement, nous avons fait cela localement, donc je suis capable d'aller dans le dossier avec mon site sur mon ordinateur et juste cliquer et faire glisser des fichiers et cliquer avec le bouton droit et les ouvrir dans mon éditeur. Mais si votre site Web est déjà sur Internet, vous devrez utiliser FTP. Maintenant, vous n'avez pas nécessairement besoin d'utiliser FTP, mais c'est fortement recommandé, et la raison pour laquelle c'est quelque chose que je vais vous montrer tout de suite. Juste parce que je l'ai déjà fait et que cela a été un vrai tracas, alors assurez-vous d'utiliser FTP. Je vais passer ici, je suis dans mon éditeur d'apparence, vous pouvez voir notre style.css. Je vais aller dans functions.php et je vais mettre un mauvais code. Je vais juste mettre un mauvais code, je vais mettre à jour le fichier, et en fait WordPress a été intégré maintenant où ils comprennent réellement comme quand vous mettez dans un mauvais code et ne vous permettent pas de mettre à jour. Mais dans les temps précédents, si vous faisiez une erreur, ça vous permettrait de le mettre et ensuite vous auriez quelque chose que j'aime appeler l'écran blanc de la mort. Juste pour vous montrer à quoi cela ressemblerait, je vais juste le jeter dans mon fichier PHP de fonctions ici, je vais mettre un mauvais code et puis je vais aller aller sur le site et appuyer sur « Rafraîchir » et soudain le tout le site est en panne. C' est vraiment important gars parce que si vous faites une erreur sur votre site Web en PHP, il arrêtera tout votre site Web. Il est important de savoir que lorsque cela se produit, parce que inévitablement vous ferez une erreur PHP à un moment donné que cela va arriver, ne paniquez pas. Vous pouvez simplement revenir dans vos fichiers PHP et déterminer où se trouve l'erreur et la supprimer. Je vais juste le supprimer maintenant, appuyez sur « Enregistrer » et recharger la page. coup, tout mon site fonctionne à nouveau. C' est l'une des mauvaises choses à propos de WordPress, je suppose, si vous faites une erreur PHP, cela supprimera tout votre site Web. C' est pourquoi si vous construisez un site Web pour quelqu'un qui a déjà un site Web ou si vous mettez à jour votre site Web existant, développez certainement localement ou à un autre endroit comme un serveur de transit, que nous allons passer à la mise en scène plus tard dans ce cours. Mais je voulais juste que cela soit vraiment clair, si vous faites une erreur dans votre PHP, cela peut faire dérailler tout le site, c'est pourquoi vous devez vous assurer que vous créez ces changements ou que vous faites ces changements pas sur un live que vous seriez très contrarié par le fait qu'il descend. L' autre point que je veux soulever à ce sujet est de revenir à l'importance de l'utilisation du FTP. Si j'étais capable d'utiliser l'éditeur comme vous le faisiez dans la presse web, et disons juste que j'ai fait ça et que j'ai mis cette erreur. WordPress me permet d'entrer et d'éditer ces fichiers de modèle à partir du tableau de bord. Si je recharge la page, je peux accéder à mon site Web. Donc, je pourrais être comme, "Je vais entrer et changer ce code, réparer mon erreur » Mais si je vais dans l'admin WordPress, il est cassé aussi. J' ai fait cela, ai fait cette erreur à l'occasion avant où j'ai édité des modèles de thème et cela a causé une erreur PHP et le site Web de mon client a chuté, et heureusement, il n'a jamais été sur un site web en direct. Il a été en construction. Mais si je n'ai pas accès à FTP, c'est tout. Je suis complètement coincé. Je ne peux pas entrer et modifier le code. Vous avez besoin d'un accès au code au niveau fichier. C' est très important. Ensuite, on y va, j'ai supprimé le code et mes sites Web de retour. Si vous avez mordu sur FTP, revenez à ma première classe de partage de compétences, « Comprendre le développement Web » et regardez cela. Fondamentalement, vous pouvez utiliser un client FTP qui vous donnera une interface similaire à cela. Mes préférés sont Cyberduck et Filezilla, mais si vous voulez en savoir plus sur FTP, certainement, retournez en arrière et regardez ça. Je reviens à ce dont on parlait avant. Désolé pour la piste latérale, mais c'est très important que vous compreniez cet avertissement. Ce que je vais faire est en fait me connecter à FTP maintenant, parce que j'ai réellement le modèle est enregistré pour mon propre site Web et je peux en fait référencer ce code pour me rappeler comment je l'ai fait parce que c'est un mouvement quelques choses autour pour l'obtenir pour travailler. Ce sera en fait une bonne occasion pour vous de voir comment vous allez éditer un site WordPress en utilisant FTP. Je vais ouvrir Filezilla. Je vais aller sur mes sites et me connecter à FTP sur mon propre site Web. Je vais mettre mon mot de passe ici et ce que je vais faire est d'aller dans mon site Web, et c'est essentiellement comment vous le feriez aussi bien en utilisant votre propre site Web, vous pouvez voir ici, j'ai mon thème enfant, et je peux creuser là-dedans, et vous pouvez voir ici, j'ai un modèle single.php. Je peux cliquer sur « Afficher » et « Modifier », et ce qu'il va faire est de télécharger une copie temporaire que je peux modifier puis télécharger sur mon hébergement. Il faut être prudent avec ça. Assurez-vous que toutes les modifications que vous créez sont téléchargées. Donc, en faisant référence à ce que j'ai déjà fait. Vous pouvez voir ici que j'ai déplacé cette information miniature ici où il était ici avant, j'ai caché cette fonction qui crée le meta post et j'ai mis dans ma propre meta post ici. Encore une fois, je pourrais aller dans une vidéo d'une heure sur la façon dont je l'ai fait mais je veux juste obtenir le point sur la façon dont vous allez éditer la structure de votre page. Ce que je vais faire en premier, c'est déplacer l'image ci-dessus et juste vérifier ce que j'ai fait ici. Je peux me référer à cela et revenir ici. Je peux trouver où est cette fonction, recherchez-la. Comme vous pouvez le voir ici, les informations sur les vignettes sont générées sous cette méta post. Ce que je vais faire, comme je l'ai fait ici, je vais prendre les images en vedette. Fondamentalement, tout sauf le titre, donc je pourrais devoir le faire en deux copies et collées. Je veux le mettre juste après le meta wrapper post parce que ici, vous pouvez voir le titre de l'entrée. Donc, il doit être derrière ça. Je peux le copier et le coller là-bas mais je n'ai pas réellement ouvert mes balises PHP. Pour ceux d'entre vous qui ne connaissent pas PHP, encore une fois, peut-être, vous voulez revenir en arrière et vérifier la compréhension du développement web. Mais j'ai ouvert une balise PHP, donc je peux mettre en PHP, copier ces choses et indenter à travers. Je vais retourner chercher le reste de l'information ici. Laissez le titre là, allez appuyer sur « Enregistrer ». Ensuite, je vais aborder cela aussi, parce que cela doit arriver. C' est en fait quand l'image est affichée. Vous pouvez voir qu'en imprimant une vignette, cela va être différent, en passant, car tout ce que vous utilisez c'est du code de divi en ce moment. Je vais l'espacer et y mettre ce contenu. Fondamentalement, c'est demander si c'est une vidéo ? Il place la vidéo à la place de la vignette, et s'il s'agit d'une vignette, imprimez la vignette et, s'il s'agit d'une galerie, imprimez une galerie. Ce sont des choses supplémentaires que divi vous permet de faire. Fondamentalement, la plupart du temps, vous avez une miniature ou une image en vedette pour votre billet de blog. Je vais économiser une fois de plus, c'est toujours une bonne idée d'économiser continuellement et ensuite je vais revenir ici et me rafraîchir. Voilà, tu y vas. Maintenant, vous pouvez voir que l'image apparaît au-dessus de l'en-tête et les méta données ici. Mais rappelez-vous, je voulais peut-être changer un peu cela, donc ce que je vais faire est descendre, et malheureusement, il y a une ligne de code où divi trouve ce qu'il faut mettre ici et y met tout. Mais nous pouvons diviser cela en notre propre code, si nous le voulions, et c'est ce que j'ai fait avec mon propre site Web. Je l'ai décomposé en cette petite section ici. Je vais copier et coller ça, puis vous l'expliquer. Mais tout d'abord, je vais commenter ce post meta fermer la balise PHP, ouvrir une balise PHP et ensuite entre les deux, je vais mettre mon HTML. Je vais cliquer sur « Enregistrer » là-dessus et maintenant, quand je clique sur « Actualiser », il aurait dû remplacer ce meta post qui a été généré par la fonction méta divi post et mis dans mon propre code. Je vais rafraîchir la page, et maintenant, vous pouvez voir, il y a quelques mots de plus là-dedans. C' est dans l'ordre que j'ai choisi, et c'est comme indiqué ici. Juste pour le traverser un peu, ce n'est pas tout automatiquement, mais en même temps, vous obtenez exactement ce que divi veut. Si je décommente cela, appuyez sur « Enregistrer », il devrait apparaître les deux maintenant, donc vous pouvez voir côte à côte c'est ce que divi va toujours éteindre si vous mettez dans cette fonction. Mais si vous le ventilez comme nous l'avons fait, vous pouvez mettre votre propre code personnalisé et il utilise toujours du contenu dynamique. On va remettre ça là où c'était. Il utilise toujours du contenu dynamique, donc au lieu de dire, « Donnez-moi la meta post, ce que vous faites c'est, vous dites les mots spécifiques que vous voulez et vous mettez dans vos propres lignes et autres choses, mais vous pouvez mettre du contenu dynamique comme le lien auteur. Ensuite, vous pouvez mettre du code pour trouver la catégorie. C' est un peu de code supplémentaire parce que peut-être, vous n'avez pas de catégorie. Si vous n'avez pas de catégorie et que vous avez demandé de mettre dans une catégorie, il y aura une erreur. Donc, vous obtenez cette instruction conditionnelle ici pour assurer qu'il y a une catégorie avant qu'elle ne l'affiche, et s'il y a plusieurs catégories va les afficher toutes ici. Pour les catégories, c'est un peu plus compliqué. Publié sur est très simple, c'est la méthode de date dans WordPress. Donc, si vous êtes un jour sur le modèle, vous pouvez mettre la date et il affichera la date. Ensuite, dans la dernière période, j'ai mis le nombre de commentaires et en utilisant cette fonction, nombre de commentaires, le premier argument ou paramètre est, qu'est-ce qui apparaît s'il n'y a pas de commentaires ? Je n'ai mis aucun commentaire. Que se passe-t-il s'il y a un commentaire ? que j'ai mis un commentaire, et ce qui apparaît s'il y en a plus d'un et ce petit signe de pourcentage est un morceau d' indicateur dynamique que quel que soit le nombre de commentaires, il ira dans ce petit pourcentage signe. Un peu plus compliqué ici, vous pouvez mettre ce que vous voulez ici. Je vais me débarrasser de cela, mettre dans un intervalle aléatoire en disant, « Le post est génial », je vais enregistrer cela, et maintenant, soudainement, vous avez mis à jour tous vos modèles avec le bit statique de code et vous pouvez aller à chaque post et vous va voir qu'il a ceci, est le même. Vous verrez que vous avez ce post est génial, sorte que vous pouvez voir cela. Tu peux jeter ce que tu veux là-dedans. Je pense qu'il est logique d'avoir la date, par qui elle est publiée, et le numéro des commentaires. Mais tu peux faire ce que tu veux. C' est la grande chose à propos de WordPress est, niveau infini de personnalisation, vous commencez avec un constructeur de page pour vous obtenir une page en exécution avec un code minimal et puis si vous voulez aller et changer quoi que ce soit, vous peut faire à travers CSS comme nous l'avons fait sur cette page et HTML, ou vous pouvez aller dans et affecter les modèles. Espérons que ce n'était pas trop avancé pour vous, gardez à l'esprit que, c'est une chose continue avec l'apprentissage de la presse Web même je dois creuser un peu et essayer certaines choses et résoudre des problèmes pour obtenir les choses comme je veux. Mais la chose principale à comprendre ici, c'est le principal. Si vous voyez un problème structurel sur votre page que vous ne pouvez pas résoudre avec CSS ou JavaScript, vous voulez aller dans vos modèles PHP et vous assurer que ces personnalisations effectuées dans un thème enfant et que vous ne les faites pas en direct car s'il y a une erreur, il arrêtera l'ensemble de votre site. Mais comme vous pouvez le voir si vous l'avez créé correctement, alors tous vos messages auront maintenant l'image au-dessus de l'en-tête et les métadonnées. J' espère que cela a du sens, sinon, certainement, mettre quelques commentaires dans la discussion et je vais vous parler sur la prochaine vidéo. 13. La hiérarchie des modèles Wordpress: Comme vous l'avez vu dans la dernière vidéo, nous avons édité un fichier modèle dans WordPress, qui dans ce cas était le single.php. Mais si nous allons dans notre dossier parent avec divi dedans, nous pouvons voir tant de fichiers de modèles différents, footer.php, functions.php, header.php. Il y a tout un tas de fichiers de modèles. Dans cette vidéo, nous allons parler de la hiérarchie des modèles WordPress. Dans mon esprit, la meilleure façon d'en apprendre davantage à ce sujet est de deux façons. Activez un plug-in sur votre installation WordPress pour commencer par appelé show current template. Si jamais vous êtes sur une page ou une section de votre site Web et vous vous demandez quel modèle il s'agit, cela aide vraiment. Je vais juste aller à « Plugins », « Ajouter nouveau ». Je vais aller chercher montrer le modèle actuel. Vous pouvez cliquer sur « Installer maintenant ». Ensuite, une fois qu'il est installé, cliquez sur « Activer », et soudainement il est activé. Si cela fonctionne, nous devrions être en mesure de retourner à notre site et en haut, nous verrons le modèle. Ce modèle est page.php. Si nous allons à nos billets de blog, nous devrions voir maintenant single.php parce que c'est la page unique, le type de poste unique. Si nous passons à un seul élément de portefeuille, nous devrions également voir unique. En fait, il y a un fichier modèle séparé appelé projet unique pour cela. C' est vraiment pourquoi ce plug-in est vraiment bon parce que j'aurais pensé initialement que tout cela fait peut-être référence au single, mais non. Il y a évidemment un modèle personnalisé pour cela et vous pouvez le voir ici. Il vous donnera les chemins relatifs du modèle, donc c'est dans notre thème parent. Vous pouvez regarder tous les fichiers de modèle qui sont inclus dans cela. Le deuxième outil ou la deuxième ressource pour comprendre la hiérarchie des modèles est, je vais juste aller sur le site WordPress en cherchant la hiérarchie des modèles WordPress. J' ai mal orthographié l'orthographe là-bas, mais WordPress ou Google sait de quoi je parle. Si nous allons à cet article sur wordpress.org sur la hiérarchie des modèles, je peux faire défiler vers le bas et voir la vue d'ensemble visuelle. Juste pour correspondre à ce que nous avons ici en ce moment, projet unique, c'est un type de post personnalisé, donc il n'est probablement pas répertorié ici. Mais si nous revenons à un billet de blog et nous pouvons voir single.php, mais vous pouvez faire correspondre cela avec la hiérarchie des modèles. Que se passe-t-il quand quelqu'un accède à votre site Web, il passera par l'index php, descendra par le singulier php et frappez single.php. Si cela va à une page, il ira à page.php, que nous avons vu avant quand nous sommes allés à la page d'accueil. Une page est page.php est le modèle pour cela. C' est un peu déroutant en soi, mais au moins vous pouvez assembler où tout vit en le voyant sur votre site le modèle ci-dessus ici et aussi le voir ici. Ce qui est également important à noter ici, c'est que WordPress va commencer à l'index php et chercher archive.php, ou chercher singulier, il va chercher single. Il n'a pas nécessairement besoin d'être là. Dans le cas de notre thème divi, par exemple, si nous allons dans le dossier divi theme et que nous recherchons archive.php, il n'existe pas réellement dans divi. Mais si nous devions le créer, WordPress chercherait des archives dans la situation d'une page d'archive. Qu' est-ce qu'une page d'archive ? C' est fondamentalement, comme vous pouvez le voir ici, author.php, category.php. C' est essentiellement un index de différents messages classés par catégorie, date et autres choses comme ça, donc si nous allons en cliquant sur notre catégorie, vous verrez maintenant qu'il n'y a pas de modèles d'archive, donc c'est juste index.php. Mais index.php s'occupe de l'ensemble du site Web. Peut-être que nous ne voulons pas éditer index.php directement. Peut-être que nous voulons juste affecter cette page d'archive. Voici un exemple de la hiérarchie de modèles qui fonctionne pour nous. Je vais en fait créer une page d'archive juste ici. Je vais aller dans le fichier, nouveau fichier dans notre éditeur de code, qui dans ce cas est Adam et ce que nous pouvons faire est de copier le code de l'index. Je vais devoir aller dans divi, trouver le modèle index.php puis maintenant je vais attraper tout le code et le copier ici. Ensuite, je vais enregistrer cela comme archive.php. Vous vous demandez peut-être pourquoi on a dupliqué quelque chose qui est déjà là ? Essentiellement, nous pourrions ne pas vouloir modifier le fichier index.php car cela fonctionne avec tous ces modèles. C' est un fichier parent. Nous voulons juste affecter l'archive. Nous créons un modèle que WordPress recherchera les changements et écrasera tout ce qui apparaît dans index.php. C' est la même théorie des thèmes enfants et des thèmes parents. WordPress regardera d'abord un endroit et s'il ne le trouve pas, il ira au parent. Espérons que ce flux logique a du sens pour vous. Sinon, encore une fois, au fur et à mesure que vous grandissez tout au long de votre parcours de codage, vous devriez commencer à internaliser ces choses plus. Mais oui, si nous allons dans cela maintenant et appuyez sur « Rafraîchir », nous pouvons voir que le modèle étant utilisé comme archive.php et non plus index.php. WordPress sait où chercher et il fera référence à cela. Maintenant, quelle est la différence entre index et archive ? Eh bien, il ne devrait pas y avoir de différence parce que nous avons copié et collé le code directement. Mais maintenant, si nous voulons faire des personnalisations, nous pouvons le faire dans le archive.php. Peut-être voulons-nous faire référence au fait qu'il s'agit d'une archive. Laisse-moi juste creuser dans le code frontal et voir où je voudrais placer ça. Je vois que c'est la zone de contenu. C' est le contenu principal. Peut-être que je vais le mettre ici. Je vais juste mettre un cap. Je dirai archives. Je vais appuyer sur « Enregistrer » dessus. Je vais retourner ici et appuyer sur « Rafraîchir ». Vous pouvez voir que les Archives sont là, mais c'est sur le côté parce que je ne l'ai pas mis dans un conteneur. C'est ma mauvaise. Je vais l'enlever et le mettre dans le conteneur. Appuyez sur « Enregistrer » dessus. Maintenant, vous pouvez voir sur n'importe quelle page d'archive, vous aurez des archives. Maintenant, ce n'est que du contenu statique. Vous voudrez probablement mettre un contenu dynamique qui dit, « Voici tous les messages de cette catégorie », et mettre le nom de la catégorie et peut-être quelques informations sur la catégorie aussi. Vous voudrez peut-être le faire, mais essentiellement, je vous montre juste ici à propos de la hiérarchie des modèles. Vous pouvez comprendre la hiérarchie des modèles en faisant des recherches sur wordpress.org, regardant ce diagramme visuel, vous pouvez utiliser show template actuel pour regarder n'importe quelle chose que vous êtes sur votre site Web. Encore une fois, nous n'avons pas beaucoup de pages ou d'endroits où aller sur notre site Web, mais vous pouvez voir pour cela où j'ai eu la page et comment vous l'utiliseriez est, disons par exemple, que vous vouliez changer cette mise en page et que vous vouliez que le Image Facebook ou l'image ici pour apparaître au-dessus du titre. Eh bien, vous montez ici et vous voyez, seul project.php. C' est le modèle que je dois modifier. Encore une fois, en revenant à divi ici, vous trouverez cela et vous ne le modifieriez pas directement sur le thème parent parce que rappelez-vous, nous faisons bien et des modifications sur le thème enfant. Mais ce que vous faites, c'est que vous le copiez, allez dans le thème de votre enfant, collez et je vais juste le faire très rapidement pour vous ici. Fondamentalement, si vous vouliez modifier quelque chose comme ça, tout à coup le titre apparaît avant cela et maintenant ce n'est pas très pratique. Mais vous pouvez voir ici, je peux affecter ce modèle et cela va s'appliquer à chaque projet maintenant. Si je vais à Google, titre Google, sorte que vous pouvez peut-être plus de texte statique descriptif, il y aurait «  Client précédent  » alors si nous revenons « Client précédent : Google » et puis cela va magasiner pour tous vos projets, « Client précédent : Amazon ». Avec cette vidéo et la vidéo avant, espère que je vous ai montré comment vous pouvez entrer et modifier des modèles. Si vous allez dans quelque chose qui affiche du contenu dynamique comme un billet de blog et que vous n'aimez pas comment il est affiché, peut-être que vous voulez mettre quelque chose qui apparaît sur chaque billet de blog, ou peut-être que vous voulez réorganiser le contenu sur un billet de blog c'est comme ça que vous le feriez. Vous y allez, vous verrez quels modèles sont utilisés, vous allez dans votre thème, créez ce modèle s'il n'existe pas déjà dans votre thème enfant, puis créez vos modifications là. C' est ainsi que vous pouvez modifier les modèles PHP dans WordPress. Si vous avez besoin de plus d'informations sur la hiérarchie des modèles, il y a beaucoup d'informations en ligne. Certainement avoir une lecture du manuel de thème wordpress.org. Je te vois sur la prochaine vidéo. 14. Construire le schéma de votre site web: Maintenant, essentiellement, nous avons couvert toutes les parties de la construction sur WordPress. Nous avons commencé avec le thème, nous avons utilisé un générateur de page pour construire une page sur votre site Web, puis nous avons abordé la façon de personnaliser le style avec CSS, et nous avons construit des éléments personnalisés qui ont depuis caché. Ensuite, nous avons creusé dans les modèles aussi. Nous avons parcouru toutes les couches de WordPress, en commençant par le haut, sans code, pour entrer en profondeur dans le code. moment, vous pourriez théoriquement prendre cette connaissance et courir avec elle, construire le reste de votre site web, mais je pensais juste que, par souci d'exhaustivité, je vais vous diriger à travers la construction de ce site, et si vous voulez rester le long, vous pouvez en apprendre plus sur WordPress. La première chose que je vois comme un problème, c'est que nous avons ces éléments de menu, et ils ne se lient nulle part. serait ma première chose que je ferais, si nous allons ici à l'URL et nous tapons des projets ou simplement un projet, nous pouvons voir un index ou une page d'archive, référençant ce dont nous avons parlé dans la dernière vidéo de tous nos projets. Ce sera juste une page d'archive de base, rassemblant tous nos projets. Je vais me débarrasser de ce morceau de texte qui dit archives, parce qu' il n'a pas vraiment besoin d'être là, et n'ajoute pas vraiment quoi que ce soit, donc revenir au modèle, me suis débarrassé des archives. Cool, c'est fondamentalement notre page de portefeuille, nous pouvons l'utiliser, mais en même temps nous devons creuser dans le fichier de modèle et bien, aller un peu plus profondément dans le code pour changer la mise en page de ceci, et ce n'est vraiment pas nécessaire. Ce que je vais faire est de créer une autre page en utilisant Divi page builder, afin que nous puissions définir nos projets un peu plus agréable. Je vais aller à New, Page, et je vais l'appeler Projets. Je vais appuyer sur l'onglet pour qu'il sort avec une URL, ouais j'aime cette URL. Si vous n'aimez pas l'URL, par exemple, vous pouvez la changer à ce que vous voulez. Je change souvent les URL pour être plus conviviales au référencement, donc ce n'est qu'un autre point là. Je vais passer de l'éditeur WordPress WYSIWYG standard au Divi Builder. Je vais mettre un titre ici, juste pour la largeur et mettre du texte dans. Le texte va dire Titre 1, Projets précédents, je vais appeler cette rubrique, donc c'est plus facile pour moi de comprendre. Ensuite, je peux ajouter un module en dessous qui montre mon portefeuille. Ils ont un module de portefeuille bien formaté ici dans Divi. La première chose que je vais faire est d'aller à Design, choisissez Grille parce que pour la largeur, c'est trop grand. Je n'ai qu'une seule catégorie pour le moment, donc je vais juste la cacher pour l'instant, mais je vais garder tout ça. Gardez le nom Portfolio, et nous allons juste prévisualiser ce que nous avons maintenant. Nous avons nos projets précédents ici. Une autre chose que je veux faire juste pour ajouter un peu plus de contenu à cette page, est plus de texte pour attirer la personne dans. Je vais juste écrire quelque chose ici. Je vais centrer ça, et ça ne me dérange pas le nom Text. Je vais déplacer ça au-dessus du portefeuille, puis je vais en prévisualiser ça. Cliquez sur les liens ci-dessous pour consulter mon projet précédent, nous y allons. Je suis heureux avec cela donc je vais cliquer sur Publier, et plus sur mes autres liens de menu, donc j'ai Portfolio, j'ai des services. Je vais ajouter une nouvelle page appelée Services. C' est essentiellement la façon dont vous construisez un site Web, vous pourriez avoir un design qui vous est envoyé, ou vous pourriez simplement le concevoir à la volée, mais c'est tout. Vous créez des pages, vous effectuez des personnalisations avancées si nécessaire. Mais la plupart du temps en utilisant Divi Builder, vous pouvez simplement construire la plupart de ce dont vous avez besoin, juste en utilisant cette interface ici. Encore une fois, je vais juste mettre un cap. Je n'ai pas vraiment besoin de mettre un nouveau module pour le texte, je peux en fait juste mettre un paragraphe sous ce module réel ici. Apparemment, nous nous sommes débarrassés de ces boîtes stupides avant, je vais en fait construire des éléments personnalisés juste pour vous montrer comment vous y arriverez, au cas où vous vouliez faire quelque chose de personnalisé. Je vais avoir une ligne égale de trois colonnes, et je vais mettre mon propre code. Je vais mettre un div, et je vais l'appeler avec la boîte de service de classe. Maintenant, ce que la meilleure chose à faire ici est de faire tout bon dans le seul module, et ensuite vous pouvez simplement dupliquer ces modules, si vous allez les réutiliser. Je vais juste construire quelque chose maintenant, et je vais aussi aller dans mon éditeur de thème, donc je peux mettre du CSS. Vous verrez comment nous avons développé une boîte de service. Je vais avancer un peu plus vite ici, puis je reviendrai tout droit et je te dirai ce qu'on a fait. Ce que j'ai ici, ça n'a toujours pas l'air super beau, mais ça a l'air bien. J' ai cette boîte qui dit WordPress Web Development dedans, comme l'un de mes services, je peux dupliquer cela, fondamentalement ce que j'ai fait, juste eu ce div avec la boîte de service de classe, mettre un titre h2 là, avait en fait une couleur d'arrière-plan en utilisant cela auparavant, mais j'ai décidé de m'en débarrasser, donc je peux spécifier la couleur d'arrière-plan dans ma propre classe ici. Comme vous pouvez le voir, j'ai une classe de service où je définit les styles, je lui donne une bordure, je lui donne une hauteur minimale, textes et une doublure au centre, la couleur de fond a défini sur un blanc. Ensuite, j'utilise une règle CSS pour appliquer le titre à étiqueter dans cette boîte, en lui donnant un haut de marge et en lui donnant un remplissage à gauche et à droite. Ensuite, enfin, pour obtenir cette fonctionnalité de vol stationnaire, je peux le faire en CSS en mettant, je pense que cela pourrait être appelé une pseudo classe ou quelque chose comme ça, ça va à la fin de la journée avec un deux-points, puis planer, alors alors chaque fois que je survole, pourquoi ai-je trop de pages ouvertes ? Chaque fois que je survole, cette couleur d'arrière-plan change. Évidemment, vous voudriez passer plus de temps à concevoir quelque chose d'un peu plus agréable, mais pour nos besoins, je vais juste y aller. Je vais le dupliquer, changer l'un des services à Yii2 Framework Development. Faites glisser le dessus, dupliquez à nouveau, changez le titre, Enregistrer et quitter, puis déplacez le dessus. Prévisualisons ce que nous avons là. Comme vous pouvez le voir, les styles s'appliquent à tout ce qui est une boîte de service. Tant que nous avons la classe là-bas, cela s'appliquera, donc nous avons seulement les pièces que nous avons besoin de dupliquer, et le reste du style et tout est fait ici. Maintenant, nous avons ceci, idéalement, nous aimerions mettre plus d'informations là-dedans, peut-être un lien vers le portfolio, mais pour nos besoins, juste pour faire une brève vidéo, je vais dire que je suis content de ça et je vais cliquer sur Publier. Maintenant, j'ai une page de services, je peux cliquer sur Afficher la page, Blog ici, devrait lien vers l'index du blog. Voyons si on en a déjà un. Non, nous ne le faisons pas. Nous allons créer une page de blog pour terminer cela. Je vais appeler ce Blog. Je vais utiliser le Divi Builder une fois de plus. Je vais mettre dans un titre, tous mes billets de blog, va lui donner une étiquette Admin de titre. Ensuite, nous pouvons facilement ajouter un module ici pour le blog, Je préfère grille, comme je l'ai dit avant que pleine largeur, mais quel que soit le flotteur est votre bateau. Pour revenir au contenu, je suis juste en train de briser ici les gars. Oui, je suis content de tout ça, Save and Exit. Je vais cliquer sur Aperçu, tout mon blog posté là. Voyez à quelle vitesse cela utilisait du contenu dynamique, plutôt que l'utilisation du générateur de pages. Si nous voulions mettre un texte entre les deux nous pouvons le faire comme nous l'avons fait auparavant, mais pour le temps, je vais juste cliquer sur Publier. Maintenant, nous avons toutes les pages que nous devons mettre dans ces menus. Maintenant, nous pouvons revenir dans Apparence, Menus, ce sont tous des liens personnalisés, et ce que nous pourrions faire est de changer ceci en projets. Mais aussi, cela nous donne les pages ici à insérer aussi, et c'est probablement un peu plus sûr à faire, parce que si nous changeons l'URL, alors il sera mis à jour. Je vais supprimer tout cela, et je vais mettre dans des projets, des services, un blog. Vous pouvez tous les cocher et les jeter. Je veux d'abord des projets, je veux des services en second lieu, et je ne veux pas que ce soit appelé des projets afin que je puisse changer l'étiquette de navigation, et l'appeler portfolio. Ensuite, nous avons une page de blog ici. Je peux ajouter dans ma catégorie là pour WordPress ici, donc c'est dynamique aussi bien, peut saisir cela, le mettre là-bas. Alors bien sûr, je voulais comme un lien de sous-menu, donc je vais le déplacer et il va dire sous-élément. Si j'appuie sur Enregistrer le menu, vous verrez que le menu sera mis à jour. Vous pouvez voir parce que parmi la page de blog, Blog est mis en surbrillance. Si je clique dessus, cela sera mis en évidence si je vais à Services, cette page de mes services, si je vais à Portfolio, sont tous mes projets et je peux y creuser. Maintenant, nous avons accordé un site Web très basique, mais nous avons couvert tous les grands principes pour le construire. Si vous voulez passer plus de temps à ce sujet, si vous avez suivi et que vous voulez réellement construire cela dans quelque chose que vous voulez réellement publier, allez-y. Mais dans ma situation, c'est fondamentalement tout pour la page Building et les personnalisations avancées, ce que je vais faire dans la vidéo suivante est installer quelques plugins, que je pense sont vraiment importants, et aussi vous montrer plugins en action et comment ils mettent réellement à jour votre site WordPress. Ensuite, dans la prochaine vidéo après cela, nous allons dans un plugin spécifique qui permet le commerce électronique sur votre site Web, donc si vous êtes intéressé par ces choses, certainement rester autour. Je te verrai dans la prochaine vidéo. 15. Installation des plugins: ce moment, nous avons la base d'un très bon site web. Nous avons des pages, nous avons un menu, nous avons des projets ici, nous avons des billets de blog, donc nous avons un site Web de base. Mais ce que je veux faire est d'activer des fonctionnalités supplémentaires qui ne sortent peut-être pas de la boîte avec WordPress et peut-être Devi ne vous aide pas non plus. Parfois, lorsque vous avez besoin de fonctionnalités supplémentaires ou que vous voulez ajouter quelque chose d'un peu plus à votre site, vous pouvez envisager d'installer certains plug-ins. Maintenant, juste un avertissement avec des plugins avant de plonger et d'installer certains, vous pouvez passer sur les deux plugins, certainement et il y a beaucoup de plug-ins pour les gens qui ne veulent pas toucher le code du tout, que tout ce qu'ils font est d'insérer comme une ligne ou deux du code. Il est préférable de garder votre site Web propre s'il y a une situation dans laquelle tout ce qu'il faut est pour vous d'entrer dans peut-être que c'est juste votre éditeur et de mettre dans une ligne de code. Il est beaucoup plus propre juste d'entrer et de modifier votre code que d'installer un plug-in. D' un autre côté, il y a des situations où le plug-in fait beaucoup et ce n'est pas un simple changement, auquel cas c'est une bonne idée d'obtenir un plug-in. Mais mon avertissement pour quiconque fait du développement est de garder votre site Web aussi propre que possible, n'installez pas les plug-ins pour absolument tout, il devrait y avoir un but clair derrière un plug-in que vous installez. Après cela, nous allons dans l'élément de menu plug-ins ici et cliquez sur Ajouter nouveau. Maintenant, un plug-in très populaire peut même être sur la première page. Maintenant, ce n'est peut-être pas dans populaire, un plug-in très populaire que vous pouvez rechercher ici. Je vais juste vérifier si c'est populaire. Yap, est Yoast SEO et vous verrez ce plug-in fonctionner pour vous en une seconde. Mais fondamentalement, il vous permet de mettre à jour vos métadonnées pour SEO sur vos billets de blog et pages. Des trucs très puissants, vous ne voulez pas seulement prendre tout ce que WordPress génère et l'utiliser souvent fois. Donc, nous allons utiliser Yoast, après cela installe cliquez sur Activer et maintenant vous verrez ici que Yoast est installé et activé. Pour utiliser Yoast, vous pouvez simplement aller dans n'importe quel poste ou page. Je vais aller ici où nous avons déjà notre post et je vais cliquer sur Modifier le post. Une fois que je suis à l'intérieur, je peux faire défiler vers le bas et je peux consulter une nouvelle section et voici mon aperçu dans Google. Vous pouvez voir que c'est ainsi que le titre va apparaître sur Google, c'est l'URL qui va apparaître, et c'est le texte. Maintenant, je viens d'avoir une image, vous avez un titre et vous avez un passage juste là qui va directement dans une introduction. Ça pourrait être correct. ce moment, je ne vois pas vraiment quoi que ce soit de mal. Que peut-être vous avez du code en haut de votre page et que Google interprète cela, juste mettre un code aléatoire ici ou vous voulez toujours vérifier ces choses, surtout si le référencement est important pour vous. Peut-être que parfois vous voulez que le titre soit un peu différent sur votre page Web plutôt que sur Google, peut-être que vous pouvez écrire un meilleur titre pour attirer quelqu'un regardant sur Google que vous pouvez ici, et vous voulez juste pour rendre cela peut être plus pertinent. Je ne sais pas, c'est juste une bonne chose de vérifier ce que votre aperçu est sur Google et de le modifier si vous en avez besoin. C' est pour cela que vous pouvez utiliser Yoast SEO. Tout ce que vous faites ici est d'éditer l'extrait en ce moment, il tire juste de l'article en cours, mais je peux changer cela à la façon d'installer. C' est drôle, éditer le billet de blog sur la façon d'installer des plug-ins sur WordPress pendant que nous faisons une vidéo sur les plug-ins dans WordPress. Dans cette situation, je n'ai pas vraiment besoin de l'éditer, mais vous voudrez peut-être le faire. Vous pouvez également modifier une limace. J' ai aimé la limace, mais vous pouvez voir ici que je la met à jour là, je la mets à jour là. Mais peut-être que vous voulez une meilleure description que la première introduction de votre contenu. Peut-être que vous voulez dire, c'est le meilleur article jamais sur la façon d'installer des plug-ins. Évidemment, c'est une description terrible, mais vous obtenez le point, vous pouvez aller et modifier à quoi il ressemble sur Google. Vous pouvez également entrer et modifier comment il apparaît sur Facebook et Twitter. La même chose s'applique ici, peut-être qu'il tire du code ou des textes que vous ne voulez pas vraiment dans l'aperçu afin que vous puissiez le mettre à jour ici. Vous pouvez également insérer un mot-clé focus, donc si vous essayez de classer pour un certain mot clé, vous pouvez le mettre là et laisser Yoast évaluer où vous faites un bon travail ou non. Je vais juste le mettre à jour là avec ma nouvelle description et c'est essentiellement le Yoast. Un autre plug-in que j'utilise, qui est vraiment important et cela ne va pas vraiment s'appliquer sur notre configuration locale parce que ce n'est pas vraiment sur Internet, mais il y en a un, désolé, je dois aller ajouter de nouveaux ici. Il y a un code, très simple SSL. Pour ceux d'entre vous qui ne connaissent pas SSL est comme certificat de sécurité. Si je vais ici, vous pouvez voir qu'il dit sécurisé et comme s après le HTTP. C' est une autre chose SEO. Il y a d'autres raisons pour lesquelles vous voudriez avoir SSL, mais l'une des principales raisons est pour le SEO et avec mon hôte en particulier, j'ai juste besoin d'installer ce plugin, puis de cliquer sur Activer et tant qu'il y a un certificat de sécurité SSL attaché à votre compte sur l'hôte, vous obtiendrez SSL. Je suis ici très simple SSL je peux cliquer sur Installer maintenant. Comme vous pouvez le voir, une fois l'installation terminée, vous pouvez simplement cliquer sur Activer comme nous l'avons fait depuis le début. Maintenant, tout ce que vous devez faire est d'aller dans Paramètres, SSL et vous pouvez l'activer s'il détecte qu'il y a SSL, nous sommes juste sur mon ordinateur local, donc il n'y a pas de SSL et essentiellement ce cours n'est pas sur la façon de faire SSL ou Yoast, qui parle de plugins en général ici. C' est essentiellement comment vous pouvez ajouter des plugins à votre site Web pour ajouter une fonctionnalité supplémentaire vous permettre de faire des choses spéciales sur votre site Web, et l'une de ces choses est en fait d'activer le commerce électronique. Dans la prochaine vidéo, nous allons aller directement dans cela en utilisant un plugin appelé WooCommerce et donc nous allons dire, par exemple, nous voulions vendre quelque chose ici, peut-être même que nous voulons vendre notre service prépayé nous peut mettre dans certains e-commerce dans notre site WordPress en utilisant ce plugin, donc je vais vous voir dans la prochaine vidéo. 16. Ajouter du commerce électronique avec Woocommerce: Dans la dernière vidéo, nous avons parlé des plug-ins et nous avons installé deux plug-ins que j'utilise très régulièrement sur tous mes sites web. Mais si vous essayez de faire du commerce électronique sur un site WordPress, il y a un plug-in qui est très, très populaire et il s'appelle WooCommerce. Au cas où vous vouliez faire du commerce électronique, je vais juste courir à travers l'installation de WooCommerce maintenant, et ce sera une bonne expérience d'apprentissage pour nous de voir ce que WooCommerce fait à notre site WordPress, et comment il peut nous obtenir E-- fonctionnalité de commerce vraiment rapidement avec pas beaucoup de travail, juste tirer parti de ce plugin. Je cherche WooCommerce et comme nous l'avons fait avant, je vais juste installer maintenant et activer. Dès que vous cliquez sur « Activer avec WooCommerce », vous serez amené à cet assistant suivant, qui vous aidera à configurer votre magasin et à démarrer rapidement. Vous pouvez mettre où votre magasin est basé et votre devise, je vais juste faire les États-Unis $. Vous pouvez dire avec le commerce où vous voulez vendre des produits physiques ou numériques, il va sélectionner des produits numériques. On peut garder ça. Je vais devoir mettre une adresse factice ici. Espérons qu'il l'acceptera. Ensuite, je serai amené à la section de paiement où il me dit ce que WooCommerce peut accepter. Il peut accepter Stripe et PayPal, les plus grands. Je suis cool avec les gens qui me payent comme ils veulent, mais je n'ai pas de compte Stripe, donc je vais simplement désactiver cela et accepter PayPal. Si vous comprenez le commerce électronique et que vous devez mettre des taxes, vous pouvez activer cela ici. Vous pouvez également connecter un Jetpack, mais je crois que vous aurez besoin d'un compte wordpress.com pour cela, je vais juste sauter cela pour l'instant. Ici, tu y vas. Vous pouvez demander des conseils, des mises à jour de produits et de l'inspiration pour votre boîte aux lettres, sinon, vous êtes à peu près prêt à partir. Je vais retourner au tableau de bord. Vous pouvez cliquer ici pour commencer à créer un produit ou importer des produits d'un autre magasin, mais je veux revenir au tableau de bord et juste parler de ce que WooCommerce a fait. Maintenant, sur votre tableau de bord, vous devriez voir quelque chose de nouveau dans votre menu. C' est l'onglet WooCommerce et l'onglet Produits. Maintenant, quels sont les produits, est juste un autre type de poste. Vous verrez que nous avons des messages et des pages, ce sont les types de poste standard dans WordPress. Projects a été ajouté par Divi, et maintenant des produits ont été ajoutés par WooCommerce. Maintenant, nous pouvons entrer ici, et nous pouvons créer des produits. Je vais créer un premier produit. Vous pouvez voir que l'interface est assez similaire à la création d'une publication ou d'une page et c'est parce qu'elle utilise la même fonctionnalité. Nous faisons juste un autre type de poste personnalisé. Je vais dire, « Un mois de développement web », et je dirai, « C'est pour un mois à temps plein de mes services. » Je fais juste des trucs ici les gars, ne prenez pas ça trop au sérieux. Mais si nous faisons défiler jusqu'ici, nous pouvons voir les données du produit et la description courte du produit, c'est là que c'est un peu différent de nos autres types de poste ici. Nous pouvons faire un produit simple qui est un virtuel, et nous pouvons le rendre généralement vaut 10 000 000, mais aujourd'hui c'est à un prix spécial de seulement cinq mille dollars. Inventaire. Vous pouvez gérer votre stock et votre stock ici s'il ne s'agit pas d'un produit virtuel. Même s'il s'agit d'un produit virtuel, vous pouvez limiter le montant que les gens achètent, vous pouvez lier des produits à des ventes incitatives et à des ventes croisées. Honnêtement, je n'ai pas de magasins WooCommerce que je gère, j'utilise réellement WooCommerce pour vendre sur mon site Web. J' utilise cette fonctionnalité de base et cela fonctionne pour moi. Mais essentiellement, si vous appuyez simplement sur Publier sur cela et ensuite vous vous dirigez vers le produit, vous pouvez vraiment juste l'acheter tout de suite. Vous pouvez cliquer sur « Ajouter le panier », soudainement vous avez un panier maintenant, et vous pouvez cliquer sur « Afficher ». C' est ce qui est génial à propos de WooCommerce. Regardez toutes ces choses, il est fourni pour nous suite juste en installant un plugin et en mettant dans un produit. C' est pourquoi je pense que WooCommerce est vraiment bon et c'est aussi très populaire, d'autres personnes l'aiment aussi. Vous pouvez passer à la caisse maintenant. Vous mettez vos informations de facturation, et vous pouvez mettre vos trucs PayPal. Maintenant, bien sûr, vous devez configurer le paiement, je suis sorti du tableau de bord. Vous voudrez aller dans WooCommerce ici où vous pouvez accéder à vos commandes, vos paramètres, coupons si vous voulez offrir des coupons aux gens. Je n'ai pas configuré mon PayPal depuis un moment, mais peut-être que c'est dans les comptes ou vérifier ici, et vous pouvez cliquer sur PayPal ici, vous pouvez définir votre e-mail PayPal. C' est probablement là que vous configurez votre PayPal. Vous avez tous vos paramètres ici sur WooCommerce. Quand quelqu'un achète votre produit, il apparaîtra ici dans vos commandes, afin que vous puissiez voir qui a acheté quoi et combien c'était, et toutes ces bonnes choses. C' est vraiment incroyable que vous puissiez simplement ajouter un plugin et obtenir tout cela dès la sortie de la boîte. Essentiellement, c'est vraiment mettre en place comme un produit et mettre en place des paiements pour que vous soyez payé, est essentiellement tout ce que vous devez faire pour avoir un magasin. Évidemment, si vous vendez des produits numériques, vous devez vous rendre ici. Je vais sélectionner « Téléchargeable », puis vous pouvez ajouter un fichier afin que lorsque quelqu'un paie, il puisse aller à une page qui a le fichier qu'il peut télécharger, c'est ainsi que je vends des produits sur mon site Web. Évidemment, si c'est un produit physique, vous devez le remplir. Mais essentiellement, en installant ce plugin, en mettant des produits, et en mettant des informations de paiement pour que vous puissiez être payé, vous avez essentiellement un magasin directement dans votre site WordPress. Vous pouvez accéder à ces produits par, voici l'URL ici et vous pouvez accéder à un produit individuel. Mais ce que WooCommerce fait, est mis dans un lien ici pour un panier, vous pouvez également naviguer directement pour magasiner en allant à votre magasin de slash de domaine racine, puis il va tout afficher ici. Vous pouvez personnaliser votre boutique bien sûr, c'est une ancienne version. Vous pouvez revenir ici, et vous pouvez personnaliser votre boutique et créer des catégories ici, vous pouvez créer des balises comme vous pouvez le faire avec d'autres types de poste dans WordPress. Essentiellement, si vous vouliez ajouter cet élément de menu à votre menu WordPress, vous pouvez aller ici, aller dans les menus d'apparence, et ajouter dans la boutique tout de suite. Vous pouvez y aller Shop, Enregistrer Menu, actualiser la page. N'est-ce pas beau ? WordPress fonctionne très bien pour nous, et nous avons tout de suite tout ce contenu dynamique et cette fonctionnalité pour nous. Aussi, vous pouvez voir ici que nous avons ajouté quelques modèles maintenant avec WooCommerce. Nous avons un produit de tiret d'archives, et si je creuse ici, nous avons un seul produit de tiret. Cela vous indique que si vous avez dû modifier les fichiers de modèle, vous pouvez totalement le faire simplement en trouvant ces modèles. Faisons ça maintenant juste pour mettre cela en perspective. Nous pouvons creuser dans notre dossier plugins ici, aller à WooCommerce, regarder dans les modèles et boom. Nous avons tous ces modèles ici que nous pouvons entrer et éditer, tout comme nous l'avons fait quand nous étions dans notre thème enfant et nous changeons le single et nous changeons le archive.php, nous pouvons entrer et changer les modèles ici. Encore une fois, en utilisant WordPress, tout est open source, nous pouvons utiliser l'interface utilisateur ici pour faire ce que nous voulons dans le tableau de bord WordPress, mais alors nous avons la personnalisation complète de l'édition en creusant dans le code, et c'est un peu sur WooCommerce et comment vous pouvez ajouter E-commerce à votre site Web. Je pense que couvre à peu près toutes les bases du développement d'un site WordPress. Nous avons, encore une fois, des pages, des projets, des publications, et maintenant, des produits. Je pense qu'il est maintenant temps de mettre notre site Web sur Internet dans ce que nous appelons le déploiement. Si vous construisiez cela sur un serveur de transit, nous pouvons migrer cela et tous les sujets que nous allons aborder dans les 1, 2 ou 3 prochaines vidéos, aussi longtemps que cela nous prendra. Si votre site Web est hébergé localement ou sur un serveur intermédiaire, et que vous souhaitez migrer, restez certainement autour de vous pour apprendre à le faire dans la vidéo suivante. Ou même si vous êtes satisfait de votre site Web et que vous venez de le construire directement sur votre hébergement, certainement rester là de toute façon parce que si vous voulez créer une nouvelle version de votre site Web, vous aurez besoin pour apprendre à migrer. J' espère que vous avez appris quelque chose de cette leçon et je vous parlerai dans la prochaine vidéo. 17. Déployez votre site: Dans cette vidéo, nous allons parler du déploiement de votre site Web sur Internet. Si vous avez choisi le chemin où vous ne l'avez pas réellement construit localement sur votre ordinateur ou sur un serveur intermédiaire, et que vous l'avez créé directement sur l'espace sur lequel vous souhaitez le publier. Eh bien, aucune étape n'est requise si vous avez déjà construit votre site Web à l'endroit où vous voulez qu'il apparaisse. Alors c'est tout. Vous pouvez simplement le partager avec vos amis ou le partager avec qui que ce soit. Commencez à conduire un peu de trafic vers ce site Web. C' est la nouvelle installation WordPress que nous avions avant sur un petit domaine de démo. Si vous voulez passer sur un site Web que vous avez développé localement ou à un autre endroit sur Internet, et que vous voulez le déplacer vers cette destination. C' est ce que cette vidéo va vous faire passer. Tout d'abord, nous allons parler de la migration du site localement. Les mêmes principes peuvent s'appliquer ici à la migration en dehors du serveur intermédiaire. Rapidement, ce que je vous ai montré auparavant avec le site bleu ciel est un exemple de serveur intermédiaire. Fondamentalement, ce que j'ai fait était de créer un sous-domaine dans mon propre domaine christhedeveloper.com et j'ai construit le site Web là. Puis une fois que j'étais prêt et une fois que le client en était satisfait, je l'ai déplacé dans leur domaine. C' est essentiellement ce qu'est un serveur intermédiaire. C' est un endroit que vous construisez en ligne et que vous pouvez ensuite le déplacer vers la destination finale. Des principes similaires s'appliquent si vous faites cela localement vers Internet ou si vous migrez d'un endroit à l'autre. Nous allons juste passer par ce que nous avons ici, qui est notre installation locale. Rappelez-vous ici, nous avons déjà installé une version de WordPress. Ce que je vais faire est juste d'aller dans le gestionnaire de fichiers et juste supprimer cela. Je vais avancer rapidement ici que je vais dans mon cPanel et effectivement supprimer ces fichiers. En entrant dans le gestionnaire de fichiers de mes comptes cPanel pour ce domaine, je vais juste aller dans HTML public où le site Web est stocké et je vais juste supprimer tout cela. Avant de faire ça, la raison pour laquelle je fais ça sur ce site est parce qu'il n'y a pratiquement rien dessus. C' est une nouvelle installation WordPress. Si vous aviez un site Web réel, évidemment, n' allez pas supprimer vos fichiers. Parce que j'ai une nouvelle installation, je vais juste commencer à partir de zéro. Je vais cliquer sur supprimer et supprimer tous ces fichiers. Cela ne supprimera pas la base de données WordPress, vous pourriez vouloir aller dans et supprimer la base de données WordPress aussi bien. Je pense que je pourrais y aller et le supprimer. Vous pouvez généralement le faire en PHP mon administrateur lorsque vous le stockez localement. Pour cPanel, vous voulez entrer ici et nous pouvons simplement se débarrasser de cette base de données complètement. Vous pouvez supprimer la base de données et elle a disparu. Si nous retournons sur le site, il devrait apparaître sans rien. Fondamentalement, il apparaît juste avec un répertoire et il n'y a pas de site Web là-bas. Ce que nous pouvons faire, c'est nous rappeler que nous avons notre site Web juste ici. Voici les fichiers de notre site Web. Ensuite, nous avons également notre base de données stockée localement sur notre serveur. Si nous allons ici et voir notre base de données WordPress, que nous avons appelé skillshare_wordpress. Les étapes de migration, et nous en avons parlé un peu dans la compréhension du développement Web, qui était la première classe Skillshare, se déplace sur les fichiers, se déplace sur la base de données, puis s'assure que ces deux sont connectés. Ce que je vais faire, c'est que je vais déplacer les fichiers dans notre site WordPress Skillshare vers notre hébergement. Donc ce sera identique. Il y a plusieurs façons de le faire, mais je pense que le moyen le plus propre serait probablement de le décompresser, télécharger et de le décompresser. Fondamentalement, j'ai cliqué avec le bouton droit sur ce dossier et j'ai cliqué sur Compresser. C' est comme ça que vous le faites sur Mac, mais je suis sûr que c'est différent sur Windows. Vous devriez être familier avec les fichiers compressés. J' ai ce site WordPress. Je vais télécharger cela en tant que fichier unique sur mon hébergement et voir qu'il va être en téléchargement. Cela va prendre un peu de temps. Je vais attendre un peu et vous rattraper quand il aura fini de télécharger. D' accord. Donc, je suis revenu dans quelques minutes et c'est maintenant téléchargé. Nous pouvons cliquer ici pour revenir à notre dossier. Je peux cliquer dessus, puis cliquer sur extrait, je vais l'extraire. Maintenant, nous attendons juste qu'il extrait. C' est fini parce que je l'ai zippé sur un Mac OS X. Je vais avoir ceci, mais c'est la photo que nous recherchons. Nous avons juste besoin de saisir tout cela et de le déplacer dans le dossier HTML public. Je vais me débarrasser de ça. Cliquez sur déplacer, revenir en arrière et nous pouvons nous débarrasser de, celui maintenant vide. Nous pouvons nous en débarrasser et nous pouvons nous en débarrasser. Nous pouvons également nous débarrasser du fichier zip parce que tout est sur zip. Juste pour montrer à quoi cela ressemble maintenant dans notre navigateur, nous pouvons actualiser cela et cela va arriver avec une erreur disant erreur établissant une connexion à une base de données, ce qui bien sûr n'est pas surprenant, nous n'avons pas réellement une base de données sur notre site Web. L' étape suivante consiste à migrer sur cette base de données. Ce que je vais faire est de cliquer sur Exporter ici, choisir rapidement, aller. J' ai du code SQL à mettre dans ma base de données, mais malheureusement, je n'ai pas de base de données ici parce que nous venons de l'effacer. Aussi, je n'ai pas la possibilité de le nommer exactement comme celui-ci car il force un préfixe sur le nom de la base de données. Il faut l'appeler skillsharecourse_ et ensuite quelque chose. Nous allons devoir modifier un peu la base de données sur l'hébergement. Ce que je vais faire, c'est nommer ce WordPress. Ce sera skillsharecourse_ WordPress au lieu de skillshare_wordpress juste à cause de ce préfixe. Je vais créer la base de données. Je vais y retourner. Comme vous pouvez le voir ici quelqu'un, pas quelqu'un, WordPress a déjà créé un nom d'utilisateur pour moi. Je vais juste supprimer cet utilisateur et en créer un nouveau. Je vais entrer ici et supprimer cet utilisateur. Donc maintenant, nous avons juste une base de données sans utilisateurs. Je vais ajouter un utilisateur et je vais juste l'appeler skillsharecourse_admin. Je vais générer un nom d'utilisateur désolé un mot de passe pour cela. Je vais entrer dans mon seul mot de passe comme toujours saisir cela. Assurez-vous de l'enregistrer définitivement. Ce sera mon nom d'utilisateur/mot de passe MySQL. Le mot de passe est là, le nom d'utilisateur va être skillsharecourse_admin. J' ai tout enregistré maintenant. Je peux copier et coller ça et encore, on y va. Maintenant, c'est fait. Vous avez créé et créé un utilisateur avec succès. Maintenant, la dernière étape consiste à donner des privilèges d'accès à cet utilisateur, pour accéder à la base de données que nous venons de créer. Les deux seules options disponibles sont celles que nous avons. On peut juste appuyer sur Ajouter. Nous allons activer tous les privilèges et appuyer sur Faire des modifications. Si vous vous souvenez quand nous avons commencé à installer notre site WordPress pour commencer quand nous le faisions localement, nous avions ce fameux installateur de cinq minutes pour WordPress et WordPress a essentiellement dit, « Mettez vos détails et nous allons mettre que dans le fichier de configuration WP. » Nous n'avons pas cela disponible maintenant. Ce que nous allons devoir faire est de mettre ces détails directement dans notre fichier de configuration WP. Maintenant que nous avons cette information va être configurée, ce que nous allons faire est d'aller dans notre fichier de configuration WP afin que nous puissions simplement l'éditer à partir de notre gestionnaire de fichiers. Vous pouvez également l'éditer via FTP en utilisant votre éditeur de code si vous le souhaitez. La première chose que nous allons faire est de changer le nom de la base de données en SkillshaRecourse_WordPress. Fondamentalement, nous sommes juste en train de copier les détails ici. Il s'agit du nom de la base de données, SkillhaRecourse_WordPress. C' est notre utilisateur. Donc nous pouvons prendre ce nom d'utilisateur et nous pouvons le mettre là. Le mot de passe, rappelez-vous que nous avons enregistré dans notre édition de texte. Donc je vais copier ça, mettre ça, et je crois qu'on peut laisser ça pareil. Je vais enregistrer les changements. La dernière chose est d'avoir les données dans les tables cette base de données parce que si nous allons à phpMyAdmin maintenant, il y aura une base de données ici sans rien dedans. Ce que nous allons devoir faire ici, c'est saisir ceci et nous assurer qu'il importe dans notre nouvelle base de données. En fait, je vais juste faire un clic droit ici et cliquer sur « Sélectionner tout ». Ensuite, je vais appuyer sur la commande C pour copier, et nous n'avons plus besoin de l'ouvrir. Nous devons retourner à PhpMyAdmin. Assurez-vous de comprendre lesquels phpMyAdmin localement, et lesquels phpMyAdmin sur votre hébergement. Vous pouvez vous assurer que vous pouvez voir cela à partir de l'URL. Je ne veux pas vous confondre. Ce sont deux phpMyAdmins différents. Ce que nous pouvons faire ici, c'est que nous pouvons aller à SQL, en supposant que nous avons une requête SQL, et cela va s'exécuter sur la base de données SkillshaRecourse_WordPress. Je vais le coller et je vais changer les détails en haut. Il est dit base de données skillshare_wordpress. Ce n'est qu'un commentaire, mais j'aimerais le changer de toute façon. Si j'appuie sur « Go », et que tout va bien, il devrait importer toutes les données de notre base de données WordPress locale dans notre base de données WordPress que nous venons de mettre en place sur notre hébergement. Cela peut prendre un certain temps juste parce qu'il y a beaucoup de lignes à insérer. Mais j'espère qu'il finit le chargement et nous pouvons maintenant voir une grosse tique. Je vais appuyer sur « Structure » et vous pouvez voir que nous avons toutes les tables là-bas. Si nous allons dans, disons les messages, nous pouvons voir quelques messages et nous pouvons voir quelques codes courts devi. Vous n'avez pas besoin de bien comprendre cela, mais vous pouvez au moins voir que nos tables de base de données et maintenant là-dedans. Si nous revenons ici et que tout va bien, nous devrions actualiser la page et le site devrait fonctionner comme prévu. Ça arrive assez bien, sauf qu'il y a quelque chose d'évident qui ne marche pas. C' est, partout où nous avions ces icônes, elles apparaissent si nous avions des caractères ou juste des boîtes. Honnêtement, je suis surpris que la plupart du site soit passé par OK. Parce que nous avons manqué une étape importante qui vient juste à la fin, et qui est la mise à jour de l'URL de notre site. En gros, je vais te montrer ça maintenant. Si nous allons dans notre base de données sur notre hébergement et nous allons dans Options, nous pouvons voir ici que l'URL de notre site dans notre maison est toujours localhost:8888. Mais ce n'est plus pertinent parce que nous sommes maintenant sur ce domaine. Ce que je vais faire, c'est que je vais copier le domaine et que je vais mettre à jour la base de données. Je vais entrer ici, appuyez sur « Modifier », et changer cela en http//www.skillsharecourse.space. Je vais copier ça. Alors j'irai par ici. Je pense que je peux juste double-cliquer dessus. On y va. Appuyez sur « Entrée », et cela va changer. Je pense qu'il y a un autre champ dans cette base de données, donc vous allez changer d'aller de l'avant. Nous pouvons trouver un autre endroit où nous avons notre URL locale. Il suffit de remplacer jusqu'au site WordPress par notre URL réelle. Nous pouvons passer par encore plus de lignes, qui est déjà mis à jour aussi. Vous pouvez voir le HTML public là, donc c'est déjà ce qu'il doit être. Je passe juste par quelques rangées. J' ai parcouru toutes les lignes et j'ai mis à jour ou ces URL. Maintenant, quand je retourne pour rafraîchir la page, voyons ce qui se passe. Cela prend un peu plus de temps à charger, probablement parce qu'il charge ces nouveaux détails. Soudain, nous avons les icônes qui apparaissent joliment. Je suis en fait un peu surpris que cela n'ait pas cassé les liens d'image aussi bien. Mais ouais, changer l'URL du site est très, très important. N' oubliez pas, accédez aux options WP après avoir migré votre base de données et modifié l'URL et la page d'accueil de votre site. Vérifions simplement si le reste du site fonctionne bien. Oui, les services. Tout comme nous avons construit sur notre propre hébergement ou le nôtre localement. Cela couvre à peu près le processus de déploiement. Juste pour résumer ici, ce que nous avons fait, c'est que nous avons pris les fichiers que nous avons localement dans notre répertoire de projet. Nous les mettons sur notre hébergement sur une installation vierge. Nous avons ensuite exporté notre base de données, nous avons créé une nouvelle base de données, nous avons importé les tables de cette ancienne base de données dans notre base de données sur Internet, puis nous avons mis à jour ces URL de citations obsolètes et pages d'accueil parce qu'ils faisaient référence à l'hôte local. C' est essentiellement le processus que nous avons traversé. C' est légèrement différent si vous avez déjà un site web, rappelez-vous que nous commencions à partir de zéro ici. Cette vidéo est un peu longue, donc je vais la laisser là pour déployer votre site web. Mais dans la vidéo suivante, je vais vous montrer comment migrer les modifications sur lesquelles vous travaillez, localement ou sur un serveur intermédiaire vers votre destination finale. Si cela vous intéresse, restez à l'écoute pour la prochaine vidéo. Si ce n'est pas le cas, vous pouvez passer à la vidéo après cela. Restez définitivement jusqu'à la fin. Nous parlerons des projets de classe et de la façon de trouver de l'aide lorsque vous êtes en difficulté. Alors ne terminez pas votre voyage avec ce cours là-bas. Encore une fois, si vous voulez voir comment migrer une vue vers un endroit où vous avez un site existant, restez à l'écoute et je vous attraperai dans la prochaine vidéo. 18. Migrer des modifications sur un site en ligne: Dans la dernière vidéo, nous avons pris notre site web hébergé localement, celui juste ici sur notre hôte local:8888 et nous avons pris tous les fichiers et la base de données et nous l'avons mis sur notre hébergement vierge. Mais bien sûr, que se passe-t-il si nous avons déjà un site Web ici et que nous voulons créer une nouvelle version, puis migrer cela à travers. C' est ce que va faire cette vidéo. Actuellement, c'est exactement ce que nous avons. Nous avons un site web existant sur ce site. Imaginons juste une seconde qu'il s'agit d'un site web qui existe depuis un certain temps. Il y a déjà du trafic sur ce site. Vous avez déjà envoyé des gens à elle et vous voulez vous assurer que vous ne supprimez pas fondamentalement ce site Web pour télécharger votre nouveau site Web. Ce que vous allez faire ici, c'est migrer le site à travers. Maintenant, il y a des services qui gèrent cela pour vous. Par exemple, si vous utilisez Managed WordPress, ils auraient des systèmes pour cet un des hôtes qui fait ce volant. Flywheel est un fournisseur d'hébergement géré. Vous pouvez configurer des serveurs intermédiaires et je suis sûr que c'est un peu plus élégant que la solution que nous faisons. Mais avec ma configuration, je n'ai pas cette option. J' utilise juste l'hébergement de base et c'est un bon, de savoir comment le faire de toute façon. Fondamentalement, c'est un processus similaire à celui que nous avions auparavant. On a juste besoin d'être un peu plus prudents. Ce que je vais faire, c'est que je vais entrer ici. Je vais aller au Gestionnaire de fichiers, j'ai déjà ouvert et qui va juste rafraîchir. Tout d'abord, je vais sauvegarder mon site. C' est la chose la plus importante. Je vais aller en HTML public. En fait, je vais revenir en arrière et je zip HTML public. Ne vous inquiétez pas, cela n'affectera pas ce dossier. Il va juste créer une archive zip de celui-ci. Je vais créer un zip de mon HTML public, qui est l'endroit où mon site Web est servi. Gardez à l'esprit, cela peut être légèrement différent pour vous dans votre hôte en utilisant ce gestionnaire de fichiers, HTML public est l'endroit où mon site Web est servi. Maintenant, j'ai mon ancienne version de mon site Web et je vais le télécharger sous forme de zip. Je vais aller ici et faire plier une sauvegarde de l'ancien site. En fait, je ne le ferai pas dans ce dossier parce que c'est celui que je vais télécharger. Je vais le faire ici. Sauvegarde de l'ancien site. Vous pouvez le mettre partout où vous voulez. Si vous vouliez sauvegarder la base de données, je vous propose de laisser la base de données là, mais peut-être que vous voulez la sauvegarder puis la supprimer. Vous pouvez exporter, aller à Personnalisé et choisir Enregistrer la sortie dans un fichier. Vous pouvez jeter un oeil à ça. Vous pouvez ajouter le champ Créer une base de données si vous le souhaitez. Fondamentalement, vous pouvez tout laisser standard. Ce n'est pas un problème. Ce qu'il va vous donner, c'est un fichier SQL, qui est un vidage de ce qu'on appelle un vidage de votre, de vos de base de données. Je vais retourner dans la sauvegarde de code de l'ancien site et je vais enregistrer. Ici, si je fais un pas vers le haut, la sauvegarde de l'ancien site, j'ai un fichier zip de tous mes fichiers de notre site et j' ai le vidage de la base de données juste ici. Ce que je vous propose de faire, c'est de garder votre ancien site Web, qui signifie que vous gardez les fichiers et vous gardez la base de données sur l'hébergement si vous l'avez déjà, et donc vous l'avez à deux endroits et simplement le déplacer fondamentalement. Dans notre cas, cette base de données est exactement la même. Mais si vous aviez un nom de base de données différent, ce que vous faites c'est que vous allez dans votre cPanel. Vous pouvez créer une nouvelle base de données qui correspond à la base de données que vous avez localement sur votre serveur intermédiaire. Vous devez mettre le nom, mettre dans le nom d'utilisateur, et tous les détails que vous avez pour votre existant. Si vous devez changer cela, vous devez changer ceci. Fondamentalement, le processus est à peu près exactement le même, sauf lorsque vous arrivez à l'étape où vous mettez des fichiers dans un HTML public. Vous ne voulez pas nécessairement les supprimer, mais les mettre dans un autre dossier et ne pas supprimer non plus cette base de données, mais juste l'avoir assis là à côté d'un autre. Juste un avertissement avant de nous déplacer sur ce cours est sur la construction de sites WordPress la bonne façon. Techniquement, ce que nous sommes sur le point de faire n'est pas la bonne façon. Ce n'est pas la façon parfaite de faire les choses. Mais pour faire les choses d'une manière parfaite, cela nécessiterait beaucoup plus de configuration, beaucoup plus de configuration de serveur, beaucoup plus que ce que nous pouvons faire avec juste cPanel. Les agences WordPress pour lesquelles j'ai travaillé dans le passé, ils ont eu serveurs configurés et nous sommes entrés dans la ligne de commande comme ceci, ouvrant un outil de ligne de commande, entrant et se connectant aux serveurs via SSH et le faire de cette façon. C' est techniquement la bonne façon de le faire, c' est la façon plus propre de le faire. Mais avec cPanel, la solution n'est pas aussi élégante et je voulais juste y faire référence d'abord. C' est probablement la partie la plus mauvaise et la plus sale du cours. Mais si vous avez besoin de le faire et que vous n'utilisez que cPanel, c'est comme ça que j'irais à ce sujet. C' est un peu une clause de non-responsabilité. Maintenant, passons en fait à la migration, ce qui va être le même que le déploiement comme nous l'avons fait dans la dernière vidéo. Ce que cela va impliquer, c'est que nous téléchargeons notre nouvelle version en termes de fichiers et de base de données. Ensuite, nous allons rapidement échanger avec un temps d'arrêt aussi minime que possible et nous devrions être tous gentils. Encore une fois, suivant le même processus que nous avions auparavant, notre base de données n'a pas changé, mais disons qu'elle l'a fait. On peut prendre tout ce code, commande C à copier. Ce que nous allons faire, c'est nous allons créer une nouvelle base de données ici. Parce que c'est la deuxième installation, je vais l'appeler wordpress_2, ou techniquement skillsharecourse_wordpress_2. Je vais cliquer sur Créer une base de données et je pense pouvoir utiliser le même nom d'utilisateur. Ce que je vais faire ici est d'ajouter cet utilisateur à notre nouvelle base de données, puis de cliquer sur Ajouter. Je vais accorder tous les privilèges. Apportez des modifications. On dirait que ces changements ont été faits. Je vais revenir en arrière et si je fais défiler vers les bases de données actuelles, nous avons les deux bases de données là-bas et l'utilisateur privilégié est le même pour les deux. Je vais aller ici et je vais me rafraîchir pour voir notre nouvelle base de données, donc je peux recharger la page ici ou là. Nous avons SkillShare_Wordpress_2 pour une nouvelle installation. Tout comme avant, nous pouvons exécuter la requête SQL pour importer toutes les données. Je vais faire Skillsharecourse_2 là-bas. Ce n'est qu'un commentaire. Ça n'a pas vraiment d'importance. J' aime juste mettre ça là-dedans. Je vais appuyer sur go et il va importer toutes ces données dans notre deuxième site Web. Encore une fois, cela peut prendre un certain temps en fonction votre vitesse Internet et de la vitesse de tous les outils. Il va juste se charger un peu et j'espère qu'on aura une tique verte. Il y a cette tique verte. Si nous cliquons sur la structure, nous avons toutes les tables là-bas et il devrait y avoir toutes nos données. Théoriquement, cela devrait être différent de cette base de données, mais c'est la même chose dans notre cas parce que nous n'avons pas apporté de modifications. Ok, donc la prochaine étape que nous pouvons faire est de télécharger les fichiers, et ce que je vais faire est la même chose qu'avant, télécharger le partage de compétences site WordPress, et je vais le faire en dehors du HTML public parce que je ne veux pas affecter cette photo tout de suite. Je vais cliquer pour télécharger un fichier. Je vais trouver ce fichier zip, et je vais mettre la vidéo en pause et vous rejoindre une fois qu'elle sera téléchargée. Nous avons atteint 100 pour cent et cela signifie que les fichiers sont maintenant téléchargés, et maintenant vient la partie sale. Fondamentalement, nous allons faire un peu de danse pour déplacer les fichiers et la base de données et, espérons-le, entraîner un temps d'arrêt aussi minime que possible sur notre site Web. Je vais juste rafraîchir la page et m'assurer que nous avons un site Web de travail ici, et ce que je vais faire ici est de déplacer les anciens fichiers hors du HTML public, puis je vais décompresser les nouveaux fichiers en HTML public, et il fonctionnent tout de suite, espérons-le pour nous parce que les détails de la base de données sont les mêmes, mais nous allons passer à la nouvelle base de données, et cela va terminer la migration. Il semblerait que nous ayons le HTML public déjà zippé ici, si vous avez apporté des modifications depuis que vous l'avez compressé, vous allez vouloir le compresser à nouveau ou simplement copier les fichiers directement sur. semblant que nous avons eu ce zip là-bas et nous avons téléchargé le zip sur notre ordinateur aussi, je vais vraiment supprimer tous ces fichiers, et je vais revenir en arrière et ensuite le faire très rapidement parce que votre site est actuellement vide au donc ils seront des temps d'arrêt pour ceux qui le regardent. Rapidement, décompressez ceci, double-clic ne se décompresse pas. Cliquez sur « Extraire », extraire en HTML public. Espérons que cela ne prendra pas trop de temps. D' accord, vous avez extrait, mais bien sûr, vous devez le déplacer. Nous allons déplacer cela en HTML public. Déplacer les fichiers, revenir en arrière, se débarrasser de cela, se débarrasser de cela en cliquant dessus, et puis, j'ai juste cliqué voir la corbeille, aller ici et appuyer sur Supprimer. Confirmez, maintenant actualisons la page et voyons ce qui se passe. Nous avons une erreur maintenant, erreur d'établissement de la connexion à la base de données, ce qui est bien sûr exactement la même erreur que nous avions auparavant, la raison pour laquelle nous avons cette erreur est que les détails dans le fichier de configuration WP sont configurés pour notre base de données locale, pas notre nouvelle base de données qui se trouve dans le cloud. Ce que nous pouvons faire, c'est nous pouvons aller dans une nouvelle installation. Descendez à WP config, Edit, et nous pouvons insérer ces nouveaux détails. Rappelez-vous que ce sont les vieux détails, ceux qui apparaissent ici. Ce sont les anciens détails pour ceux que vous avez localement. Je vais mettre cours Skill Share puis souligner deux pour la nouvelle base de données. Rappelez-vous que nous utilisons le même nom d'utilisateur et le même mot de passe pour les deux bases de données afin que nous puissions simplement copier entre celles-ci. Je vais enregistrer cela, le fichier de configuration est maintenant mis à jour. Je vais revenir ici, rafraîchir la page, et j'espère que tout sera doux. Encore le même problème. Nous avons les icônes qui apparaissent correctement. Allons et assurez-vous que notre URL est correcte, et ce ne sera pas évidemment, parce que c'est la même base de données que nous avions à l'origine, et vous pouvez voir ici tout le reste est le même, le même processus. Je vais aller ici pour mettre ça, entrer, entrer ici. Je suppose que c'est bon d'avoir un rafraîchissement. Maintenant, si nous revenons à la page, la rafraîchir, et maintenant nous avons un peu d'un site Web cassé, a dû être quelque chose que nous venons de faire, nous y allons. Si je retourne ici, je peux voir que j'ai fait HTTP deux fois. Tu es probablement en train de crier dans ta tête en me regardant faire cette erreur, mais facile à repérer, au moins après que tu aies fait cette erreur. J' ai changé ces lignes, puis rafraîchir cette page. Nous avons récupéré notre site web et les icônes sont de retour. Espérons que ce n'était pas trop de répétitions là-dedans. Les principales choses à retenir lorsque vous migrez de côté plutôt que de simplement le mettre sur un compte d'hébergement vide, c'est que vous voulez déplacer votre ancien site. Tout d'abord, vous voulez le sauvegarder et ensuite vous voulez déplacer votre ancien site vers un autre endroit. J' aime garder ma base de données là, sauf si j'ai vraiment besoin de la supprimer. chose la plus importante, bien sûr, est toujours de reculer. Comme je l'ai dit, c'est un peu une solution sale. Vous voulez vous assurer que vous sauvegardez toujours au cas où quelque chose se passe mal, et comme vous l'avez vu, il y avait un temps d'arrêt minimal, mais il y avait un certain temps d'arrêt car nous le pointons à travers et corrigeons les erreurs, mais essentiellement, c'est ainsi que vous téléchargez à partir d'un local, construisez dans une destination existante avec un côté dessus déjà. La seule chose que nous n'avons pas couverte, qui est encore, peu près exactement la même, est de passer d'un serveur de transit au nouveau serveur, et ce que je recommande pour cela est de télécharger la base de données et les fichiers de n'importe quel ce serveur intermédiaire est localement, puis les télécharger vers le nouvel emplacement. Vous le conservez toujours sur le serveur intermédiaire jusqu'à ce que vous soyez sûr qu'il se trouve sur le nouveau domaine, puis vous pouvez le supprimer du serveur intermédiaire. Encore une fois, si cela est compliqué ou si vous avez des questions, certainement frapper moi dans la discussion. Je veux juste mentionner encore une fois, si vous travaillez pour une agence, ils ont probablement une solution plus élégante que cela, mais si vous faites du travail client et vous avez juste besoin changer un site Web rapidement sur le client , tant que vous sauvegardez et assurez-vous de ne pas supprimer de fichiers, vous devriez être assez doux. Dans la prochaine leçon, nous allons parler façon de continuer votre apprentissage avec WordPress, parce que dans ce court cours, nous n'avons pas été en mesure de couvrir absolument tout, et même dans un cours de 15 à 30 heures, nous ne serions probablement pas en mesure de couvrir même la moitié de ce que WordPress est capable de, et les personnalisations que vous pouvez faire à WordPress. C' est vraiment, les possibilités sont vraiment infinies avec WordPress parce qu'il est complètement open source, et il y a une telle communauté de développeurs énorme, beaucoup de plug-ins, beaucoup d'outils qui se branchent dans WordPress. Nous allons parler de la façon d'aller de l'avant quand vous êtes coincé, et comment en apprendre plus sur WordPress, en utilisant ce cours comme base, puis sautez à froisser cela pour apprendre tout ce que vous devez savoir sur WordPress. J' ai hâte de vous voir dans la prochaine vidéo. 19. Comment poursuivre votre apprentissage: Donc, dans cette vidéo, je veux partager avec vous comment continuer votre apprentissage dans WordPress ? Si vous vous souvenez de ma classe précédente, « Comprendre le développement Web », vous vous souviendrez peut-être que je parle de développeurs Web en tant que Googlers experts, essentiellement des résolveurs de problèmes experts. Souvent, il y a un problème que vous voulez savoir résoudre et c'est une bonne compétence en tant que développeur, vous n'avez pas besoin de savoir comment résoudre le problème tout de suite , mais être en mesure de rechercher une solution. Donc, dans ce cas, je vais faire quelques exemples. Évidemment, Google est une excellente ressource, mais je veux vous montrer parce que souvent les solutions que vous obtenez de Google dépendent de la qualité de votre question que vous mettez dans Google. Donc, à titre d'exemple, un problème commun que j'ai avec Divi est quand je mets le logo, il sort un peu petit. Donc, je vais faire un clic droit « Inspecter l'élément » et voir ce que nous pouvons faire ici, et je vois ici qu'il y a une hauteur maximale fixe. Donc, il ne peut pas être plus grand que 54 pour cent de la hauteur de son div parent. Donc ce que je vais faire ici, c'est augmenter ça à 100, et vous verrez maintenant que la largeur maximale est un 100. La taille de l'image par défaut est de 800 par 800. Donc, il permet d'aller à toute la largeur de cet en-tête. Idéalement, nous voulons du rembourrage ici et nous ne voulons pas qu'il prenne toute la largeur. Donc, ce que nous pouvons essayer de faire ici est mis dans une hauteur personnalisée. Nous pouvons commencer à 100, puis réduire l'échelle jusqu'à ce que nous puissions commencer à voir un changement, et peut-être que nous le voulons à propos de cette taille, 70 pixels. Mais disons par exemple que nous voulions que la hauteur de cette image soit un peu plus grande, et pour que cela arrive, nous pouvons peut-être nous débarrasser de cette hauteur maximale ici. Peut-être, nous voulons qu'il soit comme cette taille, mais évidemment, nous ne voulons pas qu'il se chevauche et passe sur l'en-tête. Nous devons donc augmenter la taille de l'en-tête Divi. Donc, si vous ne savez pas comment faire cela, un endroit idéal pour aller est directement à Google. Alors ce que je vais faire ici, c'est ? Tapez une requête, « Comment augmenter la taille de l'en-tête dans divi. » Maintenant, il est important de noter comment j'ai construit cette requête parce que cet élément d'en-tête est personnalisé par Divi et j'utilise le thème Divi, qui est lié aux styles, je me suis qui est lié aux styles, assuré de mettre dans Divi à la fin. J' aurais pu mettre dans WordPress, mais le thème se trouve comme une autre couche sur le dessus de WordPress. Donc, je suis allé avec Divi et c'est quelque chose que vous devez comprendre au fil du temps, quel mot clé le plus pertinent est de mettre là-dedans ? Mais encore une fois, la qualité du terme de recherche aura un impact sur la qualité de l'aide que vous obtiendrez. Ensuite, j'ai mis dans un bon descripteur « Comment augmenter la taille de l'en-tête. » Parfois, c'est beaucoup plus difficile à décrire, comme ce que vous essayez de faire et cet instant assez simple, mais parfois, vous devrez peut-être essayer différentes variantes de décrire votre problème, et c'est en fait la partie la plus frustrante parfois d'être un développeur, décrit quelque chose qui est un peu difficile à décrire. Heureusement pour nous, augmenter la taille de l'en-tête est assez facile, donc déconstruire le terme de recherche, « Comment augmenter la taille de l'en-tête », donc je demande « Comment augmenter la taille de l'en-tête ? Ensuite, je mets la plate-forme ou la chose que je cherche à rechercher ici aussi, et vous verrez comment cela change lorsque nous ferons d'autres termes de recherche. Donc, le premier article est le plus pertinent et nous pouvons descendre et nous pouvons voir, « Oh, nous y allons ». Nous pouvons ajouter du CSS à Divi comme ça. Donc, je vais copier cela, et je vais me connecter à mon site Skillshare, et je vais aller à « Apparence Editor » et trouver ma « feuille de style style.css ». J' ai dû copier et coller les mots de passe, je vais copier cela à nouveau, faire défiler vers le bas, mettre cela dans et « Mettre à jour le fichier ». Maintenant, nous pourrions devoir changer un peu les hauteurs parce que ce sont juste par défaut, donc cela n'a pas vraiment changé la hauteur à ce que nous voulons qu'elle soit. Mais si nous revenons en arrière et Inspecter Element, nous devrions être en mesure de changer ce style. Pour l'expliquer un peu, nous utilisons ici une balise multimédia dont nous avons parlé brièvement dans la dernière classe Skillshare. Une balise multimédia vous permet d'affecter les styles à certaines largeurs d'écran uniquement. Donc ici, nous appliquons seulement ces styles, si la largeur de la fenêtre de la page est minimale, 981 pixels. Donc, dans cette situation, il est plus grand que 981 pixels comme vous pouvez le voir ici, si vous regardez là-haut, je ne peux pas pointer dessus et cliquer sur « Drag » en même temps, mais si vous regardez dans le coin supérieur droit de la fenêtre là, vous pouvez voir, ça me dira quelle est la largeur des pixels. Donc, en entrant, on va trouver l'en-tête. Donc, si nous regardons ici, les en-têtes principaux, ce que cela affecte. Donc je vais cliquer dessus. Je vais faire défiler vers le bas et j'ai appliqué des styles pour trouver le style que nous avons mis dans. Comme cela arrive souvent, il n'est pas là. Donc, ce que je vais faire est, je vais rafraîchir le cache pour m'assurer que nous tirons dans la dernière version du fichier style.css. Pour revenir à l'en-tête principal, je vais faire défiler vers le bas et je peux voir ici notre requête média. Donc sa hauteur minimale, 150. Il ne s'applique pas lorsque nous allons dans la vue mobile qui se produit autour de 980, mais après 980, vous pouvez voir l'en-tête est maintenant de 150 pixels. Donc c'est juste une question d'entrer ici, peut-être que nous sommes heureux avec 150 pixels. Le second est quand la tête devient fixe, lorsque vous commencez à faire défiler. Si vous voyez, c'est à une taille et puis vous commencez à faire défiler, c'est une autre taille, donc nous pouvons affecter les deux pour ceux-ci, mais ce que je voulais démontrer c'est maintenant que nous avons un en-tête plus grand, nous pouvons le rendre un peu plus grand et peut-être ne le voulez pas à 100 p. 100, peut-être, nous le voulons un peu plus grand 75 p. 100. Faisons 80, 90, et on peut mettre une marge sur le dessus. En passant, nous devons déplacer ces styles vers la feuille de style. C' est jouer autour et alors peut-être que le haut de la marge sera 15. Alors, je retournerai ici, et j'affecterai le logo. Je vais mettre "#logo {margin top : 10px ;} » et quelle est l'autre chose que nous avons changé ? La hauteur maximale, 90 pour cent. Appuyez sur Mettre à jour fichier. Aussi, je vais réduire la taille de l'en-tête parce qu'il est juste un peu trop grand. Je vais aller ici et réduire ça à peu près là. Vous pouvez voir avec cette ligne où se trouve l'en-tête. Je pense que je vais y aller avec 100. Je retournerai ici et je ferai 100 au lieu de 150, et ici je ferai 100 aussi. Mettez à jour le fichier, puis nous actualiserons ici. Nous devons vider le cache et recharger à nouveau. Comme vous pouvez le voir, nous avons un logo plus grand en raison des styles que nous avons appliqués ici, qui remplacent ces styles et nous avons un en-tête plus grand. Nous pouvons probablement apporter un peu plus dans l'en-tête. Peut-être à environ 85. Juste pour arrêter cela maintenant, cliquez sur Mettre à jour le fichier, actualiser. Vous devrez peut-être appuyer sur rafraichir, encore une fois. En fait, l'en-tête est à peu près le même, donc nous n'avons pas vraiment changé beaucoup de l'en-tête, mais le point que je fais est toujours là. Nous avons eu une idée de ce que nous voulions faire, nous sommes allés à Google, nous avons tapé dans un bon terme, juste ici, puis nous avons pu changer la hauteur d'un en-tête divi. Comme je l'ai dit avec cette requête, il y a vraiment deux parties. Il est en train de trouver une bonne directive de ce que vous devez savoir et de mettre également dans le contexte. J' ai été intelligent dans le choix du contexte de divi parce que c'est un élément de style que divi contrôlerait bien sûr. Mais disons par exemple, c'est lié au commerce électronique et si je vais dans ma boutique ici, tout est toujours sur WordPress, mais le plug-in qui gère tout le commerce électronique pour moi est bien sûr, Woo Commerce. Si je voulais dire, peut-être que je veux ajouter quelques ventes incitatives ici, ce que je ferais est de dire comment ajouter une vente incitative à un produit Woo Commerce. Encore une fois, j'ai Woo Commerce comme contexte et j'ai la directive. Si je viens de dire comment ajouter une vente incitative à un produit, n'est pas spécifier si je suis sur WordPress, quel plug-in j'utilise, je pourrais utiliser n'importe quelle plate-forme de commerce électronique. Vous devez toujours le mettre dans le contexte de la question que vous posez. Je fais juste un pas en arrière, l'étape suivante serait d'évaluer quels sont les résultats qui arrivent. Ce premier est de Woo Commerce eux-mêmes. Évidemment, si vous exécutez un plug-in ou n'importe quel type de logiciel, le meilleur endroit pour rechercher des informations est la documentation. J' admets que la documentation pour les logiciels est souvent écrite d'une manière vraiment technique qui peut être difficile à comprendre. Certainement, dirigez-vous vers la documentation d'abord et si vous ne comprenez toujours pas, alors vous pouvez passer dans des billets de blog qui pourraient l'expliquer d'une manière plus facile à comprendre ou plus conviviale pour les débutants. Comme nous pouvons le voir ici, voici un article sur la façon dont nous le ferions. La dernière que je veux vous montrer est une chose très simple, mais elle montre l'importance du contexte. Comme je l'ai dit, en changeant quelque chose à voir avec le style, style est en grande partie à voir avec votre thème. Dans un thème premium comme divi, si je voulais changer quelque chose sur le style de ce thème, j'utiliserais le contexte comme Divi, mais disons juste que je voulais changer la taille de la police et j'ai dit WordPress comme contexte et non divi. Je vais changer la taille de la police dans WordPress. Vous pouvez voir ici, vous obtiendrez un lien très commun que vous verrez dans votre recherche WordPress si vous demandez commencer à taper des questions est WP beginner.com. Ces articles sur ce site sont bons pour les débutants, mais souvent ils ont une approche très simplifiée. Ils vous demandent également d'installer des plug-ins. Je ne sais pas s'ils gagnent de l'argent, mais ils disent toujours, si vous ne savez pas comment faire les choses, il suffit d'utiliser un plug-in. Ils vous encouragent à télécharger un plug-in pour chaque petite chose que vous voulez faire. Peut-être que vous vouliez changer la taille globale de la police. Vous pouvez être tenté d'installer un plug-in entier pour ce faire. Comme je l'ai déjà mentionné, vous devez être prudent avec l'installation de trop de plug-ins, surtout quand vous pouvez faire les choses plus facilement sans plug-in. Toujours évaluer, avez-vous vraiment besoin d'un plug-in ? Mais encore une fois, c'est lié au contexte dans lequel nous avons posé la question. Ils ne savent pas qu'on utilise des divi. Si nous avons tapé comment changer la taille de police et divi, nous pouvons voir un article Thèmes élégants en haut ici. Ensuite, si je fais défiler vers le bas, ils vont partager avec vous toutes les différentes options que vous avez dans le personnalisateur de thème pour changer la largeur du contenu, la largeur de la barre latérale. Vous pouvez également modifier la typographie. Vous pouvez voir que je peux changer la taille du corps du texte avec ces cadrans. Allons juste en ce moment et juste te montrer ça en direct. Je peux cliquer sur le nom du site, puis sur le thème de personnalisation. Ça ouvrira le personnalisateur de thème pour moi. Je peux aller dans les paramètres généraux, la typographie, et là, je peux changer la taille du corps du texte de tout. Comme avant, nous pouvons changer la police d'en-tête et la police de corps. Vous savez probablement déjà comment le faire parce que nous avons déjà couvert cela. Mais essentiellement, encore une fois, je reviens au point de questions de qualité dans Google et dans les choses que vous utilisez pour recherche et les solutions de qualité sortiront. Parfois, ce sera un peu compliqué et vous devrez peut-être aller à quelque chose comme Stack Overflow. Laisse-moi penser à quelque chose de plus compliqué. Peut-être utilisons-nous l'exemple de changer la position de l'image en vedette comme nous l'avons fait auparavant. Je taperais comment déplacer l'image en vedette dans Wordpress. Ensuite, vous avez comment ajouter des images en vedette, ce n'est pas ce que nous recherchons. Nous pouvons continuer à défiler vers le bas et vérifier certains de ces liens. Vous commencerez à voir ces discussions de forum parfois. Comme vous pouvez le voir ici, il y a un lien Stack Exchange, Stack Exchange, et Stack Overflow forums où vous pouvez parler et obtenir de l'aide sur vos problèmes de la communauté dans WordPress. Mais c'est aussi un endroit idéal pour découvrir les problèmes des autres et vérifier les solutions. Vous pouvez voir ici, ce n'est peut-être pas exactement ce que vous cherchez, mais vous pouvez à travers vos recherches, regarder ces différents problèmes et solutions Stack Overflow, Stack Exchange et il peut vous aider à former votre propre solution. Cela se passe sur la fin la plus compliquée, si vous avez une question vraiment simple, comme je l'ai montré précédemment, comment augmenter la taille de l'en-tête et le pied de page comme taille d'en-tête dans divi et comment augmenter la taille de la police. Vous pourriez avoir une réponse très facile. Parfois, lorsque vous voulez changer quelque chose d'un peu plus compliqué, c'est alors que vous devrez peut-être creuser ces différentes questions de débordement de pile. Ceux-ci sont tous plus écrits par les développeurs. Ils vont être plus de solutions de code et c'est un équilibre, à la fin de la journée. C' est ce qui se passe dans ce cours. Nous utilisons un générateur de page et une solution sans code pour faire beaucoup de choses pour lesquelles nous n'avons vraiment pas besoin de creuser dans le code. Ensuite, quand nous devons être ce développeur, quand nous devons creuser dans le code, nous pouvons le faire aussi. Parfois, vous avez juste besoin de changer la taille de l'en-tête et cela nécessite juste un peu de CSS ou la taille de la police. Vous pouvez simplement le faire dans les options, avec clic et glisser. Parfois, cela va nécessiter des changements de niveau de code PHP ou des changements CSS. Espérons que cela vous aide avec vos recherches en cours pour en apprendre plus sur WordPress. Rappelez-vous, les questions de qualité dans, les résultats de questions de qualité sur et n'oubliez pas le contexte. Si vous avez besoin d'aide pour comprendre comment rechercher des problèmes dans Google ou dans la documentation de l'un des logiciels que vous utilisez, que ce soit WordPress ou un plug-in particulier ou un thème dans WordPress, laissez certainement votre questions dans la discussion ci - après. Je te verrai sur la prochaine vidéo. 20. Bonus : sites d'adhésion: C' est une leçon bonus pour toute personne intéressée par la création d'un site d'adhésion, que ce soit maintenant ou à l'avenir. Si vous voulez passer de l'avant, nous allons terminer le cours dans la prochaine vidéo et vous remettre le projet de classe. Mais si vous êtes intéressé par les sites d'adhésion du tout, restez à l'écoute parce que je vais juste vous montrer mon propre site d'adhésion, et combien il est facile de mettre en place au cas où vous voulez configurer votre propre site d'adhésion ou le faire pour un client. Le site d'adhésion que j'ai est dans un sous-domaine de l'un de mes sites, christhefreelancer. Comme vous pouvez le voir, si vous y allez, il dit que vous devez vous connecter pour afficher ce contenu. Je vais le faire maintenant. Maintenant, je suis un administrateur WordPress, donc quand je me connecte, je vais avoir un accès complet pour éditer le site. Je vais entrer dans l'administrateur WP, et vous verrez ici j'ai tous les mêmes privilèges d'accès. Mais pour une personne qui est juste un utilisateur de ce site d'adhésion, elle aura la même barre de menu, mais elle n'aura pas la possibilité de modifier la page. Ils n'auront pas ce modèle d'affichage actuel. Ils ne pourront pas créer de nouvelles publications. Ce sera juste un bar d'administration WordPress nu ici. Ensuite, une fois qu'ils seront entrés ici, ils auront la possibilité de modifier leurs paramètres d'utilisateur, mais ne changeront rien sur le site Web. Ceci est juste un petit site d'adhésion que j'ai mis en place comme un guide vidéo à Chiang Mai, Thaïlande, qui est quelque chose que j'ai un public qui sont intéressés par cela. Ce que j'ai fait, c'est que je viens d'intégrer des vidéos de Vimeo. Ici, ce bouton d'édition peut apparaître à des personnes qui ne sont pas des administrateurs, mais, fondamentalement, il a des pages différentes. Si nous regardons ici, il y a l'adresse de la page et tout est limité. Ce que je peux faire pour démontrer que c'est ouvrir un onglet de navigation privée qui s'assurera que je suis déconnecté. Je peux mettre ce lien, et comme vous pouvez le voir, c'est totalement restreint. C' est dire que vous devez vous connecter. Si vous n'êtes pas membre, cliquez pour vous inscrire ici. C' est là que vous arrivez à la page des ventes. Essentiellement, vous pouvez transformer votre site WordPress en un site d'adhésion facilement en utilisant un plugin. Vous pouvez le faire probablement sans plugin. Mais honnêtement, un plugin le rend tellement plus facile, surtout quand vous voulez prendre des paiements. Avec ce site d'adhésion, si quelqu'un vient sur la page des ventes, il peut acheter le cours tout de suite, et je n'ai pas à lui envoyer les détails de l'adhésion ou quoi que ce soit. Ils vont littéralement simplement sur PayPal, payer l'argent, il revient, et ils ont accès et obtiennent leurs informations de connexion. Entièrement automatisé, et en vaut la peine si vous voulez un site d'adhésion. Dans ma situation particulière, le plugin que j'utilise est appelé Restreindre Content Pro. Ce qu'il fait, c'est qu'il ajoute dans un menu Restreindre ici. Ce que je peux faire, c'est aller voir ma liste de membres ici. Je peux entrer et éditer différents membres. Je peux choisir leur niveau d'abonnement, ce qui est quelque chose que vous avez configuré ailleurs. Il y a un journal. Je peux voir le paiement et ce qu'ils ont payé, la clé d'abonnement pour PayPal. le deuxième menu, je peux configurer les niveaux d'abonnement. Ainsi, vous pouvez dicter quelles pages sont accessibles par quels niveaux d'abonné. Ensuite, lorsque vous inscrivez des utilisateurs, vous déterminez le niveau d'abonnement auquel ils se trouvent. Du côté de la page, ce que nous pouvons voir, c'est que nous pouvons aller à une page. Allons dans des conseils pour apprendre le thaï. Comme vous le voyez ici, c'est juste un éditeur WordPress standard. C' est exactement la même chose que vous feriez une page pour un site non-membre. Ce que j'ai fait, c'est que j'ai construit les pages complètement en utilisant HTML, car cela est construit sur un thème personnalisé. Essentiellement, si je le refaisais, je le construirais avec un constructeur de page très probablement. Donc, je n'ai pas à coder chaque page à partir de zéro. C' est juste une leçon que j'ai apprise, il est beaucoup plus efficace de construire des sites Web avec le générateur de pages. Mais j'ai digressé ici. Ce que je voulais vous montrer va ici à cette section, qui est ajoutée par Restreindre Content Pro, et il est dit Restreindre ce Contenu. Je peux choisir qui peut accéder à ce contenu. « Tout le monde » le rendra public. Ensuite, je peux également définir le niveau d'accès, ce qui me permettra de définir des niveaux, jusqu'à dix ou plus. Il donne juste un nombre et il est plus facile que si le nombre est supérieur au niveau d'accès que vous avez, alors vous êtes en mesure d'y accéder. Vous pouvez également le baser sur les rôles d'utilisateur dans WordPress. Mais j'ai trouvé le moyen le plus simple est juste de créer un niveau d'abonnement , puis de l'attribuer aux membres d'un niveau d'abonnement spécifique. Ensuite, évidemment, lorsque je vais dans mes paramètres ici pour Restreindre le contenu Pro, je pense que dans Paramètres, je peux choisir où l'argent va réellement. La devise, je peux aller dans les niveaux d'abonnement ici et choisir combien coûte un abonnement, et je peux voir combien de personnes ont souscrit à ce niveau d'abonnement. Ça me donne toutes ces options. Je n'ai rien à coder à part si je veux coder les pages. C' est ma solution pour les sites d'adhésion. Il est juste couvert que dans une base plus théorique pour vous. Vous pouvez utiliser un plugin d'adhésion différent. Fondamentalement, vous pouvez simplement construire un site Web comme vous le feriez normalement sur WordPress. Mais alors la différence entre un site d'adhésion et un site public régulier est, évidemment, que les pages sont limitées aux membres. C' est alors que vous pouvez brancher un plugin d'adhésion et vous pouvez restreindre le contenu en fonction de l'état d'adhésion des personnes. Avec WordPress, c'est par défaut que WordPress a la capacité d'avoir les utilisateurs et les utilisateurs peuvent se connecter. Mais en ayant un plugin, il vous permet de gérer facilement quelles pages sont visibles à quels niveaux d'abonnement, puis aussi accepter les paiements sur le front end. Je voulais juste couvrir un peu sur les sites d'adhésion juste au cas où vous alliez publier un site d'adhésion. Comme c'est quelque chose dans lequel j'ai eu un peu d'expérience, j'ai pensé partager mon expérience avec vous les gars. Merci d'avoir regardé cette petite leçon bonus. Dans la prochaine vidéo, nous allons terminer et vous donner votre projet de classe. Je te vois dans la prochaine vidéo. 21. Bilan et projet de classe: Très bien, il est temps de terminer ce cours et de vous lancer dans votre projet de classe. Maintenant, vous devriez comprendre comment WordPress fonctionne et avoir une bonne idée de la façon de construire un site WordPress du point de vue d'un développeur. Idéalement, vous devriez maintenant avoir une compréhension de WordPress et de ce qu'il fait, Divi comme un thème et un générateur de page pour WordPress, comment ajouter du contenu à votre site Web, comment construire des pages, la hiérarchie de modèles WordPress, comment personnaliser votre code à la fois au niveau Page Builder et dans le back-end, plugins, et comment déployer et migrer votre site WordPress. Il y a évidemment une tonne de plus de détails dans ce cours. Mais gardez à l'esprit que l'essentiel est ce que vous devez comprendre pour développer des sites Web WordPress en tant que freelancer ou agence. Comme je l'ai mentionné dans ma classe précédente, vous devriez être en mesure de rechercher des solutions quand vous êtes coincé, et maintenant grâce à votre compréhension de base du développement pour WordPress, vous devriez être capable de comprendre où commencer votre recherche lorsque devez construire quelque chose qui n'était pas exactement couvert dans ce cours. Dans notre projet de classe, il est temps de rassembler toutes ces nouvelles connaissances pour construire et publier un site WordPress sur Internet. Votre projet de classe suivra une séquence très similaire à ce que nous avons déjà fait dans cette classe, c'est juste que maintenant c'est à vous de décider. Comme toujours, si vous avez besoin d'aide supplémentaire, laissez-moi juste un commentaire dans la boîte de discussion et assurez-vous également de suivre ma page ici sur Skillshare pour être mis à jour lorsque je sortirai une nouvelle classe. Très bien les gars, ça termine le cours, je tiens à vous remercier beaucoup d'avoir regardé et j'ai hâte de voir vos projets de classe terminés. Bonne chance, et je vous verrai dans la section discussion.