Astra Theme 教程：WordPress 轻量多功能主题（功能详解）

这是一篇 Astra Theme 主题教程，分享有关 Astra 主题如何使用。

Astra 主题是这几年成长快速的 WordPress 主题，轻量级且有多种可变选项，可做出多种不同类型的网站，打造自己或公司品牌官网，也很适合新手使用。

这篇文章会着重于 Astra 免费版教程，把功能颇析分享给大家，让任何对它有兴趣的人，都能免费入手套用。

如果你对 Astra pro版有兴趣，也可参考 Astra pro教程：）

本文的目的，就是让喜欢 Astra 主题的 WordPress 站长们，都能快速上手这款优质主题，章节如下：

---

1. Astra 主题是什么？

Astra 是 Brainstorm Force 开发的主题，你无需会任何编码，就可完美的 WordPress 网站制作，有免费版&pro版可使用。 更多 Astra 主题教程。

它是多功能的 WordPress 主题，不论是 Blog 建立、企业形象网站、电商购物网站、在线课程网站、预约网站 等 .. ，或是其他常见类型， Astra Theme 几乎都能帮助你完成。

Astra Theme 内建多种主题样板

Astra 有提供 Starter Templates 插件，里面有 70 多种样板风格，一键安装就能快速架站，非常的方便。 免费版也有 30 多种可使用。

Astra 会如此流行的原因，其中一点是它对主流的 WordPress 可视化编辑器，有着完美的兼容。

像是 Elementor、Beaver Builder、Gutenberg 等 .. ，可用这些页面编辑器搭配 Astra 主题，完整制作个人或公司品牌网站。 更多 Elementor 教程。

Astra 主题速度评测

有关于主题速度表现，轻量的主题主题、禁用 Jquery、优质的程序编码，都是 Astra 速度优于其他主题原因。

这让 Astra 在多个速度评测软件上，都获得了优异的表现。

Astra 多种布局调整功能

Astra 有多种自定义选项，可充分设定网页布局，让你的网站更像是定制的效果。

有提供网站页首/页尾修改、主视觉颜色调整、字体字型调整、菜单布局调整、各页面版面配置等 ..，轻量但精悍。

这意味着，你可以做大方向的调整，把网站设计成喜爱的样子。

Astra 也支持电脑、平板、手机的即时预览模式，加上有可视化编辑效果，编辑起来更快速。

简单来说，Astra 是多功能轻量级主题，支持主流页面编辑器，绝对是值得使用的一款优质主题！

---

2. 免费版方案安装+启用

Astra Theme 有提供免费版和Pro版，建议新手可从免费版开始体验，觉得不错用再升级Pro版即可。

Astra 免费版，可从 WordPress 后台 > 外观 > 安装主题主题，搜索 Astra 主题就可安装（不知道怎么安装的，也可参考 如何安装 WordPress 主题）。

安装完成后请记得 启用，才会真正套用主题唷。

Astra 顺利安装完成，接着我们来继续安装子主题，以开始本文的学习！

Astra Child Theme 子主题安装

前往 Astra Child Theme 生成页面，下载子主题，可任意命名子主题名称，也可参考我的命名。

点击 Generate 按钮下载。

使用子主题好处：

因为主题都会进行升级&维护，如果有些程序码改在原主题上，就可能会被还原掉。

所以有些人会使用子主题方式，保持住自己设定的代码（或功能设定），而不用再重新做一次。

跟上面安装主题流程一样，前往 WordPress 后台，把子主题上传安装，只是这次需点 启用。

到此步骤，应该会看到有两个 Astra 主题，分别是 Astra 主题& Astra 子主题，而 Astra 子主题也有正常启用，这是完成图。

备注：原主题&子主题只能择一启用，上面示范的是启用子主题。

---

3. 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 模板插件。

或是可在 WordPress 插件 > 安装插件，搜索 Astra 找到下图的插件并安装，都是一样的。 （两个方法 2 选 1 就好）

安装完成后，进入初始设定页面，模板插件会询问常用的页面编辑器是哪个，这边选择 Elementor 作为教程范例。 更多 Elementor 基础教程。

备注：上面如果是用第二种方法安装，需自行前往插件设定项，才会有下图流程。

