Lire plus blog

Comment modifier le « lire plus » de votre blog Divi ?

Marlène

2 janvier 2019

Par défaut, le CMS WordPress 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 WordPress, 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ème.

Choisir son expression

Pour que votre blog soit plus original, choisissez une expression différente de celle donnée par WordPress :

– 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.

icone double fleche

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 WordPress puis dans Divi > Integration > ajouter ligne de code à la <head> de votre blog

integration head Divi

 

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 WordPress. Afin de rendre cette partie encore plus personnalisée, n’hésitez pas à y ajouter du CSS pour faire un effet de hover.

dégradé noir gris