lien "more.."

cpalo · septembre 2013

Bonjour

A la suite du chapo... le lien "more" est inséré

je souhaiterai également inséré un tel lien dans le coprs d'un article.
Exemple:
j'ai un édito qui est relativement long en page d'accueil, et je souhaiterai insérer un tel lien à partir par exemple du 5° paragraphe.

Est-ce possible?

Merci

Stéphane · septembre 2013

Bonjour.
Non ce n'est pas possible

Frédéric · septembre 2013

Tu peux le faire en jquery,

Dans ta feuille de style rajoute cette class:

.morecontent span{display:none}

Qui as pour effets de masquer du contenu.
Dans le template footer.php, ajoute juste devant la balise </body> ce script:

<script>
$(document).ready(function(){
     var showChar=100;              // Nombre de caractères a tronquer
     var ellipsestext="...";           // Caractères à ajouter à la fin de la coupe du texte
     var moretext="Lire la suite"; // Lien à afficher pour voir le reste du contenu
     var lesstext="Réduire";        // Texte à afficher pour réduire le contenu et donc ré afficher l'occurrence de 'moretext'
     $('article[role="article"]').each(function(){var content=$(this).html();
     if(content.length>showChar){var c=content.substr(0,showChar);var h=content.substr(showChar-1,content.length-showChar);
     var html=c+'<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>'+h+'</span>&nbsp;&nbsp;<a href="" class="more">'+moretext+'</a></span>';$(this).html(html);}});
     $('.more').click(function(){if($(this).hasClass('less')){$(this).removeClass('less');$(this).html(moretext);}else{$(this).addClass('less');$(this).html(lesstext);}
     $(this).parent().prev().toggle();$(this).prev().toggle();return false;});
     }
);
</script>

Ici je me suis basé sur le thème par défaut, à adapter suivant ton thème.
Il te faut charger bien sur la lib Jquery

lien "more.."

Réponses