JumpTop

[WORDPRESS] Comment ajouter l’article précédent et l’article suivant

Ce matin je vais vous expliquer comment mettre en place les liens « article précédent » et « article suivant » avec leurs titres dans votre thème wordpress. Dans un premier temps il va falloir choisir l’emplacement de celui-ci, ou voulez vous voir apparaître ces deux liens ? Peut être pas dans le footer ? Bref vous faites comme vous le souhaitez.
Une fois votre emplacement choisi, il faut trouver le fichier PHP qui correspond dans votre thème, en ce qui me concerne j’ai choisi d’insérer les liens dans single.php et donc d’y mettre le code qui suit.

Voici le code à insérer dans la page en question :

    <div id="navigation">
<div align="left">
<?php previous_post('&laquo; &laquo; %',
 ' ', 'yes'); ?>
</div>
<div align="right">
<?php next_post('% &raquo; &raquo; ',
 ' ', 'yes'); ?>
</div>
</div>

Une fois que le code est inséré, vous pouvez mettre le fichier modifié sur votre serveur, et faire un petit F5 (refresh) de votre page et vous allez voir les liens apparaître de suite. Une seconde étape peut alors intervenir, c’est la création de conditions CSS pour ces liens. Voici les conditions CSS que j’ai appliqué :

#navigation {
	width: 480px;
	padding: 0 0 0 0;	
	line-height: 20px;
	font:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#124b55;
	
}

Ces conditions vont me permettre de choisir la taille du bloc (taille de la « div navigation »), l’interligne entre le texte, la typo, la couleur, etc …
Il ne vous reste plus qu’à enregistrer votre fichier CSS modifié, le mettre sur votre serveur, et faire un refresh, et le tour est joué.

Si vous avez des questions ou des remarques, n’hésitez pas.






L'auteur de l'article
, Directeur Artistique, Webdesigner. Vous pouvez voir mes travaux sur mon folio, ou me suivre sur mon Twitter.



