La solution suivante va vous permettre d'afficher les liens d'article suivant & précédent de manière plus poussée.
Grâce à ce code vous allez pouvoir :
- Afficher les titres des articles au lieu du traditionnel "Article précédent" | "Article suivant".
- Choisir d'appeler uniquement des articles de la même catégorie, ou bien de toutes les catégories.
- Construire une structure HTML personnalisée.
- Conserver et ajouter des classes CSS afin de créer votre mise en forme sur-mesure.
Vous pouvez obtenir un rendu de ce type par exemple :
Passons maintenant aux choses sérieuses.
Le code est à insérer dans votre fichier de template d'article perso (aussi nommé Custom Post Type) ou par défaut dans le fichier single.php
Si vous utilisez un thème WordPress par défaut, il vous faut trouver ce bout de code dans le fichier :
[pastacode lang="php" manual="%3Cdiv%20class%3D%22nav-previous%22%3E%3C%3Fphp%20previous_post_link(%20'%25link'%2C%20'%3Cspan%20class%3D%22meta-nav%22%3E'%20.%20_x(%20'%26larr%3B'%2C%20'Previous%20post%20link'%2C%20'twentyten'%20)%20.%20'%3C%2Fspan%3E%20%25title'%20)%3B%20%3F%3E%3C%2Fdiv%3E%0A%0A%3Cdiv%20class%3D%22nav-next%22%3E%3C%3Fphp%20next_post_link(%20'%25link'%2C%20'%25title%20%3Cspan%20class%3D%22meta-nav%22%3E'%20.%20_x(%20'%26rarr%3B'%2C%20'Next%20post%20link'%2C%20'twentyten'%20)%20.%20'%3C%2Fspan%3E'%20)%3B%20%3F%3E%3C%2Fdiv%3E" message="" highlight="" provider="manual"/]
et le remplacer par le code que je vous livre maintenant :
[pastacode lang="php" manual="%3C%3Fphp%0A%24prev_post%20%3D%20get_previous_post('true')%3B%0Aif(%24prev_post)%20%7B%0A%24prev_title%20%3D%20strip_tags(str_replace('%22'%2C%20''%2C%20%24prev_post-%3Epost_title))%3B%0Aecho%20%22%5Ct%22%20.%20'%3Ca%20rel%3D%22prev%22%20href%3D%22'%20.%20get_permalink(%24prev_post-%3EID)%20.%20'%22%20title%3D%22'%20.%20%24prev_title.%20'%22%20class%3D%22article-precedent%22%3E%3Cspan%20class%3D%22icone%22%3E%26laquo%3B%3C%2Fspan%3E%3Ch4%3E'.%20%24prev_title%20.%20'%26quot%3B%3C%2Fh4%3E%3C%2Fa%3E'%20.%20%22%5Cn%22%3B%0A%7D%0A%0A%24next_post%20%3D%20get_next_post('true')%3B%0Aif(%24next_post)%20%7B%0A%24next_title%20%3D%20strip_tags(str_replace('%22'%2C%20''%2C%20%24next_post-%3Epost_title))%3B%0Aecho%20%22%5Ct%22%20.%20'%3Ca%20rel%3D%22next%22%20href%3D%22'%20.%20get_permalink(%24next_post-%3EID)%20.%20'%22%20title%3D%22'%20.%20%24next_title.%20'%22%20class%3D%22article-suivant%22%3E%3Cspan%20class%3D%22icone%22%3E%26raquo%3B%3C%2Fspan%3E%3Ch4%3E'.%20%24next_title%20.%20'%26quot%3B%3C%2Fh4%3E%3C%2Fa%3E'%20.%20%22%5Cn%22%3B%0A%7D%0A%3F%3E" message="" highlight="" provider="manual"/]
Essayons à présent de comprendre ce petit bout de code magique.
"get_previous_post('true');" et "get_next_post('true');"
Ils vont respectivement appeler l'article précédent et l'article suivant.
Si vous choisissez 'true', alors vous afficherez uniquement des articles de la même catégorie.
Si vous souhaitez que tous les articles soient pris en compte peu importe leur catégorie, écrivez 'false'.
<span>
La balise span sert ici à appeler les petits icônes de navigation.
"«" vous donnera "<<"
"»" vous donnera ">>"
Vous êtes libres de donner une classe ou un id au span afin de la personnaliser voir même d'appeler vos propres icônes ou images.
<h4>
Dans l'exemple, j'ai choisi de placer les titres des articles appelés dans une balise <h4>. Vous pouvez choisir la balise qui vous arrange le plus ou même ne pas en utiliser.
ÉDIT AVRIL 2020
Ce code plus simpliste fait également le job !
[pastacode lang="php" manual="%3C%3Fphp%20previous_post_link('%26laquo%3B%20%25link'%2C%20'%25title'%2C%20TRUE)%3B%20%3F%3E%0A%3C%3Fphp%20next_post_link('%26laquo%3B%20%25link'%2C%20'%25title'%2C%20TRUE)%3B%20%3F%3E" message="Afficher la pagination " highlight="" provider="manual"/]
Si vous choisissez ‘true’, alors vous afficherez uniquement des articles de la même catégorie.
Si vous souhaitez que tous les articles soient pris en compte peu importe leur catégorie, écrivez ‘false’.
[pastacode lang="php" manual="%3C%3Fphp%20next_post_link('%26laquo%3B%20%25link'%2C%20'%25title'%2C%20FALSE%2C%20'17')%3B%20%3F%3E" message="Exclure une catégorie" highlight="" provider="manual"/]
Pour exclure une catégorie en particulier, il faut le préciser en écrivant "FALSE" puis l'identifiant de la catégorie à exclure (ici 17).
bonjour, j’ai utilisé votre code dans la page single.php de mon thème enfant ; le souci c’est que le titre de l’article précédent et le titre de l’article suivant sont collés l’un à l’autre, tous les deux alignés à gauche… comment faire pour que le titre précédent soit aligné à gauche, et le titre suivant aligné à droite ? d’avance merci !
Bonjour,
Pouvez-vous me transmettre le lien ?
Je pense qu’il s’agit maintenant d’un ajustement de style CSS à faire pour régler ces positionnements 😉
le site n’est pas terminé (en ligne mais page maintenance donc uniquement accessible via le tableau de bord de wordpress)… comment faire ?
voici le code que j’ai mis (quasi le vôtre) :
post_title));
echo « \t » . ‘ID) . ‘ » title= »‘ . $prev_title. ‘ » class= »article-precedent »>« ‘. $prev_title . ‘‘ . « \n »;
}
$next_post = get_next_post(‘true’);
if($next_post) {
$next_title = strip_tags(str_replace(‘ »‘, », $next_post->post_title));
echo « \t » . ‘ID) . ‘ » title= »‘ . $next_title. ‘ » class= »article-suivant »>’. $next_title . ‘ »‘ . « \n »;
}
?>
Le code PHP que vous avez saisi est bien correct.
Si vous désirez avoir le bouton « article précédent » qui reste collé à gauche, il faut lui attribuer le style css « float:left; »
Si vous désirez avoir le bouton « article suivant » qui reste collé à droite, il faut lui attribuer le style css « float:right; »
PS : c’est ce que j’ai du faire en bas de mon article sur cette même page. N’hésitez pas à faire un clic droit « Examiner l’élément » sur une de mes liens d’article (précédent ou suivant) et à inspecter le code html et css.
A vous de jouer 😉
merci beaucoup pour votre aide, je retiens tout ça ; je ne suis malheureusement pas parvenue encore au résultat souhaité, en cause mon niveau quasi nul en CSS… mais je ne désespère pas ! il va falloir que je me forme !!
Bonjour et merci pour vos astuces !
J’aurais besoin de vos lumières !
Mes liens apparaissent & fonctionnent bien lorsque je renseigne mon code mais dès lors que je rentre ‘true’, le code n’est plus reconnu et donc rien ne s’affiche :
Voici mon code :
post_title));
$prevthumbnail = wp_get_attachment_url( get_post_thumbnail_id($prev_post->ID, array(80,80)) );
echo « \t » . ‘ID) . ‘ » class= »link » alt= »‘ . esc_attr($prev_title). ‘ »>’ . esc_html__(‘Projet précédent’,’urok’). ‘‘ . « \n »;
}
$next_post = get_next_post(‘true’);
if(!$next_post) {
echo « \t » . ‘‘ . esc_html__(‘Projet suivant’,’urok’). ‘‘ . « \n »;
} else {
$next_title = strip_tags(str_replace(‘ »‘, », $next_post->post_title));
$nextthumbnail = wp_get_attachment_url( get_post_thumbnail_id($next_post->ID, array(80,80)) );
echo « \t » . ‘ID) . ‘ » class= »link » alt= »‘. esc_html($next_title).' »>’ . esc_html__(‘Projet suivant’,’urok’). ‘‘ . « \n »;
}
?>
Et un exemple de page : https://atelier-mld.com/portfolio/maison-lullin/
Bonjour,
Pouvez-vous essayer en utilisant le code ci-dessous à la place :
<?php previous_post_link(‘« %link’, ‘%title’, TRUE); ?>
<?php next_post_link(‘« %link’, ‘%title’, TRUE); ?>
Merci !
Bonjour et merci pour votre réponse rapide 🙂
Après avoir entré le nouveau code et actualisé ma page, j’obtiens le message suivant :
Une erreur critique est survenue sur votre site.
En apprendre plus sur le débogage de WordPress.
Vous savez de quoi ça peut venir ?