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)
 
(20 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) à 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>
Pour ajouter un bouton "lire la suite" (read more) dans le listing des catégories ou sur la page d'accueil de Wordpress en utilisant Divi, il faut rajouter le javascript suivant dans :
 
Divi -> Option du thème -> onglet "L'intégration" -> dans la boite "Ajouter ligne de code à la < head > de votre blog"
 
<code><nowiki>
 
<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 20 : 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>


</nowiki></code>
[[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;
}