Wordpress

Astra 佈景主題設定:從安裝到付費方案一次看懂

多數人選擇 WordPress 佈景主題時,看的多半是首頁展示圖夠不夠漂亮,很少人會回頭查後台實際顯示的安裝量。攤開 WordPress.org 官方佈景主題目錄,Astra 累積超過 100 萬次有效安裝,官方甚至形容它是「全球唯一擁有 6,000 篇以上五星好評的佈景主題」。這個規模背後,其實藏著一整套很少人真正摸透的功能。

多數人裝好 Astra,套一個現成範本、調兩個顏色就收工,實際上這顆佈景主題能調整的地方,遠比想像中多。從全域設計、頁首頁尾編輯器、部落格版面、WooCommerce 電商版面,到最近加進來的 AI 建站功能,每一塊都值得花時間認識。

Astra 目前主要版本的功能不少,以下以免費版為主,遇到只有付費版才開放的項目會特別標出來,重點在把功能盤點清楚,不是逐步設定的操作手冊。安裝前,先看看這顆佈景主題本身是什麼、解決了什麼問題。

Astra 佈景主題是什麼?

Astra 是可以直接在 WordPress 官方佈景主題目錄安裝的免費佈景主題,開發者是 Brainstorm Force,2017 年上架。市面上看到的 Astra Pro、Essential Toolkit、Business Toolkit 這些付費方案,並不是另外一套獨立的佈景主題,而是同一顆 Astra,一層一層解鎖更多功能,底層架構共用。

它想解決的問題很具體。WordPress 內建的預設佈景主題,版面選項有限,想調整整個網站的外觀,常常得靠寫程式碼才做得到。Astra 把「輕量」與「乾淨程式碼」當成核心設計,搭配後台一套視覺化的「自訂」介面,不寫程式碼也能調整全站外觀,這也是它在官方目錄裡累積超過 100 萬次有效安裝、被官方形容為「全球唯一擁有 6,000 篇以上五星好評的佈景主題」的原因之一。

Astra 的市場定位也很清楚。官方宣稱它跟所有主流頁面編輯器完美搭配,包括 Spectra、Elementor、Beaver Builder,走的是「佈景主題負責外殼與骨架,頁面編輯器負責內容排版」這條路線,設計上不綁定單一視覺化編輯器。接下來依序從安裝開始,拆解 Starter Templates 範本、全域設計、頁首頁尾編輯器、部落格版面、跟頁面編輯器的相容程度、WooCommerce 商店功能、效能與 SEO 基礎,以及最近加進來的 AI 建站功能,最後再整理免費版跟付費方案的差異。

一張總覽卡把 Astra 佈景主題設定分成八塊:Starter Templates 範本、全域設計、頁首頁尾編輯器、部落格版面、頁面編輯器相容、WooCommerce 商店、效能與 SEO、AI 建站
Astra 一顆佈景主題管到的範圍:從範本、全域設計、頁首頁尾,到電商、效能與 AI 建站,這篇逐一拆解。

怎麼安裝並啟用 Astra?

安裝 Astra 有兩條路徑,多數人會走第一條。登入 WordPress 後台,點「外觀」裡的「佈景主題」,選「新增佈景主題」,在搜尋欄輸入 Astra,找到之後直接安裝並啟用,幾秒鐘就能完成。第二條路徑是先到 WordPress.org 下載 Astra 的壓縮檔,再到後台的「上傳佈景主題」功能手動上傳安裝,適合網路環境不方便直接搜尋安裝的情況。

在 WordPress 後台的佈景主題目錄搜尋 Astra,Astra 出現在搜尋結果第一張,此站已安裝並啟用
在佈景主題目錄的搜尋欄輸入 Astra,找到後點安裝並啟用,是多數人最快的安裝路徑。

啟用之後,佈景主題本身就能正常運作,但範本庫跟 AI 建站功能,則要另外安裝一支叫 Starter Templates 的外掛才能用。

