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
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 :
[[Category:Informatique]]
==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 sur Wordpress==
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 boite "Ajouter ligne de code à la < head > de votre blog"
 
<code>
<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>
</code>
</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;
}