Astra教程WordPress权威建站指南2021

astra theme home

Astra教程WordPress权威建站指南2021

在所有的WordPress外贸建站主题中,有很多优秀的建站主题可以满足所有同学的建站需求,包括Avada、Enfold、The 7以及一大批市场青睐的领导者,但是我想要的谈谈今天在赛场上久负盛名的并不是这些大佬,而是不断颠覆建站者思维的黑马——Astra。

就像上图中的标语宣传的一样,有史以来最受欢迎的主题(The Most Popular Theme of All Time)。

请注意,最受欢迎的主题(The Most Popular)。

没有真本事,我也不敢夸这种海口。

Astra的特点在上图中也很说的很明显:最快、轻量级且高度可定制的 WordPress 主题(Fastest, Lightweight, and Highly Customizable WordPress Theme)

本站教程中始终遵循的原则之一是练习后才有发言权。

为此,我使用astra为自己和客户建立了许多外贸独立网站。与avada、the7等知名网站主题的对比,得出了Astra的一些优缺点。

为此,我特意写了这篇文章对Astra外贸网站主题教程!

一.Astra建站主题的安装和激活

在WordPress后台的“外观”菜单中,选择“主题”选项并点击。

这时页面左上角有一个“安装主题”按钮,如下图:

wordpress themes install

点击后,页面跳转如下:

wordpress add themes

这时候,我们有两种安装Astra建站主题的方法:

  • 首先是点击左上角的“上传主题按钮”。

在本地电脑上传并安装Astra主题压缩包(前提是您已经准备好zip格式的Astra压缩文件包);

  • 第二种就是在右上角的搜索框中输入“Astra”搜索安装

在wordpress给出的主题中选择Astra进行安装(注意有些主题为了跟上Astra主题的流行度,会把主题名称改成类似Astra,所以安装的时候一定要注意,不要选错了。)。

安装完成后就是点击“启用”激活主题,如下图

wordpress themes active

二.Astra主题的相关功能

点击下图中wordpress菜单栏中的“Astra选项”

Astra themes option

我们的网站后台就会跳转到Astra主题的功能页面上,如下图所示

astra theme setup

上图中的第一部分是Astra免费版本的功能,第二部分是Astra付费版本的功能,但即使是免费版本部分的功能也基本上能够满足我们的绝大部分建站需求,如果有相关的功能Astra不能满足,我们还可以用其他的相关免费插件来补足这些短板。接下来我们逐一的对Astra的功能进行实操讲解。首先是免费版本部分的功能

上图中第一部分是Astra免费版的功能,第二部分是Astra付费版的功能,但是即使是免费版的功能也基本可以满足我们大部分的建站需求,如果有相关的功能Astra如果不能用,我们可以使用其他相关的免费插件来弥补这些不足。

接下来,我们将一一讲解Astra的功能。

首先是免费版的功能,点击下图2处“自定义”,或点击下图3 处“Upload Logo”,开始本部网站元素设置。

astra theme custom logo

1.上传logo

astra-logo-6

在前面的astra主功能菜单中点击“上传logo”按钮之后就跳出来上图这个页面*图1*(这是Jack老师多个页面剪辑拼凑在一起的为的是节省文章篇幅),这时候跳转的是wordpress后台的自定义页面,我们选择红色选框中的“页头”功能进行设置,这时候页面就跳转到了图2,我们再点击最上面的“网站标识”功能,这时候页面跳转到了图3,图中的选择图标选项就是我们添加自己网站logo的地方。

点击前面Astra主功能菜单中的“上传Logo”按钮,就会弹出上图。本页*图1*(为了节省文章篇幅而编辑的多页)。

这时,WordPress后端的自定义页面被重定向。我们在红色选择框中选择“Header”功能进行设置。这时候页面跳转到图2,我们点击最上面的“网站标识”功能,这次页面跳转到图3,图中的图标选择选项是我们添加自己的网站标志的地方。

2.自定义字体

astra-custom-font

点击astra主功能菜单的“自定义字体”之后,页面跳转到上图中的区块1部分,这时候Astra给出了两个字体样式的设置功能,一个是“基础字体样式”另外一个是“标题”字体样式。我们先来看“基础字体样式”

