CMS : Apprendre à utiliser WordPress

Dans ce MON je vais apprendre comment prendre en main WordPress pour réaliser un site internet visant à vendre des sorties VTT.

Introduction

WordPress est un système de gestion du contenu (CMS) open source qui permet de créer et de gérer facilement des sites web de manière flexible et personnalisable. Il permet autant de créer des blogs personnels que des sites d'entreprise ou des boutiques en ligne. Son architecture modulaire, ses thèmes personnalisables et ses plugins étendus font de lui une solution très populaire pour de nombreux utilisateurs internationaux. Différents plans tarifaires sont proposés en fonction du besoin de l'utilisateur, ici on se concentrera uniquement sur le plan gratuit, dont les fonctionalités bien que limités restent intéressantes pour l'objectif final : avoir un site professionnel permettant d'exposer les sorties VTT proposé par une entreprise et permette aux visiteurs de s'y inscrire.

Pour ce faire je vais suivre la formation OpenClassroom intitulé Créez un site moderne et professionnel avec WordPress 5.

1. Découverte de WordPress

Les CMS (systèmes de gestion de contenu) et le concept open source sont deux piliers fondamentaux de l'univers numérique contemporain, chacun apportant des avantages distincts et contribuant à façonner le paysage en ligne.

Un CMS, ou "Content Management System", est une plateforme logicielle conçue pour la création et la gestion dynamique de sites web ou d'applications multimédia. Plutôt que de coder manuellement chaque élément d'un site, un CMS offre une interface conviviale permettant de créer et de gérer les contenus plus efficacement.

D'autre part, le terme "open source", ou "code source ouvert", désigne des logiciels (et désormais des œuvres intellectuelles) dont la licence respecte des critères spécifiques établis par l'Open Source Initiative. Cela inclut des principes tels que la libre redistribution, l'accès au code source et la possibilité de créer des travaux dérivés.

L'association du CMS et de l'open source est particulièrement exemplifiée par WordPress, un CMS open source qui a connu un succès phénoménal. Son code ouvert a encouragé la collaboration et l'innovation, attirant une communauté dévouée de développeurs et d'utilisateurs. Cette ouverture a permis à WordPress de devenir le leader incontesté du marché des CMS, propulsant près de 40 % des sites web dans le monde.

L'histoire de WordPress est celle d'une évolution constante, marquée par des fonctionnalités innovantes telles que les extensions (plugins) et les thèmes, qui ont considérablement élargi ses possibilités. L'engagement envers la gratuité, la philosophie open source et la communauté a été crucial dans la croissance et le maintien de sa popularité.

Plus récemment, WordPress a introduit Gutenberg, un éditeur de contenu basé sur des blocs, représentant une évolution majeure vers un web plus moderne et dynamique. Bien que cette transition ait suscité des débats au sein de la communauté, Gutenberg devrait finalement s'imposer comme une norme, illustrant la capacité de WordPress à s'adapter et à innover pour répondre aux besoins changeants du monde numérique.

2. Fonctionnement d'un site web

Le fonctionnement du web repose sur un modèle d'échanges décentralisés entre un client (généralement nous, via votre navigateur web) et un serveur qui héberge les pages web.

Lorsque l'on souhaite accéder à un site web, on saisisse l'adresse du site dans notre navigateur, appelée URL (Uniform Resource Locator). Cette adresse se décompose en plusieurs parties :

• Le protocole de communication utilisé, tel que HTTP (Hypertext Transfer Protocol), qui est le plus courant pour afficher des pages web.
• Le nom de domaine du site, loué auprès d'un registrar et permettant d'identifier le site de manière simple.
• Le chemin d'accès spécifique à la page demandée sur le site.

Techniquement, notre navigateur demande au réseau la localisation du site à partir de son nom de domaine. Le réseau répond en fournissant l'adresse IP du serveur hébergeant le site, permettant ainsi à la requête d'atteindre le serveur.

Une fois la requête acheminée vers le serveur, celui-ci recherche la page demandée et la fournit au navigateur sous forme de code HTML.

Le navigateur interprète ensuite ce code HTML pour afficher la page web que l'on voit à l'écran.

