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

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

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

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

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

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

準備好了嗎?我們開始吧:)


1. 開始前需準備?

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

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

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

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

Astra Theme 進階版方案一覽
Astra Theme 進階版方案一覽

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

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

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


2. WP Portfolio 是什麼?

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

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

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

Astra 的 WP Portfolio 作品集展示
Astra 的 WP Portfolio 作品集展示

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

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

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

WP Portfolio 支援多種主流頁面編輯器
WP Portfolio 支援多種主流頁面編輯器

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


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

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

Step1:下載 WP Portfolio 外掛

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

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

前往 Astra 官網,找到 Download。
前往 Astra 官網,找到 Download。

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

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

Step2:安裝&啟用 WP Portfolio 外掛

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

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

WordPress 上傳第三方外掛
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 憑證貼上並啟用,就正式激活此外掛囉。

astra 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 佈局部分,一行幾列、每頁幾個等 ..,完成後儲存。

astra wp portfolio:WP Portfolio 樣式設定
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 入門教學

新增 WordPress 網站頁面
新增 WordPress 網站頁面

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

完成後點發佈(或更新),讓這個頁面上線。

Astra 單一頁面的佈局設定(關閉側邊欄)
Astra 單一頁面的佈局設定(關閉側邊欄)

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

Step3:放入網站選單中&結果預覽

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

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

把作品集頁面,加入至 WordPress 選單
把作品集頁面,加入至 WordPress 選單

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

WordPress 前台選單
WordPress 前台選單

但點擊進入是沒有作品的狀態,我們來看看如何新增作品:)


6. Website 網站展示類型

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

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

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

新增 WP Portfolio 作品集項目
新增 WP Portfolio 作品集項目

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

新增 Website 類型的作品集
新增 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 製作的裝置切換瀏覽功能,真的非常的方便!

Astra 網站作品集,展示頁面
Astra 網站作品集,展示頁面

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


7. Image 照片展示類型

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

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

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

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

WP Portfolio 的 Image 照片 / 圖片類型編輯
WP Portfolio 的 Image 照片 / 圖片類型編輯

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

astra wp portfolio:設定作品分類&發佈
設定作品分類&發佈

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

WordPress 的照片 / 圖片作品集展示
WordPress 的照片 / 圖片作品集展示

8. Video 影片展示類型

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

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

WP Portfolio 的 Video 影片類型示範
WP Portfolio 的 Video 影片類型示範

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

新增 WP Portfolio 的 Video 影片類型
新增 WP Portfolio 的 Video 影片類型

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

astra wp portfolio:設定作品分類&發佈
設定作品分類&發佈

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

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

WordPress 前台 Video 影片出現
WordPress 前台 Video 影片出現

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

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

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

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

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

WP Portfolio 的 Single Page 單一頁面類型示範
WP Portfolio 的 Single Page 單一頁面類型示範

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

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

製作展示頁面,可用一般編輯器 or Elementor 頁面編輯器
製作展示頁面,可用一般編輯器 or Elementor 頁面編輯器

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

設定 Elementor 可使用的頁面類型
設定 Elementor 可使用的頁面類型

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

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

Single Page 細節設定
Single Page 細節設定

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

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

完成後點擊發佈 / 更新。

WordPress 頁面相關設定
WordPress 頁面相關設定

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

Single Page 類型,相關製作畫面
Single Page 類型,相關製作畫面

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 教學

WordPress 學習資源

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

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

當然,如果怕問題描述不清楚,可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

希望這對你有所幫助,祝架站順利啦。

發表迴響

Scroll to Top