Comment ajouter facilement du code personnalisé dans WordPress (sans casser votre site)

Vous trouverez souvent des tutoriels WordPress, même les nôtres ici sur WPBeginner, vous demandant d’ajouter des extraits de code personnalisés dans le fichier functions.php de votre thème ou dans une extension spécifique à votre site. Nous comprenons que cela peut être intimidant, surtout si vous n’êtes pas à l’aise avec le code.

Et vous avez raison d’être prudent. Même une petite erreur dans le code peut détruire l’ensemble de votre site.

Dans cet article, nous allons vous afficher une méthode facile pour ajouter du code personnalisé dans WordPress sans casser votre site. Cette méthode est parfaite pour les débutants et les utilisateurs/utilisatrices expérimentés.

Le problème des extraits de code personnalisés (et comment le corriger)

Vous trouverez souvent des extraits de code dans les tutoriels WordPress avec des instructions pour les ajouter dans le fichier functions.php de votre thème ou dans une extension spécifique à votre site.

Le plus gros problème est que même une minuscule erreur dans l’extrait de code personnalisé peut casser votre site WordPress et le rendre inaccessible.

Sans oublier que si vous mettez à jour ou modifiez votre thème WordPress, toutes vos personnalisations sont retirées.

L’autre problème est que si vous ajoutez plusieurs extraits de code dans une extension spécifique à un site, il peut devenir difficile de gérer le fichier.

Outil de personnalisation, il existe un moyen plus simple pour les utilisateurs/utilisatrices d’ajouter et de gérer des extraits de code personnalisés dans WordPress.

WPCode est l’extension d’extraits de code la plus populaire, utilisée par plus de 2 millions de sites WordPress. Il facilite l’ajout d’extraits de code dans WordPress sans avoir à modifier le fichier functions.php de votre thème.

WPCode facilite également l’ajout de codes de suivi pour Google Analytics, Facebook Pixel, Google AdSense, et bien d’autres encore, dans les zones d’en-tête et de pied de page de votre site.

Vous n’aurez jamais à craindre de casser votre site car la validation intelligente des extraits de code vous aide à éviter les erreurs de code les plus courantes.

En outre, WPCode est livré avec une bibliothèque d’extraits intégrée où vous pouvez trouver tous les extraits de code WordPress les plus populaires comme permettre les téléversements de fichiers SVG, désactiver l’API REST, désactiver les commentaires, désactiver Gutenberg, retirer et bien plus encore.

Il n’est donc pas nécessaire d’installer des extensions distinctes pour chaque demande de fonctionnalité.

Le plus beau, c’est que vous pouvez gérer tous vos extraits de code à partir d’un écran central et ajouter des identifiants pour les organiser.

Il existe également une version gratuite de WPCode qui possède toutes les fonctionnalités de base dont vous avez besoin pour ajouter du code personnalisé dans WordPress, y compris le support de 6 types de code, une logique conditionnelle intelligente, et plus encore.

Ceci étant dit, voyons comment ajouter facilement des extraits de code personnalisés dans WordPress avec WPCode.

Tutoriel vidéo

Si vous préférez des instructions écrites, continuez à lire.

Ajout d’extraits de code personnalisés dans WordPress

La première chose à faire est d’installer et d’activer l’extension gratuite WPCode sur votre site. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, le plugin ajoutera un nouvel élément de menu libellé  » Extraits de code  » à votre barre d’administration WordPress. En cliquant dessus, vous afficherez une liste de tous les extraits de code personnalisés que vous avez enregistrés sur votre site.

Comme vous venez d’installer l’extension, votre liste sera vide.

Cliquez sur le bouton « Ajouter nouveau » pour ajouter votre premier extrait de code personnalisé dans WordPress.

Vous accédez alors à la page « Ajouter un extrait ». Vous pouvez choisir un extrait de code dans la bibliothèque prédéfinie ou ajouter votre code personnalisé.

Pour ajouter un code personnalisé, cliquez sur le bouton « Utiliser un extrait » situé sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».

Vous devez commencer par saisir un titre pour votre extrait de code personnalisé. Il peut s’agir de n’importe quel élément qui vous aide à identifier le code.

Ensuite, vous pouvez copier et coller votre extrait de code dans la boîte de Prévisualisation du code. Confirmez également que vous avez sélectionné le bon type de code dans le menu déroulant à droite.

Dans la capture d’écran ci-dessus, nous avons ajouté un extrait de code personnalisé pour retirer le numéro de version de WordPress de notre site de test.

function wpb_remove_version() {
return '';
}
add_filter('the_generator', 'wpb_remove_version');

Sous la boîte de code, vous verrez des options d’insertion. Il existe deux options d’insertion principales : Insertion automatique et Code court.

Si vous choisissez la méthode « Insertion automatique », l’extrait sera automatiquement inséré et exécuté sur votre site.

Vous pouvez exécuter automatiquement l’extrait uniquement dans la zone d’administration de WordPress, sur l’interface publique de votre site ou partout. Vous pouvez même choisir d’insérer votre extrait dans des Emplacements spécifiques à la page, comme avant ou après les publications ou dans le contenu de la publication.

Si vous n’êtes pas sûr, sélectionnez l’option par défaut « Exécuter l’extrait partout ».

Avec la méthode « code court », l’extrait n’est pas inséré automatiquement. Une fois l’extrait enregistré, vous obtiendrez un code court spécifique à l’extrait que vous pourrez utiliser n’importe où sur votre site.

