歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略– ,Astra 主題介紹 鵠學苑之前推薦過許多 WorPress 主題,有的適合建立購物網站,有的專門建立部落格,每一款主題都有自己的特色,而今天這篇文章要介紹的 Astra 主題 ,相較於其他主題而言在網站外觀樣式的建構上更能靈活運作,也因為 Astra 可自訂內容的方式相當多樣性,可以自己決定啟用/停用哪些功能以精簡網站載入時所要抓取的程式碼,所以 Astra 相對於一些付費主題而言,在網站載入速度方面是有相當大的優勢。
但不得不說,因為 Astra 必須由網站管理員自行決定要啟用哪些功能,導致在網站架設的過程中可選擇的設定項目比較少,不會像其它主題有比較多的選項可以對網站做變更,因此在使用 Astra 建立網站時必須要具有一些 WordPress 架構的基礎知識,才能理解如何操作 Astra 提供的網站設定項目。接下來跟著鵠學院的腳步,讓我們開始學習吧!
Astra Pro 介紹
https://wpastra.com/pricing/
Astra Ultimate Addons for Elementor 附加外掛
https://uaelementor.com
Astra WordPress 主題特色介紹
第一步:Astra 在網站佈局上是採取即時畫面變更的編輯方式,在全網站設定顏色、文字大小、字體、彙整頁面樣式等都是在主題中自訂選項完成,也就是可以直接在預覽畫面中即時查看修改後的結果,相較於需要不斷切換前後台畫面檢視修改結果的操作方式會比較有效率。
第二步:Astra 採用 JavaScript 而非 jQuery ,可以減少載入 jQuery 時間讓網站運行更快,另外相較於其他主題檔案至少 300 KB 的大小,Astra 只需不到 50 KB 就能正常運行。
第三步:Astra 支援 WooCommerce 建立線上商店,同時也有專門為 WooCommerce 設計的自訂選項。
第四步:還有更多特色,以下介紹:
- 無障礙網站標章規範支援至 2.0 層級。
- 開發人員可用於客製網站的 Hook 位置與篩選器。
- 主題自帶基本 SEO 結構化資料標記。
- 支援創建多語言版本網站。
- 在 GitHub 上擁有 100% 開源程式碼。
- 可以使用市面上大部分的網頁建構器比如 Elementor。
第五步:下圖是 Astra 開發的 Elemetor 小工具,在頁面內容建構時可以有更多的設計方式,Elementor 介紹可參考:Elementor 教學 - WordPress 視覺化網站編輯外掛,基本操作及設定介紹。
Astra 安裝方式與設定位置
第一步:免費版的 Astra 主題在網站後台就可以安裝,與安裝外掛的方式相同。
第二步:下安裝完後可以到 https://wpastra.com/child-theme-generator/ 中建立子主題後下載檔案,再透過上傳的方式做安裝。如果要設定網站外觀樣式,可以在主題選項中點選自訂。
在自訂中可以對網站標誌、瀏覽器圖示、網站主選單、頁面導航列、分類標籤彙整頁、側邊欄等在大小、顏色、字體等細節上做設定,並且在右邊預覽畫面就可以直接看到修改後的效果。
第三步:主題中的 Astra Options 可以快速連結到自訂中的項目。
第四步:如果說有購買 Astra Pro ,就可以自行決定要啟用哪些主題功能,如果說要建立一個比較完整的企業形象網站,安裝 Astra Pro 還是必要的,因為 Astra Pro 的項目才具有比較進階的設定功能。
第五步:下圖是展示 Astra 主題的 Custom Layouts 功能,可以使用 Elementor 建立一段網頁內容,然後在 Custom Layouts 中決定此內容要出現的位置、頁面、優先順序、上下間隔、顯示權限等,對於想要客製化網站樣式的管理員而言,不用再受限於主題架構,可以更自由的自訂網站內容。
結語:
Astra 主題因為選項比較少,操作起來並不會太複雜,鵠學苑後續會在分享更多有關 Astra 主題 編輯文章、頁面時需要設定的基礎項目,像是頁面模板、網頁頁首頁尾等,以及 Astra 如何使用 Elementor 建構頁面等系列教學,敬請期待!
今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~
WordPress相關文章:
網站資訊文章推薦
內容行銷到底要多久才能見效呢?撰寫內文時一定要遵循的潛規則!
SEO到底追不追的完?文章怎麼寫!
Google Search2020再進化,如何提升網頁品質?