最後更新時間: 10-17-2020
本篇為Astra佈景主題教學,WordPress 主題超過上千多種,到底該如何挑選出適合的主題呢!?如果你試過很多款主題,卻一直沒有找到喜歡的,我將推薦你1款新手易學、專業網站架站者最愛的 WordPress 主題,也是本站所使用的 Astra佈景主題。
Astra佈景主題相較於其他主題來說,在網站外觀上的設定更為靈活、客製化,不僅適用於部落格網站,只要再搭配頁面編輯器 Elementor,更有助於形象網站、電商購物網站的 設計與製作。
想知道如何透過 Astra 架設出一個專業完美的 WordPress 網站,那就繼續看這篇 Astra 佈景主題教學吧!
延伸閱讀:WordPress教學|如何讓文章顯示「最後更新時間」來提高SEO排名!
內容目錄
Astra 佈景主題介紹
Astra 主題於2017年,由知名的 WordPress 主題製造商 Brainstorm Force 所開發的多功能佈景主題,Astra 在 WordPress 官方網站中顯示,目前已經超過1,000,000啟用安裝數,並獲得使用者高達5顆星的滿分評價。

Astra 主題最大特色就是非常的輕巧,與其它 WordPress 主題相比至少需要300kb以上,Astra 僅僅只有 50 kb 的檔案大小!因此 Astra 能快速地完成網站載入,同時它還具備高度客製化的功能,能讓你打造一個精美又輕量的網站。
使用 Astra 主題有哪些好處?

- 操作簡單,容易上手:Astra 操作的介面非常直覺,無論是左邊的選單設定,或是直接點選「鉛筆」圖示,就可以直接用來編輯設定,非常好上手。
- 能高度客製化網站:Astra沒有內建太多的功能,可以依照你的需求自行調整,適時加入所需的程式碼,就能輕鬆地掌握網站的外觀,所以有許多專業的 WordPress 架站者,喜歡使用Astra主題。
- Elementor完美搭配:Elemetor 小工具是由 Astra 所開發的,它能夠協助Astra 將網站的頁面編輯得更為美化,Elemetor + Astra的搭配幾乎可以做出所有類型的網站。
網站載入速度快:Astra 採用的是 JavaScript 而非 jQuery,因此能讓網頁載入的速度更快。
Astra 佈景主題 5 大特色介紹
- 網站載入速度快:Astra 不僅適用於任何網站,從官方數據來看Astra在效能上的分數都很不錯。

- Astra 提供現成的網站版型:選擇喜歡的網站版型直接套用,只要更換網站上的圖片、文字,就能快速地完成網站設計,大幅降低網站建置的時間。

- 不需要程式碼,也能輕鬆完成網頁編輯:透過內建的 WordPress Customizer來編輯網頁,新手也能輕鬆美化網站設計。

- Astra 主題支援的外掛軟體:Astra 主題支援 Elementor 及 Beaver builder 頁面編輯器,還支援 WooCommerce購物車、LearnDash課程系統、Toolset客製化欄位、Yoast SEO外掛。

- Astra 除了網站速度、高度的客製化功能外,還有6大功能特色:
- 無障礙網頁規範WCAG 2.0標準,符合AA級別。
- 適合開發人員使用的Hooks & Filters。
- 主題採用 SEO 結構化標記開發。
- 支援多國語言網站建置。
- 在 Github 開放原始碼,任何人都可參與開發及修改。
- Astra 可與常見的頁面編輯器一起使用,像是 Elementor、Beaver Builder。

Astra佈景主題教學
安裝並啟用 Astra 佈景主題
點選外觀,點選安裝佈景主題。

輸入:Astra,點選安裝並啟用。

▼ 點選左上方造訪網站,查看網站前台,屬於比較簡單的風格。

▼ 點選 Astra Options:上方為免費版、中間為付費版可使用的功能,下方為 Astra 可以搭配的免費外掛。

▼ 延續上圖,點選左側外觀,再點選自訂就會看到下方的畫面。

Astra 版面佈局介紹

在開始設定Astra 之前,先跟大家說明一下 WordPress 網站版面的劃分方式,主要會劃分成四個區塊:
- 頁首 ( Header ):主要用來顯示 LOGO、放置選單導覽列的區域。
- 網誌 ( Blog ):通常為文章或主要內容顯示的區域。
- 側邊欄 ( Sidebar ):用來放置小工具的區域,ex:廣告、熱門文章推薦。
- 頁尾 ( Footer ):可以規劃下方導覽列選單、小工具的區域。
當你了解 WordPress 網站版面佈局的基本概念後,在接下來的 Astra 網站設定上,你就會比較容易輕鬆上手。
Astra 佈景主題設定
網站內容設定 ( Global ):
網站內容設定 ( Global ) 主要是用來設定網站的字型 ( Typography )、顏色 ( Colors )、容器 ( Container )、按鈕 ( Buttons )。

Astra 字型設定:
回到 Astra 自訂模式的初始畫面,點選Global→點選Typography→點選Base Typography,以下是我喜歡的設定方式,提供給你作參考,提醒你每次設定完成,請點選上方的發佈,網站才會變成你所設定的樣式喔!

- 字型 ( Family ) : Noto Sans TC (思源黑體)
- 字體大小 ( Size ) : 16
- 字重 ( Weight ) : Light 400
- 對照右邊的畫面,經過修改過的字型,網站是否變得好看許多。
Astra 網站標題設定:
回到Typography→點選Headings,H1~H6有6種標題,H1是最大的標題,H6是最小的標題,一般最常使用設定的是H1~H4的標題。

