Imaginez que vous venez de créer votre site web WordPress. Il est rempli de contenu et d’attrait visuel, mais il manque quelque chose. Vous souhaitez ajouter une boîte de bio d’auteur personnalisée sous chacun de vos articles de blog. Et sans savoir comment coder, la tâche semble hors de question.
Mais avec les extraits de code WordPress, vous pouvez tirer parti d’un code préétabli pour obtenir les résultats que vous souhaitez. Les extraits de code simplifient la personnalisation.
Il n’est pas étonnant que 29 % du million de sites web les plus visités au monde soient créés avec WordPress : c’est le moyen le plus simple de créer un site web qui vous est propre.
Et les extraits de code WordPress en constituent une grande partie.
Poursuivez votre lecture pour en savoir plus sur les extraits de code personnalisés et sur les meilleurs extraits à ajouter à votre site web.
Qu’est-ce qu’un extrait de code WordPress ?
Les extraits de code WordPress sont de petits morceaux de code qui vous permettent d’ajouter des fonctions spécifiques ou de nouvelles fonctionnalités à votre site web. Considérez-les comme des raccourcis. Vous n’avez pas besoin d’être un expert en codage ou d’engager un développeur pour apporter des modifications mineures ou ajouter des fonctionnalités uniques à votre site web.
Vous pouvez, par exemple, ajouter la case bio dont nous avons parlé plus haut. Vous pouvez aussi changer le logo de la page de connexion pour qu’il corresponde à votre propre marque.
Les extraits de code permettent à votre site web de refléter votre vision sans s’empêtrer dans les complexités du développement web à grande échelle. Qu’il s’agisse d’une petite modification ou d’un changement important, les extraits de code WordPress vous permettent de faire ce que vous voulez.
Pourquoi utiliser des extraits de code dans WordPress ?
Les extraits de code sont essentiels pour personnaliser votre site web WordPress, améliorer ses performances en réduisant la surcharge de plugins et permettre une expérimentation rapide de fonctionnalités telles que les ventes flash ou les changements de mise en page. En outre, ils contribuent à façonner la personnalité unique de votre site web, ce qui permet à votre entreprise de se démarquer.
Vous ne voulez pas d’un site web WordPress basique, à l’emporte-pièce – vous voulez un site web unique, personnalisé à votre marque. Grâce aux extraits de code, vous pouvez y parvenir facilement sans avoir à engager un développeur pour créer un site web à partir de zéro.
Par exemple, la boîte de bio personnalisée que vous avez ajoutée à votre site web vous a évité d’engager un développeur tout en maintenant la vitesse de votre site web, un autre domaine dans lequel les extraits de code brillent.
Bien que les plugins WordPress soient pratiques, ils peuvent imposer à votre site web des contraintes supplémentaires au niveau du serveur, ce qui ralentit son chargement.
Supposons que vous souhaitiez ajouter un bouton de partage social. Un plugin conçu à cet effet peut comporter d’autres fonctionnalités dont vous n’avez pas besoin, ce qui ralentit votre site web.
Mais avec un extrait, il suffit d’ajouter le code spécifique du bouton de partage, ce qui minimise l’impact des bruits de fond inutiles.
Les extraits de code vous donnent également la possibilité d’expérimenter. Bien que les extraits utilisent du code CSS, HTML, JavaScript et PHP, il n’est pas nécessaire d’avoir une expérience préalable du codage pour les utiliser – ils conviennent aux débutants.
Enfin, les snippets améliorent l’expérience utilisateur (UX). L’extrait modifie peut-être la couleur du bouton d’appel à l’action (CTA) pour qu’il soit plus visible ou offre une expérience de défilement unique. Ces petits changements contribuent à l’expérience utilisateur et rendent votre site web mémorable.
Sans oublier que, selon Google, votre UX a une incidence directe sur votre classement dans les moteurs de recherche (SEO).
Comment utiliser et ajouter des extraits de code WordPress
L’avantage des extraits de code WordPress est qu’il n’est pas nécessaire d’être un expert en codage pour qu’ils fonctionnent.
Voyons comment ajouter ces extraits à votre site web, étape par étape :
1. Identifier les objectifs à atteindre
Avant de commencer à ajouter des snippets, réfléchissez au résultat final. Voulez-vous personnaliser votre pied de page ou ajouter un nouveau widget WordPress dans la barre latérale ? Chacun de ces éléments nécessite un code différent, et le fait de connaître votre objectif vous aidera à trouver l’extrait approprié.
Bien qu’il n’existe pas de plateformes dédiées aux utilisateurs pour partager des extraits de code WordPress, vous pouvez opter pour un plugin de bibliothèque d’extraits avec une base de données d’extraits éprouvés et prêts à l’emploi.
Voici quelques options :
- WPCode (le plus complet, mais le plus cher)
- Snippet Shortcodes (idéal pour les snippets répétitifs, comme les biographies d’auteurs)
- Post Snippets (Meilleur pour les blogs ; abordable)
L’utilisation d’un plugin est le moyen le plus simple d’ajouter des snippets. Vous n’avez pas à vous soucier des questions techniques et vous pouvez facilement demander de l’aide si vous rencontrez des problèmes.
Et si vous ne voulez pas de plugins supplémentaires, utilisez la recherche spéciale de Google à l’étape suivante.
2. Obtenez l’extrait de code et collez-le sur votre site web.
Ensuite, vous obtiendrez l’extrait de code que vous souhaitez utiliser par l’intermédiaire d’un plugin ou d’une recherche Google.
Si vous utilisez Google, tapez ceci dans la barre de recherche :
[Type de personnalisation sur votre site web] WordPress « code snippet » (extrait de code)
Par exemple, si vous recherchez un encadré sur la biographie d’un auteur, voici à quoi il ressemblerait :
Le code que vous trouverez devrait avoir un aspect différent des polices normales. En général, le code porte une police monospaciale (voir ci-dessous), avec une double barre oblique (//) indiquant ce que fait chaque ligne de code.
Une fois que vous avez copié le code (le « // » n’a aucune incidence sur le résultat), il est temps de l’ajouter à votre site web. Si vous utilisez un plugin d’extraits de code comme Code Snippets Pro, suivez les instructions du plugin.
Si vous l’ajoutez manuellement, il vous suffira de coller l’extrait au bas de votre fichier functions.php.
Pour accéder à ce fichier, il vous suffit de vous rendre dans votre tableau de bord d’hébergement et de cliquer sur Avancé.
Vous accéderez ainsi à votre cPanel, où vous pourrez accéder à tous vos fichiers.
Faites défiler la page jusqu’à la section Fichiers et cliquez sur Gérer les fichiers.
Une fois qu’un nouvel onglet s’est ouvert, il suffit de cliquer sur le bouton Recherche dans le coin supérieur droit et de taper « functions.php ».
Localisez ensuite le fichier approprié, double-cliquez pour le télécharger et faites-en une copie. Dans la copie, vous pouvez coller votre extrait de code.
Veillez à renommer le fichier avec le nom d’origine exact, puis glissez-déposez-le dans le gestionnaire de fichiers de votre cPanel.
3. Testez votre extrait de code
Une fois que vous avez ajouté votre extrait à votre site web, il est possible qu’il ne fonctionne pas. C’est pourquoi nous vous recommandons de créer une copie de votre fichier functions.php avant d’y apporter des modifications – de cette façon, votre site Web pourra toujours retrouver son aspect d’origine.
En outre, envisagez d’utiliser un site web ou un environnement de démonstration pour tester la fonction de l’extrait et voir comment il se présentera au premier plan. Votre site web ne sera pas mis à jour en temps réel. Et au cas où l’extrait fonctionnerait mal, votre interface utilisateur en temps réel ne serait pas affectée.
Si vous modifiez votre thème, nous vous recommandons d’utiliser un thème enfant et d’ajouter des extraits de code au fichier functions.php de votre thème.
Enfin, vérifiez la fonctionnalité, les problèmes de compatibilité et les autres bogues ou problèmes. Il est important de s’assurer que votre extrait de code ne contient pas d’erreurs et qu’il fait exactement ce que vous vouliez.
4. Analyser la vitesse et d’autres paramètres et les modifier si nécessaire.
Maintenant que votre snippet fonctionne, vous devez vous assurer qu’il n’a pas d’incidence négative sur d’autres aspects de votre site web. En évaluant les indicateurs clés de performance (KPI) – par exemple ceux de Google Analytics– vous saurez s’il vaut la peine de conserver votre snippet.
Par exemple, surveillez des statistiques telles que la vitesse de chargement des pages, l’engagement des utilisateurs et les taux de conversion – elles vous permettront de savoir si votre extrait de code est un ajout utile.
Supposons que vous ayez implémenté un snippet pour changer la couleur du bouton « Ajouter au panier ». Vous souhaitez suivre l’impact de cette modification sur vos ventes.
Le changement de couleur peut rendre le bouton plus attrayant et plus apparent, ce qui peut augmenter les taux de conversion. Il peut aussi devenir une source de distraction et faire baisser les taux de conversion.
Enfin, il est essentiel de surveiller la vitesse de votre site, car c’est un facteur important pour le classement dans Google. Si vous constatez des baisses constantes de la vitesse de votre site web, vous pouvez supprimer l’extrait.
Les meilleurs extraits de code pour WordPress
- Boîte de bio de l’auteur personnalisée
- Page de connexion personnalisée
- Mille-pattes SEO
- Désactiver les commentaires sur des articles spécifiques
- Personnaliser le tableau de bord pour les clients
- Ajouter des icônes de médias sociaux
Nous allons maintenant nous pencher sur certains des extraits de code WordPress les plus utiles pour ajouter de nouvelles fonctionnalités.
Boîte de bio de l’auteur personnalisée
Une boîte de bio d’auteur personnalisée peut enrichir le contenu de vos articles de blog en fournissant un contexte sur l’auteur. Vous pouvez utiliser des plugins comme Simple Author Box, mais un extrait de code léger permet d’obtenir le même résultat sans surcharge.
Cet extrait ajoute une section de bio de l’auteur sous chaque type d’article personnalisé, qui peut être personnalisé pour inclure des liens vers des médias sociaux, une brève bio et une image de l’auteur.
Obtenir le snippet (avec tutoriel).
Page de connexion personnalisée
Votre page de connexion est la porte d’entrée de votre site web, et c’est souvent l’une des premières impressions que les clients et les membres de l « équipe ont de votre marque. Des plugins comme LoginPress modifient l » écran de connexion – mais un extrait de code peut redessiner la page pour qu’elle corresponde à votre image de marque.
Modifiez le logo, l’arrière-plan et les styles de formulaire pour offrir une expérience cohérente et de marque dès le départ.
Mille-pattes SEO
La navigation par fil d’Ariane n’est pas seulement utile pour vos visiteurs, elle améliore également votre référencement en aidant les moteurs de recherche à comprendre la structure de votre site web. Si vous souhaitez qu’un plugin le fasse pour vous, Yoast SEO peut afficher les fils d’Ariane en même temps que d’autres fonctions d’amélioration du référencement.
Mais vous pouvez également ajouter un extrait pour afficher un fil d’Ariane, ce qui évite d’avoir recours à un autre plugin.
Obtenir le code (avec tutoriel).
Désactiver les commentaires sur des articles spécifiques
Bien que les commentaires soient une excellente source d’engagement, il arrive que vous souhaitiez les désactiver pour certains articles. Oui, vous pouvez utiliser un plugin comme Disable Comments, mais quelques lignes de code suffisent pour faire le travail.
Avec un extrait de code ciblé, vous pouvez spécifier quels articles ou pages ne doivent pas afficher de section de commentaires, ce qui vous donne un contrôle total sans l’inconvénient d’un plugin.
Obtenir le code (avec tutoriel).
Personnaliser le tableau de bord pour les clients
Le tableau de bord de WordPress sert de centre de contrôle pour la gestion du contenu, des thèmes, des modèles et des plugins. Cependant, sa configuration par défaut peut s’avérer excessive pour les autres utilisateurs de votre compte, tels que les assistants virtuels, le service clientèle ou la comptabilité.
Grâce à un extrait de code, vous pouvez supprimer ou ajouter des widgets et personnaliser le tableau de bord pour qu’il soit aussi simple ou complexe que nécessaire pour votre équipe.
Obtenir le code (avec tutoriel).
Ajouter des icônes de médias sociaux
Un plugin comme Social Media Share Buttons & Sharing Icons peut ajouter des icônes pertinentes, mais il peut être doté de fonctions dont vous n’avez pas besoin. Dans ce cas, l’utilisation d’un extrait de code permet d’ajouter des icônes sans rien ajouter. De plus, vous pouvez spécifier si vous souhaitez que vos icônes soient placées dans l’en-tête, le pied de page ou la barre latérale.
Obtenir le code (avec tutoriel).
Erreurs potentielles et comment les traiter
Bien que les extraits de code WordPress soient d’excellents outils, ils comportent leur propre lot de défis et de risques. Les erreurs se produisent sous diverses formes, mais vous saurez généralement que quelque chose ne va pas lorsqu’une fonction ne se matérialise pas, que votre site web devient inaccessible ou que vous rencontrez un message d’erreur explicite.
Voici comment traiter six des erreurs les plus courantes :
Erreur de syntaxe
Une erreur de syntaxe provient généralement d’un code incorrect ou incomplet. Il peut s’agir d’un point-virgule manquant, d’une parenthèse supplémentaire ou même d’un nom de fonction mal orthographié. Lorsque cela se produit, WordPress peut soit afficher un message d’erreur directement, soit rendre votre site web inaccessible.
Remède:
Pour résoudre ce problème, vous devez accéder à votre fichier functions.php via votre cPanel ou votre panneau de contrôle d’hébergement. Localisez ensuite le snippet à l’origine du problème, corrigez l’erreur et rechargez votre site web avec un fichier mis à jour.
Conseil: pour éviter ce problème, validez toujours la syntaxe de votre code avant de le déployer à l’aide d’un validateur de code tel que FreeFormatter.
Conflit avec les plugins
Parfois, votre nouvel extrait de code peut entrer en conflit avec les plugins de votre site web, entraînant un dysfonctionnement de l’un d’entre eux ou des deux. Souvent, cela est dû au fait que le plugin et l’extrait de code tentent de modifier ou de contrôler la même fonction.
Remède:
La façon la plus simple d’identifier le plugin qui pose problème est de désactiver tous les plugins, puis de réactiver chacun d’entre eux, en testant à chaque fois pour voir si le problème réapparaît. Une fois le problème identifié, vous pouvez soit rechercher un autre plugin, soit modifier le snippet pour qu’il n’entre plus en conflit avec le plugin.
Le thème s’interrompt après l’ajout d’un snippet
Parfois, l’insertion d’un extrait de code peut entraîner un dysfonctionnement ou un comportement imprévisible de votre thème WordPress. Cela se produit lorsque votre extrait de code entre en conflit avec le code sur lequel votre thème est basé.
Remède:
Malheureusement, vous devez immédiatement supprimer l’extrait de code, car vous ne voulez pas que cela ait un impact sur l’interface utilisateur. Pour éviter ce problème à l’avenir, testez toujours les nouveaux extraits de code sur une version de démonstration de votre site web avant de les déployer sur le site en ligne.
Erreurs de permission
Les erreurs de permission se produisent lorsque les droits d’accès à un fichier ou à un dossier de votre site WordPress sont mal configurés. L’ajout d’un extrait de code dans ces conditions peut entraîner un échec ou même rendre votre site web plus vulnérable aux risques de sécurité.
Remède:
Pour résoudre les problèmes d’autorisation, accédez au répertoire racine de votre site web à l’aide du gestionnaire de fichiers de votre cPanel. Réglez les autorisations de dossier sur 755 et les autorisations de fichier sur 644. Si vous ne vous sentez pas à l’aise pour le faire vous-même, vous pouvez demander de l’aide à votre fournisseur d’hébergement.
L’extrait ne s’exécute pas
Dans certains cas, vous pouvez constater qu’un extrait ne s’exécute tout simplement pas. Cela peut être dû à un placement incorrect, à des conflits avec d’autres codes ou à un code défectueux.
Remède:
Commencez par vérifier que vous avez placé l’extrait au bon endroit dans votre fichier functions.php. Vous pouvez trouver le bon emplacement en effectuant une recherche rapide sur Google ou YouTube pour voir si d’autres personnes ont utilisé le même extrait.
Si l’emplacement du fichier est correct, dépannez en supprimant temporairement d’autres snippets ou plugins récemment ajoutés pour voir s’il n’y a pas de conflit. Et si cela ne fonctionne pas, essayez de faire passer votre extrait par un validateur de code pour voir s’il y a des erreurs.
Préoccupations en matière de sécurité
Les problèmes de sécurité sont le résultat de snippets mal codés, c’est pourquoi vous devez toujours les obtenir auprès de sources fiables. Tout code supplémentaire ajouté à un site web introduit des vulnérabilités supplémentaires, mais s’il est exécuté correctement, il n’entraînera pas de problèmes de sécurité.
Remède:
Là encore, essayez d’obtenir des extraits de sources vérifiables. En outre, vous pouvez faire passer le code par un outil d’analyse de sécurité afin de détecter les vulnérabilités potentielles. Et pour plus de sécurité, sauvegardez votre site web ou votre fichier functions.php pour vous assurer que vos données sont en sécurité.
Dernières réflexions : Le guide ultime des extraits de code WordPress : 6 exemples
Les extraits de code offrent un moyen puissant d’améliorer et de personnaliser votre site web, tout en améliorant l’interface utilisateur. Cependant, les difficultés liées à la saisie du code, en particulier sans plugin, peuvent sembler insurmontables.
Heureusement, les hébergeurs WordPress comme Bluehost simplifient ce processus en proposant des plans qui sont automatiquement accompagnés d’environnements de test, ce qui vous permet de tester des extraits avant de les mettre en ligne.
Et si jamais vous êtes bloqué, le service ProDesign Live de Bluehost offre une assistance en temps réel pour vous aider à surmonter les difficultés.
Ecrire un commentaire