Pour qu'un site web fonctionne, il a besoin d'un serveur pour stocker les fichiers et exécuter le code nécessaire à sa création. Pour les sites basés sur WordPress, par exemple, le serveur exécute du code PHP et accède à une base de données MySQL pour récupérer les informations nécessaires à la génération des pages.

Deux options principales sont disponibles pour disposer d'un tel serveur :

1. Créer un environnement en local en utilisant des logiciels tels que MAMP ou Local by Flywheel, qui simulent un serveur sur notre propre ordinateur. C'est gratuit mais le site ne sera accessible que sur notre machine.

2. Louer de l'espace sur un serveur auprès d'un hébergeur. Cela permet au site d'être accessible en ligne via Internet, mais cela implique des frais mensuels.

En parallèle, un nom de domaine est nécessaire pour que le public puisse accéder facilement à votre site. Il est loué auprès de fournisseurs spécialisés appelés registrar et permet de remplacer l'adresse IP du serveur par un nom convivial. Ce nom de domaine peut être accompagné de sous-domaines, tels que blog.monsite.com ou shop.monsite.com, qui peuvent pointer vers des sites différents tout en étant liés au même nom de domaine principal.

3. Choisir le bon hébergeur

Il existe différent types d'hébergements selon le besoin :

• hébergement mutualisé : Ce type d'hébergement permet de louez une portion d'un serveur qui est partagé avec d'autres utilisateurs. Cette solution est la plus économique mais à de nombreux désavantages (accès limité à la configuration du serveur, subir les effets de noisy neighbours, un support très réduit,...)

• hébergement dédié : Ce type d'hébergement permet de louez un serveur entier, ce qui est évidemment plus cher, mais permet d'avoir un contrôle total sur le serveur. Cependant il est primordiale d'avoir de bonnes connaissances techniques pour le gérer.

• hébergement managé (ou infogéré) : Ce type d'hébergement permet de louer un certain niveau de performance et de disponibilité pour un site sans avoir à se soucier de la partie serveur. C'est un prestataire qui s'occupe de tout à notre place. Le prix est plus cher que pour un hébergement mutualisé classique mais c'est une solution très idéal si on a pas le temps de s'occuper de cette partie là.

  Pour ce MON on va utiliser Themecloud qui est devenu faaaster. pour les raisons suivantes :

  • on a un site WordPress en ligne immédiatement et gratuit pour 30 jours
  • le site est rapide, sécurisé et sauvegardé tous les jours
  • on a un support réactif

4. Se connecter au bashboard WordPress

Dans la formation ils nous dises d'ajouter /wp-admin après l'adresse du site. Ca fonctionnait peut-être avec Themecloud mais pas avec faaaster. Il suffit de cliquer sur "Se connecter au site" lorsque l'on est sur la page de notre hébergeur pour le site en question.

Voilà on est bien dans le mode admin ! On va pouvoir naviguer depuis le dashboard WordPress.

On survole le nom du site en haut à gauche et on clique sur "Dashboard" pour accéder à l'interface d'administration WordPress.

WordPress propose deux types de contenus de base : les articles et les pages. Les articles sont des contenus d'actualité, datés, et sont généralement présentés de manière antéchronologique sur une page spécifique, constituant ainsi un blog. Les pages, en revanche, sont des contenus statiques qui ne sont pas datés et conservent une valeur constante dans le temps. Elles sont utilisées pour présenter des informations permanentes telles que la société, les services ou les coordonnées de contact, et sont généralement accessibles via un menu de navigation sur le site web.

On va créer notre premier article. Pour cela on survole "Posts" puis on clique sur "Add new"

On arrive alors sur cette page :

Je créer mon premier post que j'ajoutes dans la Catégorie Weekend :

WordPress propose également deux systèmes de classification par défaut : les catégories et les tags.

Les catégories sont hiérarchisées et permettent de structurer le contenu dans une arborescence.

Les tags, en revanche, ne suivent pas de hiérarchie et reflètent souvent les thèmes abordés dans le contenu.

Gutenberg est le nouvel éditeur visuel de WordPress, basé sur le concept de "blocs". Il offre la possibilité de créer des mises en page complexes en utilisant une interface de type "drag and drop".

