轻松掌握Astra主题，打造完美WordPress首页！

我计划建立一个Wordpress博客，购买了Astra主题，但在编辑主题时却感到无从下手。请问各位，编辑主页时是选择最新文章页面还是静态页面更好呢？

目前我使用的是最新文章页面，但在编辑首页时发现某些部分无法进行修改。例如，导航栏下方的图片，其原始链接为Wanderlust Travel Diary – Travel blog by explorers

Astra是一款极其轻量化的主题（核心文件

Astra与Pro版的对比

类别	Astra 免费版	Astra Pro 版
预算考虑	完全免费，适合个人博客或小型网站	起价 $59/年，适合长期使用或商业项目
建站速度	模板数量有限，需要自行调整	280+ 模板全面开放，几乎可一键导入上线
外观灵活性	仅能进行基本的颜色和字体调整	提供更高级的排版、间距以及页眉页脚布局工具
电商功能	只支持基础的WooCommerce	拥有更强大的商店功能（如产品网格、快速预览、无限滚动）
SEO友好性	代码简洁，加载速度较快	附加结构化，提供更多细致控制，更加友好于SEO
扩展性	功能较少，后期可能显得不足	支持长期扩展，降低二次更换主题的风险

Astra使用教程

外观>主题>安装主题>上传主题>搜索Astra，完成安装并启用

安装模板库插件Starter Templates，Astra模板库中包含280多个模板，如果想要全部使用，需将此插件升级至premium版。Astra Pro版只能使用部分模板。升级Starter Templates插件至premium后即可解锁所有模板。

1. 选择classic starter templates，然后选择elementor编辑器（建议），或者在右上角下拉选择website builder直接选elementor。

2. 挑选一个自己喜欢的模板。

3. 上传站点LOGO，并选择喜欢的字体和颜色。

4. 插件部分可以跳过，后续根据需要自行安装。

5. 开始导入模板。

6. 安装成功后点击view website查看前台效果。

7. 点击页面顶部工具栏，使用elementor编辑内容即可。

安装Astra Pro

购买后请记得下载以下三个插件：

1. astra child theme（这是子主题）

2. astra（父主题，也就是免费的，可以搜索安装）

3. astra-addon-plugin（astra pro插件）

现在进入插件页面，上传astra addon plugin，点击插件并安装新插件。输入证书后即可成功激活。

主题优化

Astra pro主题自带JS和CSS优化功能，务必开启，这样速度会有所提升。

在astra>设置>总体选项下，找到file generation。

主要是将独立附加组件的CSS和JS代码分开加载，以避免同时加载造成的阻塞和冲突。

谷歌字体也是影响速度的主要因素，通过本地预加载字体可以提高用户体验和网站加载速度。

启用Astra Pro功能

接下来的操作均基于已启用pro版本功能。

全局设置

可以通过外观进入自定义设置，或者直接在astra – 自定义中进行，大部分功能都能在这里进行调整。

提升网站设计效率的全局设置指南

在进行网站构建时，首先应设定全局的字体样式、颜色、按钮及容器等，这样在后续添加新元素时就无需逐一调整，从而显著提高建站的效率。

字体选择

推荐使用Roboto作为主字体，尽量控制在两到三种字体以内，过多的字体会增加网站的加载负担，并且不够专业。

预设的字体组合是值得考虑的，可以逐一查看，并在右侧进行预览，喜欢的样式可以直接选择。

默认的标题H字体设置保持不变即可，继承原有的样式。

颜色设置

全局调色板提供了流行的颜色组合，点击铅笔图标可以选择更多的颜色方案。

不过这些颜色组合相对较多且显得有些过时，可以考虑告知AI你的产品或行业，从而获取推荐的HEX或RGB色调。

将生成的颜色代码粘贴到相应的输入框中即可。我个人建议使用两到三种颜色，避免使用过多颜色，这样不仅视觉上不美观，还显得不够专业。

可以将标题与正文字体设置为同一颜色，按钮和链接使用不同的颜色，如有必要，仅在某些地方使用鲜红色进行强调。

容器布局

网站整体布局应保持为默认的全宽样式，容器的默认设置也是可以的。如果需要更改或添加侧边栏布局，点击对应容器的铅笔图标进行自定义设置。

按钮配置

按钮的预设风格可以进行选择，主色和次色分别对应不同状态下的显示效果。

文本背景和边框颜色应设置为对比鲜明，而边框的圆角度数一般设置为5或10即可。

页眉设计

根据个人需求选择合适的页眉样式，点击header presets旁边的铅笔可以看到多种固定布局供选择。

下面的元素可以进行修改，或者点击右侧的箭头进入更详细的修改页面。

移动端页眉设定

有很多自定义选项可供选择，包括样式、图标、搜索框及菜单动画等。

