Différences entre les versions de « Wordpress Divi, créer un lien lire la suite »

De Wiki de la famille Lambelet
Aller à la navigation Aller à la recherche
Ligne 21 : Ligne 21 :
Divi -> Général -> Personnaliser CSS
Divi -> Général -> Personnaliser CSS
<pre>
<pre>
a.cat-read-more {
a.art-read-more {
     text-transform: uppercase;
     text-transform: uppercase;
     background: #000000;   /*Background color*/
     background: #000000;
     color: #ffffff;         /*Text color*/
     color: #ffffff;
     border: 1px solid black;         
     border: 1px solid black;         
     padding: 8px;
     padding: 8px;
     text-align: center;
     text-align: center;
     display: block;
     display: block;
    width:140px;
}
}
a.art-read-more:hover {
/*Hover Colors*/
a.cat-read-more:hover {
     background: #ffffff;
     background: #ffffff;
     color: #000000;
     color: #000000;

Version du 12 septembre 2020 à 23:06

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 boite "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>

Mise en page avec CSS

Divi -> Général -> Personnaliser CSS

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