WordPress で前記事と次記事のリンクにサムネイルを追加する方法

WordPress の次のチュートリアル コラムでは、WordPress で前記事と次記事のリンクにサムネイルを追加する方法を紹介します。必要な友人の役に立てば幸いです。 ！

WordPress の前の記事と次の記事のリンクのサムネイルを追加する

ほとんどの WordPress テーマでは、テキストの下に前と次の記事へのリンクが追加されます。このリンクは次の方法で追加できます。コード サムネイルを追加して目立たせます。

次のコードをテキスト テンプレート ファイルの適切な場所に追加します。

コード 1

記事のアイキャッチ画像は、デフォルトでは 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>

サポートスタイル

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

コード2

アイキャッチ画像の呼び出しと公開時刻の表示に加えて、記事、わずかな変更 カスタマイズされたサムネイル、記事の概要など、記事情報をさらに追加することもできます。

rree

以上がWordPress で前記事と次記事のリンクにサムネイルを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。