接着就会看到非常多种 Astra 使用 Elementor 编辑器做的起始模板。

找到喜欢的模板点入，可进行全站安装 or 单一页面安装，就看自己的需求啰。

备注：右上角有标注 Premium 是 Astra Pro版才能使用，可参考 Premium Starter Templates 教程。

以上是使用 Astra 风格模板插件教程，善加使用就不用从零开始架站，网站建置流程会加快许多。

---

5. Astra 功能列表总览

前往网站前台的任一页面，点击上方的自定义，就能进行 Astra 设定。

Astra 容易上手的原因是，它把整个页面分成简单几个区块，想要改什么，就直接去那个区块里面调整就好。

下图我列出 Astra 区块设定的大项目，大项目里面又有小项目可调整，会放在下面章节慢慢教程。

• 全局：可以设置排版样式、色彩、内容容器版面配置、按钮、返回顶端功能、区块编辑器 .. 等。
• 页首编辑器：有关网站 Logo、网站菜单、布局成列、颜色调整、是否为透明页首 .. 等。
• 导览标记：以往的 Breadcrumb 路径设定，决定页首位置位于内部、下方或标题上方。
• 网站文章：决定网站文章和信息栏的容器版面配置、文章宽度、文章结构 .. 等。
• 页面：可以选择页面的版面配置，像是区块式版面、全幅宽度 .. 等多种设计。
• 信息栏：设定信息栏的宽度与版面位置。
• 页尾编辑器：上/ 中/ 下层页尾调整，可自由配置页尾工具、页尾布局、页尾样式等 .. 等。
• WooCommerce：设定电商相关页面，有开启 WooCommerce 功能才有，像是产品目录、单项商品页面、购物车、结帐页面、商品图案 .. 等设定。
• Site Identity：设定网站图标、网站标题及标志设定。
• 菜单：设置菜单的位置和名称、菜单项标签、自定义菜单链接 .. 等。
• 小工具：可以进行区块设置，像是编辑页首、页尾、侧边栏的内容、自定义 HTML … 等功能。
• 页首设定：可以选取网站首页要显示的的内容。
• 附加的 CSS：加入网站专属的 CSS 程序码，可以自订网站的外观和版面配置。

---

全局设置

全局设定，顾名思义就是改了会影响整个网站，像是网站文字、风格颜色、布局设定等 .. 。 主要分成几大项能做设定，如下：

备注：如果在网站前台，有看到部分地方显示为英文，可使用 Loco Translate 插件 翻译成中文唷：）

前往 Global 选项，我挑选其中一些做介绍。

排版样式+标题文字设定

前往“ 排版样式 ”选项，可以调整基本字体、标题字体、段落下边界 .. 等设定，更改完记得点 发布。

可针对不同装置调整字体大小，也可浏览不同装置的呈现画面。 最上面的默认集可以一次设定网站字体，如下图。

在排版样式区块继续往下滑，可以设定基本自行，包含内文自行和标题字型。

网站标题以 HTML 程序码的标签是 H1 ~ H6，数字越小字体预设越大（SEO 权重也比较大），设定时也遵守这个概念就好。

下图的「 字体系列 」可选择 Other System Fonts 其他系统字体、Google 系列字体，如果想要沿用上一个字型设定，选择「 继承上层元素 」就好了。

至于，如果想各别调整标题文字大小，当前设定页面往下滑，就可针对不同 H1 ~ H6 标签进行设定。

颜色设置

前往颜色，可以调整网站文字颜色、主视觉颜色、链接颜色、标题颜色、背景颜色等 .. 。

你可以随意调整色彩，如果想要恢复原本设定，点选 ⟲ 的按钮即可（如下图）。

内容容器设定网站布局

前往内容容器，也就是以往的 Container 设定，透过基本的设定来置中内容，可以调整容器版面配置，像是仅内文套用区块式版面、全幅宽度完整置于区域内 .. 等多样选择，也能手动调整内容容器的布局宽度。

按钮设置

前往按钮，可调整按钮相关设定，像是点击按钮前后的色彩反差、字体、按钮边框间距、框线圆角半径 .. 等。

可以直接点击按钮默认集快速设计好按钮外观，右边画面会立即出现效果。

---

页首编辑器

