Comment rechercher dans un plugin
Lorsque vous installez un plugin WordPress, il y a de forte chance que tout ne vous convienne pas toujours à 100%. Vous aurez surement besoin d’effectuer quelques modifications de fonctionnalité et/ou esthétiques pour que le plugin s’intègre parfaitement à votre site.
Découvrons ensemble comment rechercher dans un plugin pour effectuer les modifications souhaitées.
Quels outils utiliser pour rechercher dans un plugin ?
Votre plugin est installé, vous êtes sur une page de votre site et vous vous rendez compte que quelque chose ne fonctionne pas comme vous souhaitez, ou l’affichage ne correspond pas à vos attentes.
Pour mener votre enquête, vous aurez besoin de :
- Un navigateur équipé d'une console développeur (comme Google Chrome)
- Du plugin en question téléchargé sur votre ordinateur (récuparable en ligne ou via un logiciel FTP comme Filezilla)
- Un logiciel d'édition de code source (comme Notepad ++)
A quoi ca sert tout ca ?
Chaque outil va avoir son rôle :
Le navigateur, grâce à sa console développeur, va vous permettre de retrouver dans le code source l’élément en question.
Le plugin en question doit être téléchargé en local pour pouvoir effectuer une recherche dans les fichiers du plugin.
Le logiciel d’édition de code source va vous permettre d’effectuer une recherche dans les fichiers du plugin pour retrouver l’élément cible.
Comment cibler l'élément que l'on souhaite modifier ?
Le navigateur Web et sa console développeur vont nous être d’une grande aide.
Prenons un exemple concret avec le plugin Woocommerce, un indispensable pour la création d’un site E-commerce avec WordPress.
Une fois installé et après un petit peu de configuration, Nous arrivons au panier et nous constatons deux choses qui ne nous conviennent pas :
- Sur la page panier, l’image s’affiche en tout petit. Nous décidons que nous ne voulons pas l’afficher.
- La couleur de l’icône pour supprimer le produit du panier n’est pas aux couleurs des liens de notre charte graphique.
Nous allons devoir enquêter et comprendre le fonctionnement du plugin pour pouvoir le modifier.
Une fois sur la page en question, il va falloir ouvrir la console développeur. Si vous utilisez Google Chrome, vous pouvez appuyer sur F12 ou utiliser la combinaison Ctrl + Maj + I, une fenêtre va s’ouvrir sur la droite de votre écran.
Nous allons pouvoir cibler l’élément qui vous intéresse à l’aide de l’outil de ciblage :
Maintenant il va falloir un peu de logique pour cibler le bon élément correspondant à notre besoin.
Pour commencer à supprimer la photo du panier, nous allons cibler cette image pour voir ce que nous pouvons en tirer.
Nous apprenons alors que cette image est dans une cellule d’un tableau qui possède la classe product-thumbnail, nous avons une piste :
Pour modifier la couleur de l’icône de suppression, nous allons cibler l’icône en question et chercher dans la console développeur quelle règle CSS définie la couleur de bordure.
Nous trouvons alors que cette règle est définie dans un fichier woocommerce.css, et que le sélecteur est le suivant :
.woocommerce a.remove
L'élément est trouvé, lançons la Recherche !
La modification technique : Supprimer l'image du panier
Nous souhaitons donc supprimer l’image produit de notre panier, et nous avons comme piste la classe de la cellule du tableau : product-thumbnail
Une fois le plugin en question téléchargé sur notre ordinateur (via un logiciel FTP ou via la page WordPress de l’extension), nous allons rechercher cette classe dans les fichiers pour voir ce que ca donne.
Lançons un logiciel d’édition de code source comme Notepad ++. Nous avons un disposition dans le menu un onglet Recherche, et nous pouvons effectuer une recherche dans les sous-dossiers, c’est ce qui nous intéresse !
Saisissons dans recherche ce qui nous intéresse, product-thumbnail.
Si nous sommes sur du type de fichier qui nous intéresse, nous pouvons saisir un filtre. Ici nous allons rechercher un fichier PHP, nous pouvons donc saisir *.php, ce qui signifie que le logiciel recherchera dans tous les fichiers PHP.
Enfin, ciblons le dossier ou se trouve notre plugin sur notre ordinateur.
Lançons la recherche en cliquant sur le bouton Trouver tout.
Une fois la recherche terminée, des résultats s’affichent en bas de l’écran.
Bonne nouvelle, nous retrouvons la structure HTML qui nous intéresse, visiblement il faut inspecter la ligne 65 du fichier cart.php du plugin, et Notepad ++ nous indique même le répertoire ou est situé le fichier.
Un double clic sur la ligne recherchée nous ouvre directement le fichier en question, et on retrouve enfin le code source d’affichage de cette image.
Nous constatons qu’un filtre est appliqué à la variable $thumbnail, en l’occurence :
woocommerce_cart_item_thumbnail
Nous savons donc ce qui nous reste à faire pour supprimer cette image, ajouter un filtre !
La modification esthétique : changer la couleur de l'icône supprimer
La bonne nouvelle est qu’une modification esthétique est beaucoup plus simple, il suffit d’appliquer une nouvelle règle CSS qui va écraser la règle définie par le plugin. Pour cela, il suffira d’utiliser le fichier style.css de votre thème enfant.
La seule chose à respecter est que votre règle CSS doit contenir autant ou plus de sélecteurs pour que la règle fonctionne.
Ajoutons donc cette nouvelle ligne dans le fichier de notre thème enfant (avec la couleur définie dans notre charte graphique) et le tour est joué :
.woocommerce a.remove { color: #52786f!important; }
PS : L’utilisation du !important n’est pas recommandée en CSS. Nous sommes cependant obligés de l’utiliser ici pour écraser la règle définie par le plugin Woocommerce qui le possède également.
La conclusion !
Effectuer une recherche dans un plugin n’est pas toujours facile au début, on ne retrouve pas toujours ce que l’on cherche.
Avec un peu d’expérience, vous arriverez à mieux comprendre le code et donc mieux cibler vos recherches pour trouver les éléments à modifier.
Et voila le résultat après application des modifications souhaitées :
A votre tour ! Vous pouvez nous laisser un commentaire pour nous indiquer si vous avez réussi à retrouver ce que vous cherchiez !
Et plus important, si vous avez réussi à mettre en place votre modification !
Les tags
A bientôt pour de nouvelles astuces ! 🙂
Vous avez aimé cet article ? Vous pouvez
Le partager avec votre communauté
Articles similaires
Personnaliser le formulaire de validation de commande Woocommerce
Le tunnel de vente d’un site E-commerce est extrêmement important pour que les ventes se convertissent.
Une page de validation de commande trop succincte, peu réfléchie, ou au contraire une page surchargée aura un impact négatif sur vos ventes.
Découvrons ensemble comment personnaliser la page de checkout pour offrir une expérience utilisateur optimale à vos clients.
Ajouter les prix de revient des produits Woocommerce, calculer les marges nettes sans plugin
Woocommerce est l’extension de référence pour créer une boutique E-commerce sur un site WordPress. Cependant, Woocommerce ne permet pas tout. Par défaut, il n’est pas prévu de pouvoir saisir les prix d’achat (ou prix de revient ) des produits pour connaître les marges nettes réalisées.
Découvrons ensemble comment ajouter cette fonctionnalité à Woocommerce.
Pourquoi nous avons créé notre plugin Monsieur Site Web
WordPress est magique, certes !
Mais pour réaliser un site internet professionnel, WordPress à quelques inconvénients et certaines fonctionnalités nécessaires doivent être ajoutées sur chaque site internet.
C’est pourquoi chez Monsieur Site Web, nous avons créé notre propre plugin qui nous permet d’effectuer des actions de manière automatique sur votre futur site.
Découvrons en détails le fonctionnement de notre plugin.
Les commentaires
Aucun commentaire enregistré. Soyez le premier à laisser un commentaire.
