在管理一個WordPress網站時，讓訪客能夠快速找到最新或最熱門的文章是提升網站使用體驗的重要手段。本文將介紹如何使用三款WordPress插件來創建「新文章」和「熱門文章」的圖+標題展示功能，並詳細說明如何調整標題字體大小、行數等自定義設置，以達到最佳效果。
介紹三款必備插件
要在WordPress網站中創建吸引人的「新文章」和「熱門文章」圖+標題展示，我們需要以下三款插件：
- Recent Posts Widget With Thumbnails：這個插件允許您在小工具區域展示帶有縮略圖的最新文章，並且支持自定義顯示的文章數量和排版方式。
- WordPress Popular Posts：此插件可以展示網站上最受歡迎的文章，並且支持按瀏覽量或評論數進行排序，讓訪客快速找到網站的精華內容。
- Widget Options：這是一個功能強大的小工具管理插件，讓您可以精細控制各個小工具的顯示條件，如不同的頁面、設備、甚至是用戶角色。
安裝與基本設定步驟
以下是這三款插件的安裝和基本設置步驟：
安裝插件：
- 登入WordPress後台，導航至「插件」->「安裝插件」。
- 搜尋「Recent Posts Widget With Thumbnails」、「WordPress Popular Posts」和「Widget Options」並分別安裝啟用。
2.設置Recent Posts Widget With Thumbnails：
- 進入「外觀」->「小工具」。
- 將「Recent Posts Widget With Thumbnails」拖放到合適的側邊欄位置。
- 設置小工具標題及顯示的文章數量。
- 設置文章標題長度
- 設置縮圖尺寸大小
- 預設縮圖是精選圖片，若該文章沒有精選圖片時，用哪張圖片替代。
3.設置WordPress Popular Posts：
- 在左邊欄位往下滑到「設定」->「WordPress Popular Posts」。
- 點選「Tools」進入熱門文章相關功能設定頁面
- 設定縮圖來源。如精選圖片、文章第一章圖等。教學範例以以精選圖片為例。
- 設定縮圖替代圖。當你選擇縮圖來源是精選圖，但某篇文章沒有精選圖，這時插件會用替代圖來呈現，插件本身有提供替代圖，建議做一精美的替代圖。
- 選擇保留數據及天數。
- 文章連結開啟方式。在新的視窗或原視窗。
在小工具開啟熱門文章功能
- 左邊欄位往下滑到「外觀」→「小工具」
- 因為WordPress Popular Posts改版，現在將「WordPress Popular Posts」拖到主要資訊欄位，也不會呈現，請改用「文字」設定短代碼方式，插件才能發揮作用，呈現熱門文章。
- 點選「文字」進入文字視窗
- 點選「code」插入語法「<code>」→貼上短代碼→點選「code」插入語法「</code>」
完整的熱門文章語法：👇
- 數據天數：range=’last30days’
- 顯示多少文章數量：limit=7 stats
- 設定縮圖尺寸大小：wpp thumbnail_width=150 thumbnail_height=150
<code><div class="wpp-shortcode"><script type="application/json" data-id="wpp-shortcode-inline-js">{"title":"","limit":"7","offset":0,"range":"last30days","time_quantity":24,"time_unit":"hour","freshness":false,"order_by":"views","post_type":"post","pid":"","exclude":"","cat":"","taxonomy":"category","term_id":"","author":"","shorten_title":{"active":false,"length":0,"words":false},"post-excerpt":{"active":false,"length":0,"keep_format":false,"words":false},"thumbnail":{"active":true,"build":"manual","width":"150","height":"150"},"rating":false,"stats_tag":{"comment_count":false,"views":false,"author":false,"date":{"active":false,"format":"F j, Y"},"category":false,"taxonomy":{"active":false,"name":"category"}},"markup":{"custom_html":true,"wpp-start":"<ul class=\"wpp-list\">","wpp-end":"<\/ul>","title-start":"<h2>","title-end":"<\/h2>","post-html":"<li class=\"{current_class}\">{thumb} {title} <span class=\"wpp-meta post-stats\">{stats}<\/span><p class=\"wpp-excerpt\">{excerpt}<\/p><\/li>"},"theme":{"name":""}}</script><div class="wpp-shortcode-placeholder"></div></div></code>
3.設置Widget Options來精細控制：
- 左邊欄位往下滑到「設定」→點選「Widget Options」
- 選哪些功能要開啟或關閉
使用Widget Options和CSS ID實現自定義設計
要進一步控制小工具的展示效果，可以使用Widget Options插件和CSS ID。以下是一些實用技巧：
- 應用CSS ID：為每個小工具設定獨特的CSS ID，然後在主題的自定義CSS中針對該ID進行樣式設置，這樣可以精確控制字體大小、行數等細節。
- 以小工具熱門文章為例。點選Widget Options視窗的功能1.「齒輪」2.Class&ID 3.設置Widget CSS ID
- 左邊欄位往下滑到1.「外觀」→2.「自訂」進入到主題
- 3.點選主題的附加的CSS功能。若你使用的布景主題沒這功能就無法使用。範例以Astra免費版主題為例。
熱門文章CSS完整語法
CSS ID：Popular-Posts-custom-font-size-widget
#Popular-Posts-custom-font-size-widget {
font-size: 16px; /
}
#Popular-Posts-custom-font-size-widget .wpp-post-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /
overflow: hidden;
text-overflow: ellipsis;
white-space: normal; /
}
最新文章CSS完整語法
CSS ID：new-Posts-custom-font-size-widget
#new-Posts-custom-font-size-widget {
font-size: 16px; /
}
#new-Posts-custom-font-size-widget .rpwwt-post-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /
overflow: hidden;
text-overflow: ellipsis;
white-space: normal; /
}