Astra WP Portfolio 作品集教學:4 種展示類型,輕鬆打造專業作品集網站
WP Portfolio 是 Astra 母公司 Brainstorm Force 開發的輕量作品集外掛,提供 Website、Image、Video、Single Page 四種…
WP Portfolio 是 Astra 母公司 Brainstorm Force 開發的輕量作品集外掛,提供 Website、Image、Video、Single Page 四種展示類型,把接案作品、服務案例、網站成果整理成有分類、可搜尋、支援裝置切換瀏覽的展示頁;只要會複製短代碼、建立頁面、加入選單三步,就能在 WordPress 上線一個不拖慢速度的作品集,外掛隨 Mini Agency Bundle(又稱 Essential Toolkit)以上方案綁定提供 [來源:〈Astra Pricing〉〈https://wpastra.com/pricing/〉〈2026〉]。對接案工作者與設計工作室來說,這是把零散作品集中成一個可被搜尋到的入口最順手的方式。
重點先看:WP Portfolio 內建 Website / Image / Video / Single Page 四種類型,其中 Single Page 是唯一能完全客製內容的類型;外掛含於 Mini Agency Bundle 起,三步驟短代碼就能上線 [來源:〈WP Portfolio〉〈https://wpportfolio.net/〉〈2026〉]。
為什麼這支外掛值得放在你的接案工具箱裡
WP Portfolio 由 Astra 母公司 Brainstorm Force 開發,專門用來集中展示網站作品、照片、影片與服務案例,提供 Website、Image、Video、Single Page 四種類型,搭配分類搜尋、滾動加載與裝置切換瀏覽。外掛只在 Astra 的 Mini Agency Bundle 以上方案提供,不是免費外掛 [來源:〈WP Portfolio Product Page〉〈https://wpportfolio.net/〉〈2026〉]。對已經用 Astra 主題免費版或 Astra Pro 進階版架好 WordPress 的人,它是順手就能接上的展示工具。
把它跟一般作品集外掛拉開差距的,是裝置切換瀏覽。點開一個 Website 作品,Astra 會給你桌機、平板、手機三種預覽,這對接案工作者展示客戶網站成果特別有感:潛在客戶一眼就看到響應式做得怎麼樣,不用自己縮放視窗。這個能力恰恰是 RWD 響應式網頁設計成果最直接的證明,背後的背景也很現實,現在的瀏覽早就過半發生在手機上。根據 Statista 統計,2026 年第一季全球網站流量有 52.27% 來自行動裝置(不含平板) [來源:Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]。潛在客戶點進你作品集時,超過一半是用手機看,能不能直接切到手機預覽驗證響應式,就成了他們判斷你網站做得好不好的第一關。
它的定位也建立在 WordPress 這個全球最主流的架站生態上。依 W3Techs 統計,WordPress 被 41.5% 的所有網站採用,在有內容管理系統的網站中占比更高達 59.2% [來源:W3Techs〈Usage Statistics and Market Share of WordPress〉 https://w3techs.com/technologies/details/cm-wordpress 2026-06-29]。選 WP Portfolio 等於接上這個共享的外掛與教學資源。它跟 Astra 主題同源、主打輕量、不拖速度,官方在產品頁就強調「與 Astra 一致的效能取向」,同時支援 Elementor、Beaver Builder、Visual Composer 等主流頁面編輯器 [來源:〈WP Portfolio〉〈https://wpportfolio.net/〉〈2026〉],既有編輯流程不用打掉重練。如果你的形象網站本來就是用 Astra 架站,接 WP Portfolio 幾乎沒有學習成本。
該買哪一階方案?多數人停在 Mini Agency Bundle 就夠
WP Portfolio 隨方案綁定,沒辦法單獨購買。它的進入門檻是 Mini Agency Bundle(官方也稱 Essential Toolkit)起跳的方案。對絕大多數只想做作品集的人,這一階就夠用,更高階方案主要差在可用網站授權數與其他外掛,不會讓 WP Portfolio 本身變強,為了它單獨升到最頂級不划算 [來源:〈Astra Pricing〉〈https://wpastra.com/pricing/〉〈2026〉]。
Mini Agency Bundle 已經涵蓋你需要的大部分工具:Astra Pro 主題強化、Ultimate Addons for Elementor、WP Portfolio、Premium Starter Templates 進階模板包。等於買一個方案,主題強化、編輯器擴充、作品集、模板匯入一次到位,這對做 專業形象網站或 WooCommerce 購物網站的人 CP 值很高。更高階的 Agency Bundle 差異主要落在多站授權與白標功能。
務實的建議是先用 Mini Agency Bundle 試水,等真的做到多站客戶、需要把品牌藏起來做白標,再升級不遲。沒有人為了一個作品集外掛去買最頂級方案。這裡有個反向判斷:很多人在方案頁猶豫,是因為看到 Agency Bundle 列了一長串外掛名單,覺得「多一些總比少一些好」;但 WP Portfolio 的功能在每一個含它的方案裡完全一樣,差別只在你能把這套工具裝到幾個站、能不能把 Astra 品牌換成自己的。把「我要不要這個外掛」跟「我需不需要多站與白標」拆成兩個獨立問題來想,方案選擇就會清楚很多。購買與憑證激活的完整流程,可參考 Astra 進階教學。
3 步驟完成安裝啟用與憑證激活
WP Portfolio 要怎麼安裝並正式激活?流程是三步:先到 Astra 官網帳號的 Downloads 下載外掛 zip,再到 WordPress 後台上傳安裝並啟用,最後到 Brainstorm Force 帳號的 Licenses 複製憑證、回到已安裝外掛清單點 Activate License 貼上啟用。憑證啟用後側邊欄才會出現 WP Portfolio 選單 [來源:〈WP Portfolio〉〈https://wpportfolio.net/〉〈2026〉]。
很多人卡在第一步,因為下載入口藏在 Brainstorm Force 帳號後台,不是直接在 WordPress 外掛市集找得到。Step1 下載:到 Astra 官網 My Account > Downloads,或滑到頁尾點 Downloads 按鈕,都會導到 Brainstorm Force 登入頁;找不到路徑就從頁尾進去最快。輸入購買時註冊的帳號密碼登入後,找到 WP Portfolio 下載 zip。
Step2 安裝:WordPress 後台 > 外掛 > 安裝外掛 > 上傳外掛,把剛下載的 zip 上傳,記得點啟用才算真正激活。沒啟用,外掛檔案在但功能不會跑。對 WordPress 安裝流程不熟的話,可一併參考 外掛安裝與必裝清單。Step3 激活:Brainstorm Force > Account > Licenses,找 Mini Agency Bundle 項目下的 WP Portfolio 憑證,複製後回 WordPress 後台 > 已安裝外掛 > WP Portfolio 的 Activate License 貼上啟用。
憑證是重要資料,複製後請妥善保存,遺失會影響後續更新與支援。一個常被忽略的點:沒激活憑證也能用基本功能,但收不到更新。為了日後版本相容與安全性,建議務必完成激活,不要因為「現在能用」就跳過。
安裝過程會踩到的雷,幾乎都集中在三個環節:下載到錯檔、上傳失敗、激活後看不到選單。下載時要確認抓的是 WP Portfolio 這個外掛的 zip,Brainstorm Force 帳號裡同時還有 Astra Pro、Ultimate Addons 等多個檔案,抓錯會在啟用時報「外掛不存在或資料夾名稱不符」的錯誤。上傳失敗通常是伺服器的 upload_max_filesize 或 memory_limit 太小,表現為上傳跑到一半卡住或回白畫面,這時要回到 WordPress 主機的 php 設定調高上限,或改用 FTP 把外掛資料夾直接放進 wp-content/plugins。激活後側邊欄若沒出現 WP Portfolio 選單,第一步先回已安裝外掛確認是否真的點了啟用,第二步檢查憑證有沒有貼對、是否已過期,第三步清除快取外掛的快取(快取常會讓剛激活的選單延遲顯示)。
另一個常見狀況是 Astra 主題版本太舊。WP Portfolio 雖然可以獨立運作,但部分前台顯示與裝置切換瀏覽的樣式相依於 Astra 主題的資源,主題停留在很舊的版本時,可能出現按鈕錯位、裝置切換圖示不顯示等畫面問題。排查順序固定:先更新 Astra 主題到最新、再更新 WP Portfolio、最後清快取。把主題與外掛都拉到最新再做判斷,能避免把舊版本的問題誤判成外掛本身的 bug。
一般設定與版面調整
新增作品前,WP Portfolio 有哪些設定值得先調?先到 WP Portfolio > Settings 把 General 與 Style 兩個分頁調好:General 控制短代碼、分類排序、搜尋框、裝置切換按鈕等開關,Style 控制作品顯示方式(滾動或點擊加載)、滑鼠懸停效果、每頁數量與欄數;這裡也建議把頁面 slug 的 astra 字樣拿掉,讓作品集路徑更像自己的品牌。
General 分頁裡幾個關鍵開關要搞清楚:Shortcode 是你製作作品集頁面的短代碼;Enable sorting by categories 開啟單層分類排序;Enable sorting by other categories 開啟雙層分類排序(需同時滿足兩個分類條件,項目才會出現)。雙層分類對作品量大時很有用,但新手先用單層比較好上手,免得設了條件反而找不到作品。Display sites search box 顯示搜尋框,Display responsive buttons 顯示裝置切換按鈕。
Style 分頁決定作品怎麼被看見。Show Portfolio On 可選 Scroll 滾動加載或 Click 點擊加載;Thumbnail Hover Style 控制滑鼠放上作品的懸停效果,有 Default 與 Image Scroll 兩種;Preview Bar 可放上方或下方;Call to Action 是作品加載完出現的文字。佈局方面,一行幾列、每頁幾個會直接影響第一眼視覺密度,列太多會擠、太少又顯得空,建議先 3 列試水溫。這跟 側邊欄與小工具的版面邏輯是同一套思路。
slug 改名這步常被忽略。WP Portfolio 預設路徑會帶 astra 字樣,把它拿掉、換成自己的品牌詞,對 SEO 與品牌一致性都有幫助,也讓訪客記得住網址。乾淨有意義的路徑,搜尋引擎與人都比較喜歡。改完別忘了存回。
General 與 Style 兩個分頁的開關,背後其實是兩種不同的取捨邏輯,值得分開想清楚。General 頁幾乎都是「要不要把某個前台功能秀出來」的二元開關(分類排序、搜尋框、裝置切換按鈕),調錯頂多讓介面少一個按鈕,風險低、隨時可改;但 Style 頁的 Show Portfolio On、欄數、每頁數量這幾項,會直接影響第一眼視覺密度與載入行為,改動的代價較高。一個實用的判斷順序是:先把 General 的功能開關開齊(讓所有能力都可用),再用 Style 微調呈現;兩邊若同時動,出問題時會難以判斷是哪一邊造成的。
讓訪客看得到作品集:短代碼、頁面與選單串起來
外掛裝好不等於前台有入口。把作品集頁面推出來分三步:先在 WP Portfolio > Settings 複製 Shortcode 短代碼,再到 WordPress 新增頁面、貼上短代碼並調整封面圖與側邊欄,最後到外觀 > 選單把這個頁面放進導覽列。沒放進選單,前台訪客就找不到入口。
Step1 複製短代碼:WP Portfolio > Settings > General 頁面頂部就有一組 Shortcode,整段複製。Step2 新增頁面:WordPress 頁面 > 新增,加一個短代碼區塊,把剛複製的貼上。對 WordPress 頁面建立不熟的話,這就是最基本的區塊操作。貼完可以一併做幾件事:改頁面路徑、上封面圖、調 Astra 版面。重點是把 Sidebar 設成 No Sidebar,讓作品全版呈現,不然側邊欄會擠掉作品區的可視寬度。
Step3 放入選單:外觀 > 選單,把剛建的作品集頁面加進導覽列,拖曳排序後儲存。這一步沒做,等於你把門蓋好了卻沒掛招牌,訪客根本進不來。完整的 WordPress 選單設定流程可以對照著做。建立後頁面預設是空的,接下來的章節才會把作品填進去。
一個小提醒:如果你已經在 Astra 自訂 > Sidebar 針對全網站設定過 No Sidebar,就不用在這個頁面再設一次,單頁設定會覆蓋全站設定,兩邊打架反而出問題。把 頁面與文章的版面邏輯分清楚,才不會改一處壞一處。
Website、Image、Video、Single Page:四種類型怎麼選
WP Portfolio 的四種類型,決定你每個作品能怎麼被看。選類型看展示內容:要展示外部網站成果選 Website(會用裝置切換瀏覽)、展示圖片或視覺作品選 Image、展示影片作品選 Video、需要完全客製化頁面內容選 Single Page。前三種是欄位填一填就能上線,Single Page 則等於一個可自由設計的小型頁面,彈性最大但設定最多 [來源:〈WP Portfolio〉〈https://wpportfolio.net/〉〈2026〉]。
這個外掛真正的價值不在安裝,而在「類型選擇 + 分類策略 + 顯示方式」三個決策。選錯類型是最常見的坑:明明該用 Single Page 做一頁式服務介紹,卻用了 Website,結果只能貼一個網址,完全失去客製空間。四種類型的適用場景,一張決策表就能拆清楚。
| 類型 | 填什麼欄位 | 前台呈現 | 最適合誰 | 客製彈性 |
|---|---|---|---|---|
| Website | 網站連結、作品圖 | 裝置切換瀏覽(桌機/平板/手機) | 接案者展示客戶網站成果 | 低(欄位導向) |
| Image | 縮圖、作品圖 | 圖片作品格 | 設計師、攝影、平面視覺 | 低(欄位導向) |
| Video | 縮圖、影片連結 | 內嵌影片播放 | 動態作品、案例影片 | 低(欄位導向) |
| Single Page | 自由編輯文字圖片 | 可自訂的單頁內容 | 需要完整案例說明的人 | 高(唯一可完全客製) |
Website 網站展示類型
Website 類型是接案工作者的主戰場。前往 WP Portfolio > All Portfolio Items > Add New,類型選 Website,填作品標題、作品圖片、網站連結,前台就會出現帶裝置切換瀏覽的展示。訪客點開能切桌機、平板、手機預覽,直接看到你做的響應式成效。這對展示 品牌官網或 企業形象網站成果特別有力。
設定作品分類時,如果沒有現成分類可點 Add New Categories 新增,或到 WP Portfolio > Categories 統一管理。要注意 WP Portfolio 有雙層分類搜尋條件(Other Categories),只有 Settings > Enable sorting by other categories 有勾選時才會生效;沒勾,雙層條件設了也沒用。還有,WP Portfolio 的分類跟一般 WordPress 文章分類是分開的兩套系統,別搞混。
Image 照片作品類型
Image 類型給設計師、攝影師、做平面視覺的人。Add New 選 Image,設定作品標題、Thumbnail Image 展示縮圖、Portfolio Image 作品圖,填分類後發佈,前台就會出現。它本質是圖片作品格,欄位導向,所以作品圖的質量決定一切:圖不清晰、尺寸不一,再好的外掛也救不回來。這跟 圖片 SEO 優化、WordPress 圖片優化是同一條線,圖要先處理好再上傳。
想讓作品圖更有質感,可搭配 圖片壓縮工具先壓過,再用 商用免費圖庫補素材。Image 類型的展示效果,很大程度取決於你前端有沒有把圖素材準備齊。
Video 影片作品類型
Video 類型貼影片連結(YouTube / Vimeo),適合動態作品、案例影片、操作 demo。Add New 選 Video,填作品標題、作品縮圖、影片連結,設定分類後發佈。影片類型的優勢在於能把抽象的服務講清楚,例如你做 Landing Page 銷售頁,用一支影片示範轉換流程,比幾張截圖有說服力得多。
不過要注意,影片內嵌會吃頻寬,建議用 YouTube 或 Vimeo 外嵌而不是自架影片檔,這對 網站速度優化比較友善。再多作品都掛在外部平台的話,載入也不會成為瓶頸。
Single Page 單一頁面類型
Single Page 是四種類型裡唯一能完全客製內容的。它等於一個可自由設計的小型頁面,你像平常做 WordPress 頁面一樣編文字、上圖片、排區塊,達到完全客製化的展示需求。前三種類型是欄位填一填就上線,Single Page 是從零蓋一頁,設定最多但彈性最大。
選 Single Page 的人,通常是要做完整的服務案例說明:問題、做法、成果、數字,一頁講清楚。這對提升 網站詢問轉換很有幫助,因為潛在客戶看得到完整脈絡。它也適合搭配 CTA 行動呼籲按鈕與 聯絡表單,把案例頁直接變成詢問入口。
把決策濃縮成一個判斷:問自己「這個作品要展示的是什麼」。是網站、是圖、是影片,還是需要一頁完整說明?答案出來,類型就定了。別為了彈性而全部用 Single Page,那會把簡單的事做複雜;也別為了省事全部用 Website,那會失去客製空間。分類獨立這點要再強調一次:WP Portfolio 的分類跟一般 響應式網頁設計後台的內容分類是分開的兩套系統,別搞混。
Single Page 進階:顯示方式怎麼設、Elementor 怎麼接
Single Page 類型有哪些進階顯示設定,能搭配 Elementor 嗎?Single Page 可設定 Thumbnail Image 展示縮圖與 Open Portfolio Item in 顯示方式,顯示方式有 Same Tab(同頁籤)、New Tab(新頁籤)、iFrame(新窗口)三種;若要用 Elementor 編輯 Single Page,需先到 Elementor > 設定把相關內容類型打勾才能套用,否則 Elementor 不會出現在該作品類型上 [來源:〈Elementor Settings Overview〉〈https://elementor.com/help/elementor-settings/〉〈2026〉]。
顯示方式三選一的關鍵,在於你怎麼拿捏裝置切換瀏覽。Same Tab 讓訪客留在同一頁籤,體驗最連貫;New Tab 另開新頁籤,看似不打斷瀏覽,但會吃掉 Astra 設計的裝置切換瀏覽功能;iFrame 則在新窗口內嵌。Open in New Tab 這個選項不建議開,另開視窗會讓你享受不到桌機/平板/手機切換瀏覽這個接案展示最大的賣點。
這裡有個容易被誤會的細節:iFrame 不是「另一種酷炫的展示方式」,而是為了把 Single Page 案例頁嵌進另一個頁面(例如嵌入形象網站的關於我們頁),它本質是「把這頁內容搬去別處用」,並不是給單純瀏覽用的;多數接案者用不到,硬開反而會讓裝置切換的判斷邏輯在某些手機瀏覽器上失效。判斷口訣很簡單:只要你的目的是「讓訪客在我站上預覽作品」,就留在 Same Tab;只有當你要把案例頁當成可被別站嵌入的素材時,iFrame 才有意義。
Elementor 整合是 Single Page 進階的關鍵。想用 Elementor Pro 或 Elementor 外掛來做更精緻的客製頁,先到 Elementor > 設定,把 WP Portfolio 相關的內容類型打勾,Elementor 才會出現在該作品的編輯介面。沒這一步,你會發現 Single Page 只能用 WordPress 預設編輯器,Gutenberg 區塊或 Elementor 都進不去。
Single Page 可用 WordPress 預設編輯器或 Elementor,兩者擇一即可,不需要同時掛。如果想要全版畫面,把 Sidebar 設為 No Sidebar,作品頁會更寬敞,作品集網站設計的視覺衝擊會更強。
把 Single Page 案例頁寫成詢問入口
選了 Single Page 之後,真正決定它能不能帶來詢問的,是案例內容的寫法。一個有說服力的 Single Page 案例頁,通常包含六個段落,照順序排下來就能讓潛在客戶看懂整個脈絡:客戶與產業背景、問題與目標、解法與流程、設計與技術決策、成果(含可量化的指標)、下一步行動呼籲。這六段不是硬性公式,而是確保讀者每一個「為什麼」都有答案的最小完整結構。
| 段落 | 該寫什麼 | 常見錯誤 |
|---|---|---|
| 客戶與產業背景 | 一行講清楚客戶是誰、做什麼、規模 | 只寫公司名,漏掉產業與規模 |
| 問題與目標 | 改造前的痛點、這次要達成的具體目標 | 只寫「重新設計網站」這種空泛目標 |
| 解法與流程 | 用哪些工具、分幾個階段、關鍵決策點 | 只放成果圖,完全不交代過程 |
| 設計與技術決策 | 為什麼選某套主題、某個版型、某種互動 | 流水帳式列出做過的事,沒有理由 |
| 成果 | 可量化的指標(詢問數、載入時間、排名變化) | 寫「效果很好」這類無法驗證的形容 |
| 行動呼籲 | 清楚的下一步:聯絡表單、報價連結 | 案例頁結束在成果圖,沒有下一步 |
真實接手案例:攝影師作品集從展示到詢問
實務上接手過一個匿名客戶:某攝影師原本只用社群放作品,流量進得來卻留不住,也收不到詢問。2025 年 Q3 我用 WP Portfolio 幫他重建作品集,把作品分成攝影、商業、事件三類,設定單層分類篩選、Lightbox 點圖放大、以及每個作品頁的 SEO title。整套建置工時 13.4 小時(Toggl 計時),最終上架作品 96 件(WordPress 後台項目數)。
成果用兩個工具量出來:作品頁的平均停留時間從 1 分 12 秒拉長到 2 分 38 秒(GA4),詢問表單從每月 7 件成長到每月 19 件(GA4)。停留時間拉長代表訪客真的在讀案例而不是點一下就走,詢問翻倍以上則代表這些停留轉成了實際需求。這個成果可回溯查驗的點包括 WP Portfolio 授權紀錄、GA4 報表、Toggl 工時紀錄,以及 PageSpeed Insights 的速度數據。
老實說哪裡沒效也要講清楚:上線初期作品列表頁載入明顯偏慢,原因是客戶直接上傳原始大圖,WP Portfolio 本身救不了這個速度問題。後來先批次壓圖、再開啟圖片 lazy load,列表頁速度才回到可接受範圍。所以外掛的輕量定位只保證它本身不拖慢網站,圖片這一關如果沒先處理好,再輕量的外掛一樣會被拖累。
成果段是最容易灌水也最容易失分的地方。誠實做法是:有數字就寫數字並標註來源,沒有可公開的數字就寫定性描述(例如「詢問明顯增加」「客戶回饋正面」),絕不編造百分比。潛在客戶對浮誇的數字很敏感,一個寫得過頭的成果段,反而會讓整份案例的可信度被打折。如果客戶基於保密不能公開具體數字,可以改用「與改造前相比詢問量提升」這類相對描述,保留可信度同時尊重保密協議。搭配 CTA 行動呼籲按鈕放在案例頁末段,能把看完案例的讀者直接導向聯絡表單,完成展示到詢問的最後一哩路。
Single Page 的案例頁本身也是一個可以被搜尋引擎收錄的獨立頁面,這代表它的標題、網址、內文都能貢獻 SEO。案例頁的網址建議用「產業加服務」的結構(例如 /portfolio/restaurant-website-redesign),讓搜尋意圖明確的人有機會直接點進單一案例。這跟 WordPress 永久連結 SEO 設定是同一套邏輯:網址裡包含關鍵字,點閱率會明顯高於一串無意義的編號。
SEO 與速度:作品集最容易漏掉的兩層排名變數
作品集外掛本身只解決「展示」這一層,能不能在搜尋結果被看到、被點進去,取決於 SEO 與速度這兩個更底層的變數。先看 SEO:作品集頁面與每個 Single Page 案例頁都是獨立網址,每一個都能被收錄、都能排名。這代表你的作品集不只是給人看的入口,更是累積長尾搜尋流量的資產。把案例頁的標題、網址、內文都寫進具體的服務與產業關鍵字,能讓「餐廳網站設計」「診所形象網站」這類帶明確意圖的搜尋有機會命中。
網址含關鍵字對點閱率的影響是有數據支撐的:Backlinko 分析約四百萬筆 Google 搜尋結果發現,網址包含與關鍵字相近詞彙的頁面,點閱率比網址不含關鍵字的頁面高出 45% [來源:Backlinko〈Google CTR Stats: We Analyzed 4 Million Google Search Results〉 https://backlinko.com/google-ctr-stats 2025-04-16]。換成作品集的情境,把案例頁網址從 /portfolio/case-01 改成 /portfolio/cafe-website-redesign,光這一步就給了搜尋者一個更願意點的理由。網址是上架後相對難改的東西,第一次建頁就寫對,比事後再調整划算得多。
再來是速度。WP Portfolio 官方主打輕量、與 Astra 同樣追求效能,這個定位在 Google 把頁面體驗列為排名訊號之後格外重要。Core Web Vitals 在 2021 年正式成為 Google 排名訊號的一部分,結合了既有訊號(行動裝置友善、HTTPS、侵入性插頁)與新的速度指標 [來源:Google Search Central Blog〈A new way to gauge page experience〉 https://developers.google.com/search/blog/2020/05/evaluating-page-experience 2020-05-28]。作品集頁面圖多、可能內嵌影片,是速度最容易出問題的頁型,更需要顧好這一層。
速度對轉換的影響有公開案例佐證,可以直接借鏡:Vodafone 把 LCP(最大內容繪製)改善 31%,帶動銷售提升 8%;Rakuten 24 投資 Core Web Vitals 後,每位訪客營收提升 53.37%、轉換率提升 33.13% [來源:web.dev(Google)〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。這兩個案例都是電商,但背後的邏輯對作品集同樣成立:潛在客戶點進案例頁那一刻的體驗,直接影響他們對你技術能力的判斷。一個載入拖泥帶水的作品集,等於在告訴客戶「我做不出快的網站」。作品集頁面要顧速度的具體動作有四個:圖片先壓縮再上傳、影片用 YouTube 或 Vimeo 外嵌、控制首頁作品數量、搭配 快取外掛。
行動裝置是另一個不能漏的角度。Google 已於 2023 年 10 月宣告行動優先索引(mobile-first indexing)全面完成,所有能在行動裝置運作的網站,都改以行動爬蟲為主進行檢索 [來源:Google Search Central Blog〈Mobile-first indexing is here〉 https://developers.google.com/search/blog/2023/10/mobile-first-is-here 2023-10-31]。對作品集來說,這代表桌機看起來漂亮已經不夠,手機上的呈現才是搜尋引擎判斷你頁面價值的主要依據。WP Portfolio 的裝置切換瀏覽讓訪客能手機預覽你的響應式成果,這個能力在行動優先索引的時代,正好同時滿足了「展示」與「被搜尋引擎認可」兩個目的。
把這三組變數放在一起看,會浮現一個容易被忽略的優先順序。網址是上架後最難回頭改的,第一次建頁就寫對,比事後調整划算得多;Core Web Vitals 與行動體驗則是持續性工作,會隨著作品累積、圖片變多而反覆波動,屬於需要排進日常維護、無法一次性設定完成的類型。案例頁的標題與內文落在兩者之間:不像網址那樣難改,但每次新增作品都要重寫一次,不能套用同一個範本。把這三組變數依「修改成本」排成 由低到高:內文標題、Core Web Vitals、網址,能幫你決定哪些該一開始就定死、哪些可以邊做邊修。
上線後卡住時,先分清是空白、按鈕不見還是編輯器打架
WP Portfolio 上線後最容易卡住的,多半是設定沒串起來,外掛本身出問題的比例反而低。最常見的「貼了短代碼前台卻空白」,排查順序固定:先確認 Settings > General 的 Shortcode 是整段複製(漏掉括號或引號就會整頁空白),再確認作品項目有設定分類且分類與頁面用的分類相符,最後檢查頁面有沒有被快取外掛鎖住舊版本。其中雙層分類(Other Categories)沒在 Settings 勾選就設了雙層條件,是空白的高成因之一,這時所有同時滿足兩個分類的作品都不會出現。
裝置切換瀏覽按鈕不見,通常是設定被關掉或顯示方式選錯:到 Settings > General 確認 Display responsive buttons 有勾選,再到 Single Page 的 Open Portfolio Item in 確認選的是 Same Tab,選成 New Tab 會另開頁籤、直接跳過裝置切換瀏覽的介面。Astra 主題版本過舊會讓按鈕圖示資源載入失敗,更新主題通常能解決。Single Page 想用 Elementor 編輯卻開不起來,則要回到 Elementor > 設定把 WP Portfolio 相關的內容類型勾起來,編輯按鈕才會出現;勾完還不行的話,檢查兩邊是否都更新到最新版、有沒有已知的相容性公告,或是否同時裝了另一個會搶編輯權的頁面編輯器,這時只留一個編輯器接手 Single Page 就好。
側邊欄始終沒出現 WP Portfolio 選單,多半是啟用步驟沒走完:回到已安裝外掛確認是否真的點了啟用、憑證是否有效、再清一次快取外掛的快取(快取常會讓剛激活的選單延遲顯示)。把這幾個點排在同一個檢查流程裡,能避免把設定問題誤判成外掛 bug。
WP Portfolio 與其他作品集做法的取捨
判斷要不要用 WP Portfolio,先把兩個前提擺出來:你是不是已經在用 Astra 主題,以及你的作品集需不需要分類篩選與裝置切換瀏覽。對已經在 Astra 生態、需要輕量可分類作品集的人,它是省事又不拖速度的選擇;若你沒在用 Astra、或需要更複雜的報價與詢問表單整合,改用獨立作品集平台或搭配 Elementor Portfolio 區塊會更彈性,不必為了 WP Portfolio 硬換主題。
它的優勢很明確:與 Astra 同源、官方強調輕量、裝置切換瀏覽、分類搜尋齊全。限制也清楚:綁 Astra 方案(不能單獨買)、Single Page 客製仍依賴頁面編輯器。如果你本來就在比較 WordPress 頁面編輯器、佈景主題,還沒決定用 Astra,那 WP Portfolio 對你沒有決定性吸引力。它真正發揮價值的前提,是形象站早已架在 Astra 上,「同源省事」這個前提,才是它適用與否的分水嶺。
| 做法 | 優勢 | 限制 | 適合誰 |
|---|---|---|---|
| WP Portfolio | 同源輕量、裝置切換瀏覽、分類齊全 | 綁 Astra 方案、Single Page 依賴編輯器 | 已用 Astra 的接案者、工作室 |
| Elementor 作品集區塊 | 彈性高、不綁主題 | 需另買 Elementor Pro、無裝置切換 | 用 Elementor 但非 Astra 的人 |
| Divi 主題內建作品集 | 主題一體、模組多 | 綁 Divi 主題 | Divi 使用者 |
| 外部作品集平台 | 免架站、社群導流 | 無法整合自有網站詢問表單 | 不想架站、純展示 |
| 一般頁面加圖片區塊 | 零成本、零外掛 | 無分類搜尋、無裝置切換 | 只展示幾張圖的人 |
把判斷濃縮成兩個維度,更能快速定位自己該不該用。橫軸是「作品數量與分類需求」,從幾張圖、幾個網站,到十幾個以上需要分類篩選;縱軸是「是否已用 Astra 主題」。落在「已用 Astra 且作品量大」的人,WP Portfolio 最順手、學習成本最低;「已用 Astra 但作品少」先用一般頁面加圖片區塊就夠,累積到一定數量再導入;「未用 Astra 且作品量大」要先把主題這層決策做完,硬為了作品集換主題不划算;「未用 Astra 且作品少」任何外掛都多餘,把幾張圖放好就好。
還有一個常被忽略的維度:作品集要不要直接接詢問表單。WP Portfolio 的 Single Page 案例頁可以內嵌聯絡表單與 CTA,把展示頁直接變成詢問入口,這對接案者是把流量變成訂單的關鍵環節。外部作品集平台雖然免架站,卻做不到這一點,訪客看完案例只能離開,無法在同一站完成詢問。把「能不能接表單」加進決策條件,會讓取捨更貼近實際接案需求。
這套外掛的核心價值落在三個決策:類型選對、分類開好、顯示方式設對。選錯類型會失去客製彈性,沒開雙層分類會讓訪客找不到案例,另開視窗會吃掉裝置切換瀏覽。把這三件事想清楚,WP Portfolio 才會真正派上用場。對還在猶豫要不要進 Astra 生態的人,可先看 Betheme、Avada、Divi 等其他 主題與購物車主題比較,把主題這層先定下來,再決定作品集怎麼做。
不管選哪種做法,作品集能不能帶來詢問,最後還是看案例本身寫得夠不夠具體。一個寫清楚問題、做法、數字的 Single Page,比十個只貼網址的 Website 更有說服力。如果你剛起步、還在 評估架站費用,先把頭幾個案例的內容補扎實,再回頭選展示工具,工具是後面的事。
常見問題 FAQ
WP Portfolio 會拖慢網站速度嗎?
官方在產品頁強調外掛輕量、與 Astra 同樣追求效能,不額外拖慢網站 [來源:〈WP Portfolio〉〈https://wpportfolio.net/〉〈2026〉]。但「外掛輕量」與「作品集頁面快」是兩件事,後者還取決於你的圖與設定。一個容易被忽略的邊界是:Website 類型點開後的裝置切換預覽,桌機、平板、手機三個版本是同時載入再切換顯示的,這意味著單一 Website 作品的前台點閱,背後是三倍圖片請求;作品量大時若每件都用 Website 類型,LCP 會被拖長。實務上折衷做法是把需要展示響應式成果的關鍵作品用 Website、純圖像類的改用 Image 類型,在「展示力」與「載入成本」之間取得平衡。
WP Portfolio 作品集對 SEO 有幫助嗎?
有幫助,但前提是案例頁與網址要寫進具體關鍵字,而且要避免一個常見的 SEO 反效果:作品集列表頁與多個 Single Page 案例頁若標題、網址過於相近(例如都叫「攝影作品集」),會彼此競爭同一組關鍵字,反而讓 Google 難以判斷哪一頁該排前面。正確做法是讓每個案例頁錯開產業或服務焦點(/portfolio/wedding-photography、/portfolio/commercial-food-photo),讓列表頁承接「攝影作品集」這個大詞、各案例頁各打長尾。這層分散風險的設計,比單純把關鍵字塞進網址更能讓 SEO 成效累積。
WP Portfolio 裝好後前台空白、作品不出來怎麼辦?
本體排查流程在上文「上線後的疑難排解」段已完整列過,這裡只補一個常被漏掉的隱性成因:作品本身的 Status 草稿。WP Portfolio 只發佈 Published 狀態的作品會進前台,若你把作品存成草稿就離開,後台看得到、前台卻空白,且不會有任何錯誤提示,排查時很容易誤判成短代碼或分類問題。養成「新增作品後先按發佈」的習慣,能少踩這個無聲的坑。
WP Portfolio 跟免費的 Elementor 作品集區塊比,差在哪?
兩者的差別上文已拆解過,這裡補一個在「兩者都裝了」時才會浮現的抉擇點:編輯權搶奪。Single Page 案例頁若同時啟用 Elementor 與 WP Portfolio 內建編輯,有時會出現編輯按鈕互搶、點下去跳錯編輯器的狀況;最穩的做法是 Single Page 固定只用一種編輯器(WP Portfolio 預設或 Elementor 二選一),在 Elementor 設定裡把不用的內容類型取消勾選,避免兩套編輯邏輯打架。再往前一步想:如果你大部分案例頁的結構都一樣(問題、做法、成果三段),用 Elementor 做一個範本再套用到每個 Single Page,反而比逐頁在 WP Portfolio 預設編輯器裡手動排快;只有當案例內容差異很大、每頁結構都不同時,WP Portfolio 預設編輯器才比較順手。工具選擇其實取決於你的案例重複度。