Lorsque vous défilez plus bas, vous pouvez limiter l’endroit où vous souhaitez que l’extrait soit chargé par type d’appareil. Par défaut, les extraits sont chargés sur tous les types d’appareils, mais vous pouvez également les définir pour qu’ils se chargent uniquement sur ordinateur ou uniquement sur mobile.

Ensuite, vous pouvez utiliser la puissante section « Logique conditionnelle intelligente » pour afficher ou masquer les extraits insérés automatiquement en fonction d’un ensemble de règles.

Par exemple, vous pouvez afficher des extraits de code uniquement aux utilisateurs connectés, charger des extraits de code uniquement sur des URL de pages spécifiques, etc.

Dernier point, vous verrez une zone « Informations de base ». Vous pouvez ajouter ici tout ce qui vous aide à comprendre ce que fait ce code, où vous l’avez trouvé et pourquoi vous l’ajoutez à votre site.

Vous pouvez également assigner des identifiants à votre extrait de code. Cela vous aidera à trier vos extraits de code par Sujet et par fonctionnalité.

Le champ de priorité vous permet de commander l’ordre d’exécution des extraits lorsque vous souhaitez afficher plusieurs extraits au même endroit. Par défaut, tous les extraits ont une priorité de 10. Si vous souhaitez qu’un extrait s’affiche plus tôt que les autres, il vous suffit de définir la priorité de l’extrait sur un chiffre inférieur, comme 5.

Lorsque vous avez fini de choisir les options, permutez le commutateur de « Inactif » à « Actif » dans le coin supérieur droit, puis cliquez sur le bouton « Enregistrer l’extrait ».

Si vous souhaitez enregistrer l’extrait de code et ne pas l’activer, cliquez simplement sur le bouton « Enregistrer l’extrait ».

Une fois que vous aurez enregistré et activé l’extrait de code, il sera ajouté automatiquement à votre site, si c’est la méthode d’insertion que vous avez choisie, ou affiché sous forme de code court.

Poignée des erreurs dans le code personnalisé

Souvent, si vous faites une erreur en ajoutant le code personnalisé dans le fichier de votre extension ou de votre thème, votre site devient immédiatement inaccessible.

Vous commenceriez à voir une erreur de syntaxe ou une erreur de serveur interne 500 sur votre site. Pour corriger ce problème, vous devrez annuler manuellement votre code à l’aide d’un client FTP.

L’intérêt de l’extension WPCode est qu’elle détecte automatiquement une erreur de syntaxe dans le code et le désactive immédiatement.

Il affiche également un message d’aide qui vous permet de déboguer l’erreur.

La validation intelligente des extraits de code de WPCode détectera également toute erreur lors de l’ajout de votre code personnalisé.

En survolant l’erreur, vous verrez apparaître des instructions qui vous aideront à la corriger.

Gérer vos extraits de code personnalisés

L’extension WPCode fournit une interface utilisateur simple pour gérer vos extraits de code personnalisés dans WordPress.

Vous pouvez enregistrer des extraits de code sans les activer sur votre site, puis activer ou désactiver l’extrait à tout moment. Il est également possible de filtrer les extraits de code par type et par Emplacement, et d’utiliser des identifiants pour organiser facilement vos extraits de code.

Vous pouvez également exporter des extraits de code spécifiques ou les exporter tous en bloc.

Il vous suffit de vous rendre dans Code Snippets «  Outils et de cliquer sur l’onglet « Exporter ».

Si vous déplacez des sites sur un autre serveur, vous pouvez facilement importer vos extraits de code sur le nouveau site.

Il suffit de se rendre sur la page Code Snippets  » Outils «  Importation et de téléverser le fichier d’exportation.

Bonus : Générer des extraits de code personnalisés avec l’IA

Même si vous ne savez pas coder, vous pouvez facilement créer des extraits personnalisés pour votre site WordPress en utilisant le générateur d’extraits IA de WPCode. Ainsi, au lieu de vous débattre avec PHP, HTML ou CSS, vous pouvez décrire ce que vous voulez pour votre site en anglais simple.

Sur la page « Ajouter un extrait », survolez l’option « Générer un extrait à l’aide de l’IA ». Cliquez ensuite sur le bouton « + Générer un extrait ».

Ensuite, une zone de texte apparaît dans laquelle vous pouvez décrire ce que vous voulez que votre extrait fasse. Essayez d’être précis sur ce que vous voulez, mais ne le rendez pas trop long, vous pouvez toujours utiliser la fonction AI Improve pour apporter des modifications supplémentaires plus tard.

Après avoir saisi votre demande, cliquez sur le bouton « Générer ».

L’IA va maintenant écrire votre nouvel extrait de code, sélectionner l’emplacement d’insertion automatique et définir une logique conditionnelle, si nécessaire.

Si vous souhaitez ajuster votre nouveau snippet, vous pouvez cliquer sur le bouton « AI Improve », qui vous permettra de décrire les modifications que vous souhaitez apporter.

Vous pouvez également utiliser la fonctionnalité AI Improve pour améliorer n’importe lequel de vos extraits de code existants.

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement du code personnalisé dans WordPress. Vous souhaitez expérimenter quelques extraits de code sur votre site ? Consultez notre liste d’astuces extrêmement utiles pour le fichier de fonctions de WordPress, et n’oubliez pas de consulter notre guide ultime pour accélérer votre site WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.