超详细10000+字的外贸建站教程，图文、视频兼备。除了域名和主机，WordPress主题、插件通通是免费版，零经验的你也能建个靠谱的外贸网站，只要肯花点时间照着步骤做就能行，我选用了大牌的Astra主题，速度快、质量有保证，配套的功能插件也都是选择了用户多、评价好的插件，对起步阶段的Soho外贸人很有帮助~
原文首发于：https://loyseo.com/create-business-website-with-astra/

• 域名费用：20~30元/首年，次年起50-60元/年

• 主机费用：400~900/年

• 主题费用：0

• 插件费用：0

• 教程费用：0

在用Astra主题建外贸站之前，先按照如下步骤逐一操作，点击链接可以查看对应教程。

1. 注册域名

2. 购买WordPress托管主机，在下面两篇文章中，我只选择了有服务器缓存配置的套餐，因为这会提升网站速度，而网站的速度对用户的流失率有很大影响。

1. 购买Siteground的WordPress主机的注意事项

2. FastComet主机介绍、优惠券、测评

Siteground是WordPress官方推荐主机之一，品牌和用户规模比Fastcomet大，两者的五星好评都是90%+，但FastComet比Siteground便宜，Siteground的管理工具更易用一些。

前往Siteground

3. 买完主机后，去主机上安装WordPress和SSL证书，教程如下

1. 如何在Siteground中创建Wordpress网站

2. 如何在Siteground中给WordPress网站安装SSL证书

3. Siteground主机

4. Fastcomet主机建站教程

5. WordPress安装完成后，你可以用账号密码登录网站后台，这里还有登录网站后台的4种方法

6. 安装完SSL后，还需要检查下url是否都改为了https，请看：将网站中的http改为https（2种方法）

7. 在网站完成以前，设置“建议搜索引擎不收录”。

好啦_{接下来我们便可以开始安装Astra主题，开始捣鼓网页啦}

Astra主题是知名的轻量主题，也就是说它的体积小、网站打开会比较快。网站打开速度慢，用户就都溜了溜了~

Astra免费版依旧提供了50+套免费的网站模板（真良心！），网站模板里会包含一个网站常用的必要页面。

若是导入失败，系统会给与原因提示及解决办法。

若是导入成功，但网站依旧不是模板的样子，那么请二次导入试一试。

• CartFlows和Woocommerce Cart abandonment recovery插件是随模板安装的B2C所需的插件，如果你是制作B2B站点，可以将他们禁用后删除。

• 1. 上传logo，最好用透明的png格式图片，不超过20K。

  2. 设置logo的宽度，在图中我们能看到一个小电脑图标，点击它可以切换到平板、手机设备上的logo宽度设置

  3. 网站标题一般会展示在每个页面的标题中，而tagline一般展示在首页的页面标题中。

  4. 2是网站名称（site title）

  5. 3是tagline

相关教程：WordPress安装后必须要做的10件事

相关教程：如何在WordPress中制作导航菜单（7个功能点），你可以按照这个片教程给菜单内容进行增加、修改、删除、排序。

• Essential Addons for Elementor：Elementor的元素扩展包，包含了产品、文章、Ninjaforms表单等元素块，Astra免费版和Elementor免费版都不提供这类元素块，网站模板里是使用Woocommerce简码实现的产品展示，不利于我们设置。

• Elementor – Header, Footer & Blocks：用它能用Elementor免费版制作网站的页头、页脚，这个插件在导入模板时已经自动安装了

• Ninja forms：实现询盘表单

• Post SMTP：实现询盘邮件通知

• Custom Product Tabs for WooCommerce：实现产品页面询盘表单标签页

• Code snippets：可安装功能短代码，譬如：安装google analytics跟踪代码、更换站点管理员地址

• Wordfence：实现网站安全防护

• WPS Hide Login：自定义网站登录地址

部分插件此处未提及，在下文中介绍到对应功能，再安装即可。下文我们会逐一介绍这些插件的使用教程以及用处。

插件安装完成后，按如下两篇教程给网站增加安全防护。

• WordPress网站安全防护：Wordfence Security插件下载与教程

• 修改Wordpress登录地址：WPS Hide Login插件下载与教程

本教程选的模板中缺少了联系表单，我们要将它补充完整，请按下面的教程逐步完成操作。

1. 用Ninjaforms添加联系表单

2. 创建免费的企业邮箱

3. 用Post SMTP配置询盘通知邮件和记录邮件发送记录

接下来，我们将表单放入到联系我们页面中