Astra 改版后的页首编辑器功能，功能画面更加简单利落，让站长直觉操作就能自行客制化网站页首，我觉得是这次改版最强大的功能。

下图是页首编辑器的主要功能一览。

• 上方/主要/下方页首：主要分为3层页首项目，点击齿轮ICON可进行编辑。
• OFF CANVAS：侧边滑动式设定，这是针对移动版装置的导览列设定，需要在左下方切换成平板或手机的检视模式，才会显示出这项功能设定。
• +：鼠标移至指定区块上，即可新增不同的网站小工具，小工具也可拖曳排序。
• Elements 当前功能：根据点击的项目，会进行可设定项的切换。
• Design 样式设计：编辑样式的地方，像是颜色、内距离、外距离 .. 等。
• 透明页首： Astra 有分为「常规页首」和「 透明页首 」两种，而 Astra 有些风格样板会用到透明页首（如果发现编辑样式时，画面没有反应，那可能就是用透明页首，就需点击进入编辑）。

接下来分3个小步骤，实战示范网站页首的调整，从实际操作中应该会更能掌握。

Step1：编辑网站 LOGO

首先，先把鼠标移至 Logo 上点击笔 Icon，就会自动切换到 Logo 设定字段。

P.S 或是点选 页首编辑器 > 网站标题及标志。

上传 Logo 后可调整大小（点击电脑图标，可针对不同设备设定大小），你可以输入网站标题、网站说明，并设定每个设备的能见度，如果考虑移动版设备的版面较小，可以限定平板或手机不要出现网站标题或网站说明。

Step2：编辑网站菜单

点击 菜单 >Main Menu>新增菜单项目。

可以调整导览菜单的项目名称，并根据自己的需求增加菜单项目。 长按就能拖曳菜单的位置，拖曳的位置会决定菜单是主要项目，或是旗下的子项目。

Astra 的电脑版菜单（Primary Menu）和手机版菜单（Mobile Menu），这 2 个菜单需要“ 切换设备模式 」才能进行设置。

首先，介绍电脑版菜单设定，模式切换到电脑装置以后，可以在页首区域新增想要的工具，最左侧 ELEMENTS 区域就会显示出目前有哪些工具项目，可以点击做进一步设定。

DESIGN 则会根据你现在点选的工具项目，跳出不一样的设置选项。

再来，介绍手机版菜单，我们先切换到手机版窗口，会自动跳出 OFF CANVAS，这是专门设定移动版设备的菜单区域（电脑版没有），可以新增工具，还能长按工具进行拖曳排列，画面呈现会按照这个顺序排列。

Step3：设计上方页首

上方页首可以新增小工具，我们以 Social 社群工具作为示范。

先在上方首页的区域新增 Social 工具，并在右上角点击笔，左侧 GENERAL 就会自动跳出「 社交网络服务图标 」的设定。 DESIGN 则可以设定社群图标的尺寸、间距、圆角半径、色彩类型 .. 等。

如此一来，我们的网站页首就变得更加美观了！ 以上就是 Astra 的页首编辑器的操作介绍。

额外提醒：透明页首设定

Astra 有些风格样板是使用「透明页首」进行设计，确认是不是的方法很简单，只要看一下当前页面的页首，是否是透明的就大概可知道。

而透明页首的样式调整是在不同地方，记得要到对的位置更改唷：）

• Enable on Complete Website：是否把透明页首应用在全网站。
• Enable On：可选应用在哪个装置。
• Different Logo for Transparent Header：是指在透明页首的情况，是否使用不同 Logo。

---

导览标记设定

导览标记可以设定 Breadcrumb 路径，Breadcrumb 就是「 网站当前路径 」的意思，也有人用比较可爱的说法「 网站面包屑 」，也就是网页上方的导航条、导航列。

前往「导览标记」就可以设定，这通常比较少人调整，所以就简单介绍。

网站路径显示位置，是用Header页首作为基准点，提供无、内部、下方、标题上方的选项。

但我自己是用无不显示，可看个人的需求，适用较为复杂的网站路径，让读者一眼明白网站的当前位置。

---

网站文章设定

网站文章设定，主要分成两大项可以调整：

• 网站文章/汇整
• 单篇文章

网站文章/汇整

