Voulez-vous apprendre à corriger les bugs WordPress comme un pro ? Voulez-vous savoir comment je m’y prends personnellement pour fixer les erreurs WordPress en toute confiance pendant mes prestations professionnelles ? Si oui, cet article est fait pour vous !

Ça fait un moment que j’offre des services sur la plateforme de freelancing ComeUp (anciennement 5euros). Je décide de vous écrire aujourd’hui pour vous partager ma petite expérience que j’ai pu avoir sur ComeUp sur la correction des bugs sur les sites WordPress.

Cet article sera sous forme de tutoriel où je vous raconte un peu comment je me suis, à chaque fois, débrouillé pour résoudre efficacement les bugs ou problèmes que rencontrent les sites internet de mes clients.

J’espère que cela sera à la fois instructif et motivant à l’idée que rien n’est impossible quand il s’agit d’affronter les bugs sur les sites web sous WordPress.

Allez, let’s gooo 🚀

 Avant tout, faire une Sauvegarde du Site-web à Maintenir

Oui, la toute première chose que vous devez faire avant corriger quoi que ce soit c’est faire une sauvegarde ou un backup du site ayant des bugs ou s’assurer qu’elle existe déjà sur l’hébergeur où est stocké le site du client.

Cela vous permettra de mettre à l’abri une copie du site (fichiers et base de données) au cas où quelque chose tournait mal.

Cela est très crucial parce qu’en voulant corriger le bug, vous pouvez soit créer plus de bugs ou cassez complément le site. Si cela arrivait, vous n’aurez qu’à restaurer la sauvegarde et le site reviendra à son état initial.

#1. Changer la couleur et la police d’écriture des éléments d’un site WordPress

Un jour, un client me contacte et me fait savoir qu’il y a certains éléments de son site internet qui ont une couleur et une police d’écriture qui ne correspondent pas à la charte graphique générale du site.

En effet, les éléments en question sont les boutons et les textes se trouvant sur les pages générées automatiquement par Woocommerce.

Je devais donc trouver un moyen rapide et efficace pour changer la couleur et la police d’écriture de ces éléments afin qu’ils soient conformes à la charte graphique générale du site.

Débrouillard que je suis, je suis directement allé dans la bibliothèque d’extensions WordPress et j’ai installé le plugin Simple Custom CSS and JS, qui va me permettre d’injecter du CSS personnalisé dans le site.

Ensuite, grâce au navigateur Google Chrome, j’ai inspecté les éléments problématiques (en faisant clic droit de la souris puis Inspecter). Cela m’a permis de récupérer les classes CSS des ces éléments.

Maintenant que j’ai les classes CSS à ma possession, je suis simplement allé ajouter du code CSS personnalisé dans l’extension précédemment installée. Les propriétés CSS que j’ai utilisées étaient color (pour changer la couleur) et font-family (pour changer la police d’écriture).

Pour faire en sorte que mes règles CSS soient prioritaires, j’ajoutais le mot-clé !important à la fin de chaque règle.

PS : Notez que pour ajouter du CSS personnalisé vous pouvez également utiliser le plugin Code Snippets que j’ai mentionné dans l’article sur comment ajouter du code personnalisé sur WordPress.

Exemple :

.classeCSS {
   color: green !important;
   font-family: 'Roboto', sans-serif !important;
}

C’est ainsi que j’ai pu corriger les bugs. Client satisfait. Avis positif ✅

#2. Divi ne prend pas en compte les modifications apportées au site

Comme vous le savez déjà, Divi est l’un des thèmes les plus populaires de l’univers WordPress. C’est l’un de mes préférés… Son constructeur de pages (page builder) et ses templates prêtes à l’emploi permettent de booster incroyablement ma productivité lors de la création d’un site.

Un jour, un client me contacte et me fait savoir qu’il est en train de personnaliser son site fait avec Divi, et qu’il vient de rencontrer un problème qu’il ne comprend pas du tout…

Je lui demande de m’expliquer le problème en question… Il me fait savoir que ça fait un moment qu’il apporte des modifications sur le site mais que ces dernières ne sont pas prises en question lorsqu’il enregistre et visualise le site en affichage normal. Les modifications ne sont prises en compte que dans le constructeur de pages de Divi.

Après réflexion, je lui dit que c’est certainement un problème de cache. Il me dit non non, j’ai déjà tout essayé… Vider le cache du navigateur, mettre à jour Divi, ouvrir le site dans un onglet privé, etc… Mais sans succès.

Pour résoudre le problème rapidement et efficacement, vous savez ce que j’ai fait ? C’est tout bête en fait… J’ai simplement vidé le cache CSS que génère Divi automatiquement. 😀

