Par défaut, le CMS WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... More intègre des expressions pour lier toutes les parties de votre site. En indiquant que votre site web est en français, ces expressions sont traduites automatiquement.
Dans le blog Divi de WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... More, le lien de base pour accéder à vos articles est « Read more » en anglais et « lire plus » en français. Si vous souhaitez modifier cette expression, vous n’avez pas besoin de passer par les traductions du thèmeUn thème est un ensemble de fichiers qui déterminent l'apparence et la fonctionnalité d'un site web. Divi est un thè... More.
Choisir son expression
Pour que votre blog soit plus original, choisissez une expression différente de celle donnée par WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... More :
– Lire l’article
– En savoir plus
– Aller sur l’article
Ou laissez libre cours à votre imagination !
Attention tout de même à la longueur de votre texte qui pourrait dénaturer l’apparence de votre page blog et qui pourrait prendre une place trop importante par rapport à l’extrait de l’article.
Personnaliser avec une icône font-awesome
Sur font-awesome, vous pouvez sélectionner une icône pour accompagner votre lien. Pour que cela fonctionne, n’oubliez pas de suivre le tuto sur l’intégration des icônes font-awesome dans Divi.
Dans notre exemple, nous choisissons la double-flèche suivante.
Copiez le code correspondant.
<i class="fas fa-angle-double-right"></i>Ce bout de code est à insérer avant ou après la partie de votre texte selon le rendu souhaité.
Dans le premier cas, les doubles-flèches se trouveront à gauche de votre texte, et dans le second cas à droite.
Intégrez votre code dans la balise <head> de Divi
Pour pouvoir insérer votre nouvelle expression et votre icône, rendez-vous dans votre tableau de bord WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... More puis dans Divi > Integration > ajouter ligne de code à la <head> de votre blog
Puis intégrez le code suivant :
<!--Modification du lire plus sur le blog--->
<script type="text/javascript">
(function($) {
$(document).ready(function() {
var newVal = 'Lire l\'article';
$('.more-link').html( newVal );
});
})(jQuery);
</script>
<!--Fin modification lire plus sur le blog-->Ou la version suivante avec l’icône font-awesome
<!--Modification du lire plus sur le blog--->
<script type="text/javascript">
(function($) {
$(document).ready(function() {
var newVal = '<i class="fas fa-angle-double-right"></i> Lire l\'article';
$('.more-link').html( newVal );
});
})(jQuery);
</script>
<!--Fin modification lire plus sur le blog-->Si votre texte contient une apostrophe, n’oubliez pas d’y intégrer un anti-slash pour éviter toute erreur dans le code html. Si vous observez le code, vous remarquez que l’apostrophe sert à encadrer l’expression indiquée en gras.
Par exemple pour le texte « Lire l’article », vous devrez intégrer » Lire l’\article ». Si cet anti-slash n’est pas ajouté, le mot article ne sera pas pris en compte dans le script.
En conclusion, changer l’expression « lire plus » permet de se démarquer par rapport aux autres blog WordPressWordPress est un système de gestion de contenu (CMS) open source qui permet aux utilisateurs de créer et de gérer fac... More. Afin de rendre cette partie encore plus personnalisée, n’hésitez pas à y ajouter du CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... More pour faire un effet de hover.
