想在 WordPress 側欄放一張「可以點擊」的圖片，不一定要先學 HTML。對多數目前仍有側欄小工具區的 WordPress 網站，最簡單的做法是到外觀 → 小工具，在側欄加入「圖片」區塊，再直接替圖片設定連結。
只有在使用較舊的傳統小工具介面、特殊佈景主題，或你需要更精細控制圖片 HTML 時，才需要使用「自訂 HTML」方式。真正要先確認的不是程式碼，而是：你的佈景主題有沒有側欄，以及側欄目前是由哪一種編輯方式管理。
WordPress 側欄圖片連結怎麼做？先看你是哪一種介面
| 網站介面 | 建議做法 | 需不需要寫 HTML |
|---|---|---|
| 外觀 → 小工具，可直接新增區塊 | 加入「圖片」區塊，再設定連結 | 通常不用 |
| 傳統 Widget 小工具介面 | 使用圖片小工具，或自訂 HTML | 視佈景主題而定 |
| 區塊佈景主題／網站編輯器 | 到外觀 → 編輯器，修改對應範本或版型區塊 | 通常不用 |
| 特殊佈景主題自己管理 Sidebar | 依該佈景主題的側欄／版型設定 | 不一定 |
WordPress 從 5.8 起已讓傳統佈景主題的小工具區支援區塊編輯，因此很多網站現在不必再靠一段 HTML 才能放圖片。另一方面，區塊佈景主題的版型結構可能完全由「網站編輯器」控制，因此你不一定會看到傳統的「小工具」選單。
方法一：用圖片區塊放側欄圖片連結
如果你的 WordPress 後台有「外觀 → 小工具」，而且側欄可以直接新增區塊，這是最簡單也最推薦的方法。
- 登入 WordPress 後台。
- 進入外觀 → 小工具。
- 找到 Sidebar、Primary Sidebar、Blog Sidebar 或佈景主題提供的側欄區域。
- 按「＋」新增區塊。
- 搜尋並加入圖片區塊。
- 從媒體庫選圖，或上傳新圖片。
- 點選圖片，在區塊工具列找到「連結」功能。
- 貼上圖片點擊後要前往的網址。
- 確認替代文字、圖片尺寸與是否需要在新分頁開啟。
- 儲存後到網站前台實際點一次。
如果圖片是拿來連到活動頁、方案頁、免費資源或重要文章，建議不要只看「圖片有顯示」就算完成。實際測試一次桌機與手機版，確認圖片沒有被裁掉、連結沒有貼錯，而且點擊範圍就是整張圖片。
圖片替代文字 alt 要怎麼寫？
替代文字主要是協助無法直接看見圖片的人理解圖片用途，也能在圖片無法載入時提供資訊。不要為了 SEO 把一串關鍵字硬塞進 alt。
如果圖片本身包含重要資訊，可以簡短描述圖片內容；如果圖片只是純裝飾、旁邊文字已經完整說明用途，則不需要重複寫一大段相同內容。
連結要不要設定「新分頁開啟」？
沒有一律要開新分頁。如果是網站內部文章、服務頁或下一個正常閱讀步驟，直接在原分頁開啟通常就可以；如果是外部工具、合作網站或你希望讀者保留目前頁面的外部資源，再評估使用新分頁。
若你自己手寫 HTML 並使用 target="_blank"，建議同時使用 rel="noopener"，避免不必要的安全風險。
方法二：區塊佈景主題找不到「小工具」怎麼辦？
如果你的網站使用區塊佈景主題，後台可能沒有傳統的「外觀 → 小工具」。這不代表 WordPress 不能做側欄，而是版型可能改由外觀 → 編輯器管理。
這時要先找到文章範本、頁面範本或相關 Template Part，再確認版型裡是否真的有側欄欄位。若原本版型就是單欄設計，不建議只是為了塞一張圖片，硬把整個網站改成雙欄。手機版空間有限，側欄內容通常也會被移到正文下方或直接隱藏。
方法三：需要自己控制 HTML 時怎麼寫？
如果你使用舊式小工具介面，或佈景主題提供「自訂 HTML」，可以用最基本的圖片連結語法：
<a href="https://example.com/target/">
<img src="https://example.com/image.jpg" alt="圖片說明">
</a>如果真的需要在新分頁開啟：
<a href="https://example.com/target/" target="_blank" rel="noopener">
<img src="https://example.com/image.jpg" alt="圖片說明">
</a>不建議在 HTML 裡把圖片寬高硬寫成固定的 300×300，除非圖片本來就是這個比例。現在網站要同時支援手機、平板與桌機，比較重要的是讓圖片可以隨欄位寬度縮放，而不是把所有圖片強迫變成同一尺寸。
側欄圖片最常見的 5 個問題
1. 後台有設定，但前台看不到側欄
先檢查目前文章或頁面的版型。有些佈景主題可以針對單篇內容關閉 Sidebar；也有些頁面本來使用 Full Width／全寬版型。
2. 手機版側欄跑到文章最下面
這通常是響應式版型的正常行為，不一定是錯誤。手機螢幕不適合把正文和側欄左右並排，因此多數佈景主題會把 Sidebar 移到內容下方。
3. 圖片太大，把側欄撐開
優先使用 WordPress 圖片區塊提供的尺寸與版面控制，不要直接上傳超大原圖再只靠瀏覽器縮小。如果整站圖片普遍過大，也可以搭配reSmush.it 圖片壓縮教學先處理圖片檔案。
4. 圖片可以看到，但點擊沒反應
先重新編輯圖片區塊，確認連結真的有儲存；若使用 HTML，則檢查 <a> 標籤是否完整包住圖片，以及網址是否包含正確的 https://。
5. 側欄放很多廣告圖，網站反而很亂
能放不代表應該塞滿。側欄最好有一個清楚目的，例如導向一個主要服務、免費資源或重要文章。圖片太多、每張都在搶注意力，反而會讓讀者不知道該點哪一個。
如果你是從痞客邦搬到 WordPress
痞客邦常見的「側欄管理／程式碼區塊」思維，搬到 WordPress 後不必全部照搬。WordPress 現在更適合直接使用區塊、小工具或佈景主題版型管理。
如果你正在做整站搬遷，可以搭配痞客邦搬家 WordPress 教學一起處理文章、圖片與 SEO，而不是只搬側欄 HTML。
常見問題 FAQ
WordPress 側欄一定要寫 HTML 才能放圖片嗎？
不用。只要目前的側欄小工具區支援區塊，就可以直接加入圖片區塊並設定連結。HTML 比較適合舊式介面或有特殊自訂需求時使用。
為什麼我的 WordPress 沒有「外觀 → 小工具」？
可能是使用區塊佈景主題，版型改由「外觀 → 編輯器」管理，也可能是佈景主題本身沒有傳統 Widget Area。這時要依目前佈景主題的版型結構處理。
側欄圖片適合連到什麼頁面？
優先連到對目前讀者真正有下一步價值的內容，例如相關指南、免費資源、主要服務或活動頁。不要只因為側欄有空間，就放一堆與文章無關的圖。
結論：先用 WordPress 原生區塊，真的需要再寫 HTML
現在要在 WordPress 側欄放圖片連結，最有效率的做法通常不是先找一段程式碼，而是先看佈景主題提供哪一種側欄編輯方式。能用圖片區塊直接完成，就保持簡單；只有特殊版型與舊式小工具再使用自訂 HTML。
如果你正在規劃的不只是一張側欄圖片，而是整個網站的導覽、首頁、文章版型與轉換動線，可以先看網站架設怎麼開始，或直接了解網站建置方案。網站真正好用的關鍵，是每個區塊都有明確用途，而不是把所有功能都塞進頁面。