Personnalisé la navigation entre vos articles

Publié par Fred Le

Catégorie(s): Tutoriel Wordpress
 

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;
}

Fichier zip code + icons

Mots clés: ,





Laisser un commentaire

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Pour affiché du code HTML, CSS, PHP, JAVASCRIPT utilisé le marqueur : [code][/code]