Comme la plupart des marqueurs de WordPress, les liens de navigation suivant / précédent de vos articles sont personnalisable. Le codex de WordPress a une référence assez complet pour les utilisés, mais nous allons voir comment les personnalisé avec des icons.
Le code de base pour générer la navigation entre les articles :
<div class="navigation"> <div class="alignleft"><?php previous_post_link() ?></div> <div class="alignright"><?php next_post_link() ?></div> </div>
Le css :
.navigation {
display: block;
text-align: center;
margin-top: 10px;
height:20px;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
Pour afficher le lien de chaque article ont va utiliser la chaine de formatage %link.
Et pour le titre de l’article ont va utiliser %title.
Se qui nous donne :
<?php previous_post_link('%link', ‘%title') ?>
<?php next_post_link('%link', '%title') ?>
Vous pouvez remplacer %title par Article suivant par exemple :
<?php next_post_link('%link', ‘Article suivant') ?>
Maintenant Nous allons ajouter des icons devant les titres des articles, ont va utiliser le Marqueur conditionnel :
<?php get_bloginfo("template_directory") ?>
Pour aller chercher les icons dans le dossier image de votre thème on va ajouter le marqueur comme ceci :
<?php previous_post_link( '%link','<div class="previous-post">%title</div>
<img src="'.get_bloginfo("template_directory").'/images/previous.png"/> ' ) ?>
<?php next_post_link( '%link', '<div class="next-post">%title</div>
<img src="'.get_bloginfo("template_directory").'/images/next.png"/>' ) ?>
Les class previous-post et next-post permette d’aligner le titre verticalement par rapport a votre icon.
Css pour la personnalisation :
.previous-post{
height:24px; /* hauteur de votre icon */
line-height:24px; /* ici on reporte la hauteur de l’icon pour aligner le texte */
float:right;
margin-left:3px;
}
.next-post{
height:24px;
line-height:24px;
float:left;
margin-right:3px;
}
Le code complet :
<div class="navigation">
<div class="alignleft"><?php previous_post_link( '%link','<div class="previous-post">%title</div><img src="'.get_bloginfo("template_directory").'/images/previous.png"/> ' ) ?></div>
<div class="alignright"><?php next_post_link( '%link', '<div class="next-post">%title</div> <img src="'.get_bloginfo("template_directory").'/images/next.png"/>' ) ?></div>
</div>
Le css :
.navigation {
display: block;
text-align: center;
margin-top: 10px;
height:20px;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.previous-post{
height:24px; /* hauteur de votre icon */
line-height:24px; /* ici on reporte la hauteur de l’icon pour aligner le texte */
float:right;/* alignement de l’icon */
margin-left:3px;/* Espace entre l’icon et le texte*/
}
.next-post{
height:24px;
line-height:24px;
float:left;
margin-right:3px;
}