下面由WordPress教程欄目給大家介紹怎么為wordpress上下篇文章鏈接添加縮略圖,希望對需要的朋友有所幫助!
為WordPress上下篇文章鏈接添加縮略圖
大部分WordPress主題都會在正文下面添加上下篇文章的鏈接,可以通過下面的代碼給這個鏈接再加個縮略圖,讓其更醒目。
將下面代碼添加到正文模板文件的適當位置即可。
代碼一
默認調用文章100×100的特色圖像。
<div> <?php $prevPost = get_previous_post(true); if($prevPost) ?><div> <?php previous_post_link('« « Previous Post:', 'yes'); ?><?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID,?array(100,100)?);?> <?php previous_post_link('%link',"$prevthumbnail <p>%title",?TRUE);??> </div> <?php $nextPost = get_next_post(true); if($nextPost) ?><div> <?php previous_post_link('» » Next Post:', 'yes'); ?><?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID,?array(100,100)?);??> <?php next_post_link('%link',"$nextthumbnail <p>%title",?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;}
代碼二
除了調用特色圖像,并顯示文章發表時間,稍加修改還可以添加更多的文章信息,包括自定義縮略圖、文章簡要等。
<div> <?php $prevPost = get_previous_post(true); if($prevPost) { $args = array( 'posts_per_page' =>?1, 'include'?=>?$prevPost->ID ); $prevPost?=?get_posts($args); foreach?($prevPost?as?$post)?{ setup_postdata($post); ?> <div> <a>">??Previous?Story</a> <a>"><?php the_post_thumbnail('thumbnail'); ?></a> <h4><a>"><?php the_title(); ?></a></h4> <small><?php the_date('F j, Y'); ?></small> </div> <?php wp_reset_postdata(); } //end foreach } // end if $nextPost = get_next_post(true); if($nextPost) { $args = array( 'posts_per_page' =>?1, 'include'?=>?$nextPost->ID ); $nextPost?=?get_posts($args); foreach?($nextPost?as?$post)?{ setup_postdata($post); ?> <div> <a>">Next?Story??</a> <a>"><?php the_post_thumbnail('thumbnail'); ?></a> <h4><a>"><?php the_title(); ?></a></h4> <small><?php the_date('F j, Y'); ?></small> </div> <?php wp_reset_postdata(); } //end foreach } // end if ?> </div>
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END