WordPress代碼實現側邊欄最新文章帶縮略圖

編輯：狂族晨曦來源：WordPress技巧日期：2016-03-16 閱讀： 3,514 次 2 條評論 » 百度已收錄

最后更新時間：2018-11-15

最近先森在對網站進行改版。說起來，改版的原因就是想給文章頁側邊欄的最新文章列表添加縮略圖。

但是一看發現，側邊欄的寬度不夠。然后去研究大神們的網站是怎么做的的時候，發現大神們的網站會根據瀏覽器的寬度進行自適應。先森對側邊欄拓寬之后就開始研究自適應，這一研究就一發不可收拾。

關于怎么自適應就不多說了。現在為什么想給側邊欄的最新文章添加縮略圖，就是因為以前的樣式實在是太丑了。雖然先森的網站現在沒有多少人看，但是人要臉樹要皮，要把自己最好的一面展示給觀眾嘛。

我來將以前的“最新文章”樣式貼出來，大家與現在旁邊的樣式對比，隨便感受一波：

以前的“最新文章” -1

以前的“最新文章”

代碼實現-方案1

有了樣式的想法之后，先森就開始搜索實現方法了。但是百度一查，寫這方面的文章的文章好像并沒有很多，熟悉的幾位大神也都沒有寫這方面的文章。其他寫實現方法的文章還有很多是重復轉載的。

后來先森找到一種可以帶縮略圖的“最新文章”列表方法：

<ul>
<?php $result = $wpdb->get_results(“SELECT ID,post_title FROM $wpdb->posts where post_status=’publish’ and post_type=’post’ ORDER BY ID DESC LIMIT 0 , 5″);
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
?>
<li>
<img src="<?php echo post_thumbnail_src($postid); ?>" alt="<?php echo $title; ?>" class="new-post-img" />
<a href=”<?php echo get_permalink($postid); ?>” title=”<?php echo $title ?>”><?php echo $title ?></a> </li>
<?php } ?>
</ul>

上面的5是調用5篇最新文章。

關于上面的那種調用縮略圖的方式，先森曾經在文章中提到過，調用的縮略圖優先順序是：自定義字段為 thumb 的圖片>特色縮略圖>文章第一張圖片>隨機圖片/默認圖片；。

主題還沒有集成調用縮略圖的同學可以去看看。

WordPress調整Tag標簽頁文章列表縮略圖優化小記

代碼實現-方案2

好了，言歸正傳。上面找到的那種調用代碼，雖然已經可以實現縮略圖和文章列表，但是文章標題下面卻顯得空空的。先森想了一下那里可以放什么，看了一下其他博主一般放的是瀏覽量和點贊量。先森的網站人少，瀏覽量少，點贊的更少，所以想想還是算了。最后決定放發布時間。

發布時間的代碼簡單嘛，就是the_time('Y-m-d')嘛，但是放上去竟然出錯了。調用出來的時間全是1970年1月1日。無語ing...

先森想了各種辦法解決時間調用的問題，結果發現：從古至今眾人皆談的時間果然不是那么好解決的。

上面的代碼，貌似是直接用的數據庫搜索語句，里面沒有搜索時間，所以調用出來的時間就有問題。但是不像先森一樣畫蛇添足的還想加時間，上面的代碼就完全夠用了。

現在在凌亂中繼續搜索代碼實現方法。最終終于找到了合適的代碼，重點還很簡單：

添加至主題的sidebar.php中：

    <ul id="new-posts">           
        <?php $postslist = get_posts('numberposts=5'); foreach( $postslist as $post ) : ?> 
        <li class="new-post-li">
           <a class="new-post-a" title="<?php the_title(); ?>" href="<?php the_permalink();?>">
             <div class="new-post-imgdiv">
             <img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="new-post-img" />
             </div>
           </a>
          <div class="new-postadiv">
          <a class="new-post-title"  href="<?php echo  the_permalink(); ?>" title="<?php the_title();?>"><?php the_title(); ?></a> 
         </div>
          <div id="new-post-time"> <i class="fa fa-clock-o"></i><a><?php echo the_time('Y-m-d'); ?></a></div>
        </li>
<?php endforeach;wp_reset_query(); ?> 
     </ul>

就這樣，先森的想法就變成事實了。

新“最新文章” -2