Astra 主题入门详解：轻量级WordPress多功能主题教程

本文详细介绍了Astra主题的使用方法。

Astra主题是一款快速成长的轻量级WordPress主题，具有多种自定义选项，适合构建各种类型的网站，如个人博客、购物商城、企业官网等，非常适合新手使用。

文章内容涵盖了Astra免费版的详细教程，包括如何安装、设置和优化Astra主题，以及免费版的各种功能的介绍，适合零基础的同学实操。

如果对Astra Pro版感兴趣，接下来我会写一篇Astra Pro指南，有基础的同学也可以购买Astra Pro

版本直接开始。

1. Astra 主题简介

Astra是由Brainstorm Force开发的主题，不需要任何编码知识即可创建出色的WordPress网站。它有免费版和进阶版两种可选。

Astra支持各种类型的网站，如博客、企业网站、电子商务网站、在线课程网站、预约网站等。

内置多种模板 Astra提供Starter Templates插件，包含70多种风格模板，一键安装即可快速建站。免费版也有30多种模板可用。

Astra完美兼容主流的WordPress页面编辑器，如Elementor、Beaver Builder、Gutenberg等，使其适合搭配使用。

速度优化 Astra主题速度快，禁用Jquery，采用优质的代码编写，使其在多个速度测试工具上表现优异。

多种布局调整 Astra提供多种自定义选项，可以设置网站布局、颜色、字体等，使网站更具个性化。

2. 免费版安装与启用

Astra主题提供免费版和进阶版。建议新手从免费版开始，觉得好用再升级进阶版。也可一步到位，直接使用Pro版本。

安装步骤：

1. 在WordPress后台，点击“外观” -> “主题” -> “添加新主题”，搜索“Astra”，点击“安装”。
2. 安装完成后，点击“启用”。

安装子主题 安装并启用Astra后，前往Astra Child Theme生成页面，下载并命名子主题，点击“Generate”按钮下载。

3. 风格模板应用

Astra提供多种风格模板，需安装相关插件使用。可通过Astra > Dashboard > Starter Templates安装。

步骤：

1. 安装插件后，选择常用的页面编辑器（如Elementor）。
2. 浏览模板，选择喜欢的模板进行全站或单一页面安装。

4. 功能详解

接下来为大家详细介绍Astra的各种功能

我们在网站前端页面，点击左上方的自定义。

我们会进入到Astra主题的自定功能列表中，如下图：

• 全局设置：可以配置排版样式、颜色、内容容器布局、按钮、返回顶部功能、区块编辑器等。
• 页首编辑器：设置与网站 Logo、导航菜单、布局排列、颜色调整及透明页首相关的内容。
• 导航标记（面包屑）：设置面包屑路径的位置，可以选择位于页首内部、下方或标题上方。
• 文章：决定网站文章和信息栏的容器布局、文章宽度和结构等。
• 页面：选择页面的布局方式，如区块布局、全幅宽度等多种设计。
• 侧边栏：设置侧边栏的宽度和位置。
• 页尾编辑器：调整上/中/下层页尾部分，自定义页尾工具、布局和样式。
• WooCommerce 设置：用于设置电商页面，需启用 WooCommerce 功能，如产品目录、单品页面、购物车和结账页面等。
• 站点标识：设置网站图标、标题和标语。
• 菜单设置：配置菜单的位置和名称，添加菜单项和自定义链接等。
• 小工具：进行区块设置，编辑页首、页尾、侧边栏内容，自定义 HTML 等。
• 主页设置：选择网站主页要显示的内容。
• 额外 CSS：添加自定义 CSS 代码，调整网站的外观和布局。

全局设置

在全局设置中，通常是一些会影响整个网站的功能，譬如字体、颜色、布局设定等：

排版+字体设定

前往排版选项，可以调整基本字体、标题字体、段落底部间距和开启关闭下划线内容链接功能，这些这些设置可以帮助你更好地控制网站的排版和字体样式，提升整体视觉效果和用户体验。

颜色设定

来到颜色，可以调整网站文字颜色、主视觉颜色、链接颜色、标题颜色和背景颜色等，你可以根据品牌的调性随意调整你喜欢的色彩，如果要恢复原设定，可以点⟲ 按钮恢复。

容器设置

1. 容器布局：如果你的网站需要全屏展示图片或视频，可以选择全宽布局（左侧图标）。对于一般内容网站，建议使用固定宽度居中布局（中间图标）。
2. 容器样式：大多数网站建议使用盒式布局，这样内容区域更清晰。如果需要全屏背景图像，可以选择非盒装。
3. 容器宽度：一般设置为1200px。如果你的内容主要是文字，可以考虑1000px，图片为主可以设置为1400px。
4. 狭窄容器宽度：建议设置为750px，这样文章的阅读体验较好。

