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

Code 2

추천 이미지를 호출하고 기사 게시 시간을 표시하는 것 외에도 약간의 수정을 가하면 맞춤 썸네일, 기사 요약 등을 포함한 더 많은 기사 정보를 추가할 수도 있습니다. .

아아아아

위 내용은 WordPress의 이전 및 다음 기사 링크에 축소판을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!