点击astra主功能菜单中的“自定义字体”后,页面跳转到上图中的区块1部分。这时候Astra给出了两个字体样式设置功能,一个是“基本字体样式”,一个是“标题”字体样式。我们先来看看“基本字体样式”

A. “基本字体样式”(块 2 和块 3):在块 2 中,astra 将其默认字体设置为“Noto Sans”。单击右侧的下拉符号,将出现其他字体选项。到时候我们可以选择自己喜欢的字体,比如Arial和HeiTi,国外常用的(前提是你的电脑必须提前安装好这些字体库,否则无法选择。建议同学们使用常规字体,否则当外贸客户访问你的页面时,因为他的电脑字体库没有你选择的字体,那么你预先设置的前端字体效果就无法显示了,他电脑上的浏览器会根据他的自动匹配计算机字体库。要显示的一种字体)。其他“Variants”设置你选择的字体的大小和粗细,你也可以根据自己的需要设置粗细。在块3中,设置字体大小和行高,拖动滑块可以更改相应的字体大小和行高。

B.“标题”(区块4 和 区块5:):需要注意的是,“标题”和“Heading”的概念是不同的。标题是指文章或页面的标题,也就是我们常说的。标题是指H系列标签,如h1、h2、h3等;这两个东西虽然属于标题的范畴,但是显示在网页的前端。效果和位置完全不同。其他部分的设置与基本字体样式类似,可以通过特定设置调整前端字体的粗细、大小和行高。

3.页头选项

astra主题的页头设置

由于页面大小,图片不是很清楚。请根据您自己的主题检查每个部分的功能。

在Astra主功能菜单中点击“页头选项”之后,页面将跳转至区块1,点击其中的“页头”选项,页面跳转至区块2,其中的第一点“网站标识”在第一部分上传logo中已经有详细描述这里就不再赘述了。我们重点讲一下后面的“主页头”,“主菜单”和“透明页头”这三部分内容

a.“主页头”(区块3):首先它提供了三种主页头显示方式,这个针对的是网站logo和主菜单的对应排列位置,示意图上表示的很清楚,短的代表logo,长的代表主菜单,同学们根据自己的喜好进行选择。在“宽度”选项中,有两种排布方式,一种是全宽排布,另外一种是内容宽度排布(注意:页面中的内容宽度也可以根据自己的喜好进行设置,后面我们会讲到这一点)。此外Astra主题还提供了两种移动端的页头显示方式,并在“Menu Style”中选择移动端页头的展现形式,分别有“Dropdown下拉菜单”;“Flyout弹出按钮”;“Full-Screen全屏展示”;“No Toggle无切换”4种选择。“Border for Menu Items”是菜单边框(原谅我截图没有截全),在上下左右四个选项中填入自己需要的菜单栏边框粗细值(单位是像素)。如果主菜单无需边框,那么不要对其进行操作即可。“Border Color”是指主菜单边框的颜色,点击之后出现色区,选择自己需要的颜色点击即可,也可以用十六进制的颜色代号进行输入,以避免人工对色区选择所造成的色彩。

b.“Spacing”(区块4):是对主菜单的间隔大小进行设定,一共分为4个部分,分别是“Header Space标题”, “Primary Menu Space主菜单空间” ,“Primary Submenu Space子菜单空间”,“Megamenu Heading Space大菜单空间(这里可以设置多样化的菜单,比方说图片菜单)”,设置的方法也很简单,上下左右四个方向填入需要的空间大小数值即可(单位是像素)

c.“主菜单”(区块5):这部分是对主菜单的具体表现形式方面的设置,勾选“禁用菜单”,那么页面的顶部就不会再出现主菜单(一般不建议这么做)。“菜单中的最后一项”可以选择5中不同的表现形式,分别是“无”,“搜索”,“按钮”,“文本/html”,“小工具”(一般情况下选择的前两项,Jack老师个人偏向于第二项搜索功能,以方便客户查找自己网站上的所需内容),如果有代码基础的同学可以选择用文本/Html来进行编辑自己想要的特定效果。”Hide Last Item in Menu on Mobile(隐藏移动菜单中的最后一项)”和“Take Last Item Outside Menu(把最后一项移出菜单)”分别对应不同的主菜单显示效果,同学们根据自己的需求选择是否勾选。“Container Animation主菜单内容块出现动画”和“Container Border主菜单内容块边框”也可以根据自己的需要进行设置(个人建议:如果不是必须要实现该效果,不建议进行设置,会拖慢网页加载速度)

