WordPress外贸建站主题众多，黑马Astra如何安装激活？

外贸网站选用WordPress平台时，市面上存在大量优质主题可供选择，例如Avada，Enfold，The 7等，这些主题都广受市场欢迎，能够满足不同需求，然而今天要介绍的不是这些早已声名显赫的知名产品，而是一个正在改变行业格局的新锐选择Astra。

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

进入WordPress管理界面，打开“样式设置项”并点击，此时在界面左上方会出现一个“新增”的按钮，具体位置参考下图所示：

我们选中并点击它，页面跳转如下：

现在有两种途径可以用来部署Astra建站主题，第一种是通过浏览器左上方的“上传主题”选项，借助本地电脑上存储的Astra主题压缩文件进行部署安装（务必确保事先已经获取了Astra的zip压缩文件）；第二种是在页面右上角的检索栏中键入“Astra”，从WordPress系统推荐的众多主题列表里找到Astra主题并执行安装动作（需要留意的是，部分其他主题为了博取关注，可能会将自身主题的名称与Astra主题进行混淆，大家在安装时一定要仔细辨别）。安装完之后就是启用环节，如下图：

在图片上方的WordPress工具栏里找到Astra这个按钮，点一下，网站管理界面就会切换到Astra主题的设置界面，参照下图的样子。

图中开头段落展示的是Astra的基础配置选项，后半部分则是Astra的高级配置选项，不过即便是基础配置选项，也基本可以应对多数网站建设要求，倘若存在基础配置无法覆盖的功能，我们能够借助其他同类免费扩展来弥补这些不足之处，现在我们开始逐项演示Astra的各项功能，先从基础配置选项讲起。

二、上传logo

在astra主功能菜单里点选“上传logo”按钮，就会切换到图1所示的界面，这个界面是wordpress后台的自定义页面，我们接下来要操作的是红色框框起来的“页头”功能，点击它之后，页面会变换成图2的样子，然后我们需要找到最顶端的“网站标识”功能进行点击，这样页面就会转到图3，图里标示的选择图标位置，就是用来上传个人网站logo的地方。

三、自定义字体

进入astra主要功能选项中的“个性化字型”界面，屏幕会切换至图示中的区域一位置，在此处Astra提供了两种字型调整选项，分别为“常规文本格式”与“标头文本格式”。

“基础字体样式”（区块2和区块3）

区块2里astra预设了标准字型为“Noto Sans”，点一下右侧的选择图标就能找到其他字型，我们可以从中挑选个人偏爱的字型，比如国际上常见的Arial和黑体（不过前提是你的电脑得先装好这些字型文件，否则选不了），建议大家用普通字型，免得外国客户来访问时，如果他们电脑里没有你选的那个字型，就无法看到你设定的前端字型效果，他们的浏览器会自动用电脑自带的字型来替代显示。

其余的“变体”关乎到你所选择字体的尺寸与粗细设定，允许用户依照个人偏好调整粗细程度。区域三则用于设定字体的高度与行距，具体数值可通过滑动条进行调节。

“标题”（区块4和区块5）

需要留意的是“标题”与“Heading”并非同一事物。标题是文章或页面的主要标题，也就是通常所说的Title。Heading则是指H系列标签，例如h1、h2、h3等。尽管这两者都属于标题类别，但在网页前端的表现形式和位置却截然不同。其余部分的配置和基本字体形态类似，依靠明确的设定来改变网页端字体的粗细程度，尺寸大小以及行间距离。

四、页头选项

进入Astra主功能菜单，选择“页头选项”，页面会切换到区块1，在区块1中点击“页头”，页面会跳转到区块2，区块2的第一项“网站标识”已在第一部分logo上传中详细说明，因此不再重复介绍。接下来着重说明区块2中的“主页头”、“主菜单”以及“透明页头”这三个部分。

“主页头”（区块3）