菜单设置的入口在PC和移动端都是通用的。

透明页眉的使用

透明页眉的特点在于其背景为透明，可以选择在整个网站上应用，或仅在特定页面上启用（推荐此方式）。

启用透明页眉需要点击下方的三个按钮，变蓝表示启用，变成白色则为不启用。

固定页眉的设置

固定的页眉会一直保持在页面顶部，第一个选项实现固定一级页眉，第二个选项则在停止滚动时隐藏。

第三个选项可以在移动端或桌面端启用，双端启用也是可行的。

博客文章的配置

对博客及存档页面的设置，单篇文章的布局和信息配置也同样重要。

只需设置post types这两个选项即可。

在博客聚合页的标题区域，按照页头的截图进行设置，标题和面包屑是必要的，而描述则可选。

对博客聚合页的布局及每页展示的文章数量进行设置。

文章结构中选择特色图片、标题等。

分页设置的默认值也是相当不错的。

单篇文章的设置

在单个文章页面中，可以选择侧边栏的布局，左右两侧皆可，我个人更倾向于将侧边栏放在右侧。

设置文章页头区域

选择第二种布局，使阅读体验更为轻松。

在结构选项中仅选择标题和面包屑，同时确保设置作者、更新日期等信息，结构meta一定要选择。

在博客文章页面中，相关文章的一级评论功能有助于提升SEO效果。

可以通过右侧的箭头进入相关设置，包括文章数量、评论区等。

总体设置

在总体选项中，配置这三项即可满足基本需求。

包括面包屑导航、侧边栏以及回到顶部的功能。

面包屑导航

面包屑导航通常安排在标题之后。

在一级或导航页面时，可以选择不显示面包屑，以避免视觉的冗余。

侧边栏设置

需要配置左右侧边栏的布局、宽度以及固定在顶部的功能。

固定侧边栏允许内容自由滚动，便于用户查看文章目录或推荐的文章和产品。

回到顶部功能

启用此功能后，您可以自定义其位置和大小。

页脚设置

在页脚的右下角，您可以自由添加所需的元素，如按钮或文字。

若要调整布局，可点击左侧的齿轮图标，自定义分栏以展示所需信息。

电商功能（WooCommerce）

在设置中，可能需调整产品目录和单个产品的选项。

保持默认配置通常效果不错，只需关注产品图片的布局和相关产品的显示数量以及过滤器设置，其它部分不建议更改。

在WooCommerce设置中，进入产品目录下拉菜单，可以调整商店列数及每页显示的产品数量。

继续向下，可以选择展示在产品卡片上的信息，若想隐藏某些内容，只需再次点击。

部分B2B客户在使用WooCommerce管理产品时，可能不需要显示所有信息，比如添加到购物车和价格，点击隐藏即可。

确保在WooCommerce后台设置中启用站点可见性，才能让用户正常访问商店。

WooCommerce教程

菜单设置

在后台外观-菜单中，您可以将页面或目录添加到菜单栏。

1. 从下拉菜单中选择要编辑的菜单。

2. 添加菜单项，选项包括页面、产品、文章及自定义链接，建议主要添加页面。

3. 对于不需要的菜单选项，可以从下拉菜单中移除。

4. 确保主菜单位置被勾选。（二级和三级菜单设置相同，先添加到一级菜单下，再拖动调整位置）

或者通过外观-自定义-菜单，选择目标菜单并设置为主菜单。

超级菜单

在每个菜单项下，打开最底部的Astra菜单设置，您可以找到超级菜单的开启选项。

设置菜单内容来源，其余部分保持默认配置即可。

内容来源有三种选择：纯文本、模板和小工具。

纯文本：提供内容框供您填写。

模板：使用Elementor设计的模板。

小工具：在外观-小工具中选择某个具体小工具并添加信息，最后在此处引用。

主页设置

配置主页的显示内容。

将博客页面设置为您的博客页，以确保之前的博客聚合页设置得以应用。

完成网站建设后，请务必开放收录并提交站点地图。

WordPress必备插件

Rank Math SEO插件

Elementor Pro

FlyingPress与FlyingCDN

Shortpixel图片压缩插件

延伸阅读：WordPress速度优化、WordPress后台教程

最后，配置Cloudflare免费CDN或FlyingCDN，您的网站便可完工，访问速度也会非常迅捷。

Astra主题常见疑问解答

如何设置图片的放大效果呢？

首先，点击图片，然后在上方选项中找到并选择相应设置，接着在下方选择链接到图像文件。这样，当用户点击图片时，就会出现放大的效果。
那么，如何在网站中添加搜索框呢？

您可以按照以下步骤操作：1. 前往外观-自定义-页眉，右下角点击加号以添加搜索框。2. 之后，您可以设置搜索框的样式，包括全屏搜索、滑动效果等选项。