Enfin, les articles et les pages peuvent être enregistrés en brouillon, publiés en mode privé, ou planifiés pour une publication ultérieure.

5. Paramétrage du site WordPress

Pour passer notre site WordPress en français, il faut aller dans "Réglages" puis "Général". On sélectionne ensuite la langue désirée dans le menu déroulant sous "Langue".

On modifie le titre et le slogan de notre site pour les rendre plus accrocheurs et optimiser le référencement. On peut le faire dans la même section "Réglages" >> "Général".

Il faut s'assurer de choisir une catégorie par défaut pour les articles et cacher éventuellement le site aux moteurs de recherche pendant le développement. Ces réglages se trouvent sous "Réglages" >> "Écriture" et "Réglages" >> "Lecture" respectivement.

Il faut configurer les paramètres de commentaires selon les besoins sous "Réglages" >> "Discussion".

Enfin, on ajuste les permaliens pour optimiser les URL du site. Cela se fait sous "Réglages" >> "Permaliens".

Il est important de garder à l'esprit la cohérence et la facilité d'utilisation pour les visiteurs tout en optimisant le référencement du site.

6. Page d'accueil personnalisée et menu de navigation

Avant de pouvoir configurer la page d'accueil, il est nécessaire de la créer. Pour ce faire, on se rend dans l'onglet "Pages" puis on clique sur "Ajouter". On donne un titre à la page, par exemple "Banana WordPress Design" (moi j'ai choisis "Clapas & Bartas" le nomde l'école de VTT), et on saisie une description dans la zone de contenu. Une fois terminé, on clique sur "Publier" pour créer la page.

On répéte cette opération pour créer une page dédiée à notre blog. Pour cette page, on ne saisis aucun contenu, car elle affichera automatiquement la liste des articles publiés sur le site.

Maintenant que nos pages sont créées, on va dans "Réglages" puis "Lecture" pour configurer la page d'accueil et la page de blog. Sous l'option "La page d'accueil affiche",on choisis "Une page statique" et on sélectionnes notre page d'accueil et notre page de blog respectivement.

Une fois ces paramètres enregistrés,on vérifie notre site pour voir les changements. La page d'accueil affichera le contenu que l'on a saisi, mais pour accéder à la page du blog, il faut créer un menu de navigation.

On se rend dans "Apparence" puis "Menus". On crée un nouveau menu en lui donnant un nom, par exemple "Principal", et on sélectionne l'emplacement "Supérieur".

Ensuite, on ajoute les pages que l'on a créées précédemment à ce menu en les sélectionnant dans la colonne de gauche et en cliquant sur "Ajouter au menu". On peut réorganiser l'ordre des pages en les faisant glisser et les déposer. On enregistre ensuite le menu.

Une fois le menu créé et enregistré, on peut visiter à nouveau votre site pour voir le menu de navigation qui s'affiche.

7. Type de site

Maintenant que nous avons exploré l'interface d'administration de WordPress, nous sommes prêts à nous lancer dans notre projet. WordPress tire sa force de sa variété de composants, tels que les thèmes et les plugins, qui permettent de personnaliser et d'enrichir les fonctionnalités de notre site.

La première étape consiste à définir clairement le type de site que nous souhaitons créer, puis à installer et configurer les composants les plus adaptés à nos besoins.

Avant de commencer la création du site, il est essentiel de définir les objectifs spécifiques que nous souhaitons atteindre. Cela peut inclure des objectifs tels que générer des contacts commerciaux, offrir un design attrayant et professionnel, faciliter les interactions avec les visiteurs via un formulaire de contact et encourager l'abonnement à une newsletter.

Il est également crucial de prendre en compte le référencement dès le début du processus. Cela implique de sélectionner des expressions de recherche pertinentes sur lesquelles se positionner et de structurer le contenu en conséquence pour améliorer la visibilité dans les résultats des moteurs de recherche.

Une fois les objectifs et les expressions de recherche définis, nous pouvons passer à la structuration du site. Cela implique de créer une arborescence des pages en regroupant les informations de manière logique et cohérente, en tenant compte des objectifs et des expressions de recherche ciblées.

