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 :

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

    Publié dans Développement web
    En ligne depuis le 24 juin
    Share |

    Partagez des informations à propos de cet article !

    Pour toute question technique, merci de laisser un commentaire clair et précis en informations.

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

    2. 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

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

    4. Yeahman

      Hello,

      Et avec la version 2.8 ? On remplace quel code ?

      Merci d’avance

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

    6. [...] 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 [...]

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

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

    9. @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 une extension 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. @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…

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

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

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

    14. 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….

    15. 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.

    16. 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…

    17. 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 ?







    who's online