Astra是一款非常轻量(核心文件 <50KB)、多功能的WordPress主题,兼容Gutenberg和 Elementor等编辑器,适合任何类型的网站。由于简单易用、代码简洁、加载速度快、模板丰富、对SEO友好,Astra 已成为全球最受欢迎的主题之一。本站也是用的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 temeplates 然后接下去选择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,让AI推荐生成HEX色调或者RGB。
然后将颜色代码相应的粘贴到输入框即可。
我的话就用两三个颜色,也推荐大家不要用太多颜色,那样不止不好看,也不专业。
标题正文一个颜色,按钮链接一个颜色,最多某些地方需要特别强调再加个鲜红色。



容器
Site Layout:网站整体的布局,保持默认第一个全宽
容器布局默认也行,某些要修改的或者增加侧边栏的布局,可以点击相应容器的铅笔进行自定义单独设置。

按钮设置
按钮预设:风格选择。
Primary:第一颜色,Secondary:第二颜色:其实就是悬停颜色
下面文本背景边框颜色自定义,对比鲜明一点。
边界圆角:边框圆角的度数,一般设置5/10就可以

页眉
页眉样式根据自己所需去选。
点击header presets右边铅笔会有几种固定布局供选择。
下面的元素可以修改或者点击右边的箭头进入修改页面。



移动端页眉设置
自定义的选项挺多,样式、图标、搜索框、菜单动画等等。
菜单设置入口(PC、移动端等都是通用的)。

透明页眉
指的是背景透明。
可以设置在整个网站上启用,也可以设置只在某些页面上是透明页眉(推荐)。
启用下面的三个按钮,点击变蓝则是启用,再点击变成白色则是不启用。

固定页眉
页眉固定在最顶端。
第一个选项固定一级页眉打开。
第二个则是停止滚动时隐藏。
第三个选择在移动或者桌面启用,双端都启用也行。

博客文章设置
博客/存档:博客聚合页设置。
单篇文章布局,信息设置。
post types设置这两项就可以。

博客聚合页标题区域,按照页头的截图设置,标题和面包屑是必要的,描述可以不用。


博客聚合页的布局和每页博客文章展示数量设置。

文章结构选择特色图片、标题。
下面的pagination是分页设置,默认就挺好。

单篇文章
单篇文章设置侧边栏,左右可选,我喜欢侧边栏放在右边。

文章页头区域设置

选择第二种,阅读比较轻松。
结构只选标题和面包屑。需要设置作者、更新日期等信息,结构meta一定要选。

相关文章一级评论在博客文章页面打开有利于SEO。
右边箭头进入设置,比如文章数,评论区域等。

总体
总体里面设置这三项就可以。
面包屑、侧边栏、滚动到顶部。

面包屑
面包屑一般放在标题之后。
一级或者导航页面就去掉面包屑展示,不然太累赘。

侧边栏
左右侧边栏、侧边栏宽度以及置顶侧边栏。
置顶侧边栏指侧边栏固定在顶部,内容可以自由滚动,方便看文章目录或者推荐文章/产品。

滚动到顶部
启用,右边,大小自定义。

页脚
页脚点击右下角可以自由添加想要的元素,按钮或者文字。
布局的话点击最左边的齿轮图标,可以自定义分栏,主要还是看需要放多少信息。


电商功能(woocommerce)
有可能需要设置的就产品目录和单件产品选项。
其实保持默认已经挺好,主要设置一下产品图片的布局和相关产品的数量,过滤器。其他都不建议再改。


产品展示数量设置,woocommerce→产品目录下拉即可看到商店列数量和每页产品数量的设置。

再往下则是产品卡片显示的信息选择,点亮眼睛是展示,想隐藏则是再点一下。
有些B2B的客户用woo管理产品,但是不需要这么多信息,比如添加到购物车、价格等,点击隐藏即可。

woocommerce商店设置好记得后台woocommerce设置站点可见性里面上线站点,这样用户才能访问商店。

菜单
后台外观-菜单,添加页面或者目录到菜单栏里面。
1.下拉选择要编辑的菜单
2.添加菜单项,可以是页面,产品,文章,自定义链接,建议添加页面就好。
3.不想要的菜单选项下拉移除。
4.显示位置主菜单一定要勾选。(二级三级菜单一样的,先添加到一级菜单之下,再拖动)


或者外观-自定义-菜单,选择目标菜单并设为主菜单。

超级菜单
在每个菜单项打开最下面有个astra menu setting,astra超级菜单的开启按钮就在这里。

设置菜单内容来源,其他的不用设置,默认就好。
内容来源有三种:纯文本、template(模板)、widget(小工具)。
纯文本:有内容框给你填写
模板:用elementor设计一个模板然后引用
小工具:外观-小工具-选择某个具体小工具然后添加信息,最后在这里引用即可。

主页设置
设置主页。
设置blog页面为博客页,需要设置才能把之前的博客聚合页的设置应用上去。

做好网站别忘了放开收录并提交站点地图。

WordPress必备插件
Elementor pro
延伸阅读:WordPress速度优化、wordpress后台教程
最后带Cloudflare免费CDN或者FlyingCDN,整个网站就完成了,速度也快。
Astra常见问题
Astra主题怎么设置图片放大

点击图片,在上边的选项中选择🔗选项,下面选择链接到图像文件。这样当用户点击图像时就可以放大。
如何添加搜索框?

1.外观-自定义-页眉,在右下角点击+号添加搜索
2.设置搜索样式,全屏搜索,slide、搜索框可选。
超级菜单大片空白怎么办?

把mega menu的hide menu label开启
Astra Portpolio类目效果

如下