Pour faciliter la visualisation de la structure des pages, il est recommandé de créer des wireframes, des schémas simples qui représentent la disposition des éléments sur chaque page. Cela peut être fait à l'aide d'outils dédiés ou simplement avec un crayon et du papier.

En résumé, avant de commencer la création de notre site WordPress, il est crucial de définir clairement nos objectifs, de prendre en compte le référencement dès le départ, de structurer le contenu de manière logique et cohérente, et de planifier la disposition des éléments sur chaque page à l'aide de wireframes.

Structure de mon site :

• Accueil Présenter les services. Rassurer sur les compétences. Inciter à prendre contact.

• Sorties proposées Présenter les prochaines sorties. Informer sur les prix. Possibilité de s'inscrire.

• Contact Formulaire de contact >> pour faciliter la prise de contact. Téléphones portables accessibles pour prendre contact avec les moniteurs.

8. Thèmes et page builder

Le thème est crucial, car il détermine l'apparence du site et ses fonctionnalités, comme la structure de l'en-tête, du contenu, du pied de page et des barres latérales.

Un page builder facilite la création de pages avec des fonctionnalités avancées en glisser-déposer, offrant une visualisation en temps réel des modifications.

Il existe trois types de thèmes : gratuit, freemium et premium, chacun avec ses avantages et ses limitations. Les thèmes spécialisés et les thèmes multipurpose offrent des fonctionnalités variées adaptées à différents types de sites.

Lors du choix d'un thème, il est essentiel de prendre en compte des aspects tels que la dernière mise à jour, les notes et les commentaires, la rapidité de chargement, la compatibilité multilingue, le support, la source, la qualité du design et des fonctionnalités.

Pour notre projet, nous optons pour le thème OceanWP, compatible avec le page builder Elementor, en raison de sa flexibilité et de sa compatibilité avec nos besoins.

En personnalisant un thème, il est recommandé d'utiliser un thème enfant pour éviter la perte de personnalisations lors des mises à jour.

9. Installation et configuration du thème

Pour installer notre thème WordPress, on va dans Apparence >> Thèmes >> Ajouter. On recherche le thème OceanWP dans la bibliothèque WordPress.org et on clqiue sur "Installer". Une fois installé, on l'active en un clic.

Si on choisi un thème premium ou non disponible sur WordPress.org, on aurait dû téléverser l'archive (.zip) du thème.

Après l'activation, on installe les extensions recommandées en cliquant sur "Commencez à installer les extensions" dans la notification du dashboard. On sélectionne toutes les extensions, on les installes et on les actives.

Pour gagner du temps, on utilise l'Assistant de configuration d'OceanWP pour importer une démo de site prête à l'emploi.On a choisi le modèle de démo souhaité, on installe les extensions requises (sauf les extensions premium), puis on clique sur "Installer cette démo".

Notre site sera alors identique à la démo choisie. On dispose maintenant d'une base solide pour commencer à construire nos pages.

10. Extensions WordPress

Une extension WordPress est un ajout à WordPress qui permet d'intégrer des fonctionnalités supplémentaires non incluses nativement. Elles peuvent être gratuites ou payantes et sont disponibles dans la bibliothèque WordPress.org ou en dehors.

Lors de l'installation d'OceanWP, des extensions comme "WP Forms" sont incluses. Celles-ci ajoutent des fonctionnalités spécifiques telles que la création de formulaires de contact. Il existe d'autres extensions similaires comme Caldera Forms, Ninja Forms ou Gravity Forms, recommandée pour des formulaires plus complexes.

Certaines extensions sont dédiées à des composants WordPress spécifiques, comme Ocean Extra pour OceanWP ou les addons pour Elementor, le page builder utilisé. Les critères de sélection des extensions sont similaires à ceux des thèmes, et il est crucial de choisir celles qui répondent le mieux à vos besoins.

Il existe deux types d'extensions : les standards, qui ajoutent des fonctionnalités essentielles à la plupart des sites web, et les spécifiques, répondant à des besoins précis du projet. Pour notre exemple, nous choisissons des extensions telles que "SEO Press" ou "Yoast SEO" pour le référencement naturel, "Broken Link Checker" pour les liens cassés, etc.

