Différences entre les versions de « Wordpress Divi, créer un lien lire la suite »
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. | a.art-read-more { | ||
text-transform: uppercase; | text-transform: uppercase; | ||
background: #000000; | background: #000000; | ||
color: #ffffff; | color: #ffffff; | ||
border: 1px solid black; | border: 1px solid black; | ||
padding: 8px; | padding: 8px; | ||
text-align: center; | text-align: center; | ||
display: block; | display: block; | ||
} | } | ||
a.art-read-more:hover { | |||
a. | |||
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; }