15 commentaires

  1. 1 PakitoNo Gravatar dit :
    25 avril 2010 à 13:51

    Astuce utile en effet ! ;) C’est un peu la croix et la bannière quand on cherche à modifier son thème WordPress au début.

    Je me permet de commenter assez succinctement, parce que ça n’est pas insérer une navigation précédent – suivant qui m’intéresse, mais plutôt te demander pourquoi tu l’insères uniquement avant tes articles (juste avant le texte en fait) et pas en bas (juste après, ou en dessous des articles relatifs à lire).

    J’ai découvert ton blog il y a une vingtaine de minutes, et j’aime bien, donc je relis tout, et tu peut te douter que c’est assez gênant et pas très ergonomique de devoir rescroller en haut de page après la lecture de chaque article.
    En espérant que tu en tiennes compte ;)

  2. 2 John's GraphismeNo Gravatar dit :
    25 avril 2010 à 16:16

    >> Pakito : oui, c’est prévu de le mettre également en bas de chaque article, c’est uniquement faute de temps que je ne l’ai pas encore fait, mais c’est prévu de puis un petit moment, car je me rends compte moi même que ça n’est pas pratique ;-)

  3. 3 MOREAUNo Gravatar dit :
    5 mai 2010 à 16:31

    est-que c’est bien la date de publication qui est prise en compte pour les articles « précédents et suivants » ?

  4. 4 John's GraphismeNo Gravatar dit :
    5 mai 2010 à 18:45

    >> MOREAU : oui, c’est bien la date de publication qui est prise en compte.

  5. 5 Idée cadeau originaleNo Gravatar dit :
    27 novembre 2010 à 13:33

    Bonjour,

    Merci beaucoup :-D
    Je viens de mettre le code et c’est niquel, j’adore! Pas besoin de plugin, installation facile et explications claires. Si à chaque fois que je cherchais une solution cela pouvait être aussi simple..

    Petite précision, si je veux mettre du texte comme toi, il faut modifier « &laquo »?

  6. 6 info2teleNo Gravatar dit :
    3 janvier 2011 à 15:24

    Bonjour,

    Tuto interessant et ce que je vais m’empresser de mettre en application sur mon site si tu m’indiques la procédure pour qu’il apparaisse ainsi
    <>
    Titre de l’article suivant
    sur 2 lignes justifier à droite

    De cette manière, j’obtiens deux pavé bien distincts.

    Autre question : Je voudrais faire la même chose chose sur ma homepage mais avec :
    <>

    Est-ce que c’est possible ?

    Merci

  7. 7 dona-bioNo Gravatar dit :
    31 janvier 2011 à 16:50

    Hello ! merci pour ce mini toto très utile.
    Pour la novice que je suis, pourrais tu préciser comment faire pour limiter à la catégorie dans laquelle se trouve l’article ?
    en effet, WP donne cette fonction, mais sans le titre de l’article qui s’affiche, et je n’ai pas réussi à combiner les 2 !

    Merci d’avance !

  8. 8 John's GraphismeNo Gravatar dit :
    31 janvier 2011 à 17:21

    @idée cadeau : oui il faut modifier ce que tu dis
    @info2tele : pour faire ce que tu dis, il faut que tu fasse une « div » en plus pour aligner ton texte et en faire ce que tu eux
    @dona-bio : le code que je donne permet de mettre en place la navigation avec le titre de l’article précédent, et suivant ;-)

  9. 9 dona-bioNo Gravatar dit :
    31 janvier 2011 à 19:05

    Merci de ta réponse John. Par contre j’ai du mal formuler ma question… j’avais bien compris que ton code donne le titre. mails il ne limite pas à la catégorie à laquelle l’article appartient.
    Voilà où j’en suis, mais je trouve que ça ne marche pas très bien…

  10. 10 dona-bioNo Gravatar dit :
    31 janvier 2011 à 19:06

    ?php previous_post(‘« « %’,
    ‘ ‘, TRUE, ’1 and 4 and 8 and 9 and 29 and 51 and 325′); ?

  11. 11 aalex57No Gravatar dit :
    13 juin 2011 à 23:33

    je cherchais justement ça, merci ;)

  12. 12 John's GraphismeNo Gravatar dit :
    14 juin 2011 à 9:42

    @dona-bio : non, ça ne limite pas à la catégorie, et ça fonctionne super bien ouais !
    @aalex57 : mais de rien, content que ça te serve l’ami ;-)

  13. 13 Olivier LandaisNo Gravatar dit :
    17 octobre 2011 à 10:04

    Bonjour à tous !
    Merci Jonathan pour ce petit tuto qui m’a bien servi !
    J’ai rebidouillé à ma sauce, pour que les liens soient sur la même ligne par exemple, avec des « float ».
    Mais le but de mon message est tout autre.
    J’ai découvert que laes fonction « previous_post » et « next_post » ont été rendu obsolètes. Concrètement, ça veux dire que d’ici quelques temps, elles ne fonctionneront plus !
    Donc j’ai fouillé, et trouvé les nouvelles fonctions pour les remplacer. Au cas ou tu voudrais mettre ton tuto à jour, voici le nouveau code, sur le même modèle que le tiens :

    Et la doc sur l’une des deux fonctions, même si les deux fonctionne pareil :
    http://codex.wordpress.org/fr:Marqueurs_de_Modele/previous_post_link

    Voilà !
    Enjoy !

  14. 14 Olivier LandaisNo Gravatar dit :
    17 octobre 2011 à 10:06

    Ah, oui, forcément, le code a été interprété…
    je la refais :
    div id= »navigation »>
    div style= »float:left »>
    ?php previous_post_link(‘%link’, ‘« Ancien Message’, FALSE); ?>
    /div>
    div style= »float:right »>
    ?php next_post_link(‘%link’, ‘Message Suivant »’, FALSE); ?>
    /div>
    br />br />
    /div>

  15. 15 PyrrosNo Gravatar dit :
    9 novembre 2011 à 22:45

    Merci grâce à toi j’ai enfin trouvé ce que je cherche depuis un bon moment .. et en plus ça marche nickel ..; ;)

Aucun trackback