Il faut faire attention à ne pas surcharger votre site en extensions inutiles, car cela peut affecter sa performance et la gestion des mises à jour. Il est important de sélectionner judicieusement les extensions nécessaires, de désactiver et de supprimer celles qui ne sont pas utilisées, et d'éviter d'installer plusieurs extensions pour la même fonctionnalité.

11. Design global du site

Dans ce chapitre, nous apprenons à définir une charte graphique pour notre site web. Voici un résumé des étapes que nous devons suivre :

1. Trouver une inspiration : Nous recherchons des sites d'inspiration pour définir une identité graphique cohérente. Des sites comme Dribbble, CollectUI, ou des comptes Instagram spécialisés dans le design peuvent être utiles.

1. Définir une palette de couleurs : Nous utilisons des outils en ligne comme Paletton ou ColorMind pour créer une palette de couleurs, en nous basant sur une image d'inspiration. Cette palette servira de base pour les choix de couleurs sur le site.

Le seul bémol pour la première palette est le rose qui je pense ne correspond pas assez à la cible visé (enfant/adolescent masculin pour la plus part), je préfère passer à un orange tout aussi flashy mais qui sera plus adapté.

1. Choisir des polices de caractères : Nous optons pour des polices gratuites disponibles sur Google Fonts, en sélectionnant une police pour les titres et une autre pour le corps de texte.

2. Choisir un master visuel : Nous sélectionnons une image ou une photo qui représente notre marque et son ambiance générale. Cette image sera utilisée comme élément visuel principal sur le site. J'ai trouvé différentes images inspirantes sur le site unsplash.fr.

3. Créer un logo : Si nous ne sommes pas graphistes, nous optons pour la simplicité en créant un logo avec le nom de la marque et éventuellement une icône simple. Des sites comme FreePik ou des outils en ligne comme Snappa ou Canva peuvent être utiles pour créer un logo professionnel. J'ai travaillé sur Canva pour obtenir ce logo :

4. Paramétrer les options du thème : Nous utilisons le customizer de WordPress pour intégrer les éléments de notre charte graphique dans le thème. Cela inclut l'ajout du logo, la définition des palettes de couleurs et des polices de caractères, ainsi que la configuration du layout des pages.

En suivant ces étapes, nous pouvons créer un design cohérent et professionnel pour notre site web, même sans être des experts en design graphique.

12. Elementor et la page d'accueil

Ce chapitre explique comment utiliser le page builder Elementor pour modifier et personnaliser les pages de notre site WordPress, en mettant particulièrement l'accent sur la page d'accueil.

Accès à Elementor :

• Pour éditer une page avec Elementor, on se rend sur la page que l'on souhaite modifier et on clique sur "Modifier avec Elementor".
• Si la page n'est pas encore créée avec Elementor, on clique sur le bouton "Modifier avec Elementor" depuis le tableau de bord.

Interface Elementor :

• L'interface d'Elementor se divise en deux parties : une colonne de gauche avec les fonctionnalités et une zone de prévisualisation à droite.
• On peut ajouter des modules en les glissant depuis la colonne de gauche vers la zone de prévisualisation.

Personnalisation du hero :

• La section "hero" est la première partie de la page, souvent avec un titre accrocheur et un appel à l'action.
• On peut modifier le titre, le sous-titre, et l'image de fond en utilisant les options disponibles dans Elementor.

Personnalisation des boutons :

• Les boutons peuvent être stylisés en changeant leur forme, couleur, et texte.
• On peut également ajouter des animations aux boutons pour un effet visuel supplémentaire.

Personnalisation du contenu :

• On peut personnaliser le contenu de chaque section en modifiant les titres, textes, images, etc.
• On utilises les options disponibles dans Elementor pour ajuster le style et la mise en page selon nos besoins.

Adaptation pour différents écrans :

• On s'assure d'adapter le design pour les écrans mobiles et tablettes en modifiant les paramètres spécifiquement pour ces tailles d'écran.

Conseils supplémentaires :