d.“移动端菜单”(区块6):这部分是对网站移动端的主菜单进行对应设置。“菜单断点”是移动端折叠式主菜单展开后的主菜单各项目之间的间隔;“Menu Label”是菜单标签;此外Astra还给移动端的主菜单展现形式提供了三种不同的选择分别是“填充”,“轮廓”,“最简化”。我们也可以在“切换按钮颜色”和“边界圆角中”对移动端主菜单的具体展现形式进行对应的设置。

e.“透明页头”(区块7):这部分功能一般用的很少,它的表现形式是在主菜单和logo以及它们所对应的页头区块设置为透明,这时候就见不到我们平常能看到的页头区块了(原本页头下面的内容就会上移到原本页头的位置,导致主菜单等出现在这部分上移的内容中)。它有六个不同的选项,分别是“在整个网站启用”,“在404页面、搜索和存档中禁用”,“在博客页面上禁用”,“在最新的文章页上禁用”,“在页面中禁用”,“在文章中禁用”。事实上这样做的网站非常少见,同学们可以对这部分内容忽略,我为了完整的说明Astra主题的功能所以只能无奈的在这里进行讲解。这种透明页头你可以选择单独在PC端或者移动端展示,也可以两个同时展示。“底部边框宽度”和“底部边框颜色”也是属于自定义设置范畴,同学们自行去调整即可。最后的“颜色和背景”主要针对的是主菜单的内容表现形式进行的相关设置,这部分比较简单就不一一讲解了。Jack老师个人建议是网站的页头和主菜单都尽可能的设计的简单大方就好,不要搞得花里胡哨很个性化。毕竟外贸建站最核心是内容,与其花大量时间精力去研究这些无足轻重的东西还不如花时间琢磨如何写出高质量的访客喜欢看的原创内容。

4.页脚

astra主题页脚设置

页脚功能比较简单主要是两个部分内容,一个是页脚一个是小部件。当我们在Astra主功能菜单中点击页脚功能后,页面跳转到了自定义中页面(区块1),我们再点击“页脚”菜单,页面跳转到区块2,点击“页脚栏”就跳转到了区块3页面。在区块3中我们就可以对页脚进行具体的设置。首先是布局,一共有三种选项分别是“无页脚”,“上下排布”,“左右排布”。这两部分分别为“区域一”和“区域二”。每个区域里面有三种不同的内容项目,分别是“TEXT文本”,“小工具”,“页脚菜单”,每个内容项目下还有对应的内容设置,如下图所示,这就是我在网站上设置的页脚效果

astra主题页脚设置

这里我选择了两个区域都未TEXT的文本格式,同学们如果需要丰富页脚内容,可以选择小工具(里面有搜索,最近文章,分类目录等内容)也可以选择页脚菜单。区块4.5.6是对整个页脚的设置,包括宽度,版面大小,边框粗细,背景和内容。值得一提的是“背景”选项中可以设定自己喜欢的背景图片,这项功能在很多其他外贸建站主题中是没有提供的。内容是对页脚上的文字和超链接进行颜色设置。比方说我在上图中写了一句吹牛逼的话“best stainless steel insulated water bottle manufacturer中国最好的不锈钢保温杯制造商”,我如果需要突出显示该段话,可以在“文本颜色”中用红色字体进行显示,以吸引访客的目光!

5.设置颜色

astra主题颜色设置

颜色部分就不展开具体讲解了,它主要针对的是文字部分和主题颜色的设置,文字部分的颜色在第2部分的自定义字体中已经有涉及到,这里不再赘述,以免疲劳了各位同学的眼睛。点击Astra主功能菜单的“设置颜色之后”页面会跳转到自定义功能页面,我们选择区块1中的“Global”点击之后页面跳转到区块2,我们再选择其中的“colors”菜单,页面跳转到区块3,里面有个“基础颜色”,里面有区块4和区块5(这是一个区块为了方便显示我截图成了2部分),包括“文本颜色”,“主题颜色”,“链接颜色”,“链接悬停颜色”四个部分。如果你还想额外的为自己网站设置一个自己想要的背景,那么可以在区块5中设定背景颜色或者干脆提前准备好一张背景图片上传即可。