如果之後打算自己動手加一些自訂程式碼,官方另外提供子主題(Child Theme)產生器,讓修改內容不會在 Astra 更新版本時被還原覆蓋。不過這是進階選項,一般使用者裝好免費版、跟著後續設定走就能開始用,不必一開始就處理子主題。

用 Starter Templates 快速匯入現成版型

多數人實際的起手式,不是從一片空白開始設計,而是另外安裝一支免費外掛,叫 Starter Templates,同樣由開發 Astra 的 Brainstorm Force 製作。裝好之後,後台會出現一個範本庫,依產業類型分類,例如商業服務、電商、作品集、非營利組織等,挑一個接近需求的範本,一鍵匯入整站或單一頁面,幾分鐘內就能有一個完成度不低的網站雛形可以繼續編輯。

匯入範本前要先選頁面編輯器,Starter Templates 目前支援 Spectra(Brainstorm Force 自家的區塊編輯器外掛)、Elementor,以及 WordPress 原生的區塊編輯器,選定之後,範本會呈現對應編輯器的版本。整個範本庫的規模不小,光是版面區塊(Sections)就有 200 多個,搭配大量 Gutenberg 範本與 Elementor 範本可以組合運用。

Starter Templates 範本庫依產業分類(商業、電子商務、部落格等),可搜尋並挑選現成整站版型
裝好 Starter Templates 後出現的範本庫,依產業類型分類,挑一個接近需求的一鍵匯入。

範本分免費跟付費,付費範本要升級到 Astra Pro 或對應方案才能用。匯入動作也會直接覆蓋既有內容,建議在乾淨安裝的網站或測試環境先匯入範本,確認版面滿意後再把要用的內容搬進去,不要在已經上線、有內容的網站上直接匯入。

色彩、字型、版面寬度,怎麼靠全域設計一次調整?

範本匯入之後,如果只是想調整色彩、字型這類全站一致的視覺,不需要逐頁修改,後台的「自訂」介面(Customizer)裡有一個「全域」設定區,牽動的是整個網站的外觀,改一次,全站就套用同一套視覺規則。

Astra 自訂介面的「全域」面板,集中管理排版樣式、色彩、內容容器與按鈕,改一次全站套用
全域設定把色彩、字型、版面容器收在同一個地方,改一次整站跟著變。

色彩是第一個模組,設定一組全站色板,串連到按鈕、連結、標題這些元素上,換一次色板,等於全站一次改風格,不必逐頁挑色。字型是第二個模組,可以分別設定內文跟標題(H1 到 H6)的字型家族、大小、字重,還能依裝置(桌面、平板、手機)分開調整,同一段文字在不同螢幕大小下可以呈現不同字級。版面容器是第三個模組,決定內容區塊要滿版鋪滿螢幕、置中定寬,還是留白邊框,等於決定整個網站的版面骨架。

這套全域設定,正是 Astra 常被形容成「輕量但客製化程度高」的關鍵。設計決策集中在一個地方管理,不用在每個頁面重複手動調整,對經營網站的人來說,換一次視覺風格的成本也因此低很多。

頁首與頁尾版面,怎麼用內建編輯器安排?

全域設定管的是色彩、字型這類貫穿全站的視覺,頁首跟頁尾則是另外獨立的兩個區塊,各自有一個內建編輯器可以排版,官方稱作頁首編輯器(Header Builder)跟頁尾編輯器(Footer Builder)。運作方式是把頁首拆成上、主、下三層,每一層可以放進不同元件,像 Logo、選單、搜尋框、按鈕、社群圖示、自訂 HTML 等,用拖拉的方式排版,不用寫程式碼。

Astra 頁首編輯器把頁首拆成上、主、下三層,可拖拉放入網站標題、標誌與主要選單等元件
頁首編輯器用拖拉的方式安排 Logo、選單等元件,不用寫程式碼。

