Astra WP Portfolio 作品集教學：4 種展示類型

Google Drive 的雲端資料夾是很多設計師交付作品的方式，但對客戶來說，打開若只看到零散檔名，往下捲半天還找不到重點，作品做得再好，第一印象仍會打折。資料夾適合交付檔案，不等於經過策展的作品集。

作品集網站可協助建立信任、呈現專業能力並篩選適合的客戶。Astra 搭配 WP Portfolio 是其中一種 WordPress 組合，是否划算要看授權、展示需求與維護能力；若仍在比較平台，可先看作品集平台選擇指南，再依工作型態規劃展示方式。

先講結論：如果你是設計師、攝影師、接案工作者、工作室，想用 Astra 架一個會被 Google 找到、手機看起來也專業的作品集網站，這篇就是為你寫的。如果你連 Astra 都還沒裝，先去看 Astra 免費版完整教學，把主題底座架起來，再回來這篇做作品集。

作品集網站到底在替你「面試」什麼？先搞懂這件事再動手

很多人把作品集網站當成「線上相簿」來做，這是第一個誤解。換個方式想：你的作品集頁面，其實就是一場 24 小時不休息的面試，而面試官是那個還不認識你的潛在客戶。

這場面試裡，訪客會在心裡問你三個問題，而且通常在 10 秒內就決定要不要繼續看下去：

• 「這個人做過什麼？」作品的質感、數量、多樣性，直接回答這題。
• 「他做過跟我類似的東西嗎？」分類與篩選機制，決定訪客能不能快速找到跟自己需求相近的案例。
• 「我能不能信任他把我的案子做好？」這題靠的是細節，圖片清不清楚、手機版會不會跑版、載入會不會卡。

換句話說，作品集網站的轉換關鍵不在「作品有多少」，而在「訪客能不能用最少的力氣，找到跟他最有關係的那一件」。正因如此，後面會花一整節講 4 種展示類型，因為選錯展示方式，再好的作品都會被埋掉。

作品集不是給你自己看的相簿，是給一個還不信任你的陌生人快速建立信心用的。每一個設計決定，都要從「他」的角度出發。

這也帶出一個實務問題：作品集網站跟一般形象官網的設計邏輯不一樣。形象官網在講「你是誰」，作品集網站在講「你做過什麼、能做到什麼」。兩者的資訊架構、首屏內容、CTA（行動呼籲）位置都不同。如果你同時需要兩者，建議把作品集當成一個獨立區塊或獨立頁面來規劃，避免硬塞進首頁。你進一步可以參考 作品集網站設計指南，裡面有更完整的資訊架構討論。

為什麼 Astra 適合當作品集網站的主題底座

WordPress 目前驅動全球超過四成的網站（依 W3Techs 的統計），而在 WordPress 主題裡，Astra 是少數同時具備「輕量、相容性廣、免費版堪用」三個條件的主題。對作品集網站來說，這三件事剛好都是硬需求。

作品集網站本質上是圖片密集的網站，每個作品項目通常包含主圖、細節圖，可能還有影片，因此頁面往往比一般文字網站重。如果主題又載入大量用不到的 CSS 與 JavaScript，等待與操作體驗會更差。Google 的排名系統會使用 Core Web Vitals 等頁面體驗訊號，但它們只是眾多訊號的一部分；速度優化首先是為了使用者與轉換流程（見 web.dev 的研究）。

Astra 在這裡的優勢很具體：

作品集網站的需求	Astra 怎麼對應
頁面要快（圖片已經夠重了）	前端程式碼精簡，不綁特定頁面編輯器，可依載入需求關閉不需要的區塊
要能搭配多種作品集外掛	與 Elementor、Spectra、WP Portfolio、Beaver Builder 都有良好相容性
要能自由調整版面	Header Builder、自訂版型、寬度控制都能在免費版做到基礎調整
行動版不能跑版	原生響應式，斷點控制細緻
成本要可控	免費版就能架出完整作品集，付費方案按需加購（方案內容見 Astra 官方定價頁）