它首先呈现三种主页头部布局选项，这些选项涉及网站标志与主导航栏的相对摆放位置，图示能明确展示，简短部分代表标志，较宽部分代表导航栏，用户可依据个人倾向挑选。在“宽度”设置里，有两种布局形态，一种是整体铺满，另一种是按内容宽度安排，页面中的内容宽度还可以根据个人偏好调整，后续会详细说明这个特点。

另外Astra主题还具备两种手机端页面的顶部布局模式，可在“菜单样式”选项中挑选手机端页头的外观形态，具体包含“下拉式菜单选项”、“飞出式按钮呈现”、“整体屏面显现”、“无转换状态”四种模式。菜单边框指的是界面上围绕菜单项的线条轮廓，由于截图中未能完整显示，需要分别调整上下左右的边框宽度。在对应的设置区域，输入符合要求的像素数值，即可设定菜单栏边框的粗细程度。

主菜单如果没有边框，就无需做任何处理。所谓“边框色彩”，就是指主菜单边框呈现的色调，点击它会出现颜色区域，从中挑选心仪的色调并确认，或者输入十六进制的颜色代码，这样就能防止因挑选色区而导致的颜色偏差。

“Spacing”（区块4）

调整主界面分隔尺寸，包含四个层级，具体为“顶部空白区域”，“一级菜单区”，“二级菜单区”，“超级菜单区（支持多元菜单样式，如图文组合）”，配置过程十分便捷，只需在上下左右方位输入目标距离数值（以像素计量）

“主菜单”（区块5）

这项功能用于调整主菜单的显示方式，如果选中“关闭菜单”，那么网页的顶部将不再展示主菜单选项，通常不推荐采用这种方法。列表末尾的条目，能够呈现五种形态，分别是空置，检索，控件，网页内容，模块化装置，通常情况下，前两种选项较为常用，个人更倾向于第二种检索选项，因为它有助于访客在站点内便捷地定位目标信息，具备编程知识的朋友，可以通过网页内容格式，实现个性化的定制设计。

移动端菜单的末项可选择在列表中保留，或将其独立展示出来，这两种设置方式对应着不同的总菜单呈现形态，学员们应根据个人使用情况决定是否启用相应选项。"内容块展开时呈现动态效果"以及"内容块轮廓线样式"均可按个人意愿调整配置（个人看法：若非必须达成此功能，不建议进行配置，或会减慢页面载入效率）。

“移动端菜单”（区块6）

这部分是针对网站手机版的主菜单进行相关调整。“菜单分隔”指的是手机版可折叠式主菜单展开后各个选项之间的距离；“菜单名称”表示菜单的称谓；另外Astra为手机版的主菜单显示方式提供了三种不同的模式分别是“充实式”，“线框式”，“极简式”。我们同样可以在调整切换按钮色调时，以及设定边界弧度效果中，针对移动端主菜单的详细外观进行相应的设定。

“透明页头”（区块7）

这种功能通常很少应用，它的实现方式是将主菜单和标志以及它们关联的页头区域处理成无色透明，这样一来，常规情况下可被观察到的页头区域就会消失不见（原本位于页头下方的材料会向上移动至页头原本的位置，从而造成主菜单等元素出现在这部分上移的资料之上）。

这个功能提供六种设置方式，包括“全局生效”，“仅404页面、搜索及存档关闭”，“仅博客页面关闭”，“仅最新文章关闭”，“仅页面关闭”，“仅文章关闭”。通常采用这些设置的站点非常少，大家可以将这部分忽略，我之所以在此详述，是为了全面展示Astra主题的特性，虽然有些勉强。

这种透明页头能够单独在电脑或者手机上显示，也可以两者同时呈现。“下边框的粗细”和“下边框的色调”也属于个性化调整项目，大家自行进行修改就行。最后的“色彩与底图”主要是针对主菜单的外观呈现进行的相关调整，这部分操作不复杂，因此不再逐一说明。

个人认为网站的顶部和主菜单应当力求简洁得体，不宜过于繁复追求个性。毕竟对外贸易网站建设的关键在于信息，与其耗费许多时间和精力去研究这些无关紧要的细节，不如将心思放在如何创作出优质且受目标群体欢迎的原创文章上。