免費版可以設定基本版面,例如 Logo 靠左、選單靠右,或是整個置中的版面。升級到付費的 Astra Pro,才會打開完整的拖拉式建構器,能做到多層版面、圖片跟欄位並列呈現的巨型選單(Mega Menu)、往下捲動時固定顯示在螢幕上方的黏性頁首(Sticky Header),還有背景透明、跟首頁視覺融合的透明頁首(Transparent Header)。

頁尾的邏輯一樣。免費版能編輯基本的頁尾小工具、著作權列這類固定區塊,付費版才會開放完整的拖拉式頁尾建構器,能自由排版頁尾要放的欄位跟元件內容,像是加開多欄的連結區、放上社群圖示列,不受限於既有的固定版型。

文章列表與單篇文章頁的版面選項

部落格相關的設定,同樣收在「自訂」介面裡。文章列表頁(Archive)可以調整版面配置,選擇清單式或格狀呈現,也能設定精選圖片要不要顯示、顯示方式,文章內容要秀摘要還是全文,分頁的樣式要用數字頁碼還是「載入更多」按鈕。

Astra 自訂介面的文章列表(彙整)版面選項,可切換容器版面配置、容器樣式與資訊欄位置
文章列表頁可調整版面配置與要不要側欄,決定部落格用清單式還是格狀呈現。

單篇文章頁多了一個「相關文章」區塊的開關,可以依分類或標籤決定要不要在文章結尾秀出延伸內容,以及排序依據。

格狀版面、無限捲動這類比較進階的呈現方式,通常要升級到 Astra Pro 才會開放,免費版以清單式版面為主。不過即使是免費版,精選圖片大小、摘要字數這些基本項目還是能自行設定,對一般部落格來說已經夠用。

Astra 和主流頁面編輯器相容到什麼程度?

文章列表、頁首頁尾這些版面骨架都在「自訂」介面裡完成,但頁面裡實際要放的內容,像是圖文編排,則要靠頁面編輯器動手做。這塊 Astra 選擇整合,而不是自己取代。它其中一個核心賣點,是同時跟多套主流頁面編輯器相容,包括 Spectra、Elementor、Beaver Builder,以及 WordPress 原生的區塊編輯器(Gutenberg)。

運作原理不難理解。Astra 提供「全幅寬度」「無頁首頁尾」這類乾淨的版型模板,選了這種模板,頁面編輯器就能完全接管內容區域,佈景主題只負責頁首、頁尾、全站色彩跟字型這些外殼部分,兩邊不會互相干擾。換句話說,想換一套頁面編輯器,不用連佈景主題一起換掉。

示意圖說明 Astra 佈景主題負責頁首頁尾與全站色彩字型,中間內容區交給 Spectra、Elementor 等頁面編輯器接管
佈景主題負責外殼(頁首頁尾、全站色彩字型),內容區交給頁面編輯器;換編輯器不必連佈景主題一起換。

目前的技術現況是,Astra 主要仍透過後台的「自訂」介面搭配區塊樣式範本運作,不是完全體的區塊主題(Full Site Editing,簡稱 FSE),部分版面調整仍要在自訂介面裡完成,還沒有全部搬進 WordPress 的網站編輯器裡。可以說它支援區塊編輯器,並且在逐步強化跟 FSE 的相容性,但還沒有走到完全 FSE 化的階段。

WooCommerce 電商版面,Astra 提供哪些功能?

開一家線上商店,Astra 免費版就能讓 WooCommerce 的商店頁面正常運作,包括產品列表、單一產品頁、購物車、結帳流程,套用的是同一套全域色彩跟字型設定,不會跟 WooCommerce 原本的樣式打架。

Astra 為 WooCommerce 提供產品目錄、單項商品、購物車、結帳等版面設定,右側商店頁套用同一套全站樣式
免費版就能讓 WooCommerce 商店頁正常運作,套用跟全站一致的色彩與字型。