這裡要誠實點出一件事：Astra 本身「不內建」作品集功能。它是一個主題，負責網站的整體外觀與效能框架；作品集的展示邏輯，要靠外掛或頁面編輯器來完成。這其實是優點，因為你可以根據自己的預算與需求，選擇最適合的作品集方案，而不被綁死。接下來的 4 種展示類型，會同時涵蓋「用 WP Portfolio 外掛做」與「用 Elementor 免費做」兩條路線。如果你對 Astra 的進階功能有興趣，可以延伸閱讀 Astra Pro 主題完整教學。

動手之前：4 個你必須先做決定的關鍵選擇

常看到很多人一開始就急著開 WordPress 後台、裝外掛、挑模板，做到一半才發現整個方向不對。作品集網站最容易翻車的，從來不是技術，而是動手前的策略沒想清楚。這 4 個決定，請你先拿出一張紙寫下答案，再往下做任何設定。挑模板之前，也可以先看過六種職業的作品集範本解剖，用骨架順序判斷哪種版型適合你的內容。

決定一：你的作品集要服務「哪一種訪客」

同樣是作品集，服務的對象不同，整個設計邏輯就會反過來。

• 服務「還不認識你的陌生人」：首屏要立刻給出最強的作品與一句清楚的價值主張，分類要明顯，讓他在 30 秒內建立「這個人值得信賴」的直覺。
• 服務「已經被推薦來的暖客戶」：這類訪客已經對你有基本信任，他們要的是「快速找到跟自己產業相近的案例」，所以分類篩選與案例排序比花俏的視覺更重要。
• 服務「徵才面的面試官」：這類訪客看的是流程與思考過程，每一件作品最好能展開成單頁案例研究，而不只是一張圖。

你要先決定主要服務哪一種，因為它會決定你用哪一種展示類型、首屏放什麼、CTA 怎麼設計。

決定二：作品要用「專案摘要」還是「單頁深度案例」呈現

這是最容易被放過的決定。作品集有兩種深度模式：一種是「圖庫式」，每件作品就是一張圖加一行標題，點進去可能有簡單說明；另一種是「案例研究式」，每件作品獨立一個頁面，包含背景、挑戰、做法、成果、甚至客戶見證。

這兩種模式會直接影響你選擇哪種展示類型與外掛。如果你走案例研究路線，你需要的是「可點擊進入單篇」的網格或瀑布流；如果你走圖庫路線，輪播或可篩選分類會更有效率。

決定三：你要不要讓訪客能夠「篩選」作品

作品數量超過 12 件，就強烈建議加入篩選功能。原因很實際：訪客沒有耐心在你 30 件作品裡慢慢找，他只想看「跟我需求有關的那幾件」。篩選功能會決定你是不是該選「可篩選分類」這個展示類型，也會決定你在後台要怎麼幫作品打分類標籤。

決定四：預算與技術門檻

這決定你走哪一條實作路線。免費方案可以用 Elementor 免費版手動拉出版品網格，完全不用花錢，但每新增一件作品都要手動維護；付費方案用 WP Portfolio 這類專門外掛，作品有獨立的後台管理介面，新增、排序、分類都集中處理，長期維護通常比較省事。是否值得付費，取決於作品數量與更新頻率。

4 種作品集展示類型，各自適合誰

這一節是整篇的核心。以下把作品集的展示方式歸納成 4 種類型，每一種背後對應的是不同的訪客行為與內容結構。沒有「哪一種最好」，只有「哪一種最適合你的作品型態」。下面用一張表先給你全貌，再逐一拆解。

展示類型	最適合的作品型態	優勢	要注意的事
網格排列 Grid	數量多、每件視覺權重接近（平面設計、Logo、UI 截圖）	整齊、好瀏覽、手機友善	作品視覺強度落差大時會顯得平淡
瀑布流 Masonry	作品長寬比差異大（攝影、海報、網頁長截圖）	保留每件作品的原始比例，視覺有節奏感	手機版排序邏輯要測試，避免重點作品被擠到下方
全幅輪播 Carousel	單件作品視覺張力極強、數量精選（得獎作品、招牌案例）	首屏焦點集中，一次呈現一件	若內容只靠互動後的 JS 載入，可能不易被發現；項目愈多也愈要量測效能
可篩選分類 Filterable	跨多種服務或產業，作品數量超過 15 件	訪客能精準找到自己關心的類別	分類架構要先設計好，否則篩選反而造成混亂

