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 .. 。

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

立即取得 WP Portfolio 外掛

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 檔案，是同一個網站。

astra wp portfolio：前往 brainstormforce 的憑證頁面 — *前往 brainstormforce 的憑證頁面*

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

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

astra wp portfolio：複製 wp portfolio 啟動憑證 — *複製 wp portfolio 啟動憑證*

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

astra wp portfolio：點擊 Activate License 輸入憑證 — *點擊 Activate License 輸入憑證*

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

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

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

astra wp portfolio：wp portfolio 相關功能頁面 — *wp portfolio 相關功能頁面*

4. WP Portfolio 一般設定

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

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

astra wp portfolio：WP Portfolio 一般設定 — *WP Portfolio 一般設定*

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 點擊加載更多作品、滑鼠放置作品上方呈現的效果等 .. ，可參考下圖設定。

astra wp portfolio：WP Portfolio 樣式設定 — *WP Portfolio 樣式設定*

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 字拿掉會比較像自己的網站。

astra wp portfolio：WP Portfolio 路徑修改 — *WP Portfolio 路徑修改*

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

5. 建立作品集頁面

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

Step1：複製 WP Portfolio 短代碼

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

astra wp portfolio：複製 wp portfolio 短代碼 — *複製 wp portfolio 短代碼*

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，然後點按鈕新增。

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

astra wp portfolio：Website 網站作品範例 — *Website 網站作品範例*

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

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

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

astra wp portfolio：設定作品分類＆發佈 — *設定作品分類＆發佈*

備註：

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 照片類型。

Astra 的 WP Portfolio 照片 / 圖片作品類型 — *WP Portfolio 照片 / 圖片作品類型*

設定作品標題、 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 平常設計頁面一樣，可自由的客製化展示頁面了：）

astra wp portfolio：Single Page 客製化展示頁面 — *Single Page 客製化展示頁面*

以上就是 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 教學。