付費版加進更貼近轉換率的細節。商店頁可以調整欄位數跟版面配置,單一產品頁能設定圖片相簿的呈現方式,購物車圖示跟迷你購物車(不用離開當前頁面就能看到購物車內容)可以加上去,結帳流程也能做進一步的樣式調整,例如精簡成單頁的結帳畫面,或是拆成分步驟的結帳流程。

Astra 本身扮演的是版面外殼的角色,真正的金流串接、物流設定、庫存管理,還是要靠 WooCommerce 本身跟搭配的外掛處理,佈景主題負責的是讓整間商店看起來一致、操作起來順手。

Astra 內建的效能與 SEO 基礎功能

Astra 官方把「輕量」當成核心設計原則,不只是行銷話術。官方對 Astra 的技術描述是快速的效能表現,搭配乾淨的程式碼、行動裝置優先的設計,以及內建的結構化資料標記,這幾項是佈景主題層級就打好的技術基礎,跟後續要不要另外裝快取外掛、SEO 外掛是兩件事。佈景主題把底子打好,SEO 外掛負責的是 meta 標題、描述這些內容層面的設定,兩者分工不衝突。

「自訂」介面裡有一個「效能」分頁,其中一個常見選項是把 Google 字型下載到自己的主機上提供,而不是每次都跟 Google 的伺服器要求字型檔案。這是常見的前端效能優化做法,能減少對外部資源的請求次數。

Astra 效能設定中的「載入伺服器本機代管 Google Fonts」開關已開啟,字型改由自己的主機載入
效能設定把這個開關打開,Google 字型就會下載到自己主機載入,不必每次再向 Google 伺服器要字型。

不同第三方測試對 Astra 的檔案大小、載入秒數這類數字,說法常常兜不起來,也很難回溯到同一份可信的原始測試,與其套用別人測出來的數字,不如直接拿自己的網站做實測,才是比較準確的做法。

Astra 內建的 AI 建站功能 ZipWP,能做到什麼程度?

效能與結構化資料是佈景主題在網頁技術層面打的底子,再往上一層,Astra 背後的公司 Brainstorm Force,把 AI 建站功能整合進了 Starter Templates 外掛,透過旗下一個叫 ZipWP 的平台運作。使用者只要選擇網站類型、填入商業名稱,再用一段文字描述自己的產業與業務內容,AI 就會提供建議圖片、詢問聯絡資訊跟想要的網站架構、確認想要的功能,依這些描述挑選版面設計、寫出文案初稿、搭配圖庫圖片,官方描述整個流程在兩分鐘內就能完成。生成出來的網站不是黑盒子,產生之後還是能用一般的編輯方式繼續調整內容跟版面。

Starter Templates 提供 AI 網站建立器(由 ZipWP 提供技術)與經典範本兩種入口,用一段描述就能生成網站雛形
Starter Templates 內建的 AI 網站建立器由 ZipWP 提供技術,用一段文字描述就能生成網站雛形。

另外還有一個編輯階段用得到的 AI 功能。Starter Templates 外掛裡內建一個 AI 助理,運作方式類似聊天機器人,但是針對 WordPress 場景設計,可以用來協助撰寫文案、校對文章、把內容翻譯成不同語言,也能產生自訂的 HTML 跟 CSS 程式碼片段。

要用這些 AI 功能,需要另外註冊一個 ZipWP 帳號,官方說明註冊免費且流程簡單。這代表 Astra 不只是版面外殼,也在往「用一段文字描述,AI 直接生成網站雛形」這條路線靠攏,跟近來網站經營圈子普遍在談的 AI 建站話題,方向是一致的。

免費版夠用嗎?升級付費方案前要考慮什麼?

把前面幾節的「免費有、付費才有」攤開來看,可以歸納出兩種情境。

