Astra Theme 教學:WordPress 輕量多功能主題(功能詳解)

Astra Theme 教學:WordPress 輕量多功能主題(功能詳解)

這是一篇「 Astra Theme 主題教學 」,分享有關 Astra 主題如何使用。

Astra 主題是這幾年成長快速的 WordPress 主題,輕量級且有多種可變選項,可做出多種不同類型的網站,打造自己或公司品牌官網,也很適合新手使用。

這篇文章會著重於 Astra 免費版教學,把功能頗析分享給大家,讓任何對它有興趣的人,都能免費入手套用。

如果你對 Astra 進階版有興趣,也可參考 Astra 進階指南:)

本文的目的,就是讓喜歡 Astra 主題的 WordPress 站長們,都能快速上手這款優質主題,章節如下:


1. Astra 主題是什麼?

wordpress佈景主題 :Astra 教學推薦
WordPress佈景主題 :Astra 教學推薦

Astra 是 Brainstorm Force 開發的主題,你無需會任何編碼,就可完美的 WordPress 網站製作,有免費版&進階版可使用。更多 Astra 主題教學

它是多功能的 WordPress 主題,不論是 Blog 建立企業形象網站電商購物網站線上課程網站預約網站 .. ,或是其他常見類型, Astra Theme 幾乎都能幫助你完成。

Astra Theme 內建多種主題樣板

Astra 有提供 Starter Templates 外掛,裡面有 70 多種樣板風格,一鍵安裝就能快速架站,非常的方便。免費版也有 30 多種可使用。

Astra 的 Starter Templates 外掛,提供多種樣板安裝
Astra 的 Starter Templates 外掛,提供多種樣板安裝

Astra 會如此流行的原因,其中一點是它對主流的 WordPress 視覺化編輯器,有著完美的兼容。

像是 Elementor、Beaver Builder、Gutenberg 等 .. ,可用這些頁面編輯器搭配 Astra 主題,完整製作個人或公司品牌網站。更多 Elementor 教學

Astra 主題速度評測

有關於主題速度表現,輕量的佈景主題、禁用 Jquery、優質的程式編碼,都是 Astra 速度優於其他主題原因。

這讓 Astra 在多個速度評測軟體上,都獲得了優異的表現。

Astra 主題,多種速度軟評測,優異速度
Astra 主題,多種速度軟評測,優異速度

Astra 多種佈局調整功能

Astra 有多種自定義選項,可充分設定網頁佈局,讓你的網站更像是客製化的效果。

有提供網站頁首 / 頁尾修改、主視覺顏色調整、字體字型調整、選單佈局調整、各頁面版面配置等 ..,輕量但精悍。

Astra Theme 輕量級 WordPress 主題

這意味著,你可以做大方向的調整,把網站設計成喜愛的樣子。

Astra 也支援電腦、平板、手機的即時預覽模式,加上有視覺化編輯效果,編輯起來更快速。

簡單來說,Astra 是多功能輕量級主題,支援主流頁面編輯器,絕對是值得使用的一款優質主題!


2. 免費版方案安裝+啟用

Astra Theme 有提供免費版和進階版,建議新手可從免費版開始體驗,覺得不錯用再升級進階版即可。

Astra 免費版,可從 WordPress 後台 > 外觀 > 安裝佈景主題,搜尋 Astra 主題就可安裝(不知道怎麼安裝的,也可參考 如何安裝 WordPress 主題)。

安裝完成後請記得 啟用,才會真正套用主題唷。

建立Blog :wordpress 佈景主題安裝
wordpress 佈景主題安裝

Astra 順利安裝完成,接著我們來繼續安裝子主題,以開始本文的學習!

Astra Child Theme 子主題安裝

前往 Astra Child Theme 生成頁面,下載子主題,可任意命名子主題名稱,也可參考我的命名。

點擊 Generate 按鈕下載。

下載&命名 Astra 子主題
下載&命名 Astra 子主題

使用子主題好處:

因為主題都會進行升級&維護,如果有些程式碼改在原主題上,就可能會被還原掉。

所以有些人會使用子主題方式,保持住自己設定的程式碼(或功能設定),而不用再重新做一次。

跟上面安裝主題流程一樣,前往 WordPress 後台,把子主題上傳安裝,只是這次需點 啟用

啟用 Astra 子主題
啟用 Astra 子主題

到此步驟,應該會看到有兩個 Astra 主題,分別是 Astra 主題& Astra 子主題,而 Astra 子主題也有正常啟用,這是完成圖。

