Astra佈景主題教學｜1款新手易學、專業最愛的WordPress主題！

最後更新時間： 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 主題有哪些好處？

1. 操作簡單，容易上手：Astra 操作的介面非常直覺，無論是左邊的選單設定，或是直接點選「鉛筆」圖示，就可以直接用來編輯設定，非常好上手。
2. 能高度客製化網站：Astra沒有內建太多的功能，可以依照你的需求自行調整，適時加入所需的程式碼，就能輕鬆地掌握網站的外觀，所以有許多專業的 WordPress 架站者，喜歡使用Astra主題。
3. Elementor完美搭配：Elemetor 小工具是由 Astra 所開發的，它能夠協助Astra 將網站的頁面編輯得更為美化，Elemetor + Astra的搭配幾乎可以做出所有類型的網站。

網站載入速度快：Astra 採用的是 JavaScript 而非 jQuery，因此能讓網頁載入的速度更快。

Astra 佈景主題 5 大特色介紹

1. 網站載入速度快：Astra 不僅適用於任何網站，從官方數據來看Astra在效能上的分數都很不錯。

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

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

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

5. 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，以下是我喜歡的設定方式，提供給你作參考，提醒你每次設定完成，請點選上方的發佈，網站才會變成你所設定的樣式喔！

1. 字型 ( Family ) : Noto Sans TC (思源黑體)
2. 字體大小 ( Size ) : 16
3. 字重 ( Weight ) : Light 400
4. 對照右邊的畫面，經過修改過的字型，網站是否變得好看許多。

Astra 網站標題設定：

回到Typography→點選Headings，H1~H6有6種標題，H1是最大的標題，H6是最小的標題，一般最常使用設定的是H1~H4的標題。

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

1. 點選圖示「眼睛」控制這個選項是否要顯示在畫面上。
2. 標示為圓形紅色數字2~4，這邊是屬於Meta區，2、3、4可以用滑鼠上下拖曳，決定你想要安排的位置，如同上方Structure區，有兩個選項上下拖曳調整位置。

Astra 容器大小設定：

回到Global→點選Container，Astra 提供4種不同的網站佈局讓你選擇，我選擇使用的是Full Width / Contained。

1. 版型 (Layout) : Full Width / Contained

對照右邊的畫面，整個網站的版型都改變了，Layout 的部分你可以自己嘗試調整，選擇一個你最喜歡的版型。

頁首 ( Header )：

頁首 ( Header )要是用來設定網站的LOGO ( Site Identity )、頁首排版 ( Primary Header )、主選單 ( Primary Menu )、頁首透明背景 ( Transparent Header )。

Astra 如何設定 LOGO

回到Header→點選Site Identity。

1. 標誌：建議尺寸180 x 60像素
2. Logo Width：用來調整LOGO的大小
3. 網站圖示：建議尺寸512 x 512像素

Astra 頁首排版設定

回到Header→點選Primary Header。

Astra 提供3種不同的頁首排版，你可以分別針對電腦版、手機版，選擇你喜歡的排版。

Astra 頁首導覽列設定

回到 Astra 自訂模式的初始畫面，點選「選單」。

1. 點選「建立選單」
2. 建立「選單名稱」ex：主選單
3. 勾選 Primary Menu點選「下一步」
4. 點選「新增選單項目」
5. 新增頁面ex：關於本站、Instagram，點選「+新增」
6. 按下「發佈」

網誌 ( Blog ) 主要內容區

回到 Astra 自訂模式的初始畫面，→點選Blog是用來設定網站的分類頁面 ( Blog / Archive )、文章內容 ( Single Post )。

分類頁面設定 ( Blog / Archive )

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

1. 留言 ( Comment )：可以點選眼睛取消顯示。
2. 作者 ( Author )：看個人需求決定是否要顯示作者名稱。

Post Structure、Meta都各自屬於一個區塊，可以用滑鼠上下拖曳，決定你想要安排顯示的位置。

Astra 側邊欄 ( Sidebar ) 

回到 Astra 自訂模式的初始畫面，點選Sidebar用來設定網站的側邊欄。

1. 側邊欄版型 ( Default Layout )：設定側邊欄的位置，設定為版型的左側、右側、不顯示側邊欄。
2. 側邊欄欄寬 ( Sidebar Width )：設定側邊欄的寬度大小。

頁尾 ( Footer ) 

回到 Astra 自訂模式的初始畫面，點選Footer用來設定網站的頁尾小工具( Footer Widgets )、頁尾欄 ( Footer Bar )。

Astra 頁尾小工具設定 ( Footer Widgets ) 

回到Footer→點選Footer Widgets。

1. 版型 ( Layout )：如右下圖顯示，出現4個工具欄位。
2. 上邊框尺寸 ( Top Border Size )：如右下圖設定藍色線條的尺寸。
3. 上邊框顏色 ( Top Border Color )：用來設定上邊框的顏色。

Astra 頁尾欄設定 ( Footer Bar ) 

回到Footer→點選Footer Bar。

1. 版型 ( Layout )：Astra 提供3種頁尾排版供選擇，我使用中間的排版。
2. 自訂文字 ( Section 1 Custom Text )：[current_year] 跟 [site_title] 會隨著時間變更年份、網站名稱異動而隨之變更，此區主要是用來顯示CopyRight。

結語

Astra佈景主題分為免費版與付費版，付費版的設定功能比較少，無法提供很精緻的設定。如果想要透過WordPress架站，做出比較專業的網站，投資佈景主題還是有必要的。

Astra能高度客製化網站，只要能摸熟Astra佈景主題，再搭配頁面編輯器 Elementor，幾乎可以應付大多數的網站需求，而且網站非常的輕量，網站載入速度快，對於seo的排名也有相當大的優勢，如果你想知道Astra免費版、付費版的功能差異，請點選下方連結，前往Astra官網查看這兩者有何不同！

文章推薦

WordPress 教學

Google Analytics教學

• 5分鐘安裝 GTM 與 GA4 追蹤 WordPress 網站數據
• 【GA教學】Google Analytics教學．1次看懂你的網站分析！

聯盟行銷

• 【課程推薦】小船YouTube金牌運營秘笈評價，教你月賺9000美元！
• 聯盟行銷是什麼？是最安全可靠的被動收入！