主要是调整文章列表相关的（可前往网站的文章列表页，方便查看变化）。

• Blog Title：设定 Banner Layout 横幅布局、改变 3 种设备（电脑、平板、手机）的水平对齐方式、内部元素间距、容器背景、Blog 的字型与色彩设定… 等。
• 版面配置： GENERAL 主要调整容器与信息栏的版面配置、DESIGN 则是设定文章标题字号。
• 文章结构：设定文章内的相关资料，像是封面呈现的精选图片、内容摘要 .. 等。

单篇文章

单篇文章跟上述的功能差不多，只是应用在单一文章页面，差别在于多了启用「相关文章」，类似自动配置延伸阅读。

你可以在文章查询条件设定相关文章的关联依据，像是根据相同的分类或标签。 排序依据则可以根据发布日期、文章顺序、留言数量 .. 等。

---

信息栏设定

Astra 改版后的信息栏设定，就是以往的 Sidebar 侧边栏，可以调整网站各页面的侧边栏布局。

点击 网站文章 > 网站文章/ 汇整 > 信息栏版面配置。

信息栏版面配置可以选择 3 种配置：无信息栏、左侧信息栏、右侧信息栏。 只要点击笔就能快速编辑，左侧会自动跳出相关设定。

上图示范右侧信息栏，代表全站页面都会出现右侧边栏。 如果想要在指定的页面设定不同的版面配置，可以直接点击各别的文章或页面进行设定。

在 WordPress 系统中，文章和页面是不同的，可参考 两者差异。

网站侧边栏里，可以放置许多有用的小工具，像是搜索框、最新文章、电子报订阅 .. 等，相关设定可参考 WordPress 教程。

---

本机托管网页字型

本机托管 Google Fonts 网页字体，意思是先下载 Google Fonts 字体，并放在本地主机托管，目的是降低向远程请求资源的数量，可以优化网站字体的读取速度、提升网站速度。 更多 WordPress 本机托管手动操作。

点击 Astra > 设置 > 效能，就可以设定本地托管网页字体的开关。

如果你有在使用 Divi 软件，想知道如何上传自定义字体，或是字体格式转换，可以参考这篇 Divi 上传自定义字体教程。

---

页尾编辑器

页尾编辑器（Footer Builder）跟页首编辑器的操作方法大同小异，也是能让你定制网站的好帮手。

页尾编辑器有分为上方、主要、下方页尾，点击要修改的齿轮，就能调整字段数量、宽度、高度、垂直对齐方式，还可以针对不同的装置（电脑、平板、手机）设定版面配置和可见度。

当然你也能自行新增许多小工具，丰富你的网站页尾。 至于要修改样式，一样切换到 Design 标签即可。

页尾编辑器设定 Copyright

下图实际示范如何编辑 Copyright，也就是设定网站的著作权声明。

在设定页尾区域按序点选+ > Copyright > 来到 ELEMENTS 区域点击 Copyright，点击后即可开始编辑。

GENERAL 编辑区内是 Astra 系统动态文字，会自动带入你的目前年份、网站名称，可以依照需求删掉或增加内容。 DESIGN 则是可以编辑文字色彩、字号、间距的边界设置。

以上就是 Astra 免费版的教程啰，相信大家一定都收获满满吧：）

---

Astra Pro版方案，更多教程？

有关于 Astra Pro版，我写了多篇使用教程，方便你认识和上手 Astra Pro功能，如下。

• Astra Pro： Astra Pro版方案，强化功能详细教程，可参考 Astra Pro教程。
• Astra Pro WooCommerce： WooCommerce 电商功能强化，可参考 Astra Pro WooCommerce 教程。
• WP Portfolio：制作网站作品集、展示页面、服务案例等 .. 专用插件，可参考 WP Portfolio 教程。
• Ultimate Addons for Elementor：在 Elementor 上新增 40+ 个元素功能、100+ 网站模板、200+ 区块模板，可参考 UAE 教程。
• Premium Starter Templates：有更多 Astra Pro模板可使用，可参考 Premium Starter Templates 教程。

如果都看完，相信你对 Astra 主题的整体掌握度，大概也就如鱼得水了吧，加油唷：）

---

常见问题

原文链接：https://www.itaoda.cn/blog/9815.html，转载请注明出处。