Si tu gères un site web WordPress, il arrive certainement un moment où tu te penches sur les Code Snippets. Comme la maintenance des Code Snippets peut être un travail inutile s'ils sont mal intégrés, il existe des plugins Code Snippet. Mais il existe aussi d'autres moyens d'intégrer des Code Snippets dans ton site Web. Dans cet article, nous comparons les meilleures façons d'ajouter des Code Snippets à ton site WordPress. 

Tout d'abord, il faut répondre à la question : Qu'est-ce qu'un code snippet ? Un code snippet est un petit morceau de code qui étend la fonctionnalité de ton site web. D'où son nom - traduit en français par "bout de code". Cela signifie qu'il ne s'agit que de quelques lignes de code. Des exemples judicieux sont la possibilité d'intégrer des vidéos responsives et l'autorisation de formats de fichiers supplémentaires pour la médiathèque. Ce qui est intéressant, c'est que ces extraits de code peuvent remplacer un plugin entier. Cela peut améliorer énormément la quantité de code (et donc la taille des fichiers), la performance et aussi le risque d'erreur de ton site.

Il existe d'autres cas où tu dois ajouter des snippets de code à ton site WordPress. Si tu veux suivre qui visite ton site, tu peux insérer un code de suivi dans l'en-tête ou le pied de page. Si tu veux utiliser une solution prête à l'emploi pour le consentement aux cookies sur ton site, tu insères généralement un code JavaScript dans l'en-tête ou le pied de page. 

Pourquoi utiliser des plugins de code snippet ? 

Sur de nombreux sites WordPress, le code a été adapté, mais parfois d'une manière qui n'est pas durable. Les extraits de code ne doivent pas être intégrés directement dans le thème WordPress principal. En effet, ils seront écrasés et supprimés dès que tu actualiseras le thème.

Il en va de même pour les plugins. Si tu modifies directement le code d'un plugin, tes modifications seront probablement effacées lors d'une mise à jour. La seule façon de conserver tes modifications est de les enregistrer ou de faire une sauvegarde ailleurs. Certaines mises à jour de plugins ajoutent seulement de nouvelles fonctionnalités, mais d'autres contiennent également des améliorations de sécurité. Celles-ci doivent être appliquées correctement afin de rendre ton site moins vulnérable aux attaques. C'est pourquoi l'application incorrecte de code snippets peut même devenir un risque de sécurité, car on peut alors avoir l'idée de laisser la mise à jour à cause du code snippet.

Je vais maintenant te présenter trois façons d'insérer du code qui sera utilisé dans un fichier functions.php. L'une d'entre elles est le plugin Code Snippet. Cela ne couvre pas toutes les situations où tu veux adapter un plugin ou un thème, car cela dépend de l'existence de hooks appropriés pour les modifications nécessaires. Les hooks sont des endroits dans le code pour l'interaction avec le Core de WordPress, c'est-à-dire une sorte d'"accroche" à laquelle les plugins et les thèmes peuvent "s'accrocher". Ainsi, s'il n'y a pas de hook pour une certaine fonction souhaitée, les snippets de code (dans functions.php) sont le moyen le plus judicieux.

Crée un plugin WordPress