類型一：網格排列 Grid，作品集的安心牌

網格排列是所有作品集裡最直覺、最不容易出錯的選擇。它的邏輯是把每一件作品縮圖放進等大的格子裡，橫向縱向對齊，訪客眼睛能穩定掃描。這對那種「作品數量多、每件視覺權重接近」的人特別有用，例如做 Logo、做名片、做社群圖的平面設計師。

網格最大的好處是可預測。訪客知道每往下捲一格就是一件新作品，不會有驚嚇。這種穩定感在建立信任的初期非常關鍵。但它的代價是：當你的作品視覺強度落差很大時，全部塞進同樣大小的格子，會讓強的作品被稀釋、弱的作品被突顯。所以用網格的前提是，你的作品品質要夠整齊。

實作上，網格在 Elementor 免費版用 Image Box 或一個簡單的三欄 Columns 就拉得出來；用 WP Portfolio 則有現成的網格版型可以套，還附帶滑鼠懸停的標題覆蓋效果。

類型二：瀑布流 Masonry，攝影師與網頁設計師的好朋友

瀑布流是為「作品長寬比很不一致」的人設計的。攝影師有直幅有人像有橫幅風景，網頁設計師的長截圖跟手機 UI 截圖比例完全不同。如果硬把這些全部裁切成等大的網格，不是裁掉重點，就是留下難看的留白。瀑布流讓每件作品保留原始比例，依照高度自動排列，視覺上會出現一種有節奏的錯落感。

這裡有個實戰觀察：瀑布流在桌機版看起來很漂亮，但到手機版常常會變成一條直直的長列，因為手機版通常只能顯示一欄。這時候排序邏輯就很重要，你要確保訪客往下滑的前幾件是你最強的作品，排序不能交給隨機。很多外掛的瀑布流在手機版會依照後台排序，這點你上架前一定要自己滑一遍檢查。

類型三：全幅輪播 Carousel，留給你少數的招牌作品

全幅輪播是 4 種裡視覺衝擊力最強的，但也是最容易濫用的。它的邏輯是把一件作品以滿版呈現，一次只看一件，透過左右切換或自動播放來展示。這種類型最適合放在首頁的 Hero 區，用來突顯你少數幾件最具代表性的作品，例如得獎作品、跟知名品牌合作的案例。

輪播不適合當成唯一的作品集展示方式。若作品資訊只有互動後才由 JavaScript 載入，搜尋引擎與鍵盤、螢幕閱讀器使用者都可能不易取得後續內容。輪播也應提供清楚控制、可暫停自動播放並支援鍵盤操作（見 W3C WAI 的輪播教學）。把輪播當成精選入口，下面再放完整的網格或瀑布流，通常更穩。

類型四：可篩選分類 Filterable，作品一多就必備

當你的作品跨好幾種服務（例如你同時做品牌設計、網頁設計、包裝設計），或服務好幾個產業（餐飲、科技、美妝），可篩選分類就是你的主力武器。它的邏輯是所有作品先全部展開，最上方有一排分類標籤，訪客點哪個標籤，畫面就只留下那個分類的作品。

這個類型的威力在於它直接回答訪客心裡最重要的問題：「這個人做過跟我類似的東西嗎？」一個做餐飲的業主走進你的作品集，點下「餐飲」標籤，三秒鐘內看到你做過的五個餐飲案例，這個信任建立的速度，是任何文案都換不來的。

但可篩選分類要成功，關鍵在分類架構的設計。常見的錯誤是分類太細或太雜。建議將分類數量控制在 4 到 6 個之間，每一個分類至少要有 3 件作品支撐，否則訪客點下去看到空蕩蕩的畫面，信任反而會扣分。如果你不確定怎麼分，先用「服務類型」當主軸（例如品牌、網頁、包裝），比用「產業」當主軸更穩，因為服務類型通常比較固定，產業會隨著接案不斷擴張。