这套网站模板缺少了博客页面，博客页面可以用于发布产品相关的知识文章、公司动态等，如果不想写博客，emm，那网站收获询盘的可能性就低了许多，你看我们平常买一些大件，也会多方看评测、知识型文章，而这些文章就在潜移默化中决定着我们的购买意愿。

接下来进入具体操作，提供两种解决方案，一种是用Elementor制作博客页面，这种方法复杂一些，不过能学到元素的使用方法；另一种是用主题自带的博客列表模板，这种方法简单，这两种方法你都看一下，因为在第二种方法里介绍了博客详情页的显示项与侧边栏的配置。

1. 在后台，找到菜单pages》add new，点击进入

2. • 如何在Elementor中修改文本的字体、大小、颜色、样式

   • Elementor的Advanced高级设置教程（18个功能点）

   • Elementor的全局样式与设置

   • Elementor主题样式设置详解

   免费版的Astra也提供了基础的博客页面设置功能的

   1. 在后台，找到菜单pages》add new，点击进入

   2. 输入页面标题Blog，然后直接发布保存

   3. 接下来我们再去设置一下博客页面和博客详情页面的侧边栏，侧边栏一般放博客的分类、搜索框、最新博客文章等等，方便用户使用。

      记得将博客页面添加到网站菜单中哦~

      这个模板本身已经提供了产品列表和产品详情页，我们先参照博客侧边栏的配置方法，给产品列表页与产品详情页添加右侧侧边栏。

      目前产品页面没有询盘联系表单，我们需要借助插件Custom Product Tabs for WooCommerce，先用它添加一个标签页，放入之前在Ninja forms制作的联系表单的短代码（shortcode），然后在添加产品时加入这个标签页即可，具体操作步骤如下：

      此时我们要用到code snippets插件，请先学习一下如何添加短代码，然后添加一个新的短代码去掉woocommerce产品列表页自带的面包屑，代码内容如下：

      细心的你可能发现我的页面上是有product tags，而你那儿可能没有，那你去修改一下几个产品，在快速编辑或者编辑产品页面的右侧都能找到标签。

      添加产品功能与添加博客文章的功能是类似的，我就不写图文教程了，附一个视频教程吧。
      <iframe frameborder="0" height="400px" src="https://v.qq.com/txp/iframe/player.html?vid=t315323dr96" allowfullscreen="true"></iframe>

      • 如何在Elementor中修改文本的字体、大小、颜色、样式

      • Elementor的Advanced高级设置教程（18个功能点）

      • Elementor的全局样式与设置

      • Elementor主题样式设置详解

      查看更多Elementor教程，其中有部分教程是针对Elementor Pro的，若是在使用免费版的Elementor时提示你升级Pro或未显示视频中的操作的功能，就表示是Elementor Pro的功能，需要付费购买。

      Astra的这套模板的页脚是用插件Elementor – Header, Footer & Blocks制作的，页头是用的Astra本身自带的功能。页脚的编辑方法与页面编辑方法无差异，详见下方视频。
      <iframe frameborder="0" height="400px" src="https://v.qq.com/txp/iframe/player.html?vid=w315397ymqt" allowfullscreen="true"></iframe>

      在免费版的Astra里是不提供页面上的返回顶部按钮的，有如下两种方法：

      1. 用Elementor制作WordPress网站的返回顶部按钮（3分钟解决），这个方法比下面的方法复杂一些， 但可以少装一个插件。

      2. 请按照如下教程逐步操作

         1. 给网站安装Google Analytics跟踪代码

         2. 给网站开通Google Search Console

         3. 将Google Analytics关联Google Search Console

         4. Rank Math SEO设置教程

         5. 你的网页如何在Rank Math SEO的测试中得到100分

         我们需要用工具Gtmetrix测试站点的速度，并进行速度优化，尽量优化到加载时间在3S以内，优化教程请按如下子教程逐一实施

         1. 优化图片，在上文中已经介绍了图片的优化办法，此教程中做了一些补充扩展

         2. 针对使用Siteground建站的情况，可以使用SG Optimizer加速网站，我实测后，发现效果不理想（优化前后差距很小），我觉着最好用易用的还是付费使用WP Rocket加速网站，如果你不想购买这个插件，也可以微信联系我获取正版分享。

         3. 实施CDN，每个主机的CDN不尽相同，大多用的是免费的Cloudflare。

         1. 如果在Sitegroun建站，请看：在Siteground给网站启用Cloudflare CDN

         2. 如果你的主机用的是Cpanel主机面板，譬如FastComet，可以参考这篇文章：如何在GreenGeeks给网站开启Cloudflare CDN，如果开启过程中遇到问题，咨询主机客服即可。

         完成上述内容后，站点可上线，开放收录吧、