五、页脚设置

页脚功能结构比较简单，包含两个主要构成，即页脚本身和小部件组件。在Astra主功能菜单里选择页脚功能项，页面会切换到自定义页面（区块1）。接着在自定义页面中点击“页脚”选项，页面会转向区块2。随后点击“页脚栏”，页面便会跳转到区块3界面。

区块3可用于页脚的详细调整。先设定布局，有三种方式可供选择，即“取消页脚”，“上下排列”，“左右排列”。这两部分被称作“部分一”和“部分二”。每个部分都包含三种不同的内容类型，分别是“文字内容”，“附加模块”，“页脚导航”，每种内容类型下都有相应的配置选项。

学生若想增添页脚部分信息，能够选用小插件，里面具备检索功能，最新文章展示，分类清单等选项，或者选用页脚导航栏。区域4、5、6针对整个页脚进行配置，涉及宽度调整，布局尺寸，边框线型，背景样式及内容呈现。特别指出的是，在背景设置项中，用户可以挑选心仪的背景图案，此特性在诸多其他外贸网站模板中并未见到。内容是对页脚上的文字和超链接进行颜色设置。

六、设置颜色

关于色彩方面的内容不详细说明，主要涉及文字部分和主题色调的调整，文字色彩在第2部分的自定义字体里已经提及，因此不再重复，以免让大家感到视觉疲劳。

进入Astra主功能菜单的“完成颜色设置”选项后，会切换到个性化设置界面，在区域1找到“全局”选项并点击，接着页面会转到区域2，然后从区域2中选择“颜色”子菜单，页面会进一步跳转到区域3，这里显示有“基本颜色”设置，该设置包含区域4和区域5两部分内容，具体涵盖“文字色彩”，“主色调”，“超链接色彩”以及“超链接交互色”这四项调整内容。

若希望为网站增添特定的背景，可在区域五选择设定色彩方案，或者直接将个人设计的图片文件上传应用。

七、布局选项

在Astra的主功能菜单里找到”布局“，接着页面会切换到自定义功能菜单，挑选”Global“项目（区块1），随后会跳转到区块2，我们在那里选定”容器“项目，页面又转向区块3，在这个区域可以对布局进行个性化设置。

“站点布局”包含四个子选项，分别是“全宽”，“最大宽度”，“填充”和“流动”。前两个选项都使内容占据整个宽度，我个人认为它们之间并没有显著差异。填充布局依据内容宽度调整，变动布局则随内容区块变化而变化（虽未亲自动手实践，但在此详细说明操作方法，感兴趣者可自行尝试探索）。

这四种页面布局模式都可以通过移动“宽度”下方的滑块来调整宽度，或者直接在宽度输入框中输入数值，单位为像素。区块四中的“布局”选项包含四种设置，分别是模块式，模块内容，全宽/嵌入，全宽/拉伸。我通常使用“最大宽度/填充”这个选项，由于网页中经常需要展示横幅图片或轮播图等元素，而包含模式无法实现这种满屏显示的效果。

页面布局和文章布局分别针对外贸网站中页面与文章这两个核心内容进行个性化定制，具体调整选项与整体布局设置保持一致。关于存档布局的功能，本人使用频率较低，因此不作详细说明。

区块5里的“SPACING”用来调整模块内容的内外距离，包含“Space Outside Container容器外部空间”和“Space Inside Container容器内部空间”两个部分，如果没什么特别要求，就用系统推荐的默认值，要是需要设定，就在数值输入框里填上合适的像素值，并且一定要记得单位是像素。若需调整横向尺寸而维持纵向距离不变，可操作数值框左侧的特定按钮来设定关联数值的符号。

八、博客布局

在自定义项目列表里找到博客（区块1），接着界面会切换到博客的详细配置界面（区块2），在区块2里面Astra提供了两种不同的配置选项，一个是用于展示文章列表的，另一个是用于显示独立文章的，前面图中从区块3到区块8展示的都是文章列表的详细配置，我们先来分析这些设置。

