J Shortcodes est une extension vous permettant d'insérer facilement de ...

En savoir plus

WordPress Forms est une extension vous permettant d'intégrer dans vos ...

En savoir plus

Publicité

En savoir plus
Personnaliser le “Read More” de WordPress

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 : “. 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 :

<img alt="Read More" src="url_de_votre_image"/>

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 :

$output .= '<div class="read"><a href="'. get_permalink() . "#more-$id\"></a></div>"; }
 

Ensuite, éditer le fichier “style.css” de votre thème et ajoutez-y ce code :

.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;
}

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 !

Ajouter un commentaire

22 commentaires !

  1. jisee says:

    juin 24, 2008

    Répondre

    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. Valentin says:

    juin 24, 2008

    Répondre

    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. jisee says:

    juin 24, 2008

    Répondre

    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 says:

    juin 24, 2008

    Répondre

    Sinon donnant suite au post de Jisee, je trouve le site hyper lourd avec la tonne de java que tu as installé sur ton wordpress…

    Enfin ce n’est que mon avis….

  5. jisee says:

    juin 24, 2008

    Répondre

    Bon bah vive google gear dans wordpress 2.6. qui meetra ce genre de soucis dans le passé du web

  6. Ichigo says:

    juin 24, 2008

    Répondre

    Je ne vois pas le rapport. Google gears permet d’utiliser des application Web en offline. Et le rapport avec le Java?

  7. jisee says:

    juin 24, 2008

    Répondre

    Ah oui google gear ne stockera en cache que ce qui concerne l’administration. j’avais mal compris.

  8. Valentin says:

    juin 24, 2008

    Répondre

    @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…

  9. Ichigo says:

    juin 25, 2008

    Répondre

    @valentin: Bah… j’ai trifouillé dans ton code source. J’ai trouvé 8 entrée de script Java. je trouve çà énorme. Sûrement tu en a l’utilité de ces scripts. çà me fais bizarre car tu viens de faire un article pour optimiser son WordPress :s
    -Réduire le Java
    -Mettre peut etre un plugin de cache.
    -etc…
    Tu fais comme tu veux mais demande si tout ce que tu utilise, t’es vraiment utile.
    Moi en tant que visiteur, çà me fais chier cette lourdeur…

    Sinon Bonne Journée.

  10. Valentin says:

    juin 25, 2008

    Répondre

    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:

  11. [...] personnaliser son READ MORE dans WordPress ! Un petit LINK pour vous signaler un excellent article parlant de la personnalisation la fonction “read more” de [...]

  12. [...] fait il est très simple de personnalisé cette balise, comme celle du “Read More“. Tout d’abord, il faut savoir ce que vous voulez avoir pour une meilleure navigation [...]

  13. Ann-cha says:

    fév 12, 2009

    Répondre

    MERCI!!!!!!!!! :)

  14. Loni says:

    avr 23, 2009

    Répondre

    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 ;)

    • Valentin says:

      avr 24, 2009

      Répondre

      Article mis à jour ! C’est ligne 221 pour WordPress 2.7 :)

  15. Yeahman says:

    août 17, 2009

    Répondre

    Hello,

    Et avec la version 2.8 ? On remplace quel code ?

    Merci d’avance

  16. Gomah says:

    nov 27, 2009

    Répondre

    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 ! ;)

  17. shuyinz says:

    déc 13, 2009

    Répondre

    Bonjour :)

    Super tuto mais je suis sous WordPress 2.8.6 et je voudrais avoir quelle ligne modifier dans le post-template ?

    Merci d’avance

  18. Japonais says:

    avr 14, 2010

    Répondre

    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:

  19. Daniel from SeoMix Wordpress says:

    oct 12, 2010

    Répondre

    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. ;)

  20. crow says:

    mai 7, 2011

    Répondre

    je suis sous WordPress 3.1.2 sa ce trouve a quelle ligne svp,merci a vous

  21. radiCarl says:

    déc 11, 2011

    Répondre

    Bonjour à vous,
    En essayant de suivre votre exemple sur mon blog (http://radicarl.net/), 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

Qu'est-ce que vous en pensez ? :)

Nom obligatoire

Site

♥ Ici, on utilise KeywordLuv. Entrez YourName@YourKeywords dans le formulaire "Nom" pour bénéficier des avantages SEO d'un mot-clef ciblé. Devenez membre et connectez-vous pour partager des fichiers via les commentaires !

Votre Newsletter WordPress !