講一個實務上的判斷邏輯：分類標籤的命名，要跟潛在客戶腦袋裡的搜尋詞對齊，而不是跟你自己內部的製作流程對齊。業主不會搜「視覺識別系統」，他心裡想的是「Logo 設計」「品牌形象」。你用他聽得懂的詞當分類名，他點下去的那一刻才會覺得「對，這就是我要找的人」。這個細節看起來很小，卻會直接影響訪客在篩選時的點擊意願。

用 Astra + WP Portfolio 外掛從零搭出第一個作品集

策略想清楚了，來動手。這一節帶你走一遍完整的實作流程，從裝外掛到作品上架。如果你連外掛都還沒裝過，先看 WordPress 外掛安裝教學把基本功練起來。

第一步：安裝 WP Portfolio 外掛

WP Portfolio 是 Brainstorm Force 團隊開發的作品集外掛，與 Astra 出自同一團隊，但相容性仍應以目前版本的說明與測試結果為準。外掛可管理網站截圖、圖片或其他作品內容，並依設定建立作品列表與案例頁。

WP Portfolio 是付費外掛，可單獨購買年繳或終身方案；購買後從官方帳號下載安裝包，再到 WordPress 後台的「外掛 → 安裝外掛 → 上傳外掛」完成安裝。啟用後，後台會出現 WP Portfolio 的管理區塊。

第二步：設定 Portfolio 的分類與類型

在新增任何一件作品之前，先把分類架構建好。這跟你在 WordPress 寫文章前先想好分類是一樣的道理。在 WP Portfolio 裡，你可以建立「Categories（分類）」與「Types（類型）」兩層。建議用 Categories 對應你的服務類型（品牌設計、網頁設計），用 Types 對應作品的展示風格或產業別。兩層搭配，就能做出前面講的「可篩選分類」效果。

第三步：新增第一件作品

點進「Add New Portfolio」，你會看到一個類似寫文章的編輯畫面。每一件作品通常包含以下欄位：

• 作品標題：用「客戶名或專案名＋服務類型」的格式最清楚，例如「某咖啡品牌視覺識別」。
• 作品主圖：這是網格或瀑布流裡顯示的縮圖，請用統一比例（網格用正方形或 4:3，瀑布流用原始比例）。
• 作品描述：一段背景說明，包含你做了什麼、解決了什麼問題。
• 作品連結：若成果可公開且連結仍有效，可以附上實際網站或成果頁面；涉及保密、已下線或你無法控制的第三方頁面時，改用截圖與背景說明。
• 分類與類型：勾選剛剛建好的分類，這是篩選功能的基礎。

這裡有個細節很多人忽略：作品主圖的檔名與 alt 文字。這兩個東西直接影響你的圖片能不能被 Google 圖片搜尋找到，千萬不要用「IMG_2049.jpg」這種相機預設檔名。這部分後面講 SEO 時會再展開，你也可以直接參考 圖片 SEO 優化指南。

第四步：選擇展示版型並嵌入頁面

WP Portfolio 提供多種版型設定，讓你決定作品要用網格、瀑布流還是其他排列，欄位數、間距、懸停效果都能調。設定好之後，它會產生一段短代碼（shortcode），你把這段代碼貼進任何一個頁面或文章裡，作品集就會自動渲染出來。

這個短代碼機制的好處是彈性很大，你可以把作品集放在獨立的「作品集」頁面，也可以放在首頁的某個區塊，甚至一個網站放好幾個不同的作品集（例如首頁放精選六件、作品集頁放全部）。頁面發布前把 Sidebar 設成 No Sidebar，作品才能以全版寬度呈現；再到「外觀 → 選單」把作品集頁面加進導覽列，訪客才找得到入口。

沒買 WP Portfolio？用 Elementor 免費方案也能做出同等效果

不是每個人都想為了作品集再多花一筆預算。好消息是，如果你已經在用 Elementor，免費版就能做出相當完整的作品集。這條路線的代價是維護成本比較高，但對作品數量不多（10 件以內）的人來說完全夠用。

