Wordpress Divi, créer un lien lire la suite

De Wiki de la famille Lambelet
Révision datée du 5 mars 2021 à 03:31 par Admin (discussion | contributions) (Admin a déplacé la page Wordpress Divi vers Wordpress Divi, créer un lien lire la suite sans laisser de redirection)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche

Ajouter un bouton "lire la suite" (read more) aux articles

Ajout du lien avec Javascript

Divi -> Option du thème -> onglet "L'intégration" -> dans la boîte "Ajouter ligne de code à la < head > de votre blog"

<script>
jQuery(function($){ 
 $(document).ready(function(){
  $('.category article').each(function(){
    let $link=$(this).find(".entry-title a").attr('href');
    $(this).append('<a class="art-read-more" href="'+$link+'">Lire la suite...</a>');
  });
  $('.home article').each(function(){
    let $link=$(this).find(".entry-title a").attr('href');
    $(this).append('<a class="art-read-more" href="'+$link+'">Lire la suite...</a>');
  });
 });
});
</script>

Transformer le lien en bouton avec CSS

Divi -> Option du thème -> onglet "Général" -> dans la boîte "Personnaliser CSS"

a.art-read-more {
    background: #000000;
    color: #ffffff;
    border: 1px solid black;        
    padding: 5px;
    margin: auto;
    text-align: center;
    display: block;
}
a.art-read-more:hover {
    background: #ffffff;
    color: #000000;
}