Différences entre les versions de « Wordpress Divi, créer un lien lire la suite »
Aller à la navigation
Aller à la recherche
m (Admin a déplacé la page Wordpress Divi vers Wordpress Divi, créer un lien lire la suite sans laisser de redirection) |
|||
(18 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 : | Ligne 1 : | ||
==Ajouter un bouton "lire la suite" (read more) aux articles== | |||
=== Ajout du lien avec Javascript === | |||
==Ajouter un bouton "lire la suite" (read more) aux articles avec | Divi -> Option du thème -> onglet "L'intégration" -> dans la boîte "Ajouter ligne de code à la < head > de votre blog" | ||
<pre> | |||
Divi -> Option du thème -> onglet "L'intégration" -> dans la | |||
< | |||
<script> | <script> | ||
jQuery(function($){ | jQuery(function($){ | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
$('.category article').each(function(){ | $('.category article').each(function(){ | ||
let $link=$(this).find(".entry-title a").attr('href'); | let $link=$(this).find(".entry-title a").attr('href'); | ||
Ligne 17 : | Ligne 14 : | ||
$(this).append('<a class="art-read-more" href="'+$link+'">Lire la suite...</a>'); | $(this).append('<a class="art-read-more" href="'+$link+'">Lire la suite...</a>'); | ||
}); | }); | ||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
</ | </pre> | ||
=== Transformer le lien en bouton avec CSS === | |||
Divi -> Option du thème -> onglet "Général" -> dans la boîte "Personnaliser CSS" | |||
<pre> | |||
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; | |||
} | |||
</pre> | |||
[[Category:Informatique]] |
Version actuelle datée du 5 mars 2021 à 04:31
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; }