用 Elementor 做作品集的核心工具是 Image Box、Image Carousel、Gallery 這幾個內建小工具，再搭配 Columns 做多欄排列。你的做法是：拉一個區段，設成三欄，每個欄位放一個 Image Box，Image Box 裡放作品縮圖、標題、簡短描述，然後把整個 Image Box 設一個連結，指向該作品的單頁案例。重複這個區段，就能做出網格效果。

這條路線的關鍵在於用範本維持一致性。手動拉的毛病是每一件作品的間距、圖片大小、字級很容易不一致，看起來就很「手工」。解法是把第一件作品的區段存成 Elementor 的範本（在 Elementor 編輯器裡對著區段按右鍵，「Save as Template」），之後每加一件作品就匯入這個範本再改內容。你可以在 Elementor 完整教學裡學到更多範本與全域設定的技巧，對應的官方說明是 Elementor Settings Overview。

本質上來說，付費外掛與免費手動的差別，就是「自動化」與「控制權」的取捨。WP Portfolio 把新增、排序、篩選都自動化，省時間但花錢；Elementor 手動做完全控制，免費但花時間。你根據自己的作品數量與更新頻率來決定就好，沒有標準答案。

作品集圖片優化：載入速度與 SEO 一次搞定

作品集網站常見的效能瓶頸是圖片。頁面若同時放入多張未壓縮大圖，下載量會快速累積；此外，第三方字型、動畫與作品集外掛的 JavaScript 也可能拖慢頁面，因此要用 Network 面板與 PageSpeed Insights 實際定位，不能只憑檔案類型猜測。

Google 的排名系統會使用 Core Web Vitals 等頁面體驗訊號，但良好分數不保證排名提升（Google Search Central Blog，2020 年 5 月）。圖片通常是作品集最容易著手改善的一環，上架時可照著這份清單檢查：

1. 壓縮再上架：依顯示尺寸、畫質需求與網路條件壓縮，不要套用單一 KB 上限。可用 圖片壓縮工具處理，或在 WordPress 使用自動壓縮外掛。
2. 評估現代格式：WebP、AVIF 在許多影像上能以較小檔案維持相近觀感，但效果依內容與編碼設定而異。WordPress 自 5.8 起支援 WebP 上傳。
3. 給每張圖正確的尺寸：縮圖就用小尺寸檔，不要上傳 4000px 寬的原圖再讓瀏覽器縮小顯示，那是浪費頻寬。
4. 開啟延遲載入（Lazy Load）：視窗以外的圖片先不載入，等訪客滑到才載。WordPress 內建就有這功能，確認它沒被關掉。

這幾件事做完後，再用相同裝置與網路條件比較調整前後數據；改善幅度取決於原始瓶頸，不能預設一定減半。如果你想更系統化地處理整站速度，可以參考 網站速度這條線的細節。

這裡再補一個觀念：作品集的圖片不是壓得越小越好，而是要在「畫質」與「檔案大小」之間找到你的底線。攝影與視覺導向的作品，過度壓縮會讓細節糊掉，反而傷害專業感。常見的做法是，縮圖先用 75% 到 80% 的品質輸出，再肉眼對比原圖，只要看不出明顯失真就接受。把這個流程固定下來，未來每加一件作品都照同一套標準走，整個作品集的視覺品質才會一致，這個一致性本身就是一種專業訊號。

行動裝置與行動優先索引：手機版作品集的 3 個地雷

這一節特別拉出來講，因為作品集網站在手機上翻車的機率，比任何其他類型的網站都高。原因不難理解：作品集頁面圖多、排版複雜、又常用多欄設計，這些一到小螢幕上全部都會出問題。

全球行動裝置的網頁流量占比長期維持在五成以上（依 Statista 的統計）。Google 也已全面採用行動優先索引，主要使用手機版內容進行抓取與索引；這不代表行動優先本身是排名加分。真正要避免的是手機版缺少主要內容、結構化資料或無法操作，相關說明見 Google 的 mobile-first 公告。

手機版作品集最常踩的 3 個地雷：

地雷一：多欄排版在手機變成災難

桌機上漂亮的三欄網格，到手機如果沒有設定好，可能會被硬擠成三個超窄的小欄，圖片小到看不清楚，文字也擠成一團。Astra 與大多數現代主題都有響應式斷點設計，會自動把多欄在手機版轉成單欄。但你要自己確認這個設定有生效，最直接的方法就是拿出你的手機，打開你的作品集頁面，親自滑一遍。響應式設計的原則你可以參考 響應式網頁設計的完整討論。