Astra 子主題順利啟用
Astra 子主題順利啟用

備註:原主題&子主題只能擇一啟用,上面示範的是啟用子主題。


3. Astra 主題,網站類型範例

Google RankBrain 演算法:提升檢測使用者意圖的技能,鼓勵站長精進內容品質
Astra 可建立多種不同類型的網站

Astra Theme 是輕量多功能主題,主題速度快且客製化程度高,對於任何人都很容易上手。

裡面有內建多種風格樣板(需安裝 Astra 相關外掛),可一鍵套用再從中修改,很快就能打造個人網站。

對此我寫了幾篇教學,用 Astra 免費版就能達成,像是 建立 Blog企業形象網站購物網站架設

如果是打算架設購物網站,可參考 WooCommerce 教學 加上 金物流教學,會學習的更完整。

以上範例再配上 優質外掛推薦,就能做出功能齊全的網站。參考 WordPress 後台教學,也可學習更多操作。

除此之外,Astra 對主流的 頁面編輯器 都有良好支援,像是 Elementor、Beaver Builder 等 ..。

至於網站架設完成後,可參考 WordPress SEO 指南,進行網路行銷,最後 提交網站到 Google Search Console 加速被收錄速度,安裝 GA 追蹤碼,方便掌握訪客資訊。

當然,Astra 還能製作多種類的網站,這邊僅簡單陳述部分範例。


4. 風格模板套用

Astra Theme 有多種風格模板可一鍵套用,再從現有的樣板修改,架站速度會很快。但使用 Astra 風格模板之前,需安裝相關外掛。

點選左側 Astra > 最右側 Useful Plugins > Starter Templates,點 Install,就會自動安裝 Astra 模板外掛。

安裝 Astra 起始樣板外掛

或是可在 WordPress 外掛 > 安裝外掛,搜尋 Astra 找到下圖的外掛並安裝,都是一樣的。(兩個方法 2 選 1 就好)

安裝 Astra 起始模板外掛
安裝 Astra 起始模板外掛

安裝完成後,進入初始設定頁面,模板外掛會詢問常用的頁面編輯器是哪個,這邊選擇 Elementor 作為教學範例。更多 Elementor 基礎教學

備註:上面如果是用第二種方法安裝,需自行前往外掛設定項,才會有下圖流程。

選擇頁面編輯器相關的模板

接著就會看到非常多種 Astra 使用 Elementor 編輯器做的起始模板。

找到喜歡的模板點入,可進行全站安裝 or 單一頁面安裝,就看自己的需求囉。

備註:右上角有標註 Agency 是 Astra 進階版才能使用,可參考 Premium Starter Templates 教學

Astra 多種起始模板,可供挑選
Astra 多種起始模板,可供挑選

以上是使用 Astra 風格模板外掛教學,善加使用就不用從零開始架站,網站建置流程會加快許多。


5. Astra 功能列表總覽

前往網站前台的任一頁面,點擊上方的 自訂,就能進行 Astra 設定。

前往 Astra 自訂選項
前往 Astra 自訂選項

Astra 容易上手的原因是,它把整個頁面分成簡單幾個區塊,想要改什麼,就直接去那個區塊裡面調整就好。

下圖我列出 Astra 區塊設定的大項目,大項目裡面又有小項目可調整,會放在下面章節慢慢教學。

Astra Theme 教學 :Astra 大綱功能一覽
  • 全域:可以設定排版樣式、色彩、內容容器版面配置、按鈕、返回頂端功能、區塊編輯器 .. 等。
  • 頁首編輯器:有關網站 Logo、網站選單、佈局成列、顏色調整、是否為透明頁首 .. 等。
  • 導覽標記:以往的 Breadcrumb 路徑設定,決定頁首位置位於內部、下方或標題上方。
  • 網站文章:決定網站文章和資訊欄的容器版面配置、文章寬度、文章結構 .. 等。
  • 頁面:可以選擇頁面的版面配置,像是區塊式版面、全幅寬度 .. 等多種設計。
  • 資訊欄:設定資訊欄的寬度與版面位置。
  • 頁尾編輯器:上 / 中 / 下層頁尾調整,可自由設定頁尾工具、頁尾佈局、頁尾樣式等 .. 等。
  • WooCommerce:設定電商相關頁面,有開啟 WooCommerce 功能才有,像是產品目錄、單項商品頁面、購物車、結帳頁面、商品圖案 .. 等設定。
  • Site Identity:設定網站圖示、網站標題及標誌設定。
  • 選單:設定選單的位置和名稱、選單項目標籤、自訂選單連結 .. 等。
  • 小工具:可以進行區塊設定,像是編輯頁首、頁尾、側邊欄的內容、自訂 HTML … 等功能。
  • 頁首設定:可以選取網站首頁要顯示的的內容。
  • 附加的 CSS:加入網站專屬的 CSS 程式碼,可以自訂網站的外觀和版面配置。

