Tutoriel : améliorer le “lire la suite” de WordPress

in WordPress

En commentaire de mon article précédent, Guillaume m’a posé quelques questions à propos du lien “Read More” qui est présent en page d’accueil de la plupart des thèmes WordPress, pour faire le lien avec les pages d’articles.

Essayons donc dans cet article d’améliorer ce lien, pour pouvoir y apporter le style que vous souhaitez, ou bien y ajouter des éléments.

Un nouveau filtre a fait son apparition avec la sortie de WordPress 2.7.1, permettant de modifier facilement le lien “read more”, qui vient s’ajouter lorsque vous insérez la balise “More” dans un article.

balise more

Ce filtre, c’est the_content_more_link. Nous allons voir plus bas comment nous en servir.

Modifier le texte du lien “Read More”

Si vous souhaitez simplement modifier le texte de ce lien, deux solutions sont possibles:

  • L’ajout de votre texte article par article à l’intérieur même de la balise more.
  • L’ajout dans le code de votre thème du texte que vous souhaitez voir apparaître.

La première solution est très simple : dans votre éditeur de texte, passez en mode HTML, puis insérez votre code au sein même de la fonction:

<!--more Vous voulez en savoir plus ?-->

Et voilà : votre texte est modifié. Bien sûr, il vous faudra répéter l’opération à chaque fois que vous souhaitez modifier ce texte, article par article.

Mais si vous souhaitez le faire une fois pour toutes, il vous suffit d’ouvrir votre fichier index.php, et de modifier la fonction the_content, comme cela :

<?php the_content( 'Vous voulez en savoir plus ?' ); ?>

Le texte de votre lien “Read More” sera maintenant modifié pour tous vos articles.

Empêcher le saut automatique a l’ouverture des pages articles

Par défaut, lorsque vous cliquez sur un de ces liens, la page qui s’ouvre a une URL particulière, puisqu’à la fin de celle-ci est rajoutée la balise #more plus l’id de l’article en lui-même. Ainsi votre page se charge directement sous l’introduction, permettant au lecteur de continuer sa lecture aisément. Seulement ce saut dans la page n’est peut être pas de votre goût. Pas de problème, un simple ajout dans votre fichier functions.php devrait régler le problème :

<?php
// Empêcher le saut automatique a l'ouverture des pages articles
function werewp_remove_jump($link) {
	$offset = strpos( $link, '#more-' );
	if ( $offset ) {
	    $end = strpos( $link, '"',$offset );
	}
	if ( $end ) {
	    $link = substr_replace( $link, '', $offset, $end-$offset );
	}
	return $link;
}
add_filter( 'the_content_more_link', 'werewp_remove_jump' );
?>

Source: Codex

Ajouter l’attribut nofollow aux liens “read more”

Dans un thème WordPress classique, l’affichage d’un article sur la page d’accueil est souvent composé des éléments suivants :

  • Le titre de l’article, avec un lien pointant vers l’article en lui-même,
  • Un extrait du début de l’article,
  • Une photo miniature, liant aussi vers l’article,
  • Le lien “Lire la suite”, pointant vers l’article.

Comme vous pouvez le voir, cela fait donc 3 liens pointant vers la même source. Si vous souhaitez optimiser votre page pour les moteurs de recherche, vous devriez donc vous pencher sur ces éléments et limiter le nombre de liens sur votre page d’accueil.

Il est donc conseillé d’ajouter l’attribut nofollow sur les liens moins utiles de votre page. Le titre et son lien sont importants, puisque votre titre comporte les mots-clés importants de votre site; le texte “lire la suite” en revanche n’est pas vraiment intéressant, à moins que votre site ne parle de fins de romans pour les impatients :)

Nous allons donc ajouter l’attribut nofollow, avec la fonction suivante, rajoutée à notre fichier functions.php. Cette fonction va remplacer le filtre de WordPress; libre à vous donc d’effectuer les modifications que vous souhaitez; j’ai par exemple retiré la balise #more dont nous parlions plus haut dans cet article, et changé le texte du lien pour “Voulez-vous en savoir plus ?” (trois en un donc :) )