Pour ce faire, il suffit d’aller dans les paramètres de Divi et de vider le cache… Options du thème > Créateur > Avancé > Clear.

C’est ainsi que j’ai corrigé le bug en question. Client satisfait. Avis positif ✅

#3. La Page Panier de Woocommerce n’affiche rien

Un client me contacte et me fait savoir le bug que rencontre son site ecommerce… Lorsqu’on accède à la page Panier pendant qu’il n’y a aucun produit dans le panier, la page n’affiche absolument, pas même un petit message.

Le client souhaite, qu’au lieu d’une page blanche, qu’il y ait un petit message du style « Votre panier est vide ».

Pour corriger ce bug rapidement et efficacement, j’ai dû installer sur le site du client le plugin Code Snippets, qui m’a permet d’ajouter du code PHP personnalisé.

Pour ce faire, j’ai créé un nouveau snippet depuis le plugin et j’y ai ajouté comme contenu le code ci-dessous :

<?php

    if ( WC()->cart->get_cart_contents_count() == 0 ) {

        echo '<div>Votre panier est vide 🙁<div>';

    }

?>

En gros, le code ci-dessus vérifie si le panier est vide, puis affiche le message « Votre panier est vide 🙁 »

Pour que mon code soit exécuté, j’ai récupéré le code court (shortcode) généré par le plugin pour aller le placer dans la page Panier.

Voilà, problème résolu. Client satisfait. Avis positif ✅

#4. Panier sous forme de Sidebar

Je suis tranquille chez moi, essayant de profiter de la douceur de la vie… Voilà qu’un client me contacte concernant mon service de correction de bugs WordPress.

Sa préoccupation ? Il possède un site ecommerce et vient de visiter les sites e-commerce de ses concurrents. Ces derniers ont une fonctionnalité attrayante qu’il voudrait aussi avoir sur son propre site.

La fonctionnalité en question est un panier qui s’affiche sous forme de Sidebar ouvrante et fermante, et qui apparaît à droite de l’écran. On peut l’ouvrir en cliquant sur une petite icône sous forme de panier qui reste figée sur la page en bas à droite. Il s’ouvre également de façon automatique à chaque fois qu’on ajoute un nouveau produit au panier.

Pour satisfaire sa demande, je suis allé dans le répertoire de plugins WordPress pour installer le plugin CartPops, puis je l’ai configuré et personnalisé selon les préférences du client.

Et voilà, problème résolu, fonctionnalité ajoutée avec succès. Client satisfait. Avis positif ✅

#5. Système de Paiement en 3 Fois

C’est reparti… Je reçois une notification ComeUp me faisant savoir que je viens de recevoir un nouveau message.

C’est une cliente qui veut ajouter une nouvelle fonctionnalité sur sa boutique Woocommerce. La fonctionnalité en question c’est le système de paiement en 3 fois.

Pour ceux qui ne le savent pas, le Paiement en 3 fois (ou Partial Payment) consiste au fait de répartir le paiement des achats sur 3 versements. Ces paiements sont automatiquement prélevés sur la carte bancaire du client jusqu’à ce que la totalité du montant de la commande soit payée.

Pour satisfaire sa demande, j’ai souscrit aux services de Mollie, qui est un service en ligne qui facilite les paiements en ligne aux entreprises.

Ils ont une option appelée « Klarna Pay Later », qui permet d’activer le paiement en 3 fois.

Pour connecter Mollie à Woocommerce, j’ai simplement utilisé leur plugin officiel Mollie Payments for WooCommerce.

Notez qu’il existe d’autres services qui permettent l’intégration du Paiement en 3 fois… Notamment Alma et Partial.ly.

Voilà, problème résolu, fonctionnalité ajoutée avec succès. Cliente satisfaite. Avis positif ✅

Pour conclure…

WordPress est un CMS fait avec languages de programmation HTML, CSS, JavaScript et PHP. Dès lors qu’un outil est fait d’un language de programmation, il est succeptible de rencontrer des erreurs ou bugs.

Heureusement il n’y a aucun bug sans solution… Nous avons vu tout au long de l’article les bugs qu’ont rencontré les sites de mes clients et comment j’en suis venu à bout.

Merci d’avoir pris le temps de lire ce petit tuto sur mon expérience dans la correction de bugs WordPress sur ComeUp. 🙏

J’espère qu’il vous a plu et vous a été utile. N’hésitez pas à me donner vos avis sur ce tutoriel, et aussi partager avec moi en commentaires les bugs WordPress que vous avez eu à résoudre.

Ce sera un délice pour moi de vous lire 😁