全域設定

全域設定,顧名思義就是改了會影響整個網站,像是網站文字、風格顏色、佈局設定等 .. 。主要分成幾大項能做設定,如下:

全域的設定項目
全域的設定項目

備註:如果在網站前台,有看到部分地方顯示為英文,可使用 Loco Translate 外掛 翻譯成中文唷:)

前往 Global 選項,我挑選其中一些做介紹。

排版樣式+標題文字設定

前往「 排版樣式 」選項,可以調整基本字型、標題字型、段落下邊界 ..等設定,更改完記得點 發佈

可針對不同裝置調整字體大小,也可瀏覽不同裝置的呈現畫面。最上面的預設集可以一次設定網站字體,如下圖。

Astra 文字相關設定

在排版樣式區塊繼續往下滑,可以設定基本自行,包含內文自行和標題字型。

網站標題以 HTML 程式碼的標籤是 H1 ~ H6,數字越小字體預設越大(SEO 權重也比較大),設定時也遵守這個概念就好。

下圖的「 字型系列 」可選擇 Other System Fonts 其他系統字型、Google 系列字型,如果想要沿用上一個字型設定,選擇「 繼承上層元素 」就好了。

Astra 標題文字設定
Astra 標題文字設定

至於,如果想各別調整標題文字大小,當前設定頁面往下滑,就可針對不同 H1 ~ H6 標籤進行設定。

色彩設定

前往色彩,可以調整網站文字顏色、主視覺顏色、連結顏色、標題顏色、背景顏色等 .. 。

你可以隨意調整色彩,如果想要恢復原本設定,點選 ⟲ 的按鈕即可(如下圖)。

Astra 網站通用顏色設定

內容容器設定網站佈局

前往內容容器,也就是以往的 Container 設定,透過基本的設定來置中內容,可以調整容器版面配置,像是僅內文套用區塊式版面、全幅寬度完整置於區域內 .. 等多樣選擇,也能手動調整內容容器的佈局寬度。

Astra Theme 教學 : 頁面佈局樣式調整
Astra Theme 教學 : 頁面佈局樣式調整

按鈕設定

前往按鈕,可調整按鈕相關設定,像是點選按鈕前後的色彩反差、字型、按鈕邊框間距、框線圓角半徑 .. 等。

可以直接點選「 按鈕預設集 」快速設計好按鈕外觀,右邊畫面會立即出現效果。

Astra教學 :按鈕相關設定

頁首編輯器

Astra 頁首編輯器功能,讓站長直覺操作就能自行客製化網站頁首,下圖是頁首編輯器的主要功能一覽。

功能一覽 Astra 的頁首編輯器
功能一覽 Astra 的頁首編輯器
  • 上方 / 主要 / 下方頁首:主要分為 3 層頁首項目,點擊齒輪 ICON 可進行編輯。
  • OFF CANVAS:側邊滑動式設定,這是針對行動版裝置的導覽列設定,需要在左下方切換成平板或手機的檢視模式,才會顯示出這項功能設定。
  • +:滑鼠移至指定區塊上,即可新增不同的網站小工具,小工具也可拖曳排序。
  • Elements 當前功能:根據點擊的項目,會進行可設定項的切換。
  • Design 樣式設計:編輯樣式的地方,像是顏色、內距離、外距離 .. 等。
  • 透明頁首:Astra 有分為「 一般頁首 」和「 透明頁首 」兩種,而 Astra 有些風格樣板會用到透明頁首(如果發現編輯樣式時,畫面沒有反應,那可能就是用透明頁首,就需點擊進入編輯)。

接下來分 3 個小步驟,實戰示範網站頁首的調整,從實際操作中應該會更能掌握。

Step1:編輯網站 LOGO

首先,先把滑鼠移至 Logo 上點擊筆 Icon,就會自動切換到 Logo 設定欄位。

P.S 或是點選 頁首編輯器 > 網站標題及標誌。

上傳 Logo 後可調整大小(點擊電腦圖示,可針對不同裝置設定大小),你可以輸入網站標題、網站說明,並設定每個裝置的能見度,如果考慮行動版裝置的版面較小,可以限定平板或手機不要出現網站標題或網站說明。

