La bonne marche à suivre pour modifier un plugin
Vous avez une modification à effectuer sur un plugin WordPress et vous ne savez pas comment vous y prendre ?
Nous allons détailler pour vous les différentes possibilités qui s’offrent à vous et comment les mettre en place.
Le sommaire
- Pourquoi modifier un plugin WordPress ?
- Ce qu’il ne faut pas faire !
- Comment modifier le texte d’un plugin ?
- Modifier le plugin via un override de template
- Ajouter ou supprimer des fonctionnalités via les hooks
- Modifier des fonctionnalités via les filtres
- Utiliser un langage de programmation côté client
- Entrer en contact avec les développeurs du plugin
- Conclusion
Pourquoi modifier un plugin WordPress ?
Les diverses extensions (ou plugins) proposés pour ajouter des fonctionnalités à WordPress aident beaucoup à la réalisation d’un site Web.
Cependant, ces plugins ne fonctionnent pas toujours comme on le souhaiterait.
Vous avez trouvé le plugin qui vous convient le plus, mais ce n’est pas encore tout à fait ce que vous souhaitez ?
Vous avez alors besoin d’effectuer une modification pour que ce plugin fonctionne exactement comme vous le voulez !
Mais comment faire ?
Découvrons ensemble les possibilités qui s’offrent à nous.
Tout au long de cet article, nous allons prendre en exemple l’ajout au panier et la page panier du plugin Woocommerce.
Ce qu'il ne faut pas faire !
La principale erreur lorsqu’on souhaite modifier un plugin consiste à modifier directement le code source du plugin.
L’écosystème WordPress, et ses plugins, fonctionnent avec des systèmes de mise à jour.
Régulièrement, le coeur de WordPress, votre thème, vos plugins et vos traductions sont mis à jour pour ajouter des fonctionnalités ou encore corriger des failles de sécurité.
Si vous modifiez directement les fichiers d’un plugin, vos modifications seront écrasées en cas de mis à jour et tout votre travail sera perdu.
Il existe plusieurs possibilités pour modifier les fonctionnalités d’un plugin, apprenons ensemble comment modifier proprement votre site !
Comment modifier le texte d'un plugin ?
Commençons par le plus simple.
Vous souhaitez juste modifier quelques textes. Pour cela, nous vous recommandons d’utiliser le plugin Loco Translate, qui permet d’effectuer des traductions.
Tout plugin correctement développé permet de traduire le contenu affiché.
Une fois Loco Translate installé et activé, rendez vous dans l’onglet Loco Translate et le sous onglet Extensions, vous retrouverez ici tous vos plugins installés.
Sélectionnez alors le plugin Woocommerce et commencez une traduction personnalisée en cliquant sur le lien Nouvelle Langue.
Le paramétrage est alors assez simple :
- Choisissez la langue dans laquelle vous souhaitez traduire le plugin.
- Choisissez un emplacement : Nous vous recommandons de choisir l’emplacement personnalisé, ce qui permettra de conserver votre traduction en cas de mise à jour du plugin que vous souhaitez traduire.
Validez la création de votre fichier de traduction en cliquant sur Commencer la traduction.
Vous allez alors vous retrouver dans l’éditeur de traduction.
L’interface est assez intuitive :
- Une barre de recherche vous permet de rechercher l’élément à modifier / traduire.
- Une fois le texte que vous souhaitez modifier trouvé, entrez dans la partie traduction le nouveau texte que vous souhaitez mettre en place.
Une fois vos modifications effectuées, cliquez sur le bouton bleu Enregistrer, et vos modifications sont effectives.
Modifier le plugin via un override de template
Un override de template ? C’est quoi ça ?!
En français, ca s’appelle un écrasement de template, mais c’est moins joli !
Cela consiste à placer dans le thème enfant de votre site un fichier du plugin pour que ce soit votre version qui soit prise en compte.
Vous allez alors pouvoir modifier le contenu de la page à votre guise.
Comment override un template de plugin ?
Prenons toujours l’exemple du plugin Woocommerce, et imaginons que nous souhaitons personnaliser la page panier.
Le template en question se trouve dans le répertoire :
wp-content/plugins/woocommerce/templates/cart/
et se nomme cart.php
Pour override ce template, nous allons récupérer ce fichier et le placer dans notre thème enfant, en suivant exactement le même chemin que celui du plugin.
Nous allons donc créer dans le dossier de notre thème enfant les dossiers : woocommerce/templates/cart/ et y placer une copie du fichier cart.php
Attention :
Vous devez respecter exactement le même chemin que le template du plugin pour que la version override soit prise en compte.
Une fois votre fichier plaçé dans votre thème enfant, c’est désormais ce fichier que Woocommerce utilisera pour fonctionner.
Il ne vous reste plus qu’à le personnaliser à votre guise.
Ajouter ou supprimer des fonctionnalités via les hooks
Non, nous ne parlons pas du capitaine crochet.
Nous parlons des Hooks, une fonctionnalité du CMS WordPress qui va vous permettre d’effectuer une action précise à un endroit donné de la page.
Comment utiliser un hook ?
Ouvrons le template que nous avons récemment override, le fichier de la page panier du plugin Woocommerce.
Les développeurs du plugin nous ont laissé plusieurs possibilité pour ajouter du contenu personnalisé sur cette page, grâce aux hooks.
Un hook est déclaré avec la fonction do_action() et se retrouve à des endroits stratégiques sur la page :
do_action( 'woocommerce_before_cart' ); //Hook situé au début de la page panier
Si vous souhaitez ajouter du contenu ou une fonctionnalité avant le contenu de votre page panier, vous allez donc pouvoir utiliser ce hook, en créant une fonction dans le fichier functions.php de votre thème enfant. Un hook est appelé à l’aide de la fonction add_action().
Imaginons par exemple que vous souhaitez ajouter un simple texte en haut de votre page panier, votre fonction ressemblera à :
function MSW_add_text_before_cart()
{
echo 'Bienvenue sur la page panier de notre site';
}
add_action( 'woocommerce_before_cart', 'MSW_add_text_before_cart' );
Les priorités et nombre d'arguments
Si vous avez compris le fonctionnement, vous aurez également compris que plusieurs fonctions peuvent être appliquées sur un même hook.
Si l’on s’interesse à la fonction add_action() dans le codex WordPress, on constate que cette fonction peut prendre d’autres paramètres :
- La priorité (plus elle est élevée, plus votre fonction sera exécutée en dernière).
- Le nombre d’arguments acceptés par la fonction.
Prenons en exemple un autre hook de la page cart.php :
do_action( 'woocommerce_after_cart_item_name', $cart_item, $cart_item_key );
//Hook situé après le nom du produit dans le panier
Ce hook fonctionne avec 2 arguments qui sont $cart_item et $cart_item_key.
Nous allons pouvoir les utiliser pour effectuer notre action personnalisée.
En effet, pour appliquer une fonction personnalisée sur le nom du produit, il va nous falloir des informations sur le produit pour le paramétrer au mieux, c’est pourquoi ces variables nous sont fournies.
Imaginons que nous souhaitons ajouter un texte sous le nom du produit sur la page panier, cela donnerait :
function MSW_add_text_after_product_name( $cart_item, $cart_item_key )
{
echo 'Vous allez adorer ce produit !';
}
add_action( 'woocommerce_after_cart_item_name', 'MSW_add_text_after_product_name', 10, 2 );
//Ici, 10 est la priorité donnée à la fonction sur le Hook.
//2 est le nombre d'arguments acceptés par la fonction.
Ici la fonction est très basique et ce message sera affiché sous chaque produit du panier.
Libre à vous de personnaliser vos fonctions pour avoir des affichages conditionnels en fonction du produit ou d’autres paramètres 🙂
Modifier des fonctionnalités via les filtres
Contrairement au hook qui permet d’ajouter des actions, le filtre est une fonction qui va recevoir un paramètre et renvoyer le résultat après une éventuelle transformation.
Oui, à ce stade, ce n’est pas clair, voyons avec un exemple !
Comment utiliser un filtre ?
Toujours avec notre fichier cart.php, nous allons maintenant chercher à modifier l’affichage du prix du produit sur la page panier.
Si l’on recherche la ligne ou est affichée le prix du produit, on retrouve ceci :
echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key );
//Affichage du prix du produit sur la page panier
La fonction apply_filters() permet ici d’appliquer un filtre et de retourner une valeur différente de la valeur retournée par défaut.
Exactement comme un hook, le filtre fonctionne avec :
- Une priorité (plus elle est élevée, plus votre fonction sera éxécutée en dernière).
- Un nombre d’arguments acceptés par la fonction.
Si vous souhaitez modifier l’affichage du prix sur votre page panier, vous allez donc pouvoir appliquer un filtre, la aussi en créant une fonction dans le fichier functions.php de votre thème enfant. Un filtre est appliqué à l’aide de la fonction add_filter().
Imaginons par exemple que vous souhaitez indiquer la mention TTC sur le prix du produit, votre fonction ressemblera à :
function MSW_add_ttc_to_cart_price( $price, $cart_item, $cart_item_key )
{
return $price . ' TTC';
}
add_filter( 'woocommerce_cart_item_price', 'MSW_add_ttc_to_cart_price', 10, 3 );
Attention :
Un filtre permet de transformer l'affichage d'une valeur, il doit donc toujours retourner une valeur pour fonctionner !
Ici la fonction est encore une fois très basique.
Un filtre peut également être personnalisé plus en détails en appliquant une logique conditionnelle.
Utiliser un langage de programmation côté client
Imaginons que notre page cart.php ne possède ni hook, ni filtre et ne puisse pas être override, il va falloir ruser pour arriver à nos fins.
Vous n’avez (presque) aucune possibilité pour personnaliser au mieux votre plugin.
Une solution efficace peut être d’utiliser un langage de programmation comme Javascript ou Jquery qui s’exécute côté client pour ajouter des éléments à votre page.
Imaginons que nous souhaitons encore une fois ajouter la mention TTC au prix des produits de notre panier, nous pourrons le faire avec la fonction Jquery suivante :
jQuery(document).ready(function($) {
$( "form.woocommerce-cart-form table td.product-price" ).append(' TTC');
});
Ou placer du code Javascript et Jquery dans un thème enfant ?
Pour éxécuter ce type de code, il vous faudra au préalable créer un fichier Javascript (extention .js) dans votre thème enfant.
Créez pour cela dans votre thème enfant un dossier appelé par exemple « js », et créez dans ce dossier un fichier script.js
En l’état, ce fichier ne fonctionnera pas. Pour qu’il fonctionne, il doit être appelé. A l’aide….d’un hook !
Voici la méthode :
function MSW_enqueue_JS()
{
wp_enqueue_script( 'MSW_script', get_stylesheet_directory_uri() . '/js/MSW_script.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'MSW_enqueue_JS' );
Quelques explications :
- Le hook wp_enqueue_scripts() permet d’ajouter de nouveaux fichiers scripts côté frontend.
- La fonction wp_enqueue_script() permet d’enregistrer le script, et reçoit au minimum comme paramètres :
- Le nom du script, qui doit être unique.
- Le chemin du script, sachant que la fonction get_stylesheet_directory_uri() retourne le chemin du thème actif, soit votre thème enfant.
Astuce :
Pour vérifier que votre fichier est correctement lu, placez un simple alert('Hello'); dans le fichier.
Sur votre site, une boîte de dialogue doit alors s'afficher avec le texte Hello.
Entrer en contact avec les développeurs du plugin
La plupart des développeurs de plugins WordPress répondent aux questions posées par les utilisateurs.
Si vous avez une question ou une requête concernant un plugin, vous pouvez utiliser le support de l’extension du site WordPress.
La conclusion !
Vous l’avez compris à la longueur de cette article, il existe de multiples alternatives pour modifier un plugin sans toucher directement aux fichiers de ce dernier.
Avec le temps et de l’expérience, il devient facile de modifier les fonctionnalités de WordPress.
Plus le temps passera, plus vos connaissances des Hooks et des filtres s’améliorera.
Pensez à effectuer des recherches dans le code source du plugin pour arriver à vos fins.
Prenez également le temps de lire la documentation de votre plugin pour connaître vos possibilités, et n’hésitez pas à contacter le support si besoin.
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
Mon avis
Hello à tous, je vous remercie pour votre article il est au top ! Grâce à vos conseils et à ceux de l’ agence web bordeaux je suis aujourd’hui capable d’affirmer que je suis une experte en WordPress.
Réponse de Monsieur Site Web
Bonjour Nina,
Merci pour votre avis 🙂
