Comment ajouter des vignettes aux liens d'articles précédents et suivants dans WordPress

La colonne tutorielle suivante de WordPress vous présentera comment ajouter des vignettes aux liens des articles précédents et suivants dans WordPress. J'espère qu'elle sera utile aux amis qui en ont besoin. !

Ajouter des vignettes pour les liens des articles précédents et suivants dans WordPress

La plupart des thèmes WordPress ajouteront des liens vers les articles précédents et suivants sous le texte. Vous pouvez ajouter ce lien. via le code suivant Ajoutez une vignette pour la faire ressortir.

Ajoutez le code suivant à l'emplacement approprié du fichier de modèle de texte.

Code 1

Par défaut, l'image vedette 100×100 de l'article est appelée.

<div id="post-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) ?>
<div class="nav-box previous">
<?php previous_post_link(&#39;&laquo; &laquo; Previous Post:&#39;, &#39;yes&#39;); ?>
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link(&#39;%link&#39;,"$prevthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php $nextPost = get_next_post(true);
if($nextPost) ?>
<div class="nav-box next" style="float:right;">
<?php previous_post_link(&#39;&raquo; &raquo; Next Post:&#39;, &#39;yes&#39;); ?>
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); ?>
<?php next_post_link(&#39;%link&#39;,"$nextthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php ?>
</div>

Style de support

#post-nav{clear: both; height: 100px; margin: 0 0 70px;}
#post-nav .nav-box{background: #e9e9e9; padding: 10px;}
#post-nav img{float: left; margin: 0 10px 0 0;}
 
#post-nav p{margin: 0 10px; font-size: 11px; vertical-align: middle;}
#post-nav .previous{float: left; vertical-align: middle; width: 300px; height: 120px;}
#post-nav .next{float: right; width: 300px; height: 120px;}

Code 2

En plus d'appeler l'image sélectionnée et d'afficher l'heure de publication de l'article, légèrement modifié Vous pouvez également ajouter plus d'informations sur l'article, notamment des vignettes personnalisées, des résumés d'article, etc.

<div id="post-nav">
<?php $prevPost = get_previous_post(true);
if($prevPost) {
$args = array(
&#39;posts_per_page&#39; => 1,
&#39;include&#39; => $prevPost->ID
);
$prevPost = get_posts($args);
foreach ($prevPost as $post) {
setup_postdata($post);
?>
<div class="post-previous">
<a class="previous" href="<?php the_permalink(); ?>">&laquo; Previous Story</a>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(&#39;thumbnail&#39;); ?></a>
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<small><?php the_date(&#39;F j, Y&#39;); ?></small>
</div>
<?php
wp_reset_postdata();
} //end foreach
} // end if
 
$nextPost = get_next_post(true);
if($nextPost) {
$args = array(
&#39;posts_per_page&#39; => 1,
&#39;include&#39; => $nextPost->ID
);
$nextPost = get_posts($args);
foreach ($nextPost as $post) {
setup_postdata($post);
?>
<div class="post-next">
<a class="next" href="<?php the_permalink(); ?>">Next Story &raquo;</a>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(&#39;thumbnail&#39;); ?></a>
<h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
<small><?php the_date(&#39;F j, Y&#39;); ?></strong>
</div>
<?php
wp_reset_postdata();
} //end foreach
} // end if
?>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!