WordPress 網站 Logo 設定
WordPress 網站 Logo 設定

Step2:編輯網站選單

點選 選單 > Main Menu > 新增選單項目。

可以調整導覽選單的項目名稱,並根據自己的需求增加選單項目。長按就能拖曳選單的位置,拖曳的位置會決定選單是主要項目,或是旗下的子項目。

Main Menu 選單設定
Main Menu 選單設定

Astra 的電腦版選單(Primary Menu)和手機版選單(Mobile Menu),這 2 個選單需要「 切換裝置模式 」才能進行設置。

首先,介紹電腦版選單設定,模式切換到電腦裝置以後,可以在頁首區域新增想要的工具,最左側 ELEMENTS 區域就會顯示出目前有哪些工具項目,可以點選做進一步設定。

DESIGN 則會根據你現在點選的工具項目,跳出不一樣的設定選項。

使用 Astra 主題,編輯網站主選單
使用 Astra 主題,編輯網站主選單

再來,介紹手機版選單,我們先切換到手機版視窗,會自動跳出 OFF CANVAS,這是專門設定行動版裝置的選單區域(電腦版沒有),可以新增工具,還能長按工具進行拖曳排列,畫面呈現會按照這個順序排列。

編輯 Mobile Menu 手機版選單
編輯 Mobile Menu 手機版選單

Step3:設計上方頁首

上方頁首可以新增小工具,我們以 Social 社群工具作為示範。

先在上方首頁的區域新增 Social 工具,並在右上角點擊筆,左側 GENERAL 就會自動跳出「 社交網路服務圖示 」的設定。DESIGN 則可以設定社群圖示的尺寸、間距、圓角半徑、色彩類型 .. 等。

在上層選單,新增社群分享功能

如此一來,我們的網站頁首就變得更加美觀了!以上就是 Astra 的頁首編輯器的操作介紹。

額外提醒:透明頁首設定

Astra 有些風格樣板是使用「 透明頁首 」進行設計,確認是不是的方法很簡單,只要看一下當前頁面的頁首,是否是透明的就大概可知道

而透明頁首的樣式調整是在不同地方,記得要到對的位置更改唷:)

Transparent Header 透明頁首修改
Transparent Header 透明頁首修改
  • Enable on Complete Website:是否把透明頁首應用在全網站。
  • Enable On:可選應用在哪個裝置。
  • Different Logo for Transparent Header:是指在透明頁首的情況,是否使用不同 Logo。

導覽標記可以設定 Breadcrumb 路徑,Breadcrumb 就是「 網站當前路徑 」的意思,也有人用比較可愛的說法「 網站麵包屑 」,也就是網頁上方的導航條、導航列。

前往「 導覽標記 」就可以設定,這通常比較少人調整,所以就簡單介紹。

Astra 網站麵包屑(網站路徑)設定
Astra 網站麵包屑(網站路徑)設定

網站路徑顯示位置,是用 Header 頁首做為基準點,提供無、內部、下方、標題上方的選項。

但我自己是用「 無 」不顯示,可看個人的需求,適用較為複雜的網站路徑,讓讀者一眼明白網站的當前位置


網站文章設定

網站文章設定,主要分成兩大項可以調整:

  • 網站文章 / 彙整
  • 單篇文章

網站文章 / 彙整

主要是調整文章列表相關的(可前往網站的文章列表頁,方便查看變化)。

Astra 網站文章的相關設定
Astra 網站文章的相關設定
  • Blog Title:設定 Banner Layout 橫幅佈局、改變 3 種裝置(電腦、平板、手機)的水平對齊方式、內部元素間距、容器背景、Blog 的字型與色彩設定…等。
  • 版面配置:GENERAL 主要調整容器與資訊欄的版面配置、DESIGN 則是設定文章標題字型大小。
  • 文章結構:設定文章內的相關資料,像是封面呈現的精選圖片、內容摘要 .. 等。

單篇文章

單篇文章跟上述的功能差不多,只是應用在單一文章頁面,差別在於多了啟用「 相關文章 」,類似自動設定延伸閱讀。

你可以在「 文章查詢條件 」設定相關文章的關聯依據,像是根據相同的分類或標籤。排序依據則可以根據發佈日期、文章順序、留言數量 .. 等。

啟用相關文章的設定
啟用相關文章的設定

Astra 改版後的資訊欄設定,就是以往的 Sidebar 側邊欄,可以調整網站各頁面的側邊欄佈局。

點選 網站文章 > 網站文章 / 彙整 > 資訊欄版面配置。