区块3的“网格布局”部分允许用户挑选1到4个“列”，同时Astra提供了三项具体调整方式，包括“帖子间隔调整”、“日期显示开关”以及“特色图边距清除”。"文章布局部分提供了核心视觉元素与标题信息设置项，若无需这些内容，可选用左侧的视觉遮蔽符号，使其不在页面主体部分显示出来。"

区块4里首先展示的是“文章摘录”部分，也就是文章开头的一部分内容，55代表字符数量，如果需要增多显示的摘录字符数，只需把55这个数值调大即可。关于内容宽度，有自定义和默认两种模式可选，若选择自定义，下方会出现一个滑条，通过拖动滑条能够调整文章内容的展示宽度。

阅读更多文字是前端界面在展示完摘录部分后，由于全文尚有其他内容，点击阅读更多文字会导向完整的文章页面，这类似于一个锚文本功能，在其的输入框里填入自己期望的文字，比如“请翻阅我的牌，可窥见更多私密信息”，设置好后前端就会呈现这句话，比起单调的阅读更多文字更具吸引力，这也是一种留住访客并提升页面访问深度的手段。

若需更有效招徕顾客点击，请于下方“Display Read More as Button显示读取更多信息按钮”处，选定该选项功能。

区块5涉及博客文章的详细配置，在“Post Content文章内容”这一项，用户能够挑选显示内容摘要，或者完整的内容文本。文章分页功能有两种设置方式，一种是按数字索引切换，另一种是采用滚动加载模式，分页样式选项则有三档可供挑选，包括标准版式，方块型布局，以及圆形化呈现。

调整文章间距很简单，在适当位置键入具体数值就行。区块6里，“Blog Meta指的是博客的基本信息”，Astra主题提供了六项功能，分别是“comments代表留言或评论”，“category表示分类目录”，“author指作者信息”，“publish data代表文章发布日期”，“Tag表示标签功能”，“Read time指的是阅读次数，需要特别说明并非阅读时间”。那个功能或者元素要显示在页面前端，就让它前面的“眼睛/显示”保持开启状态，如果不需要，就点击一下关闭按钮。

区块7用于配置”精选图片尺寸”，参数设置为auto*auto，Astra将依据文章布局自动适配图片展示尺寸。关于”间距”，操作十分便捷，它指的是精选图片模块的外部留白，具体数值直接填入相应框内即可。

区块8的字体形态在此处不提供相关调整选项，因为所有相关设置均已整合至主功能第二部分的自定义字体模块中。所谓“Space Inside Post”，指的是与“Space outside Post”形成对照的文本内部该模块元素间的留白尺度，只需填入相应数值即可调整。存档标题与文章标题，能够通过其右侧的铅笔符号来调整尺寸。

九、侧边栏选项

这个版块的配置操作比较容易掌握，在模块配置里“基础样式”选项下，提供了三种布局方案可供选择，分别是完全取消边栏，将边栏设置在页面左侧，或者设置在页面右侧。这个整体布局的边框配置，偶尔你会产生其他设想，比如在页面中希望采用左侧边框，在文章页面希望使用右侧边框，这种情况下就必须针对特定页面进行设定，在区块1的底部和区块2的位置，提供了页面、博客文章、存档三种不同内容展示页面的边框配置，依然和整体配置一样，包含左侧边框、右侧边框、无边框三种选项

区块3里的“旁边区域大小”能够借助滑动条或者具体数字来调整，用以确定旁边区域和主要显示部分在界面上的相对比例，假如决定不使用旁边区域，那么这项设定就无需进行。区块4里，"外侧边栏间隔"和"外侧边栏间隔"是用来调整侧边栏与主体部分之间空白距离的参数，大家可以在这两项中输入个人所需的数值。

假如同学们对编程有兴趣或者具备一定水平，能够前往主题编辑器对Astra主题的各类样式表和文件实施更进一步的编辑，注意：初学者切莫尝试触碰！