• On utilise les fonctionnalités avancées d'Elementor pour explorer davantage de possibilités de personnalisation.
• On ajoute d'autres pages à notre site en utilisant des templates gratuits disponibles dans Elementor ou via l'extension Envato Elements.

En suivant ces étapes et en explorant les fonctionnalités d'Elementor, on peut créer des pages personnalisées et attrayantes pour notre site WordPress.

Voilà un aperçu de ce que j'ai fait :

13. Fonctionnalités complémentaires grâce aux extensions

Ce chapitre explique comment ajouter un formulaire de contact à un site WordPress en utilisant l'extension WP Forms.

Introduction du formulaire de contact :

• Ajouter un formulaire de contact est crucial pour permettre aux visiteurs de soumettre des demandes.
• WP Forms est choisi pour sa simplicité d'utilisation et sa capacité à enregistrer automatiquement les soumissions en base de données.

Création du formulaire :

• Accéder à la rubrique "WP Forms" dans le tableau de bord WordPress.
• Cliquer sur "Nouveau" et créer un formulaire nommé "contact" en choisissant le modèle "Formulaire de contact simple".
• Personnaliser le formulaire en ajoutant et en organisant les champs selon les besoins.

Réglages du formulaire :

• Modifier les libellés généraux et configurer les notifications par e-mail pour être alerté des soumissions.
• Utiliser des balises pour personnaliser les e-mails en fonction des données saisies.
• Configurer un message de confirmation automatique pour les visiteurs.

Insertion du formulaire dans la page :

• Utiliser un shortcode pour insérer le formulaire dans une page ou un article.
• Coller le shortcode dans la zone de contenu de la page.
• Pour les utilisateurs d'Elementor, ajouter un composant de code court et y coller le shortcode.

Utilisation d'un widget :

• Certains plugins génèrent des widgets utilisables dans les page builders comme Elementor.
• Rechercher et glisser le widget "WP Forms" dans la section souhaitée.
• Choisir le formulaire à afficher à l'aide du menu contextuel.

Ensuite, le chapitre explique comment ajouter un pop-up d'inscription à une newsletter en utilisant le plugin Hustle. Les étapes incluent l'installation du plugin, la création d'un pop-up, la personnalisation des paramètres et la publication du pop-up. Mais je n'ai pas jugé utile d'ajouter cette fonctionnalité à mon site.

Enfin, le chapitre se termine par des conseils sur l'importance de sauvegarder régulièrement le site avec l'extension Updraft Plus, en téléchargeant une sauvegarde manuelle sur la machine et en planifiant des sauvegardes automatiques sur Google Drive.

14. Fonctionalités avancées

Ce chapitre explique comment configurer une page d'attente personnalisée ainsi que la création de headers et footers sur mesure avec Elementor et OceanWP, et l'ajout de CSS personnalisés.

Page d'attente personnalisée :

• Deux solutions sont présentées pour rendre un site inaccessible au public jusqu'au lancement : utiliser une extension spécialisée ou créer une page personnalisée avec Elementor.
• Pour créer une page d'attente avec Elementor, on se rend sur Elementor > Mes modèles , on crée un nouveau modèle de type "Page" et on la personalise selon nos besoins.
• Ensuite, on va dans Elementor > Outils, on sélectionne l'onglet "Maintenance", on choisis "Arrivée bientôt" et on utilise le modèle créé précédemment.

Header et footer personnalisés avec Elementor et OceanWP :

• OceanWP permet de créer des headers et footers avec Elementor pour des designs complexes.
• Pour créer un header personnalisé, on va dans Theme Panel > Ma bibliothèque, on crée un nouveau modèle de type "Header", on le personnalise avec Elementor en ajoutant le menu, puis l'applique dans le customizer.
• Le même processus est applicable pour le footer.

Ajout de CSS personnalisés :

• L'ajout de règles CSS personnalisées est possible dans la section "CSS et JS personnalisés" du customizer.
• Il est nécessaire d'avoir des bases en CSS pour utiliser cette fonctionnalité.
• Les éléments peuvent être ciblés en attribuant des classes CSS dans Elementor ou en utilisant l'inspecteur du navigateur.

