Divi, un thème WordPress très populaire et polyvalent, propose de nombreuses options de personnalisation. Cependant, certains détails comme la virgule séparatrice dans les métadonnées des articles du module blog ne sont pas directement modifiables via l’interface utilisateur. Dans cet article, nous allons vous expliquer pas à pas comment supprimer cette virgule en utilisant un simple code JavaScript à insérer dans les options du thème.
Comprendre les Métadonnées dans le Module Blog de Divi
Les métadonnées d’un article de blog sont des informations affichées sous le titre ou près de l’extrait d’un article. Elles incluent généralement des détails comme la date de publication, l’auteur, et les catégories associées. Par défaut, Divi sépare ces informations avec une virgule, par exemple :
Publié le 18 novembre 2024, par Admin
Dans certains cas, cette présentation peut ne pas s’intégrer harmonieusement dans le design du site. Remplacer la virgule par un espace peut rendre le contenu plus fluide et esthétiquement plaisant :
Publié le 18 novembre 2024 par Admin
Pour ce faire, nous utiliserons un script JavaScript inséré dans les options du thème Divi.
Étape 1 : Accéder aux Options du Thème Divi
- Connectez-vous à votre tableau de bord WordPress.
- Allez dans le menu de gauche et cliquez sur Divi > Options du thème.
- Une fois dans les options du thème, accédez à l’onglet Intégration.
Étape 2 : Ajouter le Code JavaScript
Le Code à Utiliser
Voici le script JavaScript que vous devez insérer :
<script>
jQuery(document).ready(function() {
jQuery('.post-meta').each(function() {
let thisMeta = jQuery(this).html();
thisMeta = thisMeta.replace(/, /, ' ');
jQuery(this).html(thisMeta);
});
});
</script>Comment Fonctionne le Code ?
- Chargement après le DOM
La fonctionjQuery(document).ready()s’assure que le code s’exécute uniquement après que la page a été entièrement chargée. Cela évite des erreurs liées à des éléments non encore disponibles. - Ciblage des Métadonnées
Le script cible les éléments HTML ayant la classe.post-meta. Cette classe est utilisée par Divi pour les métadonnées des articles dans le module blog. - Remplacement de la Virgule
La méthodereplace(/, /, ' ')détecte une virgule suivie d’un espace (,) et la remplace par un simple espace ( - Mise à Jour du Contenu HTML
Enfin, la fonctionjQuery(this).html(thisMeta)met à jour les métadonnées de l’article avec le nouveau format.
Étape 3 : Intégrer le Code dans Divi
- Collez le Code
Rendez-vous dans Divi > Options du thème > Intégration. Dans la section « Ajouter du code au<head>de votre blog », collez le code ci-dessus. - Sauvegardez les Modifications
Cliquez sur Sauvegarder les modifications pour appliquer le code à votre site. - Rechargez la Page
Visitez une page ou une archive de votre blog pour vérifier que les changements ont bien été pris en compte.
Résultat Attendu
Avant d’ajouter le code, les métadonnées des articles s’affichaient de cette manière :
Publié le 18 novembre 2024, par Admin
Après avoir appliqué le script, elles apparaîtront ainsi :
Publié le 18 novembre 2024 par Admin
Astuces pour Éviter les Problèmes
1. Vérifiez la Classe CSS
La classe .post-meta est utilisée par défaut dans Divi pour les métadonnées. Si votre site utilise une version personnalisée ou modifiée de Divi, inspectez les éléments avec les outils de développement de votre navigateur pour confirmer que la classe est correcte.
2. Assurez-vous que jQuery est Activé
Divi inclut jQuery par défaut, mais si un plugin ou une personnalisation désactive jQuery, le script ne fonctionnera pas. Assurez-vous que jQuery est bien chargé en vérifiant le code source de votre page.
3. Videz le Cache
Si les changements ne sont pas visibles immédiatement, videz le cache de votre site (si vous utilisez un plugin de mise en cache) et celui de votre navigateur.
Alternatives à JavaScript
Si vous préférez éviter d’utiliser JavaScript, voici d’autres options pour supprimer la virgule séparatrice :
1. Modifier les Fichiers PHP
Vous pouvez éditer les fichiers PHP du thème pour personnaliser la structure des métadonnées. Par exemple, en modifiant le fichier single.php ou functions.php pour ajuster directement la façon dont les métadonnées sont générées.
Cependant, cette méthode nécessite une certaine connaissance de PHP et peut rendre votre site vulnérable aux erreurs lors des mises à jour du thème.
2. Utiliser un Plugin
Des plugins comme Code Snippets permettent d’ajouter et de gérer facilement des extraits de code sans modifier directement les fichiers du thème.
Résolution des Problèmes
1. Le Code ne Fonctionne Pas
- Vérifiez que le script est correctement inséré dans les options du thème et que la syntaxe est exacte.
- Confirmez que la classe CSS
.post-metaest bien utilisée dans vos métadonnées. - Assurez-vous que jQuery est chargé sur votre site.
2. Les Modifications Sont Réversibles
Si vous souhaitez revenir à la version originale avec la virgule, il vous suffit de supprimer le script dans les options du thème.
Conclusion
Personnaliser les métadonnées du module blog de Divi est un excellent moyen d’adapter le design de votre site à vos préférences. Grâce à ce guide, vous pouvez facilement supprimer la virgule séparatrice et la remplacer par un espace pour obtenir un rendu plus harmonieux.
Si vous êtes novice en programmation ou si vous souhaitez une solution plus robuste, envisagez d’utiliser des plugins ou de faire appel à un développeur. La flexibilité de Divi vous permet de transformer vos idées en réalité avec peu d’efforts. Profitez de votre nouveau design de blog sans virgule !