<?php
// Ajouter l'attribut nofollow et retirer la balise #more du lien "read more"
function werewp_custom_morelink() {
    return '<a class="more-link" href="' . get_permalink() . '" rel="nofollow">Voulez-vous en savoir plus ?</a>';
}
add_filter( 'the_content_more_link', 'werewp_custom_morelink' );
?>

Et voilà ! Des questions, des remarques, n’hésitez pas à commenter ! Et si l’article vous a plu, partagez-le ! ;)

35 Comments

  1. Ce que j’en pense c’est que c’est super ! Merci pour l’écriture de ce tuto. Je m’y colle dès que j’ai 5 minutes

    Bonne journée et encore merci !

  2. je n’ai pas de lien qui s’affiche quand je met la balise more
    comment puis je ‘ajouter ?

    • D’après ce que je peux voir de votre site, votre thème utilise les extraits automatiques au lieu de vous laisser gérer l’endroit ou vous arretez votre introduction vous-même.
      Pour régler le problème, dans votre fichier index.php, localisez la fonction suivante : the_excerpt() , et remplacez-là par the_content()

      Cela réglera votre problème, mais maintenant pour chacun de vos articles vous devrez utiliser la balise more.

  3. Il manquait une partie de mon copier/coller indiquant ma recherche…

    Mais si vous souhaitez le faire une fois pour toutes, il vous suffit d’ouvrir votre fichier index.php, et de modifier la fonction the_content, comme cela :

    J’ai cherché à faire ceci, mais je n’ai pas réussi.
    j’ai trouvé plusieurs index.php dans différents dossiers.
    Pouvez vous me dire svp à partir de filezila dans quel dossier je dois aller pour modifier index.php comme ci dessus.

    Par avance merci et bonne journée

    Daniel

    • Il vous faut naviguer dans le dossier où se trouve votre thème WordPress, soit à partir de la racine de votre blog dans /wp-content/themes/votre-theme/index.php

      Si vous ne trouvez pas de mention de the_content() dans ce fichier, merci de me dire de quel thème il s’agit, je pourrai peut être vous aider.

  4. Modifier le texte du lien “Read More”

    Bonjour Jeremy,
    Merci du temps que vous nous accordez, malgré tout ces exemples je n’arrive pas à modifier le texte “read more” de ma home. De plus je ne trouve pas la fonction more dans mon théme wordpress, (themia lite 1.2.1) vraisemblablement je passe d’extrait auto à extrait auto.
    Sur mon index.php je n’ai pas de “content” avec la fonction more mais plutôt

    Et dans le fichier loop.php, la fonction qui semble faire référence a “more” c’est:

    <a href="” class=”continue”>

    Mais je ne suis même pas sur que cela soit liée à ma home.

    Dsl si tout cela est très brouillon.

    Ps: j’ai aussi essayé avec les fichiers language … mais là c’est une usine à gaz pour moi.

    Merci de votre coup de main

    • Effectivement, apres avoir jete un coup d’oeil au theme, il faudrait que tu fasses les modifications dans le fichier loop.php, ou bien dans le fichier blog.php suivant la configuration de ton blog.

      La ligne que tu m’a indiquee est la bonne, et tu la retrouveras aussi dans le fichier blog.php.

      Si tu as encore des problemes, n’hesite pas a m’envoyer un email avec les details de ton site. Tu peux utiliser le formulaire de contact disponible ici.

  5. Mes codes ne sont pas passés dans le message. Je peux te les links par mail avec l’adresse du site.

    Merci

  6. Bonjour désolée de poser cette question mais ou se trouve le fichier index.php ??
    Je n’arrive pas non plus à supprimer ce “read more” bien qu’à la base je voulais simplement le modifier

    • Ce ficher devrait se trouver a la racine de ton theme WordPress, dans le dossier /wp-content/themes/nom-de-ton-theme/

  7. Bonjour et merci de vos conseils qui m’ont décomplexé et donné le courage d’aller mettre mes mains dans le moteur PHP …
    Comme je vois que vous étiez toujours actif sur ce fil de discussionen date du 23 avril, je me permet quelques questions supplémentaires …
    – Dans la foulée, j’ai remplacé aussi d’autres textes en anglais par leur traduction française … Y-a-t-il un danger avec certains navigateurs ou O.S, si on remplace p.e.x, “Published at” par “publié à”, que les caractères accentués ne s’affichent pas ..?
    Idem si on souhaite un point d’interrogation (ex: Envie d’en savoir plus ?) le ? ne risque-t-il pas de perturber le code PHP qui l’utilise dans sa syntaxe ..??
    – Un truc que je n’arrive pas à faire est de remplacer le HOME en bas de page par ACCUEIL …? cf: http://audeladesmots-dadijanki.fr/ HOME n’apparait pas en tout cas dans le footer.php … Mais alors où …? Thème utilisé : wp-creativix (http://www.iwebix.de/wp-creativix-free-premium-wordpress-portfolio-business-theme/)
    – Egalement perplexe quant à savoir comment franciser le “breadcrumb” en haut de chaque article : You are here: Home » Evènement
    – Si on revient au pied de page, est-il légalement possible d’enlever LAYOUT BY IWEBIX WEBDESIGN, vu qu’on peut le trouver dans le HTML de la page, ou cela ne se fait-il pas …??
    – Enfin, quelle est la raison qui conduit le développeur de ce site à stocker ces styles dans styles.php plutôt que styles.css ou admin.css ..??
    Merci d’avance ….

    • Si le thème est localisé correctement, vous devriez pouvoir le traduire en entier sans modifier le code, grâce à des logiciels comme Poedit.
      Si vous devez faire la traduction directement dans le code du thème, il vous faut encoder tous les caractères en HTML, et échapper tous les caractères comme l’apostrophe pour éviter tout problème.

      Si une partie de votre contenu vient d’une extension plutôt que du thème, il vous faudra traduire l’extension avec Poedit, de la même manière que le thème.

      Vous pouvez enlever des éléments du thème, mais pour ce qui est des crédits dans le Footer, il vous faut vous référer à la licence du thème, afin de savoir si celle ci vous permet de retirer les crédits.

      Enfin, si vous avez des questions sur le code du thème, je ne peux que vous conseiller de contacter l’auteur directement, il devrait pouvoir vous renseigner.

  8. Salut Jérémy !

    J’ai 2 soucis avec mon site:
    1/ Je n’ai pas de fonction the_content.php dans mon index (du coup même je rajoute la ligne, ca ne change rien)

    2/ J’ai un résumé qui apparait sous l’image de l’article et qui vient chevaucher l’article lui même, une cata ! D’où ca peut venir??

    mon site: http://www.laboitedechocolats.fr

    (Rubrique: la boite de)

    Un grand merci pour ce billet et j’espère que tu pourras me sauver ! ;)

    • Comme ton theme n’est pas gratuit, je ne peux pas le telecharger pour y jeter un coup d’oeil et t’aider.

      Mais en temps de client Themeforest, tu devrais pouvoir obtenir de l’aide de la part de l’auteur sur leur site.

      1) Si tu ne trouves pas la fonction the_content, cherche la fonction the_excerpt a la place.

      2) Sans jeter un coup d’oeil au theme, je ne peux pas t’aider a ce sujet. Essaie de remplir la case d’extrait de l’article (elle se trouve sous l’editeur dans ton tableau de bord WordPress) avec du contenu test dans un de tes derniers articles, tu verras si le contenu vient de la.

  9. Bonjour Jeremy
    Je me suis mis depuis peu a WP et utilise le theme ‘TwentyEleven”. Comme conseille, j’ai fais un theme enfant pour ne pas tout casser.
    En suivant vos conseils, j’ai pu mettre en place la balise more et celle-ci marche correctement pour la présentation de mes articles sur la page d’accueil. Mais … en changeant the_excerpt par the_content dans mon fichier “index” => “content” (je ne suis pas un as de php, mais j’ai deduit que c’etait dans le fichier ‘content’ qu’il fallait faire la modif), le probleme est que je retrouve cette gestion de more dans mes pages ‘categories’, alors qu’avant je retrouvais l’extrait dans ces pages la. Je ne sais pas si je me fais bien comprendre !?
    Du coup, j’aimerai concerver la gestion du more sur la page accueil mais retrouver la gestion des extraits sur mes autres pages, il y a t-il une astuce ?
    Merci pour votre reponse ;)

    • Si tu jettes un coup d’oeil au fichier content.php, tu trouveras une ligne qui fait déjà du filtrage: sur la ligne 35, on applique une règle différente si on se trouve sur une page de recherche. WordPress va donc afficher the_excerpt sur les pages de recherche, et the_content sur toutes les autres pages, y compris les pages de catégorie.

      Tu peux cependant ajouter une autre règle afin de modifier la page d’accueil seulement. Voila un exemple :

      https://gist.github.com/jeherve/4985066

      Si tu peux afficher un extrait au lieu de the_content sur les pages de categorie, tu peux le faire en ajoutant une regle supplementaire, en utilisant le conditional tag is_category.

      • Mille merci Jeremy pour ton aide, ca a marche !
        Quand, comme moi on ne connait rien a php, ca releve du miracle ;)
        Peut-tu me confirmer que le fichier “content” est bien utilise ET pour la home page ET pour les pages de categories ?

        • Peut-tu me confirmer que le fichier “content” est bien utilise ET pour la home page ET pour les pages de categories ?

          Oui, c’est bien ca !

  10. merci ça marche tres bien; tuto très clair, j’ai pu enlever le #more qui m’ennuyait sans probleme
    manque plus les commentaires d eton blog en dofollow et ça sera parfait ;)

  11. Super ! J’ai une question
    Dans mon theme lors d’une recherche il m’affiche automatiquement un extrait de mes articles mais en laissant tout les tags en dessous. Ca me gene car j’ai beaucoup de tag… J’aimerais les enlever et ne les laisser dans le bas de mon article integral. HELP !

    • Tu devrais trouver un fichier nommé search.php dans ton thème. Tu peux retirer les tags de ce fichier. Si le fichier n’existe pas, il va te falloir trouver quel fichier controle le page de résultats de recherche.

  12. Bonjour Jeremy,

    Tutoriel super intéressant ! J’aurais une question : je souhaite changer de thème et passer au twenty eleven et personnaliser mon read more. (J’ai créé mon thème enfant que je n’ai pas encore mis en ligne). J’ai bien réussi à enlever le saut automatique, par contre je souhaiterais remplacer le “Lire la suite” par un bouton read more que j’ai créé. J’avais réussi à le faire avec mon thème précédent, en ajoutant la balise “(”)” dans mon fichier index.
    Dans twenty eleven il semberait que ça soit dans le fichier content.php?, mais lorsque je rajoute cette balise ça ne fonctionne pas, aurais-tu une idée ?
    Dans le même genre je voudrais aussi remplacer la ligne séparatrice entre les posts par mon propre séparateur… ce n’est pas le sujet de ce post, mais si tu as une idée elle est la bienvenue !
    Merci beaucoup pour ton aide !

    • Oups la balise ne s’est pas affichée dans mon post, je la remets sans les tags de début et de fin: (et petite précision, j’ai dit “bouton” mais c’est une image en fait) ^^
      img src=”‘ . get_bloginfo(‘template_directory’). ‘/images/bouton.jpg” alt=”read more” title=”Read more…”

      • Au lieu d’ajouter ton bouton en modifiant le PHP, pourquoi ne pas le faire via CSS ? Ce serait peut être plus simple ?

        .more-link {
            background: url('/path/vers/ton-image.jpg') no-repeat;
        }
        

        Mais si tu souhaites faire la modification via PHP, tu peux utiliser la dernière méthode de mon article en ajoutant ceci dans ton fichier functions.php :

        // Custom read more
        function werewp_custom_morelink() {
            return '&lt;a class=&quot;more-link&quot; href=&quot;' . get_permalink() . '&quot;&gt;&lt;img src=&quot;' . get_bloginfo( 'stylesheet_directory' ). '/images/bouton.jpg&quot; alt=&quot;Lire la suite...&quot; title=&quot;Lire la suite...&quot; /&gt;&lt;/a&gt;';
        }
        add_filter( 'the_content_more_link', 'werewp_custom_morelink' );
        
    • Dans Twenty Eleven, it te faudra effectivement modifier la fonction the_content dans content.php, ligne 41.

      Quant à la ligne de séparation, elle est ajoutée via CSS. Tu peux retirer cette ligne de cette facon :

      #page .hentry, .no-results {
          border-bottom: 0 none;
      }
      
      • Merci beaucoup pour tes réponses Jeremy.
        Par le fichier css, cela ne fonctionne pas, c’est pour cela que j’avais essayé par le fichier php (mais je ne m’y connais pas vraiment!). Lorsque je remplace la ligne 41 par ma ligne de code, j’obtiens juste une modification du lien (au lieu de “lire la suite”, c’est maintenant écrit “bouton Titre de mon article)
        Merci pour l’astuce de la ligne à enlever, cela a fonctionné ! Je n’ai pas encore trouvé comment rajouter ma propre image de ligne séparatrice par contre. Si tu as un code pour ça je veux bien :-)

        Merci encore!

        • Lorsque je remplace la ligne 41 par ma ligne de code, j’obtiens juste une modification du lien (au lieu de “lire la suite”, c’est maintenant écrit “bouton Titre de mon article)

          Jette un coup à mon précédent commentaire, je l’ai mis à jour avec une solution.

          Je n’ai pas encore trouvé comment rajouter ma propre image de ligne séparatrice par contre.

          Si tu crées ton propre content.php dans ton thème enfant, tu pourrais ajouter une image de séparation à la fin de chaque article, en plaçant ton image après la fermeture de la balise article.

  13. Je viens de regarder mais le code que tu m’as indiqué ressemble à un code du fichier functions.php.
    Je l’ai donc rajouté dans le fichier functions, mais cela n’a pas fonctionné. J’ai testé quand même dans le fichier content, mais idem. Pour la ligne séparatrice je vais essayer de tester cet après-midi ! Merci pour ton aide en tout cas !

    • Désolée, j’avais mal lu en fait, et en plus j’avais mis une majuscule à mon fichier Bouton ^^ Tout marche super bien maintenant, j’ai réussi à intégrer mon image read more et ma ligne séparatrice, je suis ravie, merci 1000 fois !

  14. Bonjour,

    J’ai installé le Thème : Twenty Eleven et quand j’ajoute le code de 14 lignes en fin de functions.php pour Empecher le saut automatique a l’ouverture des pages articles, l’enregistrement bug.
    Où faut-il insérer les lignes? (la page de codes functions.php est longue… et je ne connais rien au php).

    Merci par avance pour ton aide.

    Julien

Comments are closed.

Webmentions

  • Comment poster sur Google+ depuis votre blog WordPress grace au bouton +1 | Jeremy.tagada.hu April 22, 2013

    […] Suivant la façon dont vous gérez les images sous WordPress, votre sera peut-être différent de celui-ci dessous. J’assume ici que vous utilisez the_post_thumbnail pour ajouter une image à la une à chacun de vos articles, et que vous coupez toujours votre texte grâce à la balise more. Vous pouvez en savoir plus sur cette balise dans l’un de mes articles précédents. […]