Personnaliser le « Read More » de WordPress

Le « Read More » est une fonction qui vous permet d’afficher un texte « Lire la suite… » dans vos billets WordPress. Par exemple, un blog normal n’affichera pas tout son article dans l’index, c’est pour sa qu’il va utiliser cette fonction.

Sa va vous permettre de coupé votre texte en deux pour qu’il soit plus présentable.

Mais quel est l’intérêt de laisser ce texte perturber votre blog, le « Lire la suite… » vous hante chaque nuit… sûrement. Donc voici un petit tutoriel expliquant comment modifier ce texte sadique.

Tout d’abord il faut savoir ce que vous voulez, un bouton, un simple texte (grrr..) ou tout simplement une image. Un bouton et une image c’est pas pareil… enfin pour moi.

Tout d’abord, changer le texte :
Il vous faut modifier le fichier « index.php » de votre thème, chercher ensuite la ligne contenant : < ?php the_content('Lire le reste de cet article »'); ?>« . Voilà vous pouvez modifier le texte a votre guise.

Le texte devient image :
Toujours dans cette ligne, il vous suffit simplement d’insérer une balise d’image, tels que :
[html][/html]
Un bouton « Lire la suite… » :

Les choses sérieuse commence, vous avez (ou tu a..) remarquer que j’ai mit en place ce genre de bouton sur ce blog, il est tout mignon. Je vous met a disposition le fichier source de mon bouton, à utiliser sans modération. Pour avoir le même effet, éditez le fichier « post-template.php » qui se trouve dans le dossier « wp-includes ». Modifier ensuite le code de la ligne 125 sous WordPress 2.6 et 221 sous WordPress 2.7 ! par celui-ci :
[php]$output .= ‘

« ; }
[/php]

Ensuite, éditer le fichier « style.css » de votre thème et ajoutez-y ce code :
[html].read a {
border:0;
vertical-align:bottom;
display:block;
width:100px;
height:28px;
background:url(images/read.png) 0 0 no-repeat;
text-decoration:none;
}

.read a:hover {
border:0;
vertical-align:bottom;
display:block;
width:100px;
height:28px;
background:url(images/read.png) 0 0 no-repeat;
text-decoration:none;
background-position:0 -27px;
}
[/html]
Modifier le lien de votre image ou laisser tel quel, sa ne me gène pas si vous utilisez mon bouton… faites moi signe si vous avez un soucis !

Je vous propose également un excellent moyen de retoucher vos photos en ligne gratuitement.

Allez plus loins

18 réponses

  1. Sympa ce tuto. mais je vois pas le bouton ‘lire la suite » dant ton blog.

    Sinon c’est quoi la différence entre un bouton et une image dans l’exemple que tu donne ?

  2. Ah… tu es sur quel navigateur ? j’ai tester sous firefox 3, opera, safari…
    Bah pour moi un bouton c’est avant tout une image :razz: mais par exemple le bouton est une petite image qui peut avoir un rollover, ou un gif animé. Le bouton ziki, c’est un bouton, on ne va pas dire l’image de ziki…. :grin: :grin:

    Une image c’est plutôt un graphisme numérique…

  3. Maintenant je le vois :)

    C’est ce que je pensais l’effet de survol. mais comme il n’apparaisait pas tout à l’heure…

    Je suis sur firefox 3 ou bien Flock. (parfois konqueror et opéra pour les tests de style)

    IE jamais sauf au boulot pour tester aussi mes pages.

  4. @Ichigo: Il n’y a pas grand chose installer sur ce wordpress, quelque babiole ^^, le blog se charge e moins d’une seconde pour les requêtes, ce qui rend lourd est le petit widget mybloglog… mais une fois le tout chargé la navigation est rapide
    :razz: Si tu a des conseils pour pré-charger des images, des scripts… ou tout simplement des astuces pour amélioré le blog n’hésite pas :wink:

    @jisee: le bouton n’apparaissait pas, peut être parce-que j’était entrain de modifier l’image…

  5. Tu a entièrement raison, il y avait beaucoup de chose inutile… mais je vais quand même remettre fancy-zoom, pour les images, même s’il me prend quelques centièmes de secondes…

    De même pour le widget mybloglog… :wink:

  6. hello,

    Pour avoir le même effet, éditez le fichier "post-template.php" qui se trouve dans le dossier "wp-includes". Modifier ensuite le code de la ligne 125 (seulement la ligne 125) par celui-ci :

    pourrais tu m’indiquer la ligne exacte à modifier, car ma ligne 125 correspond à un commentaire :p

    Merci ;)

  7. J’avais directement inséré le dans le ?php the_content(‘Lire la suite…’); ?>

    ça fonctionne parfaitement, mais seulement sur Firefox :-/

    Merci pour l’astuce donc ! ;)

  8. Juste pour info, si vous décider de remplacer « More » par du texte, pensez à l’optimiser un minimum car les moteurs de recherche vont le considérer comme un lien hypertexte.
    Donc plutôt que de référencer « More », moi j’ai remplacé par « >> » ça évite de mettre un mot en avant.
    Enfin bon, voilà quoi !
    :mrgreen:

  9. Pas mal du tout comme astuce. Cela permet notamment de placer son lien lire la suite en dehors de la boucle, et de le styler vraiment comment on le désire.

    On pourrait même y ajouter des fonctions pour alterner la mise en page selon la catégorie (ou de manière numérique avec un bouton sur deux).

    Pour ceux que ca intéresse, j’avais fait il y a longtemps un petit tuto complémentaire pour cette fois modifier l’adresse du lien Read More.

    En tout cas, Geekeries est toujours une excellente source d’info sur WordPress. ;)

  10. Bonjour à vous,
    En essayant de suivre votre exemple sur mon blog ), je n’ai réussis qu’à faire une image (plutôt qu’au vrai bouton) car je ne trouve pas la ligne à devoir modifier dans mon post-template.php.

    En effet, utilisant la dernière version de WordPress, cet article semble en voie de devenir caduc. Cependant, si vous pouviez nous aider à appliquer le code dans la bonne ligne, je serais bien heureux.

    Merci de votre attention

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *