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

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 已經超過 1,000,000 啟用安裝數
▲ Astra 已經超過 1,000,000 啟用安裝數

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

使用 Astra 主題有哪些好處?

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

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

Astra 佈景主題 5 大特色介紹

  1. 網站載入速度快:Astra 不僅適用於任何網站,從官方數據來看Astra在效能上的分數都很不錯。
官方數據顯示 Astra 的網站瀏覽速度快,對 SEO 也有幫助。
▲ 官方數據顯示 Astra 的網站瀏覽速度快,對 SEO 也有幫助。
  1. Astra 提供現成的網站版型:選擇喜歡的網站版型直接套用,只要更換網站上的圖片、文字,就能快速地完成網站設計,大幅降低網站建置的時間。
Astra 提供免費版、付費版網站版型選擇使用
▲ Astra 提供免費版、付費版網站版型選擇使用
  1. 不需要程式碼,也能輕鬆完成網頁編輯透過內建的 WordPress Customizer來編輯網頁,新手也能輕鬆美化網站設計。
Astra 網站設定:版型、顏色、字型、文字大小
▲ Astra 網站設定:版型、顏色、字型、文字大小
  1. Astra 主題支援的外掛軟體:Astra 主題支援 Elementor 及 Beaver builder 頁面編輯器,還支援 WooCommerce購物車、LearnDash課程系統、Toolset客製化欄位、Yoast SEO外掛。
Astra 主題支援許多外掛軟體
▲ Astra 主題支援許多外掛軟體
  1. Astra 除了網站速度、高度的客製化功能外,還有6大功能特色
  • 無障礙網頁規範WCAG 2.0標準,符合AA級別。
  • 適合開發人員使用的Hooks & Filters。
  • 主題採用 SEO 結構化標記開發。
  • 支援多國語言網站建置。
  • 在 Github 開放原始碼,任何人都可參與開發及修改。
  • Astra 可與常見的頁面編輯器一起使用,像是 Elementor、Beaver Builder。
Astra 6大功能特色
▲ Astra 6大功能特色

Astra佈景主題教學

安裝並啟用 Astra 佈景主題

點選外觀,點選安裝佈景主題

安裝 Astra 佈景主題
▲ 安裝 Astra 佈景主題

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

安裝並啟用 Astra
▲ 安裝並啟用 Astra

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

Astra前台畫面
▲ Astra 前台畫面

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

Astra Options介紹
▲ Astra Options介紹

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

Astra 後台畫面
▲ Astra 後台畫面

Astra 版面佈局介紹

Astra 版面佈局
▲ Astra 版面佈局

在開始設定Astra 之前,先跟大家說明一下 WordPress 網站版面的劃分方式,主要會劃分成四個區塊:

  • 頁首 ( Header ):主要用來顯示 LOGO、放置選單導覽列的區域。
  • 網誌 ( Blog ):通常為文章或主要內容顯示的區域。
  • 側邊欄 ( Sidebar ):用來放置小工具的區域,ex:廣告、熱門文章推薦。
  • 頁尾 ( Footer ):可以規劃下方導覽列選單、小工具的區域。

當你了解 WordPress 網站版面佈局的基本概念後,在接下來的 Astra 網站設定上,你就會比較容易輕鬆上手。

Astra 佈景主題設定

網站內容設定 ( Global ):

網站內容設定 ( Global ) 主要是用來設定網站的字型 ( Typography )、顏色 ( Colors )、容器 ( Container )、按鈕 ( Buttons )。

Global 介紹
▲ Global 介紹

Astra 字型設定:

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

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

Astra 網站標題設定:

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

Astra 網站標題設定
▲ Astra 網站標題設定
  1. 字型 ( Family ) : Inherit 表示沿用之前設定的字型(思源黑體)
  2. 字重 ( Weight ) : Bold 700
  3. 目前畫面上所顯示的是電腦版,當你點選它會切換成平版、手機版的畫面顯示,你可以針對這三種版型,去設定H2~H4標題各自所要呈現的字體大小。
  4. 點選圖示「筆」就會變化成下圖,可以對H1標題進行調整。
Astra 網站標題設定
▲ Astra 網站標題設定
  1. 點選圖示「眼睛」控制這個選項是否要顯示在畫面上。
  2. 標示為圓形紅色數字2~4,這邊是屬於Meta區,2、3、4可以用滑鼠上下拖曳,決定你想要安排的位置,如同上方Structure區,有兩個選項上下拖曳調整位置。

Astra 容器大小設定:

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

Astra 容器大小設定
▲ Astra 容器大小設定
  1. 版型 (Layout) : Full Width / Contained

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

頁首 ( Header ):

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

Header 介紹
▲ Header 介紹

Astra 如何設定 LOGO

回到Header→點選Site Identity。

Astra 如何設定 LOGO
▲ Astra 如何設定 LOGO
  1. 標誌:建議尺寸180 x 60像素
  2. Logo Width:用來調整LOGO的大小
  3. 網站圖示:建議尺寸512 x 512像素
LOGO上傳後的畫面
▲ LOGO 上傳後的畫面,記得要按下「發佈」。

Astra 頁首排版設定

回到Header→點選Primary Header。

Astra 頁首排版設定
▲ Astra 頁首排版設定

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

Astra 頁首導覽列設定

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

Astra 頁首導覽列設定
▲ Astra 頁首導覽列設定
  1. 點選「建立選單」
  2. 建立「選單名稱」ex:主選單
  3. 勾選 Primary Menu點選「下一步」
  4. 點選「新增選單項目」
  5. 新增頁面ex:關於本站、Instagram,點選「+新增」
  6. 按下「發佈」

網誌 ( Blog ) 主要內容區

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

Blog 介紹
▲ Blog 介紹

分類頁面設定 ( Blog / Archive )

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

Astra 分類頁面設定
▲ Astra 分類頁面設定
  1. 留言 ( Comment ):可以點選眼睛取消顯示。
  2. 作者 ( Author ):看個人需求決定是否要顯示作者名稱

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

Astra 側邊欄 ( Sidebar ) 

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

Sidebar 介紹
▲ Sidebar 介紹
Astra 側邊欄操作介面
▲ Astra 側邊欄操作介面
  1. 側邊欄版型 ( Default Layout ):設定側邊欄的位置,設定為版型的左側、右側、不顯示側邊欄。
  2. 側邊欄欄寬 ( Sidebar Width ):設定側邊欄的寬度大小。

頁尾 ( Footer ) 

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

Footer 介紹
▲ Footer 介紹

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

回到Footer→點選Footer Widgets。

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

Astra 頁尾欄設定 ( Footer Bar ) 

回到Footer→點選Footer Bar。

Astra 頁尾欄設定
▲ Astra 頁尾欄設定
  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教學

聯盟行銷