6.布局选项

astra主题页面布局设置

还是一样在Astra主功能菜单中选择”布局”,然后页面会跳转到自定义功能菜单中,选择“Global”项目(区块1)再次跳转到区块2,我们选择其中的“容器”项目,页面跳转到区块3,在这里我们可以对布局进行自定义调整。“Site Layout”有4个附属选项分别是“full width”,“Max width”,“Padded”,“Fluid”。前两者都是内容全宽设置,我个人倒是没觉得有什么特别大的不同。“Padded”是根据内容宽度填充布局,“Fluid”是指内容区块布局是变动的(这一项我没有实际操作过,所以这里就展开实操讲解了,有兴趣的同学可以去捣鼓捣鼓)。这4中页面布局方式都可以通过拖动“Width”下方的滑竿进行自定义宽度设置,当然也可以直接在宽度值选框中填入宽度值,单位是像素。在区块4中”布局”功能也有4种选择,分别是盒式,盒式内容,完全宽度/包含,完全宽度/拉伸。我一般常用的是“完全宽度/拉伸”,因为页面中经常会用到全宽图片或者幻灯片等内容,如果是包含的话是无法做到这种全宽效果的。“Page layout”和“blog post layout”是分别对外贸网站的两大内容要素“页面”和“文章”的具体展现形式进行设置和调整,具体设置内容和上面的总体布局的设置也是一样的。“Archives Layout”这个功能我用的很少就不对其进行讲解了。最后区块5中的“SPACING”是对模块内容的内外空隙进行设置,分别是“Space Outside Container容器外部空间”和“Space Inside Container容器内部空间”,如果没有特殊需求那就不要去设置数值了选择默认即可,如果有需要就在数值框中填写对应的宽度数值,注意单位是像素。如果只想改变左右不想改变上下的距离,那么点一下数值框的最左边那个统一关联设置数值符号即可。

7.博客布局

astra主题博客布局设置

还是在自定义项目菜单中选择博客(区块1),然后页面跳转到具体的博客设置页面(区块2),在区块2中Astra给出了两种不同的设置,分别是“博客/存档”和“单篇文章”,上图中区块3到区块8都是“博客/存档”的具体设置内容,我们先对其进行讲解。区块3中的“Grid Layout网格布局”可以自行选择1-4个”column列”,为此Astra还给出了三种具体的设置,分别是“Add Space Between Posts在帖子之间添加间距/ Enable Date Box启用日期框/ Remove Featured Image Padding/删除特色图像填充”。在”Post Structure文章结构”中给出了“主打图片”和“标题/meta”选项,如果你不需要这两项内容,可以点击左边的“眼睛”图标,这样它们就不会在页面前端展现出来了。区块4中首先给出的是“Excerpt Count文章摘录”也就是一篇文章的前段摘抄部分,55是字符数,如果你想增加显示的摘抄字符数,那就把55这个数值改大一点就好了。”内容宽度”有自定义和默认两种选择,如果现在自定义,下面会出现一个滑条,拖动它来改变文章内容宽度。“Read more text”是前端页面在显示完摘抄部分后,因为整篇文章还有其他内容所以点击read more text会跳转到具体的完整文章页面上,这个类似于一个锚文本,在其的输入框中输入自己想要的文字,比方说“客官,翻我的牌,能看到更多私密内容哦”,这样设置之后前端就会展现出这句话,比干巴巴的read more text更有吸引力,这也是留住访客增加页面访问深度的一种方法。如果你还想进一步吸引客户的点击,那么在下方的“Display Read More as Button显示读取更多信息按钮”中勾选这一功能。

区块5中是对博客文章的具体设置,“Post Content文章内容”你可以选择摘要或者全部内容。“Post Pagination文章分页”也提供两种不同的模式,分别是“number数字分页”和“infinite scroll无限下拉滚动”,“Post Pagination Style文章分页样式”有三种选择,分别是“default默认”,“square四方形展示”,“circle圆形展示”。“Post Pagination Space文章间隔设定”就简单了在对应的地方输入间隔数值即可。区块6中“Blog Meta就是博客元信息”,Astra主题给出了6种功能,分别是“comments留言或评论”,“category分类目录”,“author作者”,“publish data文章发布日期”,“Tag标签”,“Read time阅读次数,注意不要理解为阅读时间哦”。希望那个功能或者元素展现在页面前端,那就让他们前面的“眼睛/显示”亮着,如果不要,那就点一下关闭它。

