Tip WordPress: modifier les liens vers l’article précédent et suivant d’un post

Publié par Gui dans Tips, Wordpress

Vous utilisez sans doute déjà les liens de navigation pour passer d’un article à un autre. Vous avez donc peut être rouspété comme moi sur le fait qu’on ne puisse pas faire grand chose pour modifier l’affichage de ces liens.

Voici donc un quick tip pour styliser comme vous le souhaitez ces fameux liens.

Liens classiques pour passer à l’article suivant

Avec les fonctions next_posts_link et previous_posts_link, nous ne pouvons que modifier le titre du lien et sa structure html.

<?php next_posts_link('« Article suivant'); ?>
<?php previous_posts_link('Article précédent »'); ?>

Modifier l’affichage de ces liens

En utilisant la fonction get_adjacent_post(), nous pouvons simplement récupérer l’article suivant ou précédent en tant qu’objet. Le troisième paramètre détermine si on récupère le suivant ou le précédent.

On peut donc ensuite récupérer le titre et le permalink de l’article pour créer l’affichage que l’on souhaite.

Exemple d’affichage

<div class="navigation">
<?php
	$prev = get_adjacent_post(false,'',false);
	$next = get_adjacent_post(false,'',true);
?>
<?php if(!empty($next)) : ?>
<div class="floatright navbox">
	<a href="<?php echo get_permalink($next);?>" rel="prev">
		<span class="title">Article précédent :</span>
		<span class="link"><?php echo $next->post_title;?></span>
	</a>
</div>
<?php endif; ?>
<?php if(!empty($prev)) : ?>
<div class="floatleft navbox">
	<a href="<?php echo get_permalink($prev);?>" rel="prev">
		<span class="title">Article suivant :</span>
		<span class="link"><?php echo $prev->post_title;?></span>
	</a>
</div>
<?php endif; ?>
<div class="clear"></div>
</div>

3 commentaires

  1. PRADA/プラダ パテントレザー/ラムレザー ラウンドファスナー長財布 381495 PRADA/プラ

    http://weingut-henrici.de/prada/prada20a05-22949-11.htmlプラ&#12480; アウトレット 香港,プラダ ポーチ アウトレット,ニナリッチ 香水 マカロン
    [url=http://jounieh.org/brstring/413.html]PRADA/プラダ パテントレザー/ラムレザー ラウンドファスナー長財布 381495 PRADA/プラダ パテントレザー/ラムレザー ラウンドファスナー長財布 381495 [prada-019], 【プラダ】長財布 : プラダバグとプラダ財布アウトレットファクトリーオンラインショッピング新春大セール - 70%OFF&送料無料![/url]

  2. PRADA/プラダ TESSUTO SAFFIANOロゴプレート付き斜め掛けショルダーバッグ 391827 PRADA/プラダ TESSUTO S

    http://jounieh.org/brstring/12.htmlPRADA/プラ&#12480; 2015年秋冬新作 TESSUTO SAFFIANO斜め掛けショルダーバッグ 084657 PRADA/プラダ 2013年秋冬新作 TESSUTO SAFFIANO斜め掛けショルダーバッグ 084657 [prada-554], 【プラダ】ショルダーバッグ : プラダバグとプラダ財布アウトレットファクトリーオンラインショッピング新春大セール - 70%OFF&送料無料!
    [url=http://jounieh.org/brstring/299.html]PRADA/プラダ TESSUTO SAFFIANOロゴプレート付き斜め掛けショルダーバッグ 391827 PRADA/プラダ TESSUTO SAFFIANOロゴプレート付き斜め掛けショルダーバッグ 391827 [prada-545], 【プラダ】ショルダーバッグ : プラダバグとプラダ財布アウトレットファクトリーオンラインショッピング新春大セール - 70%OFF&送料無料![/url]

  3. PRADA/プラダ キャンバス トートバッグ 986571 PRADA/プラダ キャンバス トートバッグ 986571

    http://managedservices.istonishdev.com/brstring/294.htmlPRADA/プラ&#12480; TESSUTO SAFFIANO斜め掛けショルダーバッグ 891435 PRADA/プラダ TESSUTO SAFFIANO斜め掛けショルダーバッグ 891435 [prada-530], 【プラダ】ショルダーバッグ : プラダバグとプラダ財布アウトレットファクトリーオンラインショッピング新春大セール - 70%OFF&送料無料!
    [url=http://jounieh.org/brstring/365.html]PRADA/プラダ キャンバス トートバッグ 986571 PRADA/プラダ キャンバス トートバッグ 986571 [prada-336], 【プラダ】トートバッグ : プラダバグとプラダ財布アウトレットファクトリーオンラインショッピング新春大セール - 70%OFF&送料無料![/url]

Laisser une réponse


Post shadow