点击联系发帖人WordPress 外贸建站图文教程。外贸自建站很难吗？当然不。我们用 Avada 主题零基础 3-7 天学会 WordPress 建立外贸 B2B 英文网站
在阅读这篇文章之前，希望你已经阅读完了这两篇文章：
当安装完 WordPress 之后，接下来我们要熟悉一下 WordPress 的基本用法。
鉴于料网的读者有虚拟主机建站也有 VPS 建站，有些步骤 VPS 建站也适用，比如 WP 后台的设置，设置固定链接格式，WP 主题使用，网站结构设计以及其他的一些建站步骤等等。
因此每一步我会列出仅适用于 虚拟主机建站还是同时都适用。以 SG 代表 虚虚拟主机，SG/VPS 代表都适用。
当前面的一些步骤做完之后，后面到具体建站步骤的时候就不用分虚拟主机和 VPS 了。
一、设置对搜索引擎不可见 (SG/VPS)
这个应该第一步去做的。在 WP 后台左侧的功能菜单中，找到 Settings – 【Reading】 选项：
当你的网站还没有建好之前，建议不要鼓励搜索引擎来爬取。因为可能你的页面结构还会反复改动，页面还没有建全，关键词布局还没完成，甚至基本的 SEO 还没设置。考虑到这么多的因素，建议在建站期间，把这个“建议搜索引擎不索引本站”给勾上。等你完全建好，再把这个勾取消，并用谷歌站长工具 (Google Webmaster Tools) 自己去主动提交网站即可。
以前谷歌站长工具叫 Google Webmaster Tools，现在改名为：Google Search Console。通过这个工具你可以手动提交网站到谷歌，并且监测你的网站在搜索引擎中的显示效果，并且跟踪访客是如何通过 Google 搜索来找到你的网站的。
说明：如果你没有稳定的上外 W 网工具，那么可能操作 WordPress 建站感觉会有点慢。因为 WordPress 程序默认前台和后台都调用谷歌的字体和 Ajax 库，而国内 Google 被墙了，所以速度比较慢。 请自行解决工具问题。建站时如果不需要频繁访问国内网站的话，开全局模式速度会快很多。
在安装 WordPress 时，我们随意填写了一个 website name/title。现在你可以想想，网站的标题要显示什么？
当然，由于现在暂时没有对搜索引擎开放索引，你也可以暂时不考虑这里 website title 怎么写才好。
到后面，我们说到网站的关键词布局策略时会再次提到网站标题怎么确定。但记得这里的字符数不要超过 58 个英文字符。对于谷歌搜索引擎，超过 58 个英文字符都属于过长的标题，不利于谷歌排名。
在标题这个部分，建议把重要的关键词往前放。标题也不用写老长的英文公司名称，别这么死板。标题这个“金贵”的地方用来写英文公司名称还是稍显有点浪费字数空间。
建议多参考一些行业内的知名客户、品牌客户以及你熟悉的客户网站的标题是怎么写的。
下面第三步是卸载 Bluehost 自动安装的插件。这是以前用 Bluehost 时写的。现在都统一推荐用 虚拟主机（或 Linode VPS）了，所以下面第三步请跳过。
如果你用的是 虚拟主机，注意参考这一步骤。如果不是，则忽略第三步。
Bluehost 带的 MOJO 插件太流氓了，左侧顶部嵌入了 Bluehost 菜单不说，有它在，你都无法正常搜索 WordPress 中的插件。如果你不停用这个插件，你会发现很多大名鼎鼎的 WP 插件你在 Plugins 下就是搜索不到，其实这些都是 MOJO 搞得鬼。而且 Plugins 选项卡硬是比正常的 WP 多了个【premium】选项（付费），点击，就出现一堆
图为输入 database，竟然一个插件都没搜到，当时我就震惊了。另外，选项卡中 Favorites 右边多了个 Premium。。点击以后，立即会转到左侧菜单的 Bluehost 菜单下。
说真的，这两年 BH 推自己的 MOJO Marketplace 真是用尽了手段。别光顾着竞争，稍微考虑一下用户体验吧！
顺便把 Jetpack 也删除，这插件没什么卵用。
建站新手比较推荐使用 主题。之前写过一篇 WordPress 英文主题的比较的文章：
总的来说 面面俱到，容易上手。 虽然运行起来比 Avada 稍微快一些，但是缺点是设置不像 Avada 那么丰富，并且有的地方需要写一些 custom css 来达到必要的效果，所以新手来说还是用 Avada 更适合一些。还有一个主题 ，也挺不错。
还是主要说 吧，作为全球销量第一的 WP 主题，国内英文建站的用户数也是非常多的。我强烈建议你们买正版的主题，在 上买，这是非常值得花的钱，不用我多说了。
说明：如果自己没买主题，有其他人买了正版 Avada 主题分享出来，你装上也能凑合用，只是无法自动升级主题。另外，Demo 不能用，LayerSlider 这个组件也无法自动升级。所以如果你觉得打死都不可能再升级主题和相关组件插件，那么就用别人分享的主题也可以，否则还是建议自己购买正版主题。
访问 上的 主题页面。（如果你没有注册过账号，还是需要先 的）
打开主题页面之后，会发现右侧有个 Buy Theme 的按钮。别急着点击，在上方，还有个蓝色字体的链接 more ↓ 。
通常 Avada 主题默认的作者技术支持期限是 6 个月。如果你要延期到 12 个月，那么就多付 18 美金。至于是否需要延期，这个就见仁见智了。
如果你最近建站时间比较紧，不一定会在近期完成建站，那么你可以延期到 12 个月保险一点。如果你最近就忙着建站，有时间好好把网站做一下，那么这里的话默认的 6 个月也够了。
另外，Avada 建站的一些常见的小问题，你可以自己百度，我有空也会整理出来。
下一步，来到购物车，准备结账付款。
作为外贸人，通常信用卡和 Paypal 都是很容易搞定的！如果你还没有外币信用卡，那么用 Paypal 也可以（可以绑定国内银联卡），这两种方式都会收取 2 美金的额外手续费。
支付成功之后，界面如下：
整个压缩包大概有 200 多 M，耐心等吧。
要想快的话，代理模式和代理规则用全局模式，速度可以跑到 2-4 M/s，几分钟下载完。
下载完压缩包之后，本地解压。在主题文件夹下找到 Avada 和 Avada Child 压缩包。一个是主题压缩包，一个是主题的子主题压缩包。
当你使用主题时，必然会根据一些需要做一些修改。好不容易修改折腾好了，而主题升级版发布了。要不要升级呢？如果升级，那么修改的文件要先做备份，否则就白修改了，主题升级之后会覆盖掉之前的文件。所以备份了修改后的文件，然后再次去在升级后的主题文件中修改一遍。很麻烦！因此就有了子主题。
如果你偏好带有多一行顶栏的布局，那就选择第 2 或者 第 3 个 layout 都可以。
比如我们选择第 2 个布局，然后在下方还有这么几个选项：
然后点击 Save Changes 按钮，然后刷新首页，你会发现首页没有发生任何变化，并没有多出一行水平的顶栏。这是因为，你并没有去创建一个显示在顶部的 Top Navigation，并且你也没有去填写过任何 Social Links，所以任何信息都不显示出来；如果你在 1 中选择 Contact Info，再保存，刷新首页，就能看到多出一条顶栏，并且在 1 的位置有显示 Contact Info，因为在上面设置里，有默认已经填写的 Contact Info 信息，所以显示出来了。
接着，我们做一系列样式设置。打字好累，看图来做吧。
把这个调到 0，这样导航上方的小横线就没有了。
接下里设置导航菜单的字体：
Footer 部分的设置和调节主要是通过两个地方：
- 1）不添加 Tags 的这一行锚文本了，只显示 Copyright Text 就好，为了简洁做个取舍。 如果我们 Header 的 Layout 选择的是有顶栏的，而且顶栏中我们放了 Social Icons 的话，底部这里也可以不放。那么自然 Tags 就会处于上图中 1 的位置。这样就简洁好看多了。
比较亮的一点是，这里还在 Footer 里添加了一个 Background image，就是那个隐约的地图。
还是看需要来设置。我们来到【Appearance】- 【Widget】，点击：
左侧是我们可以选择的所有小工具，我们各选 1 个，放入 4 个 Footer Widget 中。
废话不多说，我们 1 个个来。
进行一下样式设置。然后我们刷新首页，看看页脚：
OK，footer widget 1 已经设置好了。不过好像文字的颜色有点暗，设置一下 Footer Font 的颜色，选个更浅的颜色即可。
可以看到，1 正常，3 正常（但是等会要重建立一个菜单替换掉这里显示的 top menu 里的菜单），2 不显示，4 显示格式不正确（不换行）。
哎哟，写得好累，编辑得好累，后悔了，好多细节写文字好累，还不如做成视频讲解，会简单很多。
好了，吐槽了一番，休息了一会，继续来写。2 的问题是因为，我们还没创建产品（详情）页。一旦我们建立了产品页，这里才会显示产品的缩略图，所以这里暂时为空是正常的，不用担心。
多说一句，我们需要使用 Theme Options 的搜索功能，这个搜索功能很多时候能帮我们迅速找到所要修改的项目。比如你想改某个地方的颜色，又不确定是在哪里设置，那么输入 color 就会出现所有的关于颜色的选项，还是非常实用的搜索功能。
比如我们之前尝试修改 Footer 里面文字的颜色，这里我们在搜索框内输入：footer font
此时你需要想想，Footer Menu 你想展示什么内容。这个 Footer Menu 里可以是 Post (某篇 blog 文章), 也可以是 Page (某些页面)，也可以是一些站内站外的链接，都可以。
比如，我想要展示的是：Sample Policy, Videos, Download, FAQ, Request A Quote 这 5 个页面的 Menu，那我要做的就是先创建这 5 个页面，哪怕这些页面内容是空的没关系，后面再去填充内容和素材。创建好页面后，重新刷新 Menu 页面，然后添加这几个页面。
刷新首页，查看 Footer，OK！似乎一切顺利！不过，有两个地方我仍不太满意。
第一：Footer Widget 3 的 Menu 菜单我不想要这个底部边框线，而且每个菜单项的填充值太大，整体下来只有 5 个页面而已，就显得特别高了。想办法做一些修改。
保存。我们刷新首页，现在 Nice 多了。整体的高度也往上减少了不少，看起来比较和谐。
很多主题无法设置的问题都可以通过 Custom CSS 来解决。对于这些基本的 CSS 代码，不要紧张，该用就用，写错了也不要紧，修改掉或者删除掉即可。我开始学习 CSS 还是 2005 年，到现在依然可以说是外贸人当中 CSS 应用得最熟练的。
第二：最底部的 Copyright 文字要改掉。
我们直接在 Theme Options 搜索框里输入：copyright。可以找到在 Footer Content 中我们可以设置版权信息。如下面截图中这些选项：
只需要在 Copyright Text 中需改内容即可。多说两句，其实这里可以放置一些主要产品的锚文本，更利于 SEO。
有好的方式我们可以借鉴。于是我们在 Copyright Text 里这样填写：
我们先用了 3 个锚文本 Product1, LedBulb2, Special3 来占位。等我们后面产品页做好以后，我们再修改具体的链接和锚文本文字。
保存。刷新网页，可以看到这下 Footer OK 了。
上面截图上，我们添加的 Tags 锚文本，由于最右侧有 Social Icons，所以位置处于中间，这就有点不够简洁了（有些人可能不觉得）。
如果你觉得不够简洁的话，我们有三个选择：
或者，如果你嫌麻烦，那 4 个 Footer Widgets 里面把第 4 个做成搜索框也行。如这样的：
具体怎么选择，随便大家了，毕竟思路也给了。Footer 呢暂时就先写到这了。感觉写得太详细的话这篇可能永远写不完了……
其实底部的 footer widget 有很多种不同的考虑。有人只用 3 个，有人用 4 个。有人建站的同时会做内容营销，会写博客，那么 Footer Widget 里会用 Recent Posts 来显示最近的几篇博客文章。具体放置什么内容，还是看你的需求，不要太局限于教程。
二十三、LOGO 设计
当你已经初步入门并且找到建站的感觉之后，可能你最想换掉的就是 Avada 的 LOGO 了。
LOGO 有两种方式：
1）可以在谷歌上搜免费 LOGO 制作工具，如
关于网站 LOGO 的设计我强烈建议应该外包。引用好友 tudou 的一段话：
不要自己设计 Logo ，除非你是设计师，或者你的网站像个博客一样无关紧要。
即便是普通的设计师，在配色、联想、运用设计工具上也比普通人要熟练的多，做出的 Logo 更好看，放在网站上直观的感觉就是更有设计感，更“高大上”。
选择自己设计 Logo 或者使用在线网站生成 Logo ，通常没注意到一个山寨气息浓厚的 Logo 对网站整体设计的严重破坏，更没意识到 Logo 对品牌建设起的重要作用。Logo 可以用在很多地方，不仅仅是名片，信纸，产品画册，工作服，挂牌等方面……
新创建的产品，URL 里会自动带有 portfolio-items。这个在访客浏览我们产品页的时候，体验肯定是不好的。我们怎么修改掉呢？
此时，我们再点击 WP 左侧的 Portfolio 菜单，来到 Portfolio 列表中，随便选择一个 Portfolio，鼠标移到 view 上去以后，然后看浏览器底部状态栏的链接地址。
此时再重新刷新 products 页面。OK 顺利解决！
如果你不需要显示相关的产品，可以让这个 Related Projects 模块不显示。
当然，很多人都希望显示以增加访客访问页面数量，增加停留时间，所以一般情况下我是让它显示的。
随便打开一个文件，然后使用搜索功能。
这不太好，因为没有体现 products 作为父级。此时，在 WP 后台的 Page 列表中，也体现不出来这两个分类和 Products 这个汇总有什么关联。
OK，此时 Page 列表中则体现了级别关系：
这样，分类结构的建立才算完整了。
此时，这两个分类的 URL 是这样的：
而且，这个页面打开，就产品特色图片，而且可能排列还比较乱。
谷歌把 portfolio category 页面给收录了，其实这些页面是不需要展示在网站上的。因为我们建立分类的时候，先是建立了分类的 portfolio category，同时建立了展示这些分类产品的 page。我们希望给访问者展示的是这些 page，而不是 portfolio category。
可以看到，由于我们选了禁止搜索引擎收录，所以有一行 Disallow: / 的记录。等我们网站建好，我们要在 Settings – Reading 里取消勾选禁止搜索引擎收录，并且在 robots.txt 里把 Disallow: / 这一行删除。
这样即使后期我们放开搜索引擎抓取，我们也可以保证谷歌不去抓取 portfolio category 页面。
说明：关于 robots.txt 的设置，我们这里先简单提一下，后面建好网站后还需要加不少规则，到那时我们再专门说。
三十一、安装图片压缩插件
非常有必要安装一下图片压缩的插件，能大大地给图片文件瘦身，也可以加快页面加载速度。推荐 TinyPNG 出品的这个插件：
首先我们要在纸上或者电脑上画出大概的布局框架图。
比如，像我这样对 Contact Us 页面做个原型图布局。你可以在白纸上画画，也可以用一些在线的原型图工具，比如我用的是 wireframe ( )
首先我们要找一个宽度足够大的 contact us 图片。如果我们网页主体宽度为 1100px，那么这个图片的宽度最好大于 1100px。
OK，先添加这两个 Container，然后保存网页。刷新页面，可以看到已经显示 OK！
BTW: banner 图片我随便找的，也没怎么做 PS 处理，就随便演示一下。可以用 Photoshop 在图片上添加一些 Contact Us 之类的文字什么，大家自己去弄吧。
还差最后一个复杂一点的两列的 Container 怎么来做，我们下面来讲。
三十三、联系表单如何制作
接着要说怎么添加联系的表单了。一般联系的表单是用 CONTACT FORM 7 插件来做。
然后保存。保存完毕之后，在表单列表中有这么一条记录，复制 shortcode。
在左边的 1/2 部分点击 + Element，然后选择 Text Block，然后在编辑器内粘贴上面复制的短代码。
右侧的参数设置好之后，点击左侧的内容列表。点击编辑按钮，进行编辑。
OK，搞定！我们来看看效果：
我们还可以让这个联系表单外观更简洁一些。
编辑 “My Contact Form”，在 Form 选项中把所有的代码替换成下面的代码，保存。
接下来的工作，就是要让这个联系的表单起作用，让任何访客发的邮件，可以自动发到我们的企业邮箱中去。
点击 【Form】选项卡，设置邮件转发。
1）如果你是 SiteGround 虚拟主机建站，Contact Form 7 的设置以及收发询盘/留言邮件，请参考这篇文章，写得挺详细：
2）如果你是 VPS 建站，Contact Form 7 的设置以及收发询盘/留言邮件，请参考
三十四、网站首页内容丰富
本文篇幅太长，图片太多，十分耗费服务器资源。已经另开一篇，欢迎继续阅读：
本站所有文章除注明“转载”的文章之外，均为原创。未经本站允许，请勿随意转载或用作任何商业用途，否则依法追究侵权者法律责任的权利。