Création de types de contenus personnalisés :

• Pour des sites plus complexes, la création de types de contenus personnalisés est nécessaire.
• L'extension CPT UI permet de créer facilement des types de contenus personnalisés.
• Les types de contenus peuvent être utilisés pour créer des sections comme des testimoniaux ou des portfolios.
• Les contenus de type portfolio peuvent être affichés avec des addons Elementor comme "Livemesh Addons for Elementor" en utilisant le widget "Posts Grid" pour afficher une liste de contenus.

En suivant ces étapes, il est possible de personnaliser efficacement différents aspects d'un site WordPress avec Elementor et OceanWP, tout en utilisant des fonctionnalités avancées telles que les pages d'attente, les headers et footers personnalisés, l'ajout de CSS personnalisés et la création de types de contenus personnalisés.

15. Optimisation du SEO et suivi du traffic

Ce chapitre aborde les principaux axes d'optimisation SEO, en se concentrant sur les optimisations off site et on site, ainsi que sur l'utilisation de l'extension SEO Press pour optimiser le contenu et les paramètres globaux.

Optimisations off site :

• Ces optimisations se font en dehors du site et incluent des actions telles que la déclaration du site sur Google Search Console, la création d'un profil Google My Business, et l'acquisition de liens entrants de qualité.

Optimisations on site:

• Celles-ci concernent les éléments directement optimisables sur le site, comme le contenu, le balisage, etc.
• Des facteurs importants incluent la qualité du contenu, l'inclusion du mot-clé principal dans le nom de domaine, et l'optimisation des titres et descriptions de page.

Utilisation de SEO Press :

• L'extension SEO Press est présentée comme un outil utile pour optimiser le site WordPress.
• Les recommandations globales incluent la mise en place d'un certificat SSL, la gestion du flux RSS, l'augmentation du nombre d'articles par page, et la création d'un compte Google My Business.
• Différents modules optionnels sont disponibles pour gérer les titres et métas, le plan de site, les réseaux sociaux, Google Analytics, etc.

Optimisation des contenus avec SEO Press :

• L'extension permet d'optimiser le SEO pour chaque page ou article du site.
• Des recommandations sont fournies pour des éléments tels que le nombre de mots sur la page, le titre de l'article, les titres de niveaux deux et trois, ainsi que les balises titre et métadescription.

En suivant ces conseils et en utilisant l'extension SEO Press, il est possible d'améliorer significativement le classement et la visibilité du site sur les moteurs de recherche.

16. Temps de chargement

Ce chapitre aborde l'importance de mesurer et d'optimiser le temps de chargement d'un site web.

Vérification du temps de chargement :

• Un temps de chargement lent peut entraîner une perte de revenus et affecter le classement SEO du site.
• Des outils comme GT Metrix permettent de mesurer le temps de chargement et fournissent des indicateurs de performance importants tels que le Largest Contentful Paint, le Total Blocking Time et le Cumulative Layout Shift. Voici ce que j'obtiens pour mon site.

Optimisation du temps de chargement:

• La mise en place d'une solution de cache est recommandée pour stocker temporairement les pages et les délivrer plus rapidement aux visiteurs.
• Il est également conseillé d'optimiser le chargement des ressources statiques (fichiers JS et CSS) en les minifiant, les concaténant et en les préchargeant.
• Des extensions comme WP Rocket, WP Super Cache, et W3 Total Cache peuvent être utilisées à cet effet.

Nettoyage de la base de données :

• Les bases de données surchargées peuvent ralentir les chargements. Des outils d'optimisation comme ceux inclus dans WP Rocket et Autoptimize peuvent aider à nettoyer et optimiser la base de données.

Optimisation des images :

• Les images non optimisées sont une cause fréquente de temps de chargement prolongé. Il est recommandé de compresser les images avant de les importer dans WordPress.
• Des plugins comme Imagify et ShortPixel peuvent être utilisés pour optimiser les images automatiquement.

Utilisation des bonnes tailles d'images :

• Il est important d'utiliser des tailles d'images appropriées pour éviter de surcharger le chargement de la page.
• WordPress génère automatiquement différentes tailles de miniatures pour les images, qui peuvent être sélectionnées en fonction de la taille d'affichage souhaitée.