区块7是”Featured Images size特色图片”的设定,尺寸用auto*auto即可,Astra会自动根据文章版面来调整特色图片的显示大小。“Spacing”也很简单,就是特色图片这个模块的外部间隔设定,需要外框多大填入相应的数值即可。区块8中的字体样式这里是没有对应的操作设定的因为已经集中在主功能第二部分的自定义字体中有相关操作了。“Space Inside Post”就是和前面“Space outside Post”相对应的文章内部距离该模块内容的间隔大小,同理输入对应数值即可。“Archive Title存档标题”和“Post Title文章标题”可以点击其右边的“铅笔”图标进行尺寸大小的设定

8.侧边栏选项

astra侧边栏设置

侧边栏的功能设置相对来说简单一些,在区块一种“默认布局”有3中方式,分别是无侧边栏,左侧边栏和右侧边栏。这是整体布局的侧边栏设定,但有时候你会有其他不同的想法,比方说页面上你想用左侧边栏,文章页面你想用右侧边栏,这时候你就要对具体页面进行设置了,在区块1底部和区块2上,给出了页面,博客文章,存档三种不同的内容展示页面的侧边栏设定,还是和全局设定一样有左侧边栏,右侧边栏,无侧边栏三种选择。区块3中的“侧边栏宽度”可以通过滑条或者数值设定来自定义侧边栏和主体内容的前端版面占比,如果选择的是无侧边栏那就不用设置了。区块4中的“space outside sidebar”和“space outside sidebar”是对侧边栏和主体内容之间间隔大小的设定,同学们在这里填入自己需要的数值即可。

以上部分内容都是Astra主题的基础功能设置,下面说一下它的付费功能,如下图所示

侧边栏的功能设置比较简单。块的“默认布局”有 3 种方式,即无侧边栏、左侧边栏和右侧边栏。这是整体布局的侧边栏设置,但有时你会有其他不同的想法。例如,您想在页面上使用左侧边栏,而您想在文章页面上使用右侧边栏。这时候就得查看具体页面了设置已设置。在块 1 和块 2 的底部,页面、博客文章和存档有三种不同的侧边栏设置。页面的侧边栏设置还是和全局设置一样。有一个左侧边栏,右侧侧边栏和无侧边栏有三个选项。区块3中的“侧边栏宽度”可以通过滑块或数值设置来自定义侧边栏前端布局与主要内容的比例。如果选择无侧边栏,则无需设置。块4中的“侧边栏外空间”和“侧边栏外空间”是侧边栏与主要内容之间的间隙设置。可以在这里填写他们需要的值。

以上部分是Astra主题的基本功能设置。简单说说它的付费功能,如下图:

astra主题付费版本设置

付费版本的Astra Pro版本还是有很多额外功能是Astra版本所不具备的,但是价格也不算便宜,我尝试过下载Astra的破解版本,但安装成功后并不能实现astra pro的扩展功能,需要购买Astra Pro license进行激活才可以,所以这部分付费扩展功能我就不展开讨论了,有需要的同学可以去Astra官网上查看,再决定是否要进行购买。

Astra Pro版的付费版还是有很多Astra版没有的附加功能,但是价格并不便宜。我尝试下载了Astra的破解版,但是安装成功后,无法实现Astra Pro的扩展功能。您需要购买Astra Pro 许可证只能激活,所以我不会讨论这部分付费扩展功能。有需要的同学可以到Astra官网查看,再决定是否购买.

如果你对代码比较感兴趣或者有一定的能力,可以到主题编辑器对Astra主题的各种样式表和文件进行深入操作。

警告:新手请勿触摸!

好了,以上就是Astra主题权威建站教程这一章的全部内容了。

如果你有什么不明白的地方,没关系。

解决方法如下:

扫码添加微信

resize,m fill,w 610,h 610#

Posted in WordPress建站笔记 and tagged .