按钮设定

按钮预设

• 预设样式：Astra提供了几种按钮样式预设，可以选择不同的预设来快速应用常见样式。
  • 填充按钮（Solid）：按钮有背景颜色和边框。
  • 描边按钮（Outline）：按钮只有边框，没有背景颜色。
  • 透明按钮（Transparent）：按钮没有背景和边框。

文本颜色

• 文本颜色：设置按钮中文字的颜色。可以选择自定义颜色或使用默认颜色。

背景颜色

• 背景颜色：设置按钮的背景颜色。这个选项在选择“填充按钮”预设时才会生效。

边框颜色

• 边框颜色：设置按钮的边框颜色。这个选项在选择“描边按钮”或“透明按钮”预设时才会生效。

字体

• 字体：设置按钮文本的字体样式。可以选择自定义字体或使用主题默认字体。

内距

• 内距（Padding）：调整按钮内的文本和按钮边框之间的距离。可以分别设置顶部、底部、左侧和右侧的内距。

边框宽度

• 边框宽度：设置按钮边框的宽度。可以分别设置顶部、底部、左侧和右侧的边框宽度。

滚动到顶部

启用滚动至顶部的功能后，在页面的右下角会出现滚动按钮，对用户浏览内容比较长的页面非常友好，譬如比较长的博客文章，或者图片较多的产品详情页等。

页眉生成器

1. 页面布局（Layout）

三层布局：Astra页眉生成器允许你为页眉设置三个不同的区域：页眉顶部（Top Header）、主页眉（Main Header）和页眉底部（Bottom Header）。每个区域都可以添加不同的元素和工具。

2. 添加元素（Elements）

• 网站标题和LOGO：在页眉中添加网站的标题和LOGO，有助于增强品牌识别。
• 切换按钮：添加用于打开侧边栏或菜单的切换按钮，特别适合移动端设备。
• 账户：为用户提供快速访问其账户的链接，提升用户体验。
• 购物车：显示购物车图标和数量，适合电商网站。
• 主菜单：添加网站的主导航菜单，帮助用户快速找到所需内容。
• 二级菜单：在主菜单之外，添加次级导航菜单，进一步细化导航结构。

3. 自定义设计（Design）

• 样式设计：自定义每个元素的样式，包括颜色、字体、间距等。可以根据品牌需要进行个性化设计。
• 内距和边距：调整元素的内距和边距，确保布局美观且符合设计要求。

面包屑

Astra主题的面包屑功能通过在页面顶部提供清晰的导航路径，帮助用户了解他们在网站中的位置，并快速返回上一级或首页，从而提升用户体验和网站的可用性，同时对SEO也有积极的影响。

1. 清晰的导航路径

• 位置指示：面包屑导航显示用户当前页面在网站层级结构中的位置，通常包括首页、分类、子分类、当前页面等。
• 返回链接：每个层级都提供返回上一级或首页的链接，方便用户快速导航。

2. 提高用户体验

• 易于导航：面包屑导航帮助用户理解网站结构，特别是在多层级网站中，提升用户的导航体验。
• 减少跳出率：通过提供清晰的导航路径，减少用户在网站上的迷失感，降低跳出率。

博客文章的设置

博客文章的设置，分为两大项可以调整：

• 博客/存档
• 单篇文章

博客/存档设置

Blog Title

• 设置 Banner Layout 横幅布局：你可以为博客标题区域设置横幅布局，选择不同的布局方式来展示标题。
• 改变 3 种装置的水平对齐方式：分别为电脑、平板和手机设置标题区域的对齐方式，确保在不同设备上的显示效果一致。
• 内部元素间距：调整标题区域内部元素之间的间距，使布局更加美观和整齐。
• 容器背景：为博客标题区域设置背景颜色或图片，增强视觉效果。
• Blog 的字型与色彩设置：自定义博客标题的字体和颜色，保持与整体网站风格一致。

版面配置（Layout）

• GENERAL 设置：
  • 容器布局：选择博客页面的内容布局方式，可以是全宽、盒装等。
  • 容器样式：选择容器的样式，包括默认、非盒装和盒装。
  • 侧边栏布局：设置侧边栏的位置，可以是左侧、右侧或无侧边栏。
• DESIGN 设置：
  • 文章标题字型大小：自定义博客文章标题的字体大小，使其符合你的设计要求。