免費版就能應付的,是基本形象網站、一般部落格、輕量商店這類需求,涵蓋全域設計、基本的頁首頁尾版面、部分 Starter Templates 範本,以及 WooCommerce 的基本商店頁面,對大多數初期上線的網站來說已經夠用。

該升級到付費方案的情境比較具體,需要完整拖拉式頁首頁尾建構器,像黏性頁首、巨型選單、透明頁首這類進階排版;需要更多付費範本可以選;經營內容量大的部落格,想用格狀版面或無限捲動呈現文章列表;經營商店,想要更完整的購物流程優化,例如商品快速預覽、精簡結帳;或是接案跟代理商情境,需要 AI 建站的更高使用額度,或是一次授權多個網站,這些都是付費版真正發揮作用的地方。

免費版與付費方案對照卡:免費版涵蓋全域設計、基本頁首頁尾與 WooCommerce 基本商店頁,付費才有完整建構器、進階購物流程與 AI 更高額度
免費版已能應付一般網站與輕量商店;黏性頁首、進階購物流程、AI 更高額度這些才需要升級付費。

付費方案分好幾層,從單一產品的 Astra Pro,到整合更多功能與網站授權數的 Essential Toolkit、Business Toolkit,各層綁定的網站授權數量跟加購項目不同。確切的方案內容、授權數量跟報價會隨時間調整,官方定價頁也常把首年優惠價跟之後的續約價分開列,升級前直接上官方頁面看當下最新的報價跟方案內容,會比記一個舊數字準確。

如果只能先做兩件事,把全域設計(色彩、字型、版面容器)設定好,再挑一個合用的 Starter Templates 範本匯入,這兩步幾乎是每個網站都用得到的起手動作,也是投入報酬率最高的部分。

頁首頁尾建構器、部落格的進階版面、WooCommerce 的進階購物流程,這些可以等網站上線一段時間、真的碰到現有版面做不到的需求,再回頭考慮升級付費方案,不必一開始就全部升級到位。至於 AI 建站功能,比較適合完全不知道從何下手的人,先讓它產生一個網站雛形,再回頭用一般的編輯方式慢慢調整內容跟細節,不必期待它一次就做到位。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

Astra 是什麼樣的佈景主題?

Astra 是可在 WordPress 官方佈景主題目錄安裝的免費佈景主題,由 Brainstorm Force 開發,2017 年上架。付費的 Astra Pro 等方案不是另一套主題,而是同一套 Astra,會逐層解鎖更多功能。

怎麼安裝並啟用 Astra?

登入 WordPress 後台,在「外觀」的「佈景主題」頁面點「新增佈景主題」。搜尋 Astra,找到後直接安裝並啟用即可,幾秒鐘就能完成。若網路環境不方便搜尋安裝,也可以先下載壓縮檔,再用「上傳佈景主題」手動安裝。

Starter Templates 是做什麼用的外掛?

Starter Templates 是 Brainstorm Force 另外開發的免費外掛。裝好之後,後台會出現依產業分類的範本庫。挑一個接近需求的範本,一鍵匯入整站或單一頁面,幾分鐘內就能有完成度不低的網站雛形,可以繼續編輯。

Astra 的全域設定能調整哪些視覺項目?

全域設定分成色彩、字型、版面容器三個模組。色彩設定提供一組全站色板,可套用到按鈕、連結與標題。字型可分別設定內文與標題的字型家族、大小、字重。版面容器決定內容區塊要滿版、置中定寬還是留白邊框。

Astra 內建的 AI 建站功能能做到什麼?

透過 ZipWP 平台,只要選擇網站類型、填寫商業名稱並描述產業內容,AI 就會建議圖片、詢問聯絡資訊與想要的架構。AI 會依描述挑選版面、撰寫文案初稿並搭配圖庫圖片。官方表示整個流程可在兩分鐘內完成,生成後仍可用一般方式繼續編輯。

資料來源
  1. Astra – WordPress 官方佈景主題目錄頁面(安裝數與評價統計) — WordPress.org