資訊欄設定
資訊欄設定

資訊欄版面配置可以選擇 3 種配置:無資訊欄、左側資訊欄、右側資訊欄。只要點選筆就能快速編輯,左側會自動跳出相關設定。

資訊欄的功能
資訊欄的功能

上圖示範右側資訊欄,代表全站頁面都會出現右側邊欄。如果想要在指定的頁面設定不同的版面配置,可以直接點選各別的文章或頁面進行設定。

在 WordPress 系統中,文章和頁面是不同的,可參考 兩者差異

網站側邊欄裡,可以放置許多有用的小工具,像是搜尋框、最新文章、電子報訂閱 .. 等,相關設定可參考 WordPress 教學


本機託管網頁字型

本機託管 Google Fonts 網頁字型,意思是先下載 Google Fonts 字型,並放在本地主機託管,目的是降低向遠端請求資源的數量,可以優化網站字型的讀取速度、提升網站速度。更多 WordPress 本機託管手動操作

點選 Astra > 設定 > 效能,就可以設定本機託管網頁字型的開關。

本機託管網頁字型設定
本機託管網頁字型設定

如果你有在使用 Divi 軟體,想知道如何上傳自訂字型,或是字體格式轉換,可以參考這篇 Divi 上傳自訂字體教學


頁尾編輯器(Footer Builder)跟頁首編輯器的操作方法大同小異,也是能讓你客製化網站的好幫手。

頁尾編輯器有分為上方、主要、下方頁尾,點擊要修改的齒輪,就能調整欄位數量、寬度、高度、垂直對齊方式,還可以針對不同的裝置(電腦、平板、手機)設定版面配置和可見度。

Footer Builder 頁尾編輯器
Footer Builder 頁尾編輯器

當然你也能自行新增許多小工具,豐富你的網站頁尾。至於要修改樣式,一樣切換到 Design 分頁即可。

頁尾編輯器設定 Copyright

下圖實際示範如何編輯 Copyright,也就是設定網站的著作權聲明。

在設定頁尾區域依序點選 + > Copyright > 來到 ELEMENTS 區域點選 Copyright,點選後即可開始編輯。

Astra Theme 教學 : 編輯頁尾小工具
Astra Theme 教學 : 編輯頁尾小工具

GENERAL 編輯區內是 Astra 系統動態文字,會自動帶入你的目前年份、網站名稱,可以依照需求刪掉或增加內容。DESIGN 則是可以編輯文字色彩、字型大小、間距的邊界設定。

設定 Copyright 內容
設定 Copyright 內容

以上就是 Astra 免費版的教學囉,相信大家一定都收穫滿滿吧:)


Astra 進階版方案,更多教學?

有關於 Astra 進階版,我寫了多篇使用教學,方便你認識和上手 Astra 進階功能,如下。

  • Astra Pro:Astra 進階版方案,強化功能詳細教學,可參考 Astra 進階教學
  • Astra Pro WooCommerce:WooCommerce 電商功能強化,可參考 Astra Pro WooCommerce 教學
  • WP Portfolio:製作網站作品集、展示頁面、服務案例等 .. 專用外掛,可參考 WP Portfolio 教學
  • Ultimate Addons for Elementor:在 Elementor 上新增 40+ 個元素功能、100+ 網站模板、200+ 區塊模板,可參考 UAE 教學
  • Premium Starter Templates:有更多 Astra 進階模板可使用,可參考 Premium Starter Templates 教學

如果都看完,相信你對 Astra 主題的整體掌握度,大概也就如魚得水了!


常見問題

Astra Theme 主題是什麼?

Astra 是 Brainstorm Force 開發的主題,你無需會任何編碼,就可完美的 WordPress 網站製作,有免費版&進階版可使用。

它是多功能的 WordPress 主題,不論是 Blog 建立企業形象網站電商購物網站 等 .. ,或是其他常見類型, Astra Theme 幾乎都能幫助你完成。

Astra 有模板可直接套用嗎?

Astra 有提供 Astra Starter Sites 外掛,裡面有 70 多種樣板風格,一鍵安裝就能快速架站,非常的方便。免費版也有 30 多種可使用。

Astra 主題速度快嗎?

有關於主題速度表現,輕量的佈景主題、禁用 Jquery、優質的程式編碼,都是 Astra 速度優於其他主題原因。

這讓 Astra 在多個速度評測軟體上,都獲得了優異的表現。

Astra 進階版要如何選?

