Comment créer une bibliothèque d'extraits de publication à utiliser dans vos publications et pages

De nombreux sites Web WordPress utilisent un code ou des fonctions personnalisés quelque part dans leurs articles et pages. La plate-forme facilite l'ajout de ce code, mais si vous envisagez de réutiliser des extraits de code sur votre site, il peut être difficile d'ajouter du code manuellement chaque fois que vous en avez besoin.

Au lieu d'avoir à insérer vos extraits de code à la main chaque fois que vous en avez besoin, il est plus logique de les organiser et de les enregistrer à l'aide de plugins. Dans cet article, nous parlerons des avantages de garder vos extraits de code organisés, puis vous montrerons comment le faire à l'aide du plugin Code Snippets Extended en deux étapes. Mettons-nous au travail!

Pourquoi devriez-vous organiser vos extraits de code

Même si vous n'êtes pas un développeur, il est probable que vous deviez ajouter manuellement du code à votre site Web.

De nombreux utilisateurs de WordPress ajoutent des extraits de code personnalisés à leurs publications et pages. Quels que soient votre créneau et votre taille, il existe de nombreuses situations dans lesquelles vous devrez ajouter un peu de code à votre site. Prenez Google Adsense ou Facebook Pixel, par exemple, qui vous obligent tous deux à ajouter quelques lignes de JavaScript à votre site Web avant de pouvoir fonctionner. De nombreux plugins WordPress nécessitent également que vous utilisiez des codes courts, de sorte que les chances d'ajouter du code personnalisé à votre site Web sont élevées.

Compte tenu de cela, c'est une excellente idée de trouver un moyen d'enregistrer tous ces extraits de code que vous utilisez sur votre site. Voici pourquoi:

• Vous pouvez référencer votre code chaque fois que nécessaire. Parfois, vous pouvez oublier les lignes de code personnalisé que vous avez ajoutées à vos fichiers, il est donc avantageux d'organiser vos extraits à 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 logique de le stocker pour une utilisation ultérieure.

Vous pouvez, bien sûr, simplement enregistrer ces extraits de code à l'aide de fichiers texte normaux sur votre ordinateur ou dans le cloud. Cependant, l'utilisation du bon plugin WordPress peut vous fournir un moyen plus approprié de les stocker sur votre site. De cette façon, vous saurez quel code vous avez ajouté à chaque site Web spécifique avec lequel vous travaillez.

Présentation du plugin étendu Code Snippets

Le plugin Code Snippets Extended est un outil intéressant qui vous permet de configurer une bibliothèque de code simple dans WordPress. Il vous permet d'enregistrer un 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, à condition qu'ils soient de simples JavaScript ou CSS. Il prend également en charge PHP, mais ces extraits ne s'affichent généralement pas aussi bien en utilisant la fonctionnalité de prévisualisation de l'outil.

Alors que le plugin fonctionne bien avec le Divi Builder dans l'ensemble, 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 extrait de votre bibliothèque à votre publication ou page. Cependant, le bouton disparaît lors du basculement sur le Divi Builder. Le correctif est cependant simple, et nous l'explorerons plus en détail dans une minute.

Principales caractéristiques:

• Enregistrez tous vos extraits de code personnalisés dans une bibliothèque centralisée au sein de votre tableau de bord.
• Identifiez chaque extrait à l'aide d'un nom unique.
• Attribuez des codes courts faciles à utiliser à chaque élément de votre bibliothèque.
• Ajoutez des extraits à vos articles et pages à l'aide d'une nouvelle option sur l'éditeur WordPress, sans avoir à toucher au code.

Prix ​​: GRATUIT | Plus d'information

Comment créer une bibliothèque d'extraits de publication à utiliser dans vos publications et pages (en 2 étapes)

Avant de commencer, vous devez installer et activer le plugin. Une fois que vous êtes prêt, passez à l'étape numéro un !

Étape 1 : Ajoutez de nouveaux extraits de code à 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 recherchez l'option Ajouter des extraits . Sur l'écran suivant, vous pourrez définir un nom pour identifier votre code dans la bibliothèque, ainsi que télécharger tous les fichiers multimédias nécessaires à l'exécution du code :

Gardez à l'esprit que le code fonctionnera toujours même si vous ne téléchargez pas les médias nécessaires à partir de cette page, tant qu'ils se trouvent dans votre bibliothèque. Cette fonctionnalité n'est là que pour que vous puissiez prévisualiser les effets de votre code en utilisant le bouton Tester en bas de la page.

Ensuite, vous verrez également un éditeur dans lequel vous taperez votre code CSS, JavaScript, PHP et jQuery. Cependant, il devra être enveloppé dans des balises spécifiques pour chaque langue. Voici quelques exemples rapides pour référence :

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

Vous pouvez référencer toutes ces balises sous l'éditeur chaque fois que vous ajoutez un nouvel extrait, et tant que vous vous souvenez que chaque langue nécessite une langue différente, vous n'avez pas besoin de les mémoriser. De plus, vous pouvez utiliser plusieurs langues dans le même extrait - assurez-vous simplement de les envelopper à l'aide de leurs balises respectives.

Une fois que vous avez terminé de taper ou de coller votre code, utilisez le bouton Enregistrer l'extrait en bas de la page, et il apparaîtra dans l'onglet Snippets > Snippets sur votre tableau de bord WordPress :

Maintenant, il ne reste plus qu'à tester votre nouvel extrait en utilisant à la fois l'éditeur WordPress et le Divi Builder.

Étape #2 : Insérez vos extraits dans vos publications et pages Divi

Si vous n'utilisez pas Divi Builder, vous pouvez simplement ouvrir n'importe lequel de vos articles ou pages à l'aide de l'éditeur WordPress standard. En haut, vous verrez un nouveau bouton Insérer un extrait :

Cliquer dessus fera apparaître une superposition affichant tous les éléments de votre bibliothèque, et vous pourrez sélectionner celui que vous voulez :

Maintenant, le plugin ajoutera le code à l'éditeur, et vous êtes prêt – c'est aussi simple que cela. Cependant, si vous utilisez le Divi Builder, vous ne pourrez pas accéder à cette option. La meilleure façon de contourner ce problème est d'ouvrir votre tableau de bord de l' onglet Snippets dans une nouvelle fenêtre et copiez le correspondant shortcode pour le code que vous voulez ajouter. Une fois que vous l'avez, retournez dans le Divi Builder et ajoutez un module Code à la page sur laquelle vous travaillez :

Une fois connecté, collez votre shortcode dans le champ Contenu et enregistrez vos modifications :

Maintenant, votre extrait fonctionnera 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 appréciez l'efficacité dans tous vos projets. Il est possible d'ajouter le même code à plusieurs pages ou publications à la main, mais ce n'est pas une bonne utilisation de votre temps. Au lieu de cela, il est préférable de tester le code une fois, de l'enregistrer dans votre bibliothèque, puis de le conserver dans votre poche arrière virtuelle pour chaque fois que vous en avez besoin.

Le plugin Code Snippets Extended vous permet de faire exactement cela. Installez-le simplement et suivez ces deux étapes :

1. Ajoutez de nouveaux extraits à votre bibliothèque.
2. Insérez vos extraits dans vos publications et pages Divi.

Vous avez des questions sur la façon d'ajouter des extraits de code à votre site Web Divi ? Demandez dans la section commentaires ci-dessous!

Image miniature de l'article par Andrii Bezvershenko / shutterstock.com.