W whoops.tw

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 ProElementor 外掛來做更精緻的客製頁,先到 Elementor > 設定,把 WP Portfolio 相關的內容類型打勾,Elementor 才會出現在該作品的編輯介面。沒這一步,你會發現 Single Page 只能用 WordPress 預設編輯器,Gutenberg 區塊或 Elementor 都進不去。

Single Page 可用 WordPress 預設編輯器或 Elementor,兩者擇一即可,不需要同時掛。如果想要全版畫面,把 Sidebar 設為 No Sidebar,作品頁會更寬敞,作品集網站設計的視覺衝擊會更強。

把 Single Page 案例頁寫成詢問入口

選了 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 生態的人,可先看 BethemeAvadaDivi 等其他 主題與購物車主題比較,把主題這層先定下來,再決定作品集怎麼做。

不管選哪種做法,作品集能不能帶來詢問,最後還是看案例本身寫得夠不夠具體。一個寫清楚問題、做法、數字的 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 預設編輯器才比較順手。工具選擇其實取決於你的案例重複度。

相關文章