So fügen Sie Miniaturansichten zu den Links zum vorherigen und nächsten Artikel in WordPress hinzu

In der folgenden Tutorial-Kolumne von WordPress erfahren Sie, wie Sie Miniaturansichten zu den Links zum vorherigen und nächsten Artikel in WordPress hinzufügen. Ich hoffe, dass es für Freunde hilfreich ist, die es benötigen!

Miniaturansichten für WordPress-Links zum vorherigen und nächsten Artikel hinzufügen

Die meisten WordPress-Themes fügen unter dem Text Links zu vorherigen und nächsten Artikeln hinzu. Sie können diesem Link über den folgenden Code ein Miniaturbild hinzufügen, um ihn auffälliger zu machen.

Fügen Sie den folgenden Code an der entsprechenden Stelle der Textvorlagendatei hinzu.

Code 1

Das vorgestellte Bild des Artikels heißt standardmäßig 100×100.

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

Passender Stil

#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

Zusätzlich zum Aufrufen des vorgestellten Bildes und der Anzeige der Veröffentlichungszeit des Artikels können Sie mit geringfügigen Änderungen auch weitere Artikelinformationen hinzufügen, einschließlich benutzerdefinierter Miniaturansichten, Artikelkurzfassungen usw .

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

Das obige ist der detaillierte Inhalt vonSo fügen Sie Miniaturansichten zu den Links zum vorherigen und nächsten Artikel in WordPress hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!