Astra Pro Theme 教學：WP Portfolio 作品集功能

這是一篇 Astra Pro Theme （進階版）的 WP Portfolio 作品集功能教學。免費版可參考 Astra 主題入門。

Astra 是一款優質輕量級且多功能的 WordPress 主題，不論是新手或是有一定程度的 WordPress 玩家，使用它都是很棒的選擇。

文章中，我會介紹 WP Portfolio 的多種類型用法，包括可客製化的展示頁面，滿足各類型的展示需求，像是文章 / 作品 / 服務案例等 ..

幫助你製作美觀的展示頁面，WP Portfolio 教學章節如下：

• 1. 開始前需準備？
• 2. WP Portfolio 是什麼？
• 3. WP Portfolio 安裝啟用＆憑證激活
• 4. WP Portfolio 一般設定
• 5. 建立作品集頁面
• 6. Website 網站展示類型
• 7. Image 照片展示類型
• 8. Video 影片展示類型
• 9. Single Page 單一頁面展示類型
• Astra 進階版方案，更多教學？
• WordPress 學習資源

準備好了嗎？我們開始吧：）

---

1. 開始前需準備？

Astra 是輕量多功能的熱銷主題，進階版功能更加釋放它的能力，可客製化程度更高。

本篇文章介紹的內容，是 Astra 的 Mini Agency Bundle 迷你代理商方案，才有的功能。

我們會建議使用 Mini Agency Bundle 方案就好，更高階方案不推薦，因為費用較高且功能差不多。

開始前需完成購買安裝 ＆ 憑證激活，詳細操作流程可參考 Astra 進階教學，內有手把手教學。

如果你正好奇，使用 Astra 這款輕量快速的多功能主題，能做出一些什麼網站？

我在 建立 Blog、架設形象網站、架設購物網站，有做不同類型的網站示範，共通點就是都用 Astra 主題，應該會有效地幫助到你。

如果你有興趣且購買了 Astra 進階版方案，那將會得到更多客製化網頁的能力。

---

2. WP Portfolio 是什麼？

WP Portfolio 是 Astra 開發專門製作作品集、展示頁面、服務案例等 .. ，相關頁面內容的外掛。

它有多種作品型態可選擇，像是 Website 網站展示、Image 照片 / 圖片展示、Video 影片展示，或者是更萬能的 Single Page 客製化頁面形式。

WP Portfolio 本身極為輕量，完全不會影響到網站速度，這跟 Astra 本身輕量快速的優點一樣。

同時提供物品搜尋功能、雙層分類條件、滾動加載作品、Demo 演示作品匯入、瀑布流展示等 .. 多種特色。

當然，WP Portfolio 同樣支援主流的頁面編輯器，像是 Elementor、Beaver Builder、Visual Composer .. 。

這代表能自由客製化網站頁面，並當成展示頁面的一部分，達成你的真正需求：）

---

3. WP Portfolio 安裝啟用＆憑證激活

接下來我簡單分 3 步驟，完成 WP Portfolio 安裝啟用＆憑證激活。

Step1：下載 WP Portfolio 外掛

點選 Astra 官網 上方選單的 My Account > Downloads，會前往到 Brainstorm Force（頭腦風暴部隊）網站的登入頁面。

如果找不到路徑，前往 Astra 官網滑到網站頁尾（最底端）也會看到 Downloads 按鈕。

前往並輸入購買註冊的帳號＆密碼，然後登入。

然後，會看到 Astra 的相關下載檔案都在這，我們找到 WP Portfolio 點擊下載。

Step2：安裝＆啟用 WP Portfolio 外掛

前往 WordPress 後台 > 外掛 > 安裝外掛，點擊 上傳外掛，把剛下載的 WP Portfolio 上傳安裝。

安裝完成後，記得點 啟用 才算真正有激活（圖略過）。也可參考 如何安裝 WordPress 外掛。

Step3：輸入 WP Portfolio 憑證激活

前往 Brainstorm Force 官網 > Account，點擊 Licenses 憑證頁面。

備註：這跟剛下載 WP Portfolio 檔案，是同一個網站。

找到 Mini Agency Bundle 項目，會有 WP Portfolio 的啟動憑證，我們把它複製下來等下會用到。

備註：這裡的憑證頁面都是重要資料，請妥善保存唷：）

回到 WordPress 後台 > 外掛 > 已安裝外掛，點擊 WP Portfolio 的 Activate License。

然後把剛複製的 WP Portfolio 憑證貼上並啟用，就正式激活此外掛囉。

憑證啟用後，就會看到側邊欄有 WP Portfolio 作品集功能了，太棒了！

接下來的文章，我會帶大家上手這款 Astra 開發的好用外掛，準備好了就開始吧：）

