De nombreux sites Web WordPress utilisent du code ou des fonctions personnalisés quelque part dans leurs articles et leurs pages. La plateforme facilite l’ajout de ce code, mais si vous comptez réutiliser des extraits dans l’ensemble de votre site, il peut être pénible d’ajouter du code manuellement chaque fois que vous en avez besoin.
Au lieu de devoir insérer vos extraits de code à la main chaque fois qu’ils sont nécessaires, il est plus logique de les organiser et de les sauvegarder à l’aide de plugins. Dans cet article, nous parlerons des avantages de l’organisation de vos extraits de code, puis nous vous montrerons comment le faire en utilisant le plugin Code Snippets Extended en deux étapes. Mettons-nous au travail !
Pourquoi organiser vos extraits de code ?
Même si vous n’êtes pas un développeur, il est fort probable que vous deviez ajouter manuellement du code à votre site Web.
Beaucoup d’utilisateurs de WordPress ajoutent des extraits de code personnalisés à leurs articles et à leurs pages. Indépendamment de votre niche et de votre taille, il existe de nombreuses situations où vous devrez ajouter un peu de code à votre site. Prenez Google Adsense ou Facebook Pixel, par exemple, qui nécessitent tous deux l’ajout de quelques lignes de JavaScript à votre site Web avant de pouvoir fonctionner. De nombreux plugins WordPress nécessitent également l’utilisation de shortcodes, de sorte que les chances d’ajouter du code personnalisé à votre site Web sont élevées.
C’est donc une excellente idée de trouver un moyen de sauvegarder tous ces bouts de code que vous utilisez sur votre site. Voici pourquoi :
- Vous pouvez faire référence à votre code chaque fois que cela est nécessaire. Parfois, vous oubliez les lignes de code personnalisé que vous avez ajoutées à vos fichiers. Il est donc utile d’organiser vos extraits de code à l’aide d’une bibliothèque.
- Vous pourrez réutiliser vos extraits de code plus facilement. Si vous devez utiliser le même code plusieurs fois, il est judicieux de le stocker pour une utilisation ultérieure.
Vous pourriez, bien sûr, enregistrer ces extraits de code dans des fichiers texte ordinaires sur votre ordinateur ou dans le nuage. Cependant, l’utilisation du bon plugin WordPress peut vous fournir un moyen plus approprié de les stocker sur votre site. Ainsi, vous saurez quel code vous avez ajouté à chaque site Web spécifique sur lequel vous travaillez.
Le plugin Code Snippets Extended est un outil intéressant qui vous permet de mettre en place une bibliothèque de code simple au sein de WordPress. Il vous permet d’enregistrer du code personnalisé, de l’identifier en utilisant le nom de votre choix, puis de l’ajouter à n’importe lequel de vos articles et pages en quelques clics.
De plus, le plugin vous permet également de prévisualiser les effets de vos extraits de code, pour autant qu’il s’agisse de simples JavaScript ou CSS. Il prend également en charge le PHP, mais ces extraits ne s’affichent généralement pas aussi bien avec la fonctionnalité de prévisualisation de l’outil.
Si, dans l’ensemble, le plugin fonctionne bien avec Divi Builder, il y a un problème qui nécessite une solution de contournement. Par défaut, l’outil ajoute un nouveau bouton à l’éditeur, qui vous permet d’ajouter n’importe quel snippet de votre bibliothèque à votre article ou page. Cependant, le bouton disparaît lorsque vous passez au Divi Builder. La solution est pourtant simple, et nous allons l’explorer plus en détail dans une minute.
Caractéristiques principales :
- Enregistrez tous vos extraits de code personnalisés dans une bibliothèque centralisée au sein de votre tableau de bord.
- Identifiez chaque snippet à l’aide d’un nom unique.
- Attribuez des shortcodes faciles à utiliser à chaque élément de votre bibliothèque.
- Ajoutez des extraits à vos articles et pages à l’aide d’une nouvelle option dans l’éditeur WordPress, sans avoir à toucher au code.
Prix : GRATUIT | Plus d’informations
Comment créer une bibliothèque d’extraits d’articles à utiliser dans vos articles et pages (en 2 étapes)
Avant de commencer, vous aurez besoin d’installer et d’activer le plugin. Une fois que vous êtes prêt, passez à l’étape numéro 1 !
Étape 1 : Ajouter de nouveaux snippets à votre bibliothèque
Après avoir installé le plugin, vous verrez un nouvel onglet appelé Snippets sur votre tableau de bord WordPress. Cliquez dessus et cherchez l’option Ajouter des Snippets . Sur l’écran suivant, vous serez en mesure de définir un nom pour identifier votre code dans la bibliothèque, ainsi que de télécharger tout fichier multimédia qui est nécessaire pour l’exécution du code :
N’oubliez pas que le code fonctionnera même si vous ne téléchargez pas les fichiers multimédias nécessaires à partir de cette page, tant qu’ils se trouvent dans votre bibliothèque. Cette fonctionnalité n’est là que pour vous permettre d’avoir un aperçu des effets de votre code à l’aide du bouton Test en bas de la page.
Vous verrez également un éditeur dans lequel vous pourrez saisir votre code CSS, JavaScript, PHP et jQuery. Cependant, il devra être entouré de balises spécifiques à chaque langue. Voici quelques exemples rapides à titre de référence :
<style>CSS se place entre ces balises.</style> ;
<?php Les balises PHP, quant à elles, sont différentes, alors gardez-le à l'esprit. ?> ;
<script type="text/javascript"> ; Il en va de même pour JavaScript, qui utilise ce type de balise. </script> ;
<script type="text/javascript"> ; jQuery(function($) {
$(document).ready(function(){
// jQuery utilise les balises les plus complexes - elles doivent être configurées exactement comme indiqué, et tout code doit être placé dans cette section.
}) ;
}) ;
</script> ;
Vous pouvez faire référence à toutes ces balises sous l’éditeur chaque fois que vous ajoutez un nouveau snippet, et tant que vous vous rappelez que chaque langue nécessite une balise différente, vous n’avez pas besoin de les mémoriser. De plus, vous pouvez utiliser plusieurs langues dans un même extrait – veillez simplement à les entourer de leurs balises respectives.
Une fois que vous avez fini de taper ou de coller votre code, utilisez le bouton Enregistrer le snippet en bas de la page, et il apparaîtra dans l’onglet Snippets > Snippets de votre tableau de bord WordPress :
Il ne vous reste plus qu’à tester votre nouvel extrait en utilisant à la fois l’éditeur WordPress et le Divi Builder.
Étape 2 : Insérer vos snippets dans vos articles et pages Divi
Si vous n’utilisez pas le Divi Builder, vous pouvez ouvrir n’importe lequel de vos articles ou pages en utilisant l’éditeur WordPress normal. En haut de la page, vous verrez un nouveau bouton « Insérer un Snippet » :
En cliquant dessus, vous ferez apparaître une superposition affichant tous les éléments de votre bibliothèque, et vous pourrez sélectionner celui que vous voulez :
Le plugin ajoutera le code à l’éditeur, et vous serez prêt – c’est aussi simple que cela. Cependant, si vous utilisez Divi Builder, vous ne pourrez pas accéder à cette option. Le moyen le plus simple de contourner ce problème est d’ouvrir l’onglet Snippets de votre tableau de bord dans une nouvelle fenêtre et de copier le shortcode correspondant au code que vous souhaitez ajouter. Une fois que vous l’avez, retournez dans le Créateur Divi et ajoutez un module Code à la page sur laquelle vous travaillez :
Une fois que vous y êtes, collez votre code court dans le champ Contenu et enregistrez vos modifications :
Votre code fonctionne maintenant comme d’habitude. L’utilisation de Divi Builder ajoute une étape au processus, mais vous pouvez toujours stocker tous vos extraits de code dans une bibliothèque interne facile d’accès.
Conclusion
Si vous êtes comme nous, vous recherchez l’efficacité dans tous vos projets. Ajouter le même code à plusieurs pages ou articles à la main est possible, mais ce n’est pas une bonne utilisation de votre temps. Il est préférable de tester le code une fois, de l’enregistrer dans votre bibliothèque et de le conserver dans votre poche arrière virtuelle pour pouvoir l’utiliser à tout moment.
Le plugin Code Snippets Extended vous permet de faire exactement cela. Il suffit de l’installer et de suivre les deux étapes suivantes :
- Ajoutez de nouveaux snippets à votre bibliothèque.
- Insérez vos snippets dans vos articles et pages Divi.
Vous avez des questions sur la façon d’ajouter des extraits de code à votre site Web Divi ? Posez-les dans la section des commentaires ci-dessous !
Image miniature de l’article par Andrii Bezvershenko / shutterstock.com.