如果是第一次嘗試 Astra 主題的人,可先從 Astra Pro 方案開始,因為費用最便宜。

如果有客製化作品集 or 服務案例的頁面需求,或是本身是 Elementor or Beaver Builder 頁面編輯器的使用者,可選擇 Mini Agency Bundle 方案。

Astra 有支援主流的頁面編輯器嗎?

Astra 會如此流行的原因,其中一點是它對主流的 WordPress 視覺化頁面編輯器,有著完美的兼容。

像是 ElementorBeaver Builder、Gutenberg 等 .. ,可用這些頁面編輯器搭配 Astra 主題,完整製作個人或公司品牌網站。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈Astra Theme 教學:WordPress 輕量多功能主題(功能詳解)〉中有 59 則留言

  1. 手把手的一步一步的指導,這絕對是新手的福氣,希望順利的踏出一大步^_^

      1. 你好小犬
        請问一下
        主页假如要恢復前幾天設定,功能在那个地方了。
        非常感謝你

        1. 犬哥團隊

          嗨,林,

          若主機有備份功能,你可洽詢主機客服協助你,

          但是如果主機沒有備份功能,之前也沒有安裝備份還原外掛,可能就無法恢復設置唷!

          建議你可先安裝 備份還原外掛,但時備份網站檔案,以備不時之需

  2. 小犬大您好,

    我是昨天才剛剛接觸網站製作的新手,
    我在套用模板時都會跳出”The import process interrupted
    Your website is facing a temporary issue in connecting the template server.
    Read article to resolve the issue and continue importing template.

    Error: 0 error”的錯誤訊息,

    前面的步驟都有按照您文章說的進行,
    請問可能會是什麼原因呢?

  3. 小犬大您好,

    我是昨天剛開始製作網站的新手,
    前面的步驟照著您文章中進行都沒問題,
    但套用模板時會跳出”The import process interrupted
    Your website is facing a temporary issue in connecting the template server.
    Read article to resolve the issue and continue importing template.

    Error: 0 error”的錯誤訊息,
    請問可能會是什麼原因呢?

  4. 很有用的教學,我是剛接觸WP部落格的(以前都在痞客邦),換了幾個主題,剛剛從HUEMAN跳來ASTRA,因為聽說最多人用。可是對於目前只會傳統編輯器,連區塊編輯器、GUTENBERG、ELEMENTOR這類都還沒學過的人,是否可用ASTRA哩?換言之,ASTRA可用傳統編輯器來操用一堆設定嗎?還是該換回HUEMAN這類主題去?我主要只是個人寫作部落格,暫時沒想到要做商業網站(但日後可考慮)。謝謝!

    1. HI UNOLIN:

      Astra 是一款非常輕量且快速的主題很推薦使用,至於有沒有學過任何編輯器都無所謂,因為非常好上手(而且 Astra 也不一定要配上 Elementor,主要是依照你的架站需求)。

      如果要寫文章,會建議使用 WordPress 預設的區塊編輯器寫作,因為這是 WordPress 目前的趨勢。

      我們不推薦使用任一頁面編輯器寫文章(如:Elementor),它們既然稱作「頁面」編輯器,理所當然的強項是應用在設計頁面。

      至於 Astra 可否用傳統編輯器寫作,答案是當然可以。但區塊編輯器是 WordPress 的趨勢,而且上手後寫作方便性更高,其實可以試看看。

      以上希望有幫助到你唷:)

  5. 很同意小犬的回覆,Gutenberg 確實是趨勢。雖然一開始推出bug不少讓我還用disable gutenberg 外掛網站才正常運作,但後來有慢慢改善,而且上手簡單速度也快。尤其原生的「可重複區塊」讓維護變得輕鬆很多,使用section也讓css的全域和區域操作更直覺。

    所以後來我把各網站的Elementor、Page Builder頁面都慢慢轉成區塊,雖然頁面很多要改很久==但我覺得值得,說實在的外掛越少越好。

    1. 嗨!是呀~感覺也是過來人的真實心得分享!很棒的分析!

      我看重的也是重複區塊功能,因為對於長時間編輯的部落客來說,這個功能很重要(特別是有單一區塊需重複使用)。

      把部分頁面從 Elementor 轉為區塊編輯器,是一個大工程,但相信之後速度也會快許多!

      還有我也認同外掛越少越好,果然都是 WordPress 使用一段時間的心聲哈哈XD

  6. 小犬你好,請問我以用了Astra主題,但是想要更換頁面的背景圖片一直找不到,請問小犬原本的背景圖片該如何更換呢?

  7. 小犬你好,我剛開始學用WP架網站,astra選單都無法固定浮在上方嗎?看了好幾種模板,選單好像都要把頁面拉到最上面才能點?

  8. 請問,如果自己有公司本身的底圖要當home的背景圖,那下手編排呢?astra所下載的排版全都不能做增減嗎?感覺放入astra只能更改一些圖示編排,那本身的文字怎麼做改變?

    1. 嗨~Naomi:

      你提到背景圖更換&更多網站佈局,是 Astra Pro 內的功能。

      有關更多 Astra Pro 功能,可參考:https://frankknow.com/astra-pro-tutorial/

  9. 您好,感謝您介紹這個好用的工具,目前遇到了問題,我在本地端電腦架設測試網站並上傳astra.外掛,一直顯示無法成功安裝外掛,電腦是Mac利用MAMP,然後使用的瀏覽器是chrome。

    1. 嗨,Astra 是屬於佈景主題唷!

      確認一下是否你上傳到「外掛」,應該要上傳到「佈景主題」才對喲~

  10. 您好,感謝您的分享,目前下載了免費版本然後上傳外掛一直無法成功,會顯示“無法安裝這個安裝套件。 找不到有效的外掛”。瀏覽器使用chrome或saferi都是一樣。

  11. 小犬你好,請問這個網站的風格我好喜歡,用astra能模仿嗎?不用elme最好還是你們討論區裡說的什麼模塊功能呢,想要的風格的目標站是gamewtih . jp

    1. 嗨,使用 Astra+Elementor 可以做得到,但這個網站算是比較大型一點的。

      有些客製化頁面功能,可能需升級為 Astra or Elementor 進階版搭配,比較有辦法完成。

      以上給你參考唷:)

  12. 你好,謝謝你的詳細教學。
    想請問ASTRA佈景主題,如果我想設定導覽列上的連結可以另外開啟分頁,要如何設定呢?因為我在選單和自訂都找不到設定。謝謝!

    1. 嗨,在 WordPress 後台,外觀 > 選單,進入後的右上角「顯示項目設定」,把「連結目標開啟方式」打勾,就可以做相關設定了~

  13. 小犬 您好 😊 謝謝您分享這麼好的佈景,因為我的 WordPress 佈景主題太老舊,Theme 已經變成孤兒了 😅 ,我研究了很多主題之後,才找到您這裡來,請問您有提供主題轉換 (移植)到 Astra 的服務嗎? 請問您如何收費呢?🙏 因為我的網站問題有一點大 😭 方便跟您用 LINE 溝通嗎? 謝謝您 🙏 PS. 我有寄一封 Email 給您呦,請您查收看看 🙏🙏🙏

    1. 嗨,謝謝你的鼓勵:)

      至於你提到的問題,因為目前人手不太足夠,所以暫時沒有提供接案服務,謝謝你的發案。

  14. 站長您好:

    謝謝您的用心分享!想請問社群設定的部分,放上連結後社群反而顯示不能按的標誌,本來沒有放連結是可以按,只不過沒有出現頁面而已,發現只EMAIL這個功能可以用,其他像IG都是放上連結後無法使用。

    想請問是我的設定出了什麼問題嗎,謝謝您!

  15. 您好,目前看您的教學製作網站,但不知道為何,頁首的背景無法更改,想換成圖片背景,但始終沒有顯示

    1. 嗨,在 Global > Colors > Background 裡面應該可改背景圖。

      有時候也可能是讀到舊的快取,可以刪除舊快取後再試看看~

  16. 小犬您好:
    非常感謝您的詳細教學,我也試著用astra主題建置了部落格,想請問像是留言區這邊的文字的"Leave a Comment"、"Post Comment"等等英文說明,免費使用版可以更改嗎?在哪邊做更改呢?

  17. 小犬老師好:

    感謝您詳盡的教學,我已經成功架設完購物網站!
    但有一些bug有點無法解決,就是當我開另一個頁面進我的網站,按我的帳號登入會員的畫面時,有時會出現wordpress的登入頁面,而非網站的登入頁面。我的客戶也跟我反應過這個問題。我不知道該怎麼辦,還請小犬老師幫幫我,告訴我該怎麼解決。非常感激!!!

    1. 犬哥網站

      嗨,Grace,

      可以前往 WooCommerce 設定 > 進階,指派「 我的帳戶 」頁面,頁面一定要有 WooCommerce 客戶頁面短代碼唷。

      之後到選單檢查,指派選單時,選擇「 頁面 」形式,不要選擇「 連結 」形式,不然可能會貼到前往後台登陸的路徑。

      希望我的回答有幫助到你:)

  18. 小犬大大您好:
    想請問關於選單的設定,當我的選當下有子選單項目時,我這邊想要調整SUBMENU下拉式選單顯示的相關大小/樣式,但我看我的SUBMENU裡面好像沒有可以修改的選項,請問這是要安裝PRO版才有的功能嗎? (我目前的下拉式選單滑鼠移上去會自動跑出我設定的五個子選單,但是最上方選項及最下方選項超出下拉式選單的框格)

    1. 犬哥網站

      嗨,Henry,

      是的,修改 SUBMENU 是 PRO 版本的功能,如果有修改的需求,就需升級到 PRO 版本唷!

  19. 小犬你好,
    看了你的影片開始學習架設網站。
    我遇到了一個問題摸索了3天一直找不到原因。
    不知道是動到哪個地方導致我的Header builder的主選單和Logo以及頁尾的地方都沒有顯示出來。
    您可以從我的網站看到目前呈現的樣子
    希望能請您協助我解決問題,非常感謝!

    1. 犬哥網站

      嗨,Jason,

      有進去你的網站觀看,發現你的 Header 和 Logo 都有正常顯示唷,

      不過有一點小提醒,你最後一個選項的超級選單似乎會超出畫面範圍,可以再調整看看主選單的寬度:)

  20. 你好!我想問問我使用astra 並搭配elementor網頁編輯器,在head那邊的site logo在網頁版大小正常但手機版變超小….然後文字的斷點從網站換到手機版都會變怪怪的…想跪求怎麼調整🥲

    1. 犬哥網站

      嗨,Jui An Chen,

      在使用 Elementor 編輯頁面時,可以切換到響應式設計,針對移動式設備調整 Logo 大小、文章版面大小唷!

    1. 犬哥網站

      嗨,瑋懿,

      這是背景底圖,你可以點擊最上面的藍色框位,點擊變更欄位,在樣式選項,應該就可以找到變更背景底圖的地方了~

    1. 嗨,樂,

      建議你使用 Elementor Por 的主題建構器的功能,製作文章彙整頁面的模板,應該會更能夠貼近你的需求,

      或者是使用 CSS 幫助你進行頁面設計的修改,希望能幫助到你唷!

  21. 犬哥,想請問一開始我從astra外觀自訂設定好前台畫面,但後來又在Elementor編輯器那發現,可以再把我設定好的前台畫面做了變動,我以為這是同一層可以連動的,後來才發現Elementor設定的畫面是下一層裡的畫面,但是Elementor做變動後的前台畫面,我覺得比較好看也發佈了,後來才發現搞錯,從前台看還是astra外觀自訂的畫面…..
    後來我的理解是一個是第一層畫面,一個是下一層,這樣是否我Elementor跟astra外觀編輯的字型要一致,不然(例如點HOME進去),兩邊畫面字型顏色都不同調了 … (我被這幾個編輯器搞昏了,我寫的很複雜,不知道犬哥知道我的意思嗎><?)

    1. 犬哥團隊

      嗨,新手cat,

      Astra 是整體的網站設置,若要設計頁面,你可使用 Elementor 進行編輯,儲存後的畫面應該是一致的,

      若沒有一致,你可以清除網頁快取後,再檢視有無成功變更設計唷!

  22. 犬哥您好,
    新手想安裝Astra免費主題當寫作部落格,
    有爬文和看影片的教學發現您是用elementor頁面編輯器,想請問如果是寫作部落格,可以安裝astra用wp內建的區塊編輯器就可以了嗎?
    那這樣套模版可行嗎?
    謝謝您!

    1. 犬哥團隊

      嗨,Christina

      若要使用 Astra 和 WordPress 內建編輯器,在套用模板時,選擇「 Block editor 」即可:)

  23. 犬哥你好~
    我看了你ASTRA的YOUTUBE跟 網站 說明後真的架出一個還不錯且能用的網站,
    真的很感謝.但您好像都沒提到 HOME的那張首頁大底圖(我指圖中右邊有植物盆栽的那張)或裡面的一些文字怎麼改,反倒footer builder中是會有個小工具可以修改一些HTML文字內容,是因為無法做到嗎? 因為我找了半天 都無法改
    還請為小弟解惑 ? 感謝萬分

    1. 犬哥網站

      嗨,calvin

      你可依據頁面編輯器,選擇「 編輯頁面 」,應該就可以順利找到更改的位置囉!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端