地雷二：圖片在手機版載入太慢

手機的網路與處理能力都不如桌機，如果你桌機版那些 2MB 的大圖到手機版照樣載入，訪客會等到失去耐心。解法除了前面講的壓縮與延遲載入，還可以用 srcset 機制讓手機版載入較小的圖片版本。WordPress 媒體庫上傳圖片時會自動產生多個尺寸的版本，只要你的佈景主題與外掛正確使用 srcset，瀏覽器就會自動挑選適合螢幕大小的那一版。

地雷三：輪播與篩選在小螢幕上失效

有些輪播外掛的觸控滑動在手機上不順，訪客滑不動就會以為壞了直接離開。可篩選分類的標籤如果太多，在手機上會超出螢幕寬度，訪客根本看不到後面的分類。這兩個問題都只能靠實機測試發現，上架前請務必用不同尺寸的手機各測一次。

作品集頁面的 SEO：讓 Google 看懂你的每一件作品

作品集頁面有一個先天的 SEO 難題：它圖多字少。搜尋引擎看得懂文字，但對圖片的理解遠不如人類。如果你整個作品集頁面只有一排排的圖片、沒有足夠的文字脈絡，Google 很難判斷這個頁面到底在講什麼，自然也很難給你好的排名。

要解這個題，你要在幾個地方補上文字脈絡：

• 頁面的標題與描述：作品集頁面的 H1 與 meta description 要清楚寫出你是誰、做什麼、服務誰。例如「Sliven 褚崇名｜品牌與網頁設計作品集｜台北接案」遠比單純寫「作品集」來得有搜尋價值。
• 每一件作品的標題：不要只寫「作品一」「作品二」，要寫具體的服務與產業，例如「某某餐廳品牌識別設計」。這些文字會被 Google 當成關鍵字線索。
• 每張圖的 alt 文字：alt 是你告訴 Google「這張圖在畫什麼」的機會，請用一句話描述作品內容，千萬別拿來塞關鍵字。
• 作品的單頁案例：每一件能點進去的單頁，就是一個獨立的 SEO 著陸頁。在上面寫完整的案例研究（背景、做法、成果），這些文字內容才是你長期累積自然流量的本體。

講到永久連結（permalink），它的結構也要在網站一開始就設好。作品集的單頁網址，用「/portfolio/作品名稱」這種清楚的結構，會比 WordPress 預設的亂碼網址好太多。如果你還沒設定，去看 WordPress 架站與 SEO 優化全攻略裡的永久連結章節，一次調到位。

這裡要誠實講一句：作品集頁面本身的 SEO 上限有限，因為它本質是圖片導向。真正能幫你帶來長期自然流量的，是你為每一件作品寫的深度案例研究，以及你圍繞自己的專業寫的教學型內容。把作品集當成「展示信任」的工具，把內容當成「獲取流量」的工具，兩者搭配，才是完整的策略。

結構化資料只在標記符合頁面可見內容時才有意義。作品本身可依實際內容考慮 schema.org 的 CreativeWork 子類；若頁面本質是文章式案例研究，才使用 Article。Google 並沒有「作品案例」專屬複合式結果，CreativeWork 也不是保證豐富呈現的標記；Article 則沒有 required properties，官方列的是建議補充的欄位。部署後仍要隨頁面內容與外掛更新檢查，不能勾完就永久不管。

把訪客變成詢問：作品集頁面的 CTA 設計

作品集的最終目的，不是讓人看完說聲「哇好厲害」然後離開，而是讓他按下聯絡按鈕、寄一封詢問信給你。很多作品集網站做得再美，卻忘了在關鍵位置放 CTA，等於把已經被打動的訪客放走。

CTA 在作品集頁面的位置，有幾個實測過有效的原則：