---

4. WP Portfolio 一般設定

在開始使用 WP Portfolio 前，我們可先進行 Settings 一般設定，幫助接下來更好操作。

前往 WP Portfolio > Settings > General，可先參考下圖的設定操作，完成後儲存。

• Page Builder & Import Starter Templates：這是一起的功能，可用來導入指定的頁面編輯器模板，方便使用者快速看到 Demo。（這邊先不使用，因為導入模板太多，之後還要刪掉會比較麻煩，跟著本文教學自行新增即可）
• Shortcode：製作 WP Portfolio 頁面的短代碼，等下會教如何用。
• Enable sorting by categories：開啟分類排序功能。
• Enable sorting by other categories：開啟雙層分類排序功能（需同時滿足情況，才會出現項目，這邊先不勾選方便下面教學）。
• Display sites search box：顯示搜尋框。
• Display responsive buttons：顯示不同裝置的切換按鈕。

再來，切換到 Style 分頁，可調整作品集顯示方式。

像是可用滾動 or 點擊加載更多作品、滑鼠放置作品上方呈現的效果等 .. ，可參考下圖設定。

• Show Portfolio On：更多作品顯示方式，有 Scroll 滾動、Click 點擊可選。
• Thumbnail Hover Style：滑鼠放置作品上方呈現的效果，有 Default 預設、Image Scroll 圖片滾動可選。
• Preview Bar：預覽功能 Bar，可放置 Top 上方、Bottom 下方。
• Call to Action：作品加載完後，會出現的文字。

設定 WP Portfolio 佈局部分，一行幾列、每頁幾個等 ..，完成後儲存。

最後來更改一下 WP Portfolio 頁面的 Slug 路徑，可以把 Astra 字拿掉會比較像自己的網站。

以上就是 WP Portfolio 相關的調整囉，接下來開始新增作品集頁面：）

---

5. 建立作品集頁面

這章節，我們需建立一個作品集頁面，並放入 WordPress 選單，這樣前台訪客才看得到。我們分成簡單 3 步驟完成。

Step1：複製 WP Portfolio 短代碼

前往 WP Portfolio > Settings > General，先複製 Shortcode 短代碼。

Step2：新增作品集頁面

前往 WordPress 頁面 > 新增頁面，點左上角新增短代碼區塊，並貼上剛複製的那組。

接著可做一些頁面設定，像是頁面路徑、封面圖片、Astra 版面設定等 .. ，也可參考 WordPress 頁面新增、Astra 入門教學。

可以順便把 Sidebar 頁面側邊欄隱藏（No Sidebar），這是針對單一頁面設定的，不然怕等等版面太小，如下圖。

完成後點發佈（或更新），讓這個頁面上線。

備註：如果已經在 Astra 自訂 > Sidebar 有針對全網站設定過了，就不用再設定一次。

Step3：放入網站選單中＆結果預覽

接著，需要把該作品集頁面，放入到網站選單中，這樣前台訪客才會看到。

前往 WordPress 外觀 > 選單，將頁面放入選單裡，也可拖曳排序，完成後記得儲存。可參考 WordPress 選單 也有示範。

最後看一下成果，會發現作品集頁面，已經順利出現在網站選單中囉。

但點擊進入是沒有作品的狀態，我們來看看如何新增作品：）

---

6. Website 網站展示類型

WP Portfolio 可新增不同類型作品，像是 Website 網站、Image 照片 / 圖片、Video 影片、Single Page 單一頁面。

這章節，先從 Website 網站類型作品開始示範。

前往 WP Portfolio > All Portfolio Items，點 Add New。

幫此作品命名，類型選 Website，然後點按鈕新增。

輸入網站作品標題、作品圖片、網站連結等 .. 相關內容，下圖有範例。

• Open in New Tab：是否另開視窗。除非有特別需求不然不建議開啟，因為享用不到 Astra 設計的裝置切換瀏覽功能。
• Add Call-to-action：作品行動標語。可以輸入作品描述 or 填上公司聯繫方式，提升訪客聯絡機會。

再來設定作品集分類，如果沒分類可點 Add New Categories 新增，或是前往 WP Portfolio > Categories 也能新增（如下圖）。

完成後點發佈 or 更新，將作品上傳。

備註 ：

1. WP Portfolio 有雙重分類搜尋條件（Other Categories），如果 Settings > Enable sorting by other categories 有勾選（前面章節有提到），這功能才有用。

2. WP Portfolio 分類和一般的 WordPress 文章分類是不同的設定地方唷，別搞錯了唷：）

最後，前往 WordPress 前台的作品集頁面，就會出現剛新增的網站作品囉。