- 字型 ( Family ) : Inherit 表示沿用之前設定的字型(思源黑體)
- 字重 ( Weight ) : Bold 700
- 目前畫面上所顯示的是電腦版,當你點選它會切換成平版、手機版的畫面顯示,你可以針對這三種版型,去設定H2~H4標題各自所要呈現的字體大小。
- 點選圖示「筆」就會變化成下圖,可以對H1標題進行調整。

- 點選圖示「眼睛」控制這個選項是否要顯示在畫面上。
- 標示為圓形紅色數字2~4,這邊是屬於Meta區,2、3、4可以用滑鼠上下拖曳,決定你想要安排的位置,如同上方Structure區,有兩個選項上下拖曳調整位置。
Astra 容器大小設定:
回到Global→點選Container,Astra 提供4種不同的網站佈局讓你選擇,我選擇使用的是Full Width / Contained。

- 版型 (Layout) : Full Width / Contained
對照右邊的畫面,整個網站的版型都改變了,Layout 的部分你可以自己嘗試調整,選擇一個你最喜歡的版型。
頁首 ( Header ):
頁首 ( Header )要是用來設定網站的LOGO ( Site Identity )、頁首排版 ( Primary Header )、主選單 ( Primary Menu )、頁首透明背景 ( Transparent Header )。

Astra 如何設定 LOGO
回到Header→點選Site Identity。

- 標誌:建議尺寸180 x 60像素
- Logo Width:用來調整LOGO的大小
- 網站圖示:建議尺寸512 x 512像素

Astra 頁首排版設定
回到Header→點選Primary Header。

Astra 提供3種不同的頁首排版,你可以分別針對電腦版、手機版,選擇你喜歡的排版。
Astra 頁首導覽列設定
回到 Astra 自訂模式的初始畫面,點選「選單」。

- 點選「建立選單」
- 建立「選單名稱」ex:主選單
- 勾選 Primary Menu點選「下一步」
- 點選「新增選單項目」
- 新增頁面ex:關於本站、Instagram,點選「+新增」
- 按下「發佈」
網誌 ( Blog ) 主要內容區
回到 Astra 自訂模式的初始畫面,→點選Blog是用來設定網站的分類頁面 ( Blog / Archive )、文章內容 ( Single Post )。

分類頁面設定 ( Blog / Archive )
回到Blog→點選Blog/Archive,這邊以分類頁面做示範,你可以依照自己的需求做設定,文章內容的設定可以參考此頁設定。

- 留言 ( Comment ):可以點選眼睛取消顯示。
- 作者 ( Author ):看個人需求決定是否要顯示作者名稱。
Post Structure、Meta都各自屬於一個區塊,可以用滑鼠上下拖曳,決定你想要安排顯示的位置。
Astra 側邊欄 ( Sidebar )
回到 Astra 自訂模式的初始畫面,點選Sidebar用來設定網站的側邊欄。


- 側邊欄版型 ( Default Layout ):設定側邊欄的位置,設定為版型的左側、右側、不顯示側邊欄。
- 側邊欄欄寬 ( Sidebar Width ):設定側邊欄的寬度大小。
頁尾 ( Footer )
回到 Astra 自訂模式的初始畫面,點選Footer用來設定網站的頁尾小工具( Footer Widgets )、頁尾欄 ( Footer Bar )。

Astra 頁尾小工具設定 ( Footer Widgets )
回到Footer→點選Footer Widgets。

- 版型 ( Layout ):如右下圖顯示,出現4個工具欄位。
- 上邊框尺寸 ( Top Border Size ):如右下圖設定藍色線條的尺寸。
- 上邊框顏色 ( Top Border Color ):用來設定上邊框的顏色。
Astra 頁尾欄設定 ( Footer Bar )
回到Footer→點選Footer Bar。

- 版型 ( Layout ):Astra 提供3種頁尾排版供選擇,我使用中間的排版。
- 自訂文字 ( Section 1 Custom Text ):[current_year] 跟 [site_title] 會隨著時間變更年份、網站名稱異動而隨之變更,此區主要是用來顯示CopyRight。
結語
Astra佈景主題分為免費版與付費版,付費版的設定功能比較少,無法提供很精緻的設定。如果想要透過WordPress架站,做出比較專業的網站,投資佈景主題還是有必要的。
Astra能高度客製化網站,只要能摸熟Astra佈景主題,再搭配頁面編輯器 Elementor,幾乎可以應付大多數的網站需求,而且網站非常的輕量,網站載入速度快,對於seo的排名也有相當大的優勢,如果你想知道Astra免費版、付費版的功能差異,請點選下方連結,前往Astra官網查看這兩者有何不同!
文章推薦
WordPress 教學
- 【wordpress架站教學】30分鐘新手架站完整教學全攻略!
- 【架站教學】使用Cloudways架設WordPress網站,新手也能輕鬆快速架站!
- 如何在 Cloudways 架設第2個 WordPress 網站!
- WordPress設定教學.新手5分鐘完成「基本設定」
- WordPress教學|如何讓文章顯示「最後更新時間」來提高SEO排名!
- AddToAny設定WordPress分享按鈕 ∣ 1鍵完成FB、Line多種社交分享!
- Astra佈景主題教學|1款新手易學、專業最愛的WordPress主題!
- WordPress備份 ∣ 5分鐘教會你 UpdraftPlus 外掛+還原網站!
- WordPress教學│Site Kit by Google外掛,1次整合所有Google分析工具!
- WordPress文章目錄教學 ∣ 5分鐘搞定 Easy Table of Contents 目錄外掛!
- WordPress教學|Contact Form 7 外掛為網站客製化聯絡表單