文章结构（Post Elements）

• 文章内的相关资料设置：
  • 特色图片：设置是否显示文章的特色图片，即封面图片。
  • 标题：选择是否显示文章标题。
  • Post Meta：设置是否显示文章的元数据，如发布日期、作者、分类等。
  • 摘要：选择是否显示文章摘要，提供内容概览。
  • Read More：设置是否显示“阅读更多”链接，鼓励用户点击阅读全文。
  • 类别和标签：选择是否显示文章的类别和标签，帮助用户更好地了解和导航内容。

单篇文章

单篇文章设置功能与博客/存档设置相似，但它专门应用于单篇文章页面。其中一个显著的功能是“相关文章”，类似于自动配置的进一步阅读推荐。在设置中，你可以启用“相关文章”功能，自动为读者推荐相关的文章，增强内容的连贯性和阅读体验。

在设置相关文章时，可以依据文章的搜索标准来确定哪些文章会被推荐。例如，可以选择根据相同的分类或标签来链接相关文章。这样可以确保推荐的内容与当前文章的主题相关，增加读者的兴趣和停留时间。

此外，相关文章的排序依据也可以进行自定义。你可以选择根据文章的发布时间、文章的顺序或者评论数量进行排序。这些选项允许你灵活地展示最相关或最受欢迎的文章，进一步提升网站的用户体验和互动性。

页面设置

单篇页面（Single Page）

• 布局：选择全宽布局或盒装布局，决定是否显示侧边栏及其位置（左侧、右侧或无侧边栏）。
• 标题区域：显示或隐藏页面标题，设置标题背景颜色或图片。
• 内容样式：自定义字体和颜色，调整内容的内边距和边距。

搜索页面（Search Page）

• 结果显示方式：选择列表视图或网格视图展示搜索结果。
• 结果项样式：决定是否显示结果项的摘要和特色图片。
• 分页：自定义搜索结果的分页样式和位置，提升用户浏览体验。

侧边栏设置

Astra主题的侧边栏（Sidebar）设置可以调整网站各页面的侧边栏布局。

你可以选择三种布局：

• 无资讯栏：不显示侧边栏。
• 左侧资讯栏：侧边栏显示在页面左侧。
• 右侧资讯栏：侧边栏显示在页面右侧（如图示例）

全站与单独页面设置：

• 全站设置：在自定义中设置侧边栏布局后，所有页面都会应用该布局。
• 单独页面设置：如果需要为特定页面设置不同的布局，可以直接编辑该页面或文章，进行单独配置。

添加小工具

在侧边栏中，可以放置多种有用的小工具，提升用户体验。常见的小工具包括：

1. 搜索框： 帮助用户快速查找内容，提升导航效率。
2. 最新文章： 展示网站的最新文章，增加内容曝光率。
3. 电子报订阅： 方便用户订阅网站更新，增强用户粘性。
4. 实际操作：
   • 编辑侧边栏：点击笔形图标，可以快速编辑侧边栏的内容和布局。左侧会自动跳出相关设置选项。
   • 调整宽度：如图所示，可以调整侧边栏的宽度，确保布局美观。

页脚编辑器

页尾编辑器概述

页尾编辑器与页首编辑器操作方法大同小异，是自定义网站的好帮手。页尾编辑器分为上方页尾、主要页尾和下方页尾。点击要修改的齿轮图标，就能调整栏位数量、宽度、高度、垂直对齐方式，还可以针对不同的设备（电脑、平板、手机）设置版面配置和可见度。此外，你还可以添加许多小工具，丰富网站页尾内容。要修改样式，只需切换到“设计”分栏即可。

设置页尾版权信息

以下是如何编辑网站版权声明的实际示例。

1. 在设置页尾区域时，依次点击“+” > “Copyright”。
2. 在“ELEMENTS”区域，点击“Copyright”，即可开始编辑。

GENERAL编辑区

GENERAL编辑区显示Astra系统的动态文字，会自动带入当前年份和网站名称。你可以根据需要删除或增加内容。

DESIGN编辑区

DESIGN编辑区用于编辑文字的色彩、字体大小和间距等样式设置。

总结

本文详细介绍了Astra主题的安装、设置和优化。Astra主题适用于各种类型的网站，包括个人博客、购物商城和企业官网。通过介绍页面布局、颜色和字体设置、按钮样式以及自定义页眉和页脚等功能，帮助用户轻松构建个性化网站。

如果您有任何问题或需要进一步的帮助，欢迎在评论区留言或通过联系页面与我们交流。