點擊看一下作品，會發現還有 Astra 製作的裝置切換瀏覽功能，真的非常的方便！

如果個人、公司提供的服務，需要有網站介面來展示，可以使用這功能：）

---

7. Image 照片展示類型

這章節示範新增 Image 照片 / 圖片類型，如有相關的作品需展示，就可以使用這個類型。

前往 WP Portfolio > Add New，這次選擇 Image 照片類型。

設定作品標題、 Thumbnail Image 作品展示縮圖、Portfolio Image 作品圖等內容。

設定作品集分類＆其他相關設定，完成後點發佈 / 更新，上傳此作品。

前往 WordPress 網站前台看一下成果，會發現剛新增的 Image 照片 / 圖片作品，已經順利出現囉：）

---

8. Video 影片展示類型

這章節示範新增 Video 影片類型，如有相關的作品需展示，就可以使用這個類型。

前往 WP Portfolio > Add New，這次選擇 Video 影片類型。

輸入作品標題、作品縮圖、影片連結等 .. 。

設定作品集分類＆其他相關設定，完成後點發佈 / 更新，上傳此作品。

前往 WordPress 網站前台看一下成果，會發現剛新增的 Video 影片作品，已經順利出現囉：）

點擊也會看到展示影片播放唷！

---

9. Single Page 單一頁面展示類型

這章節示範新增 Single Page 單一頁面類型，基本上就等於是多功能類型。

你可自行設計頁面，就像平常製作 WordPress 頁面一樣，達到客製化網頁設計需求。

當然，也能用 Elementor 之類的 熱門頁面編輯器，做到更多的作品展示設計。

前往 WP Portfolio > Add New，這次選擇 Single Page 類型。

開始製作網站頁面，可自行編寫文字、上傳圖片 / 影片 .. ，這邊我就先隨意製作。

用 WordPress 一般編輯器 or Elementor 頁面編輯器製作都可以。

額外提醒：如果想使用 Elementor 製作，請記得到 Elementor > 設定，把相關的內容類型打勾，才能套用 Elementor 功能唷（參考下圖）。

回到剛剛的 WP Portfolio 頁面，往下滑會看到 Single Page 細節設定，可設定 Thumbnail Image 展示縮圖、Open Portfolio Item in 顯示方式 .. 。

備註：顯示方式有 Same Tab 同頁籤、New Tab 新頁籤、iFrame 新窗口。

然後進行 WordPress 頁面的其他設定，像是頁面網址、作品分類、封面圖片、Astra 版型設計等 .. ，也可參考 WordPress 頁面新增、Astra 入門教學。

如果想要全版畫面，可把 Sidebar 設為 No Sidebar 即可。

完成後點擊發佈 / 更新。

前往網站前台看一下成果。

Good！就跟 WordPress 平常設計頁面一樣，可自由的客製化展示頁面了：）

以上就是 WP Portfolio 作品集功能的完整教學囉，不知道大家有沒有學會呢！

如果有作品集頁面的製作需求，或是有需求要使用類似的效果，都可以考慮使用這款 Astra 的 WP Portfolio 外掛，很實用的：）

---

Astra 進階版方案，更多教學？

有關於 Astra 進階版，我寫了多篇使用教學，方便你認識和上手 Astra 進階功能，如下。

• Astra Pro：Astra 進階版方案，強化功能詳細教學，可參考 Astra 進階教學。
• Astra Pro WooCommerce：WooCommerce 電商功能強化，可參考 Astra Pro WooCommerce 教學。
• WP Portfolio：製作網站作品集、展示頁面、服務案例等 .. 專用外掛，可參考 WP Portfolio 教學。
• Ultimate Addons for Elementor：在 Elementor 上新增 40+ 個元素功能、100+ 網站模板、200+ 區塊模板，可參考 UAE 教學。
• Premium Starter Templates：有更多 Astra 進階模板可使用，可參考 Premium Starter Templates 教學。

如果都看完，相信你對 Astra 主題的整體掌握度，大概也就如魚得水了！

---

WordPress 學習資源

學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。

資源一：犬哥數位（專業 WordPress 網頁設計公司）

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！

資源二：WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種，很多網友私訊我不知道安裝哪一款，才有辦法實現功能。或是已經試了很多款外掛，但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題＆外掛大全（電子書），這些都是我們團隊協助客戶開發案件時，會搭配使用的。一來外掛品質優良，二來功能性也足夠強！

資源三：官方教學資源（含 FB 社群解答）

如果你偏愛自架網站，也歡迎持續關注 犬哥網站 Blog，我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習，也可關注 YouTube 頻道，幫助你更容易進入狀況。

當然，如果你在操作過程中遇到問題，也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ，除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。