Astra主題教學 – 新手入門必知的1款WordPress主題

文章最後更新日期 2020 年 11 月 9 日

站長接案多年以來，使用過這麼多WordPress佈景主題，最後還是覺得Astra主題最好用，也最容易上手，也是最推薦的1款主題

Astra主題 是2017年推出，是一款輕量且兼具網站速度及可高度客製的 WordPress多功能佈景主題，由 Brainstorm Force這家公司所建立，這個佈景主題一開始沒有安裝太多功能，加上採用Vanilla JavaScript，禁用 jQuery 減少載入請求，比起其他 WordPress主題至少需要300kb以上，Astra僅需要50kb的資源就能運作。

Astra佈景主題適用於 作品集網站、部落格網站、形象網站、購物車網站，也有提供一鍵式匯入範例的功能(需要先啟用 Astra Starter Sites外掛)

想瞭解更多不同的佈景主題介紹，可以參考站長的這篇懶人包文章

在費用方面，Astra主題 分為年費方案與終生方案，若是想承接網頁設計案件的朋友，建議可以購買 Mini Agency Bundle 終身方案

除了附有官方附的範例版型之外，還有附加 WP Portfolio 跟 Ultimate Addons for Elementor  ，這兩個外掛都非常好用

Astra主題官網

一、輕量級WordPress佈景主題-Astra

Astra價格方案(以下價格為USD美金)

1. Astra Pro– $41 /年 、 $249 終身 (單一網站推薦)
2. Mini Agency Bundle – $169/年 、 $499 終身
3. Agency Bundle – $249/年 、 $699 終身(包含主題、SEO、頁面編輯器、行銷工具、所有版型，接案者必備)

Astra佈景主題免費版本已在20萬多個網站上使用，還是一款可以使用於 AMP 的 WordPress主題，可以加速使用者在行動裝置(如手機、平板電腦)開啟網站的速度

Astra主題沒有加上太多的資源，所有的程式都是為速度而精簡優化。為了提升網站速度，Astra 使用了更加輕量的 Vanilla JavaScript，不使用jQuery就可以實現大部分功能，一開始主題載入的資源非常少，所以能夠在很短的時間內完成網站載入

這款主題免費版的選項設定比較少，需要對 WordPress架構有基本認識會比較好上手，若是需要更多客製化功能的話，建議可以購買 Astra Pro方案來升級，後續建置網站上會輕鬆許多。

由官方的數據來看，Astra主題在效能上的分數都很不錯，輕量的網站不僅瀏覽速度快，也會增加SEO分數

Astra這家公司所開發的其他 WordPress外掛也很實用，例如……

• Convert pro – 電子報外掛
• Ultimate addons for Elementor – Elementor 擴充外掛(推薦使用)
• WP Portfolio – 有篩選功能的作品集外掛 (適用網站展示、圖片展示、影片展示)
• Schema pro – 網站架構標記

延伸閱讀  WordPress外掛 – Astra Hooks 任意位置增加固定程式或內容

二、Astra主題提供70多款以上的精美的網站範例

Astra主題 也提供了多達70款以上的精美網站版型(免費版約為35款)，視覺設計的質感都很不錯，適用於 作品集網站、部落格網站、形象網站、購物車網站，這些網站範例都可以透過 Astra starter sites 外掛來快速匯入，搭配 Elementor 或 Beaver Builder 頁面編輯器外掛，不僅網站修改方便，也能輕鬆建立出各種出色的版型。

三、Astra主題的功能特色

除了視覺設計、網站速度和客製彈性外，Astra佈景主題還有幾個特點推薦使用

1. 無障礙標章WCAG支援到2.0 AA級
2. 適合開發人員使用的 HOOK掛鉤和篩選器
3. 主題採用 SEO 結構化標記開發
4. 支援多國語言網站建置
5. 在 Github 開放原始碼，任何人都可加入開發修改
6.  Astra 可使用常見的頁面編輯器，如 Elementor、Beaver Builder

延伸閱讀：OceanWP主題 – 快速輕巧且客製化彈性高多功能主題

四、Astra Pro 付費版功能介紹