• 首屏放一個：訪客一進來還沒開始看作品之前，就要看到一個明確的聯絡入口（例如「開始討論你的專案」）。
• 作品集區塊結束後放一個：訪客看完作品、信任度最高的那個瞬間，是最容易轉換的時機，這裡一定要有一個 CTA 接住他。
• 每件作品單頁底部放一個：看完一個深度案例的訪客，已經被你說服了，這時候一個「想做類似的專案嗎」的按鈕，轉換率會出乎你意料。

CTA 的設計細節（顏色、文案、形狀）是一門學問，相關的完整教學在 CTA 行動呼籲按鈕設計指南。而 CTA 指向的那個聯絡表單本身也要做好，表單欄位太多會嚇跑人、太少又收不到足夠資訊，這個平衡在 聯絡表單完整教學裡有詳細的拆解。

如果你想從更上層的角度，理解為什麼有些網站流量很高卻收不到詢問、有些網站流量普通卻詢問不斷，關鍵常常就在這些轉換環節的設計。你可以延伸閱讀 如何讓網站變成自動接單機器，把作品集放到完整的轉換漏斗裡檢視。

常見踩坑與排查清單

收尾這一節，這裡把作品集網站最常見的幾個問題整理成一張排查表。這些都是常見的坑，你照著檢查一遍能少走很多冤枉路。

症狀	最可能的原因	怎麼修
作品集頁面一片空白	短代碼貼錯位置，或外掛沒啟用	確認外掛已啟用，短代碼貼在文字區塊而非程式碼區塊
圖片模糊或變形	上傳的圖片尺寸過小，或被硬裁成錯誤比例	改用符合版型比例的原始圖，寬度至少 1200px
頁面載入超過 5 秒	圖片沒壓縮、沒開延遲載入	套用前面講的圖片優化清單，裝快取外掛
篩選功能按了沒反應	分類沒勾到作品，或 JS 衝突	確認每件作品都勾了分類，逐一停用其他外掛找衝突源
手機版圖片超出螢幕	圖片沒設 max-width: 100%	在自訂 CSS 加 img { max-width: 100%; height: auto; }，或確認主題的響應式設定
作品單頁點進去 404	永久連結結構變更後沒重新處理	到「設定→永久連結」什麼都不改直接按儲存，重新產生規則
Google 收錄的作品頁標題很奇怪	沒設 SEO 標題與 meta	用 Rank Math 等外掛為每個作品單頁單獨設標題與描述

速度問題如果想更系統化地排查，WordPress 的快取外掛是另一個關鍵環節，你可以把作品集頁面放到 快取外掛實測比較的框架裡一起檢視。

你的下一步行動方案

讀到這裡，你腦袋裡的資訊可能已經有點超載了。下面用一個具體的行動方案幫你收尾，你照著做，這週就能架出一個像樣的作品集雛形。

1. 花 30 分鐘想清楚那 4 個決定：服務對象、作品深度、要不要篩選、預算路線。寫在紙上，不要只在腦裡想。
2. 挑出你最強的 6 到 9 件作品：寧缺勿濫，9 件精品遠勝過 30 件平庸之作。給每件作品寫一個清楚的標題與一段描述。
3. 把圖片全部最佳化一遍：依顯示尺寸輸出合適解析度與格式，設定響應式圖片，再以肉眼品質與實測載入結果決定壓縮程度；沒有適用所有作品的固定 KB 門檻。
4. 裝好 Astra 與你選定的作品集工具：走付費路線就裝 WP Portfolio，走免費路線就用 Elementor 手拉。設定好分類架構。
5. 上架作品，嵌入頁面：先做網格或瀑布流版本，這是最穩的起點。
6. 在首屏、作品區塊結尾、作品單頁底部各放一個 CTA：指向一個設計好的聯絡表單。
7. 用三種尺寸的手機實機測試：重點看多欄是否變單欄、圖片是否超出、輪播與篩選是否正常。

作品集網站是一個會跟著你很久的資產。作品會增加、風格會演進、你會接到越來越有意思的案子，這個網站也會跟著長大。一開始把它架在一個輕量、有彈性、又能被 Google 找到的主題與外掛組合上，你省下的是未來好幾年反覆搬家的力氣。現在，挑出你最得意的那一件作品，打開你的 WordPress 後台，開始動手吧。