Cette méthode nécessite quelques travaux sur le fichier et sur le site lui-même, tu dois donc être prudent et il est préférable de faire une sauvegarde avant de faire des modifications. Un plugin comprend au moins un dossier pour le fichier PHP. Essaie de trouver un nom unique pour ton dossier et tes fichiers (tu peux ajouter un préfixe basé sur ton nom ou le nom de ton entreprise, ou quelque chose de similaire (par exemple "Raidboxes.io Disk Usage Sunburst").

Dans ce fichier, tu as besoin d'une autre chose - un en-tête avec les informations du plugin. Ici aussi, tu as besoin d'une déclaration de ton nom de plugin, comme ci-dessous : 

<?php

/**
* Plugin Name: your plugin name
*/

Bien joué ! Tu as maintenant créé ton premier plugin. Après l'en-tête, il te suffit d'ajouter tes extraits de code (ceux que tu veux insérer dans functions.php) et de télécharger le dossier dans ton dossier /wp-content/plugins/ sur le serveur. Et voilà, ton plugin devrait apparaître sous Plugins dans la zone d'administration. 

Je préfère l'approche consistant à créer un plugin personnalisé, car c'est génial pour insérer du code dans functions.php. De plus, il est facile à mettre en place. 

Utilise un plugin WordPress

Pour ceux qui n'osent pas créer leurs propres plugins, l'un des plugins Code Snippet est un excellent moyen de gérer tes extraits de code ou, plus généralement, d'ajouter du code personnalisé à des sites WordPress. Tu as probablement déjà l'habitude d'installer des plugins tiers, c'est donc peut-être plus facile que la première option.

Il te suffit d'installer le plugin souhaité et de naviguer jusqu'au nouvel élément de menu qui apparaît dans la zone de gestion. Note que les différents plugins peuvent avoir une structure différente. Mais la plupart d'entre eux sont simples et faciles à comprendre. Tu devrais renommer chaque snippet de code que tu as ajouté. C'est très utile pour trouver plus facilement un code snippet spécifique. Cette procédure est absolument recommandée et peut t'épargner quelques ennuis avec de nombreux Code Snippets.

Les facteurs décisifs pour choisir un bon plugin qui te permette d'exécuter des code snippets sur ton site web sont, entre autres, l'influence sur la performance de ton site web et la facilité d'utilisation. Je vais maintenant te présenter quelques plugins WordPress Code Snippet.

Les meilleurs plugins de code snippet pour WordPress

Snippets de code

Cette extension a été développée par Code Snippets Pro et est ma favorite personnelle. L'idée de l'extension est que tu peux ajouter de petits snippets de code PHP. Elle offre une solution simple pour ajouter tes propres snippets de code HTML, JavaScript ou PHP. L'utilisation du plugin ressemble aux autres menus d'administration de WordPress et est très facile à utiliser. Le plugin te permet d'insérer des snippets de code dans ton thème à l'aide d'une interface graphique. Note que cette extension n'est pas adaptée à l'ajout de codes de suivi ou autres. Cette extension convient mieux pour ajouter plus de fonctions au fichier "functions.php" de ton thème.

Caractéristiques :

• Tu peux utiliser du code PHP dans les widgets, les pages et les messages.
• Ajoute PHP pour créer des formulaires de contact et traiter tout type d'entrée ou de téléchargement.
• Ajoute PHP pour créer un contenu optimisé pour l'utilisateur.
• Avec PHP, tu peux personnaliser chaque aspect de ton installation WordPress.

Insérer des extraits de code PHP

Ce plugin a été développé par xyzscripts.com et est une extension très populaire qui est régulièrement mise à jour. Avec ce plugin, tu peux utiliser du code PHP qui peut être facilement inséré dans l'éditeur normal de WordPress, car il crée des shortcodes de snippet pour chaque code ajouté. L'insertion fonctionne également avec un shortcode dans la barre latérale du widget de texte de la page. 

Caractéristiques : 

• Dans l'éditeur TinyMCE, tu as un menu déroulant intelligent
• Convertis les snippets PHP en shortcodes pour une implémentation facile
• Une fonctionnalité simple et flexible

Custom CSS Pro 

Avec le plugin WordPress Custom CSS Pro, tu peux facilement ajouter un code CSS personnalisé à ton site WordPress. Ce plugin WordPress gratuit offre quelques fonctions pratiques, dont un aperçu en temps réel et une numérotation des lignes pour rendre l'édition du code un peu plus facile. 

Caractéristiques :

• Visuellement, comme l'environnement dans Visual Studio Code ou Sublime Text
• Il est facile d'ajouter du code CSS personnalisé à WordPress
• Aperçu en direct et en temps réel

Insérer des en-têtes et des pieds

Ce type de plugin permet d'insérer facilement du code dans l'en-tête ou le pied de page. L'extension a été développée par WPbeginner, qui a également créé le célèbre plugin de formulaire WPforms. Avec ce plugin, tu peux facilement insérer des extraits de code pour l'intégration de services comme Google Analytics et Facebook Pixel. 

Caractéristiques : 

• Mise en place rapide
• Insère facilement des en-têtes, des scripts et d'autres codes.
• Il te permet d'ajouter n'importe quel code ou script ainsi que du HTML et du JavaScript.
• Est l'option la plus simple pour insérer des codes de suivi

Outils intégrés à Elementor (version Pro)

Si tu utilises la version Pro du constructeur de pages Elementor, tu n'as pas besoin d'installer un autre plugin. En effet, Elementor dispose d'un outil intégré pour insérer des codes de suivi et autres. Elementor prend également en charge le changement de nom de tous les scripts que tu ajoutes à ton site WordPress. Pour trouver le code personnalisé Elementor, procède comme suit. Va sur Tableau de bord > Elementor Custom Code. Là, tu insères le script que tu souhaites placer sur ta page. Note que tu dois avoir une licence Elementor Pro active pour pouvoir utiliser les outils de code personnalisé intégrés à Elementor.

Caractéristiques : 

• Structure simple et logique
• Intégré à ton constructeur de pages

Utilise un thème enfant

Cette méthode est la moins recommandée pour ajouter des extraits de code, mais elle fonctionne quand même bien. Elle est un peu plus compliquée que la création d'un plugin. Un thème enfant doit contenir le code et le style qui s'appliquent à la mise en page et au look de ton site. Mais un snippet est généralement utilisé pour modifier la fonctionnalité et ne relève donc pas vraiment de la "responsabilité" d'un child theme. 

Pour créer un thème enfant, tu crées un dossier avec le même nom que ton thème parent et avec le suffixe "-child" (si le dossier du thème parent s'appelle "raidboxes.io-theme", le dossier du thème enfant serait "raidboxes.io-theme-child"). 

Dans ce dossier, tu as besoin d'au moins deux fichiers : Le fichier de feuille de style appelé style.css et le fichier PHP appelé child.php.

Le fichier style.css doit contenir un en-tête avec les informations minimales suivantes :

/* 
Theme Name: Raidboxes.io Theme Child
Template: Raidboxes Theme
Version: 1.0.0
*/

Ensuite, tu insères ton snippet de code à la fin du fichier functions.php et tu télécharges le dossier du thème enfant sur le serveur à l'adresse /wp-content/themes/.

Si tout est en ordre, tu peux ouvrir le menu Design → Thèmes dans ta zone d'administration et activer le nouveau thème enfant. Si tu veux en savoir plus, nous t'expliquons dans le magazine comment créer un child theme.

Conclusion 

Cet article t'a fourni quelques informations de base sur les possibilités d'intégrer des extraits de code dans WordPress. C'est à toi de choisir entre la création d'un plugin WordPress ou d'un thème enfant ou l'utilisation d'un plugin Code Snippet - et cela dépend uniquement de tes préférences, car les trois méthodes fonctionnent de la même manière. Le mieux est d'utiliser ce qui te convient le mieux.