En suivant ces recommandations, il est possible d'optimiser efficacement le temps de chargement du site et d'améliorer ainsi l'expérience utilisateur et le classement SEO.

17. Vérifications avant lancement

Ce chapitre énumère les vérifications essentielles à effectuer avant de lancer votre site :

Supprimer les contenus non utilisés:

• Les articles et pages de démo importés doivent être supprimés ou mis en brouillon pour éviter d'être indexés par les moteurs de recherche.

Vérifier l'affichage sur tous les écrans :

• On vérifie que nos pages s'affichent correctement sur tous les types d'écrans, en particulier sur les appareils mobiles (50% du traffic).

Assurer l'accessibilité :

• On veille à ce que notre site respecte les bonnes pratiques d'accessibilité pour être accessible à tous, y compris aux personnes souffrant de handicaps.

Vérifier les liens cassés :

• On utilise un plugin pour détecter et corriger les liens cassés sur notre site.

Tester les formulaires :

• On vérifie que tous les formulaires, notamment le formulaire de contact, fonctionnent correctement avant de mettre le site en ligne.

Activer la visibilité aux moteurs de recherche :

• On désactive l'option de blocage des moteurs de recherche pour que votre site soit indexé avant le lancement.

Créer les pages légales obligatoires :

• On s'assure de créer les pages contenant les informations légales obligatoires, telles que les mentions légales et la politique de confidentialité conforme au RGPD.

Protéger le site des hackers :

• On installe un plugin de sécurité tel que Wordfence ou SecuPress et modifiez l'URL de connexion pour renforcer la sécurité de votre site.

En suivant ces vérifications, on s'assure que notre site est prêt à être lancé tout en garantissant sa sécurité, son accessibilité et sa conformité aux réglementations en vigueur.

18. Connexion nom de domaine

J'arrive un peu trop tôt, je n'aurais donc pas la méthode pour faaaster dans ce chapitre.

Ce chapitre guide sur la configuration du nom de domaine pour notre site avant de le mettre en ligne. Voici les étapes à suivre :

Récupération des enregistrements requis par l'hébergeur:

• L'hébergeur fournira les enregistrements DNS à configurer sur notre domaine. Si on utilise Themecloud, on pourra le faire depuis l'interface de gestion.

Modification des enregistrements DNS :

• On accède à la page de modification des enregistrements DNS de votre fournisseur de domaine et on met à jour les enregistrements requis. On peut utiliser des services externes comme Cloudflare pour bénéficier de fonctionnalités supplémentaires.

Attente de la propagation des DNS et modification des URL en base de données :

• On attend que les nouveaux enregistrements DNS se propagent sur le réseau. Une fois cela fait, Themecloud mettra automatiquement à jour les URL en base de données. Sinon, on utilise un script comme Search Replace par Inteconnect.it pour le faire manuellement.

Finalisation des configurations :

• On configure Google Analytics en créant un compte et une propriété pour notre site. On utilise SEOPress pour activer le suivi Google Analytics et remplir les informations nécessaires pour le consentement RGPD.
• On configure Google Search Console en créant un compte et une propriété pour votre domaine. On utilise les méthodes de validation proposées par Google, telles que le dépôt d'un fichier à la racine du site ou l'ajout d'une balise meta dans le header HTML des pages.

En suivant ces étapes, vous pouvez connecter votre nom de domaine final à votre site et finaliser les configurations nécessaires avant de le mettre en ligne.

Conclusion

Et voilà le site est désormais opérationnel, référencé sur Google, et l'audience est suivie grâce à Google Analytics.

Cependant, il est crucial de maintenir une publication régulière de contenu, d'analyser le trafic et le positionnement SEO, et de rester à jour avec les mises à jour de WordPress et de ses extensions.

Voilà les compétences que le cours a permis d'explorer :

• Déployer un site WordPress sur un hébergement.
• Maîtriser l'administration de WordPress.
• Configurer un thème et des extensions WordPress.
• Personnaliser le contenu et le design de notre site WordPress.
• Optimiser la configuration de notre site WordPress.

Horodateur