WordPress est aujourd’hui l’une des plateformes les plus utilisées pour créer des sites web en raison de sa simplicité, de sa flexibilité et de sa convivialité.
En choisissant WordPress pour votre projet de développement de site, vous avez pris une bonne décision.
Avant de commencer le développement d’un site WordPress, il est important de prendre en compte toutes les spécifications demandées par le client, telles que le choix de design, le type de site (vitrine, boutique en ligne, etc.), la nécessité d’un site multilingue et les services externes nécessaires pour le marketing et le commerce électronique.
Après avoir pris en compte toutes ces informations, une liste de tâches pour chaque étape de développement peut être élaborée. Chaque tâche est décrite en détail, accompagnée d’une estimation proposée pour la durée de l’exécution. En suivant cette liste de tâches, il est possible de garantir un processus de développement efficace et sans problème pour le site WordPress.
Configuration de l’environnement de travail
1 – Création des différents environnements de travail
La création des différents environnements de travail est une étape essentielle dans tout projet de développement de logiciel. Ces environnements permettent aux équipes de travailler de manière isolée, sans affecter le travail des autres membres de l’équipe.
Les trois principaux environnements de travail sont :
L’environnement de développement : c’est là où les développeurs créent et testent le code avant qu’il ne soit prêt à être déployé. Cet environnement doit être configuré de manière à reproduire le plus fidèlement possible l’environnement de production.
L’environnement de préproduction : aussi appelé environnement de staging ou de test, cet environnement est utilisé pour tester les fonctionnalités et les performances du logiciel avant de le déployer en production.
L’environnement de production : c’est l’environnement où le logiciel est déployé et utilisé par les utilisateurs finaux.
Concernant Bitbucket, il est recommandé de créer trois branches principales :
La branche Master : c’est la branche principale du projet, où le code final est stocké après avoir été validé et testé. Cette branche ne doit être modifiée que par les administrateurs du projet.
La branche Staging : c’est la branche où les développeurs testent les nouvelles fonctionnalités avant de les intégrer à la branche Master.
La branche Dev : c’est la branche où les développeurs travaillent sur les fonctionnalités à venir et où les nouvelles fonctionnalités sont développées avant d’être intégrées à la branche Staging
2. Installation et configuration de WordPress sur l’environnement de travail
L’installation et la configuration de WordPress sur l’environnement de travail est une étape cruciale pour le développement d’un site web.
L’équipe de développement doit installer WordPress en local et le responsable du projet doit effectuer la configuration basique du site web, comme le titre du site, le fuseau horaire, le nom de thème et les paramètres de permaliens.
Les extensions de base, telles que WPBakery Page Builder et Plugin SMTP, doivent également être installées et activées. Le thème « OnCode Starter Theme » est installé et activé sur les différents environnements de travail, avec deux thèmes de base prêts à être utilisés pour le type de site, que ce soit un thème WooCommerce ou un thème standard.
3. Configuration Mailtrap sur l’environnement Développement
La configuration de Mailtrap est nécessaire pour tester les courriels sans les envoyer réellement. Pour cela, il faut installer et configurer un plugin de gestion de l’SMTP avec Mailtrap.
Le compte Mailtrap utilisé doit être celui de l’entreprise. Il est également important de configurer Mailtrap en local et sur les environnements de développement. Les informations SMTP sont documentées dans le wiki du projet. Enfin, il est supposé qu’une « mailbox » est configurée pour le client dans Mailtrap.
Personnalisation du thème basique WP
La création du thème WP est une étape primordiale pour le développement d’un site WordPress.
Elle consiste à effectuer la configuration initiale du thème et à développer les modèles de base des pages du site en se basant sur notre thème de démarrage « OnCode Starter Theme ».
1- Personnalisation du thème
Avant de commencer cette étape, le design du site doit être validé ou fourni par le client.
En utilisant le thème Starter de OnCode comme base, l’équipe de développement établit la structure globale du site, en définissant les classes globales, la typographie, les couleurs principales ainsi que l’affichage des boutons et des liens.
Le thème Starter est personnalisé pour correspondre à la charte graphique préparée par l’équipe de design. De plus, une page générale nommée « Assets » est créée pour rassembler tous les composants nécessaires qui s’intègrent parfaitement à la charte graphique.
Cette étape est cruciale pour assurer une cohérence visuelle sur l’ensemble du site.
2- Création de header et footer
La création du header et footer est une étape cruciale dans la mise en place d’un site web. En se basant sur le design validé par le client, l’équipe de développement crée le header et le footer du site en utilisant deux fichiers distincts : header.php et footer.php.
Le header est composé de plusieurs éléments tels que le menu principal du site en version desktop, ainsi qu’un menu spécifique pour la version responsive du site pour garantir un affichage optimal sur les différents appareils.
De même, le footer est créé et affiché sur toutes les pages de test. Cette étape permet d’avoir une structure solide pour le site avant de commencer le développement des pages individuelles.
Création des pages web
Le contenu est un élément clé pour tout site web. Il doit être attractif, pertinent, compréhensible et adapté aux visiteurs ainsi qu’aux moteurs de recherche.
Dans cette phase, les constructeurs de pages tels que WPBakery Page Builder seront utilisés pour créer les différentes pages nécessaires à l’implémentation du site web. Ces pages incluent la page d’accueil, la page contact, la page politique de confidentialité, la page de mentions légales, etc.
L’utilisation de ces constructeurs de pages permettra de créer facilement et rapidement des pages de qualité tout en garantissant une expérience utilisateur agréable.
1- Création de la page d’accueil
La page d’accueil est l’une des pages les plus importantes d’un site web, car elle présente les principales fonctionnalités de ce dernier. Pour cela, plusieurs sections sont souvent intégrées pour mettre en valeur ces fonctionnalités.
Dans cette phase, la page d’accueil est créée avec tous ses composants intégrés. Si nécessaire, une nouvelle template de page, telle que 1blank.php, peut être créée pour faciliter le processus de création.
Cette étape est essentielle pour donner une première impression positive aux visiteurs et les inciter à explorer davantage le site web.
2- Création des pages internes
Dans cette phase, les pages internes restantes telles que la page contact, la politique de confidentialité, les mentions légales, les conditions générales de vente et la page des articles sont créées.
Le contenu de chaque page est intégré et les configurations nécessaires, comme l’installation du plugin Contact form 7 pour la page de contact, sont effectuées. Si besoin est, des templates WordPress spécifiques peuvent être créés pour les pages nécessitant un contenu dynamique.
Les pages sont testées pour s’assurer qu’elles remplissent leur objectif et que toutes les fonctionnalités sont bien fonctionnelles, y compris l’envoi d’e-mails pour la page de contact.
Pour cette phase, le client doit fournir le design des pages ainsi que leur contenu, ainsi que le choix de design des e-mails en cas de besoin.
3- Création de page d’inscription/connexion (au besoin)
L’étape de création de la page d’inscription/connexion est importante pour les sites nécessitant une authentification pour accéder à un contenu défini.
Selon les besoins du client, l’inscription peut se faire par courriel et mot de passe ou via les réseaux sociaux.
Les pages et les formulaires d’inscription et de connexion sont créés et le processus est testé avec succès pour tous les cas d’utilisation, tels que la modification de mot de passe et la récupération de mot de passe oubliés. Le design des pages est validé ou fourni par le client.
4- Rendre le thème responsive
La version responsive d’un site web est essentielle pour garantir une expérience utilisateur optimale sur tous les appareils.
Dans cette étape, le thème est rendu responsive en vérifiant que tous les éléments sont correctement positionnés sur les différentes tailles d’écran et en effectuant les ajustements nécessaires.
Fonctionnalités avancées
Chaque projet de site web est unique et peut nécessiter des fonctionnalités spécifiques qui demandent un développement personnalisé. Les étapes nécessaires pour répondre à ces besoins varient en fonction des exigences de chaque projet, telles que définies dans le cahier des charges.
1- Création des nouveaux types personnalisés (CPT) (facultative)
La création de nouveaux types personnalisés (CPT) est une étape optionnelle qui peut être nécessaire selon les besoins spécifiques de chaque site web. Cette étape permet d’étendre les fonctionnalités de base de WordPress et d’ajouter des caractéristiques bien spécifiques à chaque projet.
Une template de page spécifique peut être créée pour chaque type personnalisé. Les fonctionnalités attendues de ce CPT doivent être implémentées et testées, avec la création de la page Archive et la page « Single ». Le client doit fournir les caractéristiques du nouveau type et valider le design des pages en relation avec ce nouveau type.
2- Développement d’une extension WordPress
Lorsque les extensions disponibles dans la bibliothèque de WordPress ne suffisent pas à répondre aux besoins d’un projet spécifique, il peut être nécessaire de développer une extension personnalisée. Ces extensions peuvent implémenter des fonctionnalités uniques et complexes pour atteindre un objectif spécifique. Par exemple, une extension pour améliorer l’expérience utilisateur d’un site e-commerce ou pour utiliser des APIs de plateformes externes.
Intégration de WooCommerce
Si le type de site est une boutique en ligne, la solution la plus utilisée avec WordPress est l’extension WooCommerce. Elle offre une gestion complète d’un site e-commerce, de la création de la boutique à la gestion des produits, des commandes et des paiements. C’est une solution populaire et appréciée par les utilisateurs.
1- Installation de WooCommerce
Une fois l’extension WooCommerce est installée, il est important de paramétrer la boutique en ligne en fonction des besoins du client, tels que les devises à activer, les pays pris en charge, les adresses e-mail, les politiques d’expédition et de remboursement, les méthodes de paiement, les autorisations de coupons, etc.
Ensuite, il est recommandé de créer un contenu de test comprenant des produits de test et des comptes clients pour s’assurer que tout fonctionne correctement.
2- Intégration de la page catalogue
L’intégration de la page catalogue est une étape importante dans la création d’un site e-commerce. Cette page doit être créée conformément au design proposé et doit contenir un filtre avancé fonctionnel pour faciliter la recherche des produits par les visiteurs. Les éléments requis de la part du client sont le design de la page catalogue.
3- Intégration de la page produit (single product)
La création de la page produit est effectuée en suivant le design proposé par le client.
Cette page contient tous les détails d’un produit, avec des fonctionnalités telles que l’effet zoom, la section « Produit en vedette », des onglets pour les détails du produit, la section « Produits en relation », « Produits les plus vus » et « Produits de même catégorie ». Toutes les fonctionnalités de la page produit sont testées et fonctionnelles.
4- Intégration de la page panier et Checkout
Cette tâche implique la création de la page panier et la page Checkout sur le site WooCommerce.
La page Checkout est cruciale dans le processus d’achat en ligne et doit inclure toutes les étapes nécessaires pour finaliser l’achat. La page doit également inclure la configuration des méthodes de paiement et de livraison selon les exigences du client.
La page panier doit contenir une liste des produits avec des mises à jour instantanées. Les pages doivent être personnalisées selon le design proposé et tout le processus d’achat doit être testé pour assurer leur bon fonctionnement.
5- Intégration des pages mon compte
La tâche d’intégration des pages mon compte consiste à personnaliser les pages de détails de compte, de commandes, d’adresses, etc., afin que les utilisateurs puissent gérer leur compte et suivre leurs achats.
Les utilisateurs doivent également se connecter pour acheter des produits via la page de connexion. Cette tâche vise à offrir une expérience utilisateur personnalisée et fluide sur le site de commerce électronique.
6- Personnalisation des e-mails WooCommerce
Cette tâche consiste à personnaliser les différents e-mails WooCommerce nécessaires pour informer les clients et l’administration du site web sur l’état des commandes et les demandes de devis.
Selon les besoins du client, un design spécifique peut être ajouté aux e-mails. Il est important de valider que tous les e-mails nécessaires sont bien reçus et que le modèle de courriel personnalisé est conforme aux attentes du client, y compris l’ajout du logo du site, des couleurs principales et de la signature.
Les éléments requis du client incluent la structure et le design des e-mails, la liste complète des e-mails à envoyer et la liste des e-mails destinataires validée.
Traduction de site (site multilingue)
WordPress ne propose pas de solution multilingue par défaut, ce qui nécessite l’utilisation d’une extension telle que WPML pour traduire le contenu du site. WPML est une solution payante mais populaire pour la traduction de contenu.
Pour travailler avec WPML, les trois extensions suivantes sont généralement nécessaires : WPML Multilingual CMS pour la traduction de pages et d’articles, WPML String Translation pour la traduction de chaînes affichées dans le site, et Media Translation pour la traduction de ressources médias.
1- Installation et configuration des extensions WPML
Avant de commencer à traduire le contenu d’un site WordPress, il est important d’installer et de configurer les extensions WPML Multilingual CMS, WPML String Translation et Media Translation. Ces extensions permettent de traduire les pages, les articles, les médias et autres éléments affichés sur le site dans différentes langues.
Il est important de vérifier que les extensions sont correctement installées et configurées avant de commencer la traduction. Le client doit fournir des informations sur les langues du site, la langue par défaut et le choix d’utiliser des sous-domaines ou des sous-dossiers pour les différentes langues.
2- Traduction des menus
La traduction des menus implique de traduire le contenu des menus proposé par le client dans les différentes langues demandées. Cette tâche permet d’assurer que les menus sont bien affichés dans les différentes langues du site et que la synchronisation est correcte.
Pour mener à bien cette tâche, le client doit fournir le texte traduit des menus qu’il souhaite afficher dans chaque langue.
3-Traduction des widgets
Cette tâche a pour objectif de traduire tous les widgets du site. Il est important de s’assurer que tous les widgets sont bien traduits dans les langues proposées. Le client devra fournir le contenu traduit des widgets à intégrer dans le site.
4- Traduction des termes et des chaînes de caractères
Cette tâche vise à traduire tous les termes et les chaînes de caractères affichés sur le site, y compris les slugs et les liens. WPML offre une interface conviviale pour effectuer ces traductions.
Après la traduction, une vérification doit être effectuée pour s’assurer que tous les termes sont correctement traduits. Le client doit fournir le contenu nécessaire dans les différentes langues demandées pour que la traduction puisse être effectuée.
5- Traduction de header et footer
Cette tâche consiste à assurer la traduction et la synchronisation de footer et de header. Cela implique la vérification que les textes sont bien traduits dans les langues proposées et que la mise en page et la disposition des éléments sont cohérentes dans toutes les langues.
6- Traduction de toutes les pages de site
La traduction de toutes les pages et les articles est une tâche importante pour assurer un site multilingue. Après la validation de la traduction, il est important de s’assurer que tous les liens redirigent vers le domaine de la langue active.
Le contenu traduit de toutes les pages et tous les articles doit être fourni par le client pour que la traduction soit effectuée avec précision. En fin de compte, la validation que tous les pages et les articles sont bien traduits est une étape importante avant la mise en ligne du site multilingue.
Optimisation du site
Une fois le développement du site terminé, il est crucial d’optimiser sa vitesse et d’améliorer sa sécurité. L’optimisation d’un site web est essentielle pour garantir la meilleure expérience utilisateur, augmenter le nombre de visiteurs et améliorer le référencement naturel.
Avant de commencer à optimiser un site WordPress, il est important de vérifier sa vitesse actuelle. Il existe plusieurs outils tels que Google Page Speed Insights, YSlow, GTmetrix, etc. qui permettent de mesurer et d’évaluer la performance du site.
1- Changement de l’url de la page login
La tâche de changement d’URL de connexion consiste à remplacer l’URL par défaut ‘/wp-admin’ de WordPress par une URL plus sécurisée. Cela permet de renforcer la sécurité du site en empêchant les tentatives de connexion non autorisées.
Pour effectuer cette tâche, l’extension WPS Hide Login est recommandée. Une fois cette extension installée, il suffit de choisir une URL personnalisée pour la connexion à l’espace d’administration.
Le client doit fournir le choix de l’URL souhaitée pour la connexion. Après la réalisation de cette tâche, la connexion à l’espace d’administration se fera via le lien personnalisé choisi.
2- Validation de la comptabilité sur plusieurs navigateurs
Cette tâche vise à assurer que le site web est compatible avec tous les navigateurs et qu’il est affiché et fonctionne correctement sur chacun d’eux. Il est recommandé d’utiliser des outils de test tels que Cross Browser Testing pour faciliter la validation.
Cette étape est essentielle pour garantir une expérience utilisateur optimale et une visibilité maximale du site.
3- Optimisation de PageSpeed Score
Pour valider l’optimisation de la PageSpeed Score, il est essentiel de vérifier que les temps de réponse du site ont été améliorés, que la taille des fichiers JS et CSS a été réduite et que les images sont correctement optimisées.
Il est également important de s’assurer que le CDN est activé si nécessaire et de surveiller régulièrement les espaces disque dur et les configurations du serveur.
Enfin, il est recommandé de mettre en place des notifications automatisées pour suivre l’état du serveur et pouvoir prendre des mesures préventives avant qu’un problème ne survienne.
4- Installation de Google reCaptcha
Une fois l’installation de l’extension Google reCaptcha effectuée, il est important de vérifier que la captcha est bien en place pour l’ensemble des formulaires de contact et pour les formulaires de connexion pour les utilisateurs et les administrateurs.
Il est également crucial de limiter l’API Google Captcha aux domaines utilisés par le projet afin d’éviter toute attaque de spam ou de sécurité.
5- Optimisation de WordPress
Après avoir effectué les améliorations proposées pour optimiser WordPress, il est important de valider si ces changements ont un impact positif sur le temps de chargement du site.
Cette validation permet de s’assurer que les modifications effectuées ont permis d’optimiser de manière significative la performance du site et d’améliorer l’expérience utilisateur.
Des outils de mesure de la vitesse de chargement tels que GTmetrix ou Google PageSpeed Insights peuvent être utilisés pour effectuer cette validation.
6- Optimisation SEO
Cette tâche implique l’installation de l’extension Yoast SEO et sa configuration pour optimiser le référencement naturel du site web. Yoast SEO fournit plusieurs fonctionnalités, telles que l’analyse du contenu, l’optimisation des balises et méta-descriptions, la création de sitemaps XML, etc. Après l’installation, l’extension doit être configurée pour s’adapter aux besoins spécifiques du site.
L’objectif final est d’améliorer la visibilité du site dans les résultats de recherche organiques.
7- Vérification des liens et des emails
La validation de l’ensemble des liens et des adresses e-mail est essentielle pour s’assurer que le site fonctionne correctement. Il est nécessaire de confirmer que tous les liens redirigent vers le bon endroit et qu’il n’y a pas de liens morts.
De plus, toutes les adresses e-mail utilisées doivent être confirmées par le client pour éviter tout problème de livraison. Il est donc important que le client fournisse les adresses e-mail validées pour cette vérification.
8- QA final
La tâche de QA final vise à effectuer tous les tests nécessaires pour assurer la conformité du site par rapport aux maquettes approuvées par le client, ainsi que la validation de toutes les fonctionnalités demandées et leur bon fonctionnement selon les différents cas d’utilisation.
Il est également important de vérifier l’affichage correct sur plusieurs appareils et navigateurs, ainsi que le temps de chargement du site. En outre, la validation de la bonne fonctionnalité sur les différentes langues du site est également importante.
Pour cela, le design de site et un cahier de charge fonctionnel validé par le client sont nécessaires.
Déploiement du site
Après la finalisation de la phase de développement et la validation de qualité sur l’environnement de pré production, le déploiement du site vers l’environnement de production est effectué.
C’est la version en ligne validée par le client et visitée par tous les internautes.
1- Dépoilement sur l’environnement de Production
Une fois toutes les fonctionnalités testées et validées sur l’environnement de Pré Production, la tâche suivante consiste à les déployer sur l’environnement de Production, prêt à être utilisé par les visiteurs du site.
Cette étape nécessite la migration de la base de données de Pré Production, la création d’un compte SendGrid pour la gestion des emails en production, et la modification des URLs pour se conformer au nom de domaine de la production. Enfin, un test final est effectué pour s’assurer que tout fonctionne parfaitement en ligne.
2- Activation de backup
Cette tâche consiste à ajouter le nouveau site web sur la plateforme ManageWP, qui permet de simplifier la gestion et le suivi des sites WordPress.
Une fois le site ajouté, il est important d’activer la sauvegarde des backups pour garantir un meilleur contrôle en cas de problème pouvant survenir sur le site après sa mise en ligne.
Pour cela, il faut installer l’extension ManageWP – Worker sur WordPress et lancer une première sauvegarde pour confirmer que tout fonctionne correctement.
La validation de l’ajout du site sur ManageWP et l’activation de la sauvegarde sont donc des étapes importantes de cette tâche.