因為 Astra主題是以輕量快速為訴求，有需要的網站功能再增加網站的程式比較乾淨，若是需要高度客製化及發揮 Astra的好用之處，還是建議購買 Astra Pro方案，才能發揮這個佈景強大實力。

升級到Pro方案的功能增加這些功能……

• 設定商品頁版面
• 設定網站的版面
• 設定部落格的版面
• 增加商品的快速查看
• 更多的顏色設定
• 更多Header樣式設定
• 可設定商品圖片圖庫選項
• 商品增加無限滾動選項

前往Astra主題官網

如果想知道 Astra 免費版 與 付費版的功能差異，可以參考Astra官方這兩篇的比較與說明

https://wpastra.com/features/
https://wpastra.com/astra-free-vs-pro/

五、Astra主題支援的頁面編輯器

Astra主題 主流支援 Elementor 及 Beaver builder 頁面編輯器，其網站版型也常使用這兩款來做設計，站長也較為建議使用這兩款頁面編輯器，除了方便使用之外，設計的 RWD頁面也比較少發生跑版的問題。

Astra佈景主題還支援 Woocommerce購物車、LearnDash課程系統、Toolset(客製化欄位)

六、Ultimate addons for Elementor – Elementor 擴充外掛

Ultimate addons for Elementor 這是一款由官方開發的 Elementor 擴充外掛，提供更多元的 Elementor 元件及網站模板可以使用，不僅可以提升網站質感，還可以客製更專業的網站

官方有提供 Elementor 元件的預覽，可以到這裡玩玩看 https://uaelementor.com/

七、Astra主題安裝教學

如果你還不知道如何安裝 Astra佈景主題的話，可以照著站長的步驟來操作，就可以快速把這款好用的主題裝起來囉

1、首先進到 WordPress網站後台，點選「外觀」，再搜尋關鍵字「Astra」，找到佈景主題之後按下「安裝」

2、安裝完之後會出現 Astra主題的提示文字，接著按下「Get Started」開始設定

3、再來會出現 「頁面編輯器」的選擇畫面，選擇您常使用的頁面編輯器外掛，這裡選擇 Elementor做示範

4、再來進入 Astra主題的網站版型，可以挑選喜歡的網站風格
若網站上有 「AGENCY」的標籤，則表示這個範例是需要購買 Pro方案才可以使用
這裡站長選擇 「Mountain」 這個作為範例

5、選定版型之後，會進入到版型的預覽圖片，這裡會出現版型的頁面提供確認，沒問題的話就點選下方按鈕「Import Complete site」開始匯入

6、若是先前已有安裝過其他外掛，Astra也會檢測出現提示訊息，這裡按下 「skip & import」開始匯入

7、接著會出現要「匯入資料」的選項，這裡都可以依需求任意選擇，由上而下的選項說明分別為
7-1、Delete  Previously imported site =>刪除先前網站的資料(文章及頁面)
7-2、Import customizer setting =>匯入設定
7-3、Import Elementor Style Kit =>匯入Elementor 風格工具
7-4、Import Widgets =>匯入小工具
7-5、Import Content =>匯入範例資料

8、恭喜，看到這個畫面，表示網站已匯入成功，可以點選 「View Site」開始觀看網站

9、回到 WordPress網站後台，點選「外觀」→「Astra options」查看主題的工具及設定，這裡會有主題的基本設定，還有免費版與付費版的功能列表
在這個步驟， 有購買 Astra Pro 的方案，可以修改的項目比較完整，若要發揮Astra主題的好用之處，建議購買pro方案，修改彈性比較大

Astra 付費版的功能設定

免費版的外掛啟用設定

10、也可以點選「外觀」→設定，進入到 Astra主題的外觀設定

八、結論

Astra佈景主題免費版的功能設定比較少，也容易上手，再視網站需求及定位增加想要的功能即可，達到網站輕量化，也能提升網站速度
站長覺得這款主題很適合想進入網頁設計領域，使用WordPress架站的朋友，因為客製化彈性很夠，所以只要摸熟這個Astra主題，就可以應付大多數的網站案件需求。

---