你好,欢迎来到阿里巴巴外贸圈 注册 登出
cn1001639997
名人堂名人
名人堂名人
  • 用户名cn1001639997
  • 粉丝19735
  • 发帖数994
  • 铜币11356枚
  • 威望35点
  • 外贸达人
  • 社区明星
  • 问答帮帮团
  • 忠实会员
  • 社区居民
阅读:37829回复:237

[料神SAM]【老鸟之路56】最强实践!外贸B2B自建站完全图文教程!

楼主#
更多 发布于:2019-05-07 12:13
作者丨料神Sam(v信:liaosam36)
来源丨料神米课(已帮助10万+外贸人)

图片:b2b-new-website.png



虽然众多企业和外贸 Soho 都开通了阿里巴巴平台账号,通过阿里平台获取了不少询盘。但在如今全网营销时代,自己的独立网站的建设也一样重要。

除了维护和经营阿里巴巴平台之外,我们还要去学习主动开发客户。最常见的:Google开发+SNS开发+海关数据+独立网站+邮件/电话/展会。

网站是主动开发客户的一张名片。就算你开发信写出花来,没有一个企业英文网站,在这个时代,任哪个国外客户谁也很难信任,毕竟这个时代了连个像样的网站都没有,是不可理解的。



网站有时比开发信更重要,是更丰富的第一印象,也是建立初步了解和信任度的工具。

一、外贸B2B建站新手指南

说到建站,总有人认为不是外贸人应该做的事情。他们认为外贸建站很复杂,总会联想到程序、数据库、网页设计等方面。对于外贸人来说难度比较大,应该去找建站公司来做,因为建站公司更专业。

这些人从来没有接触过自己建站这回事,没动手实践过,所以总迷信建站服务公司有多专业。于是建站公司的业务不断拓展,从建站到网站优化,再到搜索引擎SEO优化,一路下去,几万块也只是听了个响。


外贸建站其实很简单

外贸上的建站很简单,因为基本不需要去开发,利用现成的开源网站程序,购买和注册好域名,购买好主机空间,就可以搭建出一个基本的网站框架来。然后再安装一个主题,稍微优化一下即可。特别是 WordPress 建站,有各种各样的网站主题和插件,你可以很方便地选择安装,打造自己的网站。从我的建站经历来看,只要素材准备充足,英文网站 2-3 天就可以建好了。反而非外贸的网站建设得慢一些,因为很多功能需要开发。

市面上有很多建站公司,其实也是流水化作业。建站也是用现成的程序套上模板,有认真的就帮你认真改改,不认真的弄得差不多也就交差了,但收费却是非常高的。很可笑的是不少外贸 soho 给我看他们从建站公司做的网站,有些还停留在十年前的水准,更甚至有些连基本的 SEO 功能都没有,收费还要三四万。

还有一类建站公司,给你建好网站之后,源码不提供给你,并且每年还要你缴纳网站的维护费用。其实这些源码他们都是用建站系统自己改了改,提供给你以后怕你有懂行的朋友看出来。有些可能的确是自己投入了人力开发的,但你想想,如果这些建站公司真的技术过硬,直接用加密技术,每年对域名或者账号授权即可。所以说,在外贸建站这个行业里,充斥着太多中低档水平的建站技术服务又收取着高昂的费用。

其实外贸 soho 或者企业自己建站,并不困难!按照本教程来做,基本不会走太多弯路!


外贸建站的成本

时间成本这个没法统一,因人而论。可能新手建站会慢一点,一周到半个月甚至一个月都有可能。有些可能还是强迫症,不断修改,那么可能更久。我们说说经济上的成本支出:

域名(国外域名商很便宜,折算人民币一年50元左右)+ 美国主机 500元/年(5.95美金/月)+ 可能你会买的付费主题或者插件 400元(一次性投入。分摊到每年更少)= 950 元左右。

如果你需要独立 IP,那么再算上 200左右就足够了。看吧,总共也就 1千多块。


外贸建站需要准备哪些?

本部分内容设定了隐藏,需要回复后才能看到

有些朋友可能还不清楚一些基本的概念区别,这里再重提一下:
域名:相当于地皮/地址。稀缺的域名就像稀缺的地段一样,也很贵。
网站:相当于房屋大楼。
建站程序:相当于快速专业的建筑施工队(而 WordPress 就是非常出名的建站程序之一)。
Wordpress 主题:相当于装修方案。

OK,你可以看到,所有你需要准备的工作就是,想几个备选的域名,准备好基本的网站素材,准备好 money 就可以了。其它的东西都很容易搞定!

外贸建站的步骤

1. 网站域名
提示:外贸圈论坛的外部链接跳转可能有点问题,请复制链接地址在浏览器打开。

2. 虚拟主机 (virtual host) /虚拟服务器 (VPS)


为了降低建站难度,推荐使用虚拟主机。虚拟主机就相当于是开发商预先给你精装修过的房子,你拿到房子直接住就可以了,无需去考虑装修等事宜(即无须再去安装环境和配置基本设置等)。

在虚拟主机中,推荐使用 SiteGround (https://www.siteground.com/go/noredirect)。这是一个非常知名的美国主机服务商,也是 WordPress,Drupal, Joomla, Yoast SEO 等知名程序官方网站以及SEO插件商重点推荐的主机商。

Siteground WordPress主机能够让你的网站打开速度更快!SiteGround 使用 SSD 固态硬盘,wordpress一键安装,你还可以获得免费的SSL正书,Cloudflare CDN,DDos保护,恶意软件扫描。

3. 数据库

通常现在建站使用的都是 MySql 数据库。虚拟主机的主机商的后台操作面板一般都集成了 MySQL Database, PhpMyAdmin 等数据库软件,操作起来也很简单。

4. 网站程序
外贸 B2B 自建站选择 WordPress 的较多,外贸 B2C 跨境电商自建站一般会选择 Shopify, Magento 等。不过也可以用 WordPress,然后安装 WooCommerce 插件即可创建商城。
这些程序都是开源的,你都可以到相应的官网下载到。
各版本下载地址:https://wordpress.org/download/releases/


5. 文件传输工具(上传/下载)

把 WordPress 程序上传到虚拟主机上,这个过程需要差不多 5-10 分钟。一般要使用一些 FTP工具,如 FlashFXP。

注意:如果你用 SiteGround ( https://www.siteground.com/go/noredirect )  虚拟主机,可以忽略 4. 5 两部分。后台面板已经自带一键安装 WordPress 的功能,无需下载上传 WordPress 程序。


6. 安装建站程序

在之前域名已经解析好,直接访问域名进行程序安装。
注意:尽量使用 SiteGround 建站,可以后台直接一键安装 WordPress


建站主题的选择

我个人比较喜欢 AvadaBethemeEnfold
如果你点击无法完成跳转访问,那应该是外贸圈论坛阻止了外部网址跳转。

如果你需要正常访问,可以看这个系列教程的原文地址:
https://www.liaosam.com/guide-for-website-building.html
https://www.liaosam.com/wordpress-build-website-operation.html
https://www.liaosam.com/wordpress-build-website-operation-part-2-html.html

Avada 在 ThemeForest 上的销量一直保持第一,足以说明它的优秀。Betheme 很全面,并且操作界面非常友好。Enfold 也是一款非常不错的主题,配色偏浅,没有 Avada 那么多炫目的功能但是足够用,SEO 也十分友好。
但是 Enfold 对新手来说不算特别友好,设置选项偏少一些,一些方面的修改可能需要代码。所以,对于建站新手,更推荐 Avada 或 Betheme。
关于 WordPress 主题的比较请看这篇文章:Avada & Enfold & Betheme:最棒的三个外贸建站英文主题
我建议大家在 Themeforest 上购买正版的英文主题。原因有二:
  1. 百度上搜索到的汉化版免费破解版,以及一些群里分享出来的主题文件包一定要留心,很多存在后门等恶意程序
  2. 正版的主题支持不断升级优化
怎样开始?

如果你有建站的想法,或者想练练手,不要拖延,现在就可以尝试了。
首先去 Namesilo 注册个域名,然后再去 SiteGround 购买 GrowBig 方案的主机。购买虚拟主机之后,把 Namesilo 的 NS 解析服务器改成 SiteGround 的 NS。


为何需要修改成SiteGround虚拟主机的 NS?

本部分内容设定了隐藏,需要回复后才能看到

域名正常解析后,恭喜你,你已经跨出了重要的一步。下一步,你就可以开始准备安装 WordPress 了。SiteGround 可以一键安装 WordPress。

有些人觉得 WordPress 建站页面响应慢,加载时间长。其实主要是因为 WordPress 默认调用谷歌的字体和 Ajax库,而谷歌被墙了,所以导致你觉得网页加载速度很慢。

这其实很好解决,在建站期间,如果你有比较稳定好用的 FQ 工具,那么你可以直接开着工具下操作,可能速度会快一些。

SiteGround 虚拟主机方案选择与购买

SiteGround 成立于2004年,它是同时被 WordPress,Drupal,Joomla 三大 CMS 程序推荐,是国外主机行业唯一一家获三大主流程序商推荐的公司。SiteGound 开发了自己特有的 SuperCacher 缓存加速,专门对 Wordpress,Drupal,Joomla 进行了速度优化。
个人认为 SiteGround 比常见的 Bluehost 好不少!

图片:siteground-wordpress-hosting.png



Siteground WordPress 主机能够让你的外贸网站打开速度更快!
当 Bluehost 还在用 HDD 的时候,SiteGround 已经开始全面使用 SSD 固态硬盘。支持 PHP 7 和 HHVM 等。
此外,你还可以获得免费的SSL正书Cloudflare CDNDDos保护,恶意软件扫描,wordpress一键安装,自动更新。30 天内退款,免费每日备份免费网站搬家

访问 SiteGround 官网购买,获取免费SSL正书+CDN加速:
https://www.siteground.com/go/noredirect

数据中心覆盖:

  • 美国芝加哥(覆盖:北美、南美、非洲)
  • 英国伦敦(覆盖:欧洲、俄罗斯)
  • 荷兰阿姆斯特丹(覆盖:欧洲、俄罗斯)
  • 意大利米兰(覆盖:意大利、欧洲)
  • 新加坡(覆盖:澳大利亚、新西兰、亚洲、南太平洋区)
SiteGround 价位适中,没什么隐藏的费用和扣费。目前,SiteGround 虚拟主机有三种方案,分别是 StartUp、GrowBig 和 GoGeek 方案。
  • StartUp 方案 3.95 美元/月,只能绑定一个域名,10G 磁盘空间,支持最多每月10000名左右访问用户。
  • GrowBig 方案 5.95 美元/月,不限绑定域名个数,20G 磁盘空间,支持最多每月25000名左右访问用户,CPU 是 StartUp 的一半。
  • GoGeek 方案 11.95 美元/月,不限绑定域名个数,30G 磁盘空间,支持最多每月100000名左右访问用户,支持高级扩展功能。
您可以点击此处访问 SiteGround , 打开官网主页之后点击上方的 Hosting。有 Web Hosting 和 WordPress Hosting,任选一个,价格是一样的。

方案选择中间的 GrowBig。

图片:siteground-plan-pricing.png



SiteGround 购买注册

说明:SiteGround 无需FQ访问。购买前注意要先检查你是否开着科学上网(SSR等)工具,如果开着请退出。或者如果你在用全局模式,请切换到 PAC 模式,不然的话网页会显示错误,并且可能会购买失败。
因为你的国家填的是中国,但是科学上网之后用的是其他国家的IP,这样会被判定为有风险,所以要注意自己的 IP,最好先访问 www.ip138.com 测试一下你的 IP 是国内还是国外的。

访问 SiteGround 官网https://www.siteground.com/go/noredirect

如果打不开网页,请刷新试试。确实打不开的话,如显示如下界面:

图片:dns-problem.png


很可能是本地的 DNS 的问题。你可以左下角点击开始菜单,控制面板,找到“网络和共享中心”。选择“ 更改适配器设置”。在你当前的连接种,电脑有线连接的就是“ 本地连接 ”(或电脑无线连接的就是“ 无线连接 ”),然后右键单击图标选择“ 属性 ”。在新打开的窗口中,选择“ Internet 协议版本 4(TCP / IPv4) ”双击。
在新窗口中的 DNS 服务器那里,选择“ 使用以下DNS服务器地址 ”选项,然后,输入 8.8.8.8 和 8.8.4.4(谷歌的 DNS。或者 114 的 DNS 地址 114.114.114.114,114.114.115.115)。
点击确定。然后,在命令提示符里,输入:ipconfig /flushdns,回车,刷新 DNS 缓存。

图片:flushdns.png



此时再访问,应该就没问题了。
SiteGround 首页【hosting】下,可以看到有 Web Hosting 和 WordPress Hosting。


图片:siteground-step8-hosting-choice.png


说明:web hosting 和 wordpress hosting 这两者并没有太大区别。后者是专门为 wordpress 纯新手提供的主机方案,配置两者是一样的。
wordpress hosting 只是考虑到用户要用 wordpress,因此挑选了一些免费的主题,提供了快速安装 wordpress 的服务,提供了一些 wp 插件工具。但是大多数默认安装的工具是多余的,不是最佳插件。
如果你用 wordpress 建站,选择前者还是后者都是可以的,价格都是一样的。一般熟练的 wp 建站者会直接选 web hosting,外贸建站新手可以选择 wordpress hosting。本文也是按照 wordpress hosting 来写安装步骤的。


我们点击 WordPress Hosting,选择 GrowBig 方案,点击 GET STARTED 按钮。
来到产品选购页面:

图片:siteground-step-1-plan.png



不要选择 Register a New Domain,在 SiteGround 注册域名要 $15.95/year,太贵。实际上,一般都不建议在主机商那里注册域名,即使第一年费用低一些,后面续费费用都很高,很不划算。
所以域名都是推荐在 Namesilo 购买注册。我们选择已有域名 I already have a Domain.

图片:siteground-step-2.png


填写你在 Namesilo 注册的域名。还没注册的,可以参考这篇:英文建站必备:Namesilo 购买注册流程

然后点击 proceed 继续,填写账户信息:

图片:siteground-step-3.png


尽量如实填写,然后在下面填写信用卡信息:

图片:siteground-step-4.png


注意:在购买期限(Period)这里,首次购买的话,优惠折扣力度很大。过了你购买的期限,续费(Renew)时,价格会回到正常价格。

你可以改变不同的 Period,看看优惠价格和正常价格,正常价格就是优惠期过后正常续费的价格。

这里一般我们选择购买 2-3 年比较合适。尽量买3年(36 months),因为续费会回到 19.95 的原价。


图片:siteground-step-5.png


注意:SiteGround 不支持 Paypal 支付,只支持信用卡。如果你还没有双币信用卡,建议去银行柜台办一个。
Data Center 的选择:如果你的产品市场覆盖全世界几个主要市场,就选择美国Chicago;如果主要面向亚洲市场,就选择新加坡。

OK,付款完成后,你的手机会收到一条通知短信,信用卡发生一笔付款。

然后会跳转到页面告诉你,账户已经成功创建了。并且会给你的邮箱发一封邮件。

图片:siteground-account-ok.png


点击 PRECEED TO CUSTOMER AREA,会来到登陆页面。
输入你注册的邮箱地址和密码,登陆。

初始化账户

登陆之后,会提示你 Set Up Your New GrowBig Hosting Account。出现如下提示 Set up Your Website。

如果你是新创建网站,则选择 Start a new website。如果你要把旧网站搬到 SiteGround 来,则选择 Transfer a website。

( 如果你要把网站搬迁到 SiteGround 来,你可以参考这篇文章:网站搬家:WordPress 网站迁移到 SiteGround 主机空间 )

图片:install-wordpress-reminder.png



接着第二项,Enhance Your Account。再次问你需不需要网站日常黑客攻击检测。

这里随便各位,19.80 美金一年,也不算很贵。不差钱可以勾,我估计超过 80% 以上的用户都是不勾的。我也建议不勾,因为这玩意还没有免费的 WordPress 安全插件有效。

这是官方对 SG Site Scanner 的介绍:https://www.siteground.com/blog/sg-site-scanner-powered-sucuri/
为了体验一把,我勾选了,回头再告诉大家我的体验。
更新:用了大半年了,定期会往邮箱发送检查报告,每次报告都是没问题。虽然平时网上也有世界各地的伪黑客们,拿着各种扫描工具对网络上的众多网站进行漏洞扫描和尝试简单的攻击(我的英文网站当然也是经常被扫描),但还没真的被黑掉过或被注入恶意代码。所以这鸡肋服务暂时没取消,想着万一哪天意外攻击时第一时间知道吧。这玩意也就这点用处,如果真的扫描到被攻击了,要解决还是要找 SiteGround 的技术客服的。

图片:setup-your-new-growbig-hosting-account.png


无论你勾不勾,点击绿色的 confirm 按钮,继续配置账户。
最后,提示完成账户配置!

图片:ready-to-use.png



点击 Proceed to Customer Area。
网站大概的账户信息和设置界面是这样的:


图片:account-information-setting.png



购置独立IP(dedicated ip)

在上图中有个绿色按钮,Get Dedicated IP。

图片:siteground-dedicated-ip.png



虚拟主机使用独立 IP,可以帮助提高网站在搜索引擎 SEO 的排名和隔离共享 IP 中的其他主机被搜索引擎惩罚而造成的任何不利影响。

独立 IP 的价格一直在上涨,以前每个月3美金不到,现在价格已经是 4.5美金/月。跟虚拟主机的 5.95 美金加一起,10.45 美金/月了。比某些虚拟专用服务器(VPS) 还贵了。

但是 VPS 并不适合每一个建站者,VPS 建站比较复杂,前期配置环境时步骤比较多,并且安装好wordpress之后,需要做一些安全配置防止黑客攻击。很多人前期辛辛苦苦搭建了环境,安装了Wordpress 和主题,设置好了插件,以为高枕无忧了,其实风险一直还存在着,稍微懒一点没做安全配置,就可能导致某天网站被黑。

所以,VPS建站有利有弊,它更适合那些动手能力强不怕折腾,又有一些建站经验的(在我的课程里我都是视频操作,每一步手把手教的)。而虚拟主机建站,更适合大部分人。

所以价格虽然涨价了,但不要嫌贵。任何赚钱的工具,都是有成本的。有个像样的网站,这是开发客户的基础工具和形象名片。

购买成功之后,【My Accounts】- Information & Settings 下,Account IP 那里会自动更换成 dedicated ip。


在 Namesilo 修改 NameServer 为 SiteGround

修改 NS (NameServer)

接下来要修改解析服务器,把 Namesilo 默认的域名解析服务器改成 SiteGround 的域名解析服务器。
登陆 Namesilo 账户之后,点击管理你的域名,修改 ns。
或者已登陆下,直接访问此地址:https://www.namesilo.com/account_domain_manage_nameservers.php

转到域名 Name Server 的设置处,把默认的3条记录 ns1.dnsowl.com, ns2.dnsowl.com, ns3.dnsowl.com (或者以前的 BH 的 NS 地址) 删除,然后填入对应的两条 siteground 的 NS。


图片:nameserver-change.png


具体填什么 NS 地址,在你的 SiteGround 后台可以看到。
如上面账户信息的截图里所示,在 后台【My Accounts】-> Information & Setting -> Account DNS 可以查看到。

保存修改,等待生效。


查看 SiteGround 解析记录

很让人觉得方便的是,SiteGround 会自动对主机进行解析。
在后台【My Accounts】点击 Go to Cpanel 的按钮。

图片:siteground-step-7-domain-dns-zone-editor.png


点击 Advanced DNS Zone Editor 进去,可以看到 SiteGround 已经自动做好了域名解析。
SiteGround 对主域名做了A记录,对 www 域名默认做了CNAME记录。这是 OK 的,www 域名做 A 记录或者 CNAME 记录都是可以的,效果也几乎差不多。
接着等待 namesilo 的 NS 修改生效即可。一般几小时内应该就好了。

注意,如果你使用第三方企业邮箱,如网易或腾讯,那么企业邮箱的解析如何做,请看下文。企业邮箱的解析涉及到 MX 记录,SPF的TXT 记录,甚至还会有 DKIM 和 DMARC 记录。
Advanced DNS Zone Editor 中不含有也无法创建 MX 记录。

安装 SSL 正书和 WordPress

提醒:请等到 NS 修改生效且域名的解析生效后,再安装 ssl 正书。
检查方式:
1)如下图中显示在账户下的 Installations 下,Wordpress 已安装完毕显示版本号
2)你网站的访问地址 http://xyz.com 能正常访问

另外注意:正书是绑定IP的,无论是共享IP还是独立IP,都可以安装正书。但尽量在安装 SSL正书之前考虑好需不需要用独立IP。正书一旦安装之后,尽量不要改变IP,否则删除正书重新安装新正书,以及等待旧正书失效新正书生效的过程,有点麻烦。


图片:website-homepage.png




安装 Let’s Encrypt SSL 正书

在 siteground 的 Cpanel 里,在右侧的功能卡中,找到 SECURITY。

图片:siteground-step-9-ssl-certificate.png


点击 Let’s Encrypt,进去以后有两个可以安装:
  • Let’s Encrypt SSL
  • Let’s Encrypt Wildcard SSL

图片:siteground-ssl-3.png


选择安装 Let’s Encrypt SSL,点击 install。之后系统会弹出绿色提示条,并开始自动安装。
此时页面看不出任何反应,别急,等待约1-2分钟后,重新刷新此页面,显示已完成安装。

图片:siteground-ssl-5.png



然后在后面的下拉菜单 action 里选择 https settings.并把 https enforce 选择on,然后点击 Ok,表示强制使用 https连接,免得你的网站 https 能访问 http 也能访问,这样会造成重复收录。

图片:siteground-ssl-4.png


OK,这样 SSL 就安装好了。
注意:
1) 不要去点 get wildcard, 这是泛域名 ssl 正书,SiteGround 不免费提供。需要的话,要花钱买。
2) Let’s Encrypt SSL 正书的安装方式是自动验证 IP 地址。如果你之前没有购买独立IP,安装了正书之后又改变主意买了独立IP。那么之前安装的正书会失效,因为IP更改过了,你需要重新安装一遍正书,你要去 cpanel- security- let’s encrypt 里在已有的正书记录后面的 Action 那里选择 Cancel,然后会删除已安装的正书。你再重新安装。


修改设置网站首页

安装完毕后,用 https://xyz.com/wp-admin/https://xyz.com/wp-login.php 就可以登陆后台了。第一次登陆后台,SiteGround 会出现一个 Quick Optimization Wizard。点击 Continue,一共有3个步骤。
第一步,选择设计的主题 theme。这部不选,直接点底部 continue。
第二步,选插件,把默认勾选的 Contact Form 和 Jetpack  取消勾选,把 Maps 勾选。
第三步,继续选插件。这一步可以什么都不勾选。Google Analytics 和 Optimize for SEO(yoast SEO) 这些可以以后再安装。

点击 Complete。

图片:siteground-optimization-wizard-complete.png


点击去控制台。
来到后台后,在 【setting】 – general 下,把 wordpress URL 和 site url 还是一开始安装时的 http,且默认是不带 www 的主域名。


图片:initial-site-address-url.png



我们把http://xyz.com 改成 https 的 www域名 https://www.xyz.com
ok,到这部 WordPress 就安装完成了!
后面可以继续安装 WordPress 主题 Avada 了。


我准备好了,告诉我怎么用 WordPress 建站吧!

OK,下面你可以开始按照如下流程来建站了。祝你好运!

当安装完 WordPress 之后,接下来我们要熟悉一下 WordPress 的基本用法。

一、设置对搜索引擎不可见

这个应该第一步去做的。在 WP 后台左侧的功能菜单中,找到 Settings – 【Reading】 选项:

图片:search-engine-visibility.png



当你的网站还没有建好之前,建议不要鼓励搜索引擎来爬取。因为可能你的页面结构还会反复改动,页面还没有建全,关键词布局还没完成,甚至基本的 SEO 还没设置。考虑到这么多的因素,建议在建站期间,把这个“建议搜索引擎不索引本站”给勾上。等你完全建好,再把这个勾取消,并用谷歌站长工具 (Google Webmaster Tools) 自己去主动提交网站即可。

以前谷歌站长工具叫 Google Webmaster Tools,现在改名为:Google Search Console。通过这个工具你可以手动提交网站到谷歌,并且监测你的网站在搜索引擎中的显示效果,并且跟踪访客是如何通过 Google 搜索来找到你的网站的。

二、考虑网站标题

在安装 WordPress 时,我们随意填写了一个 website name/title。现在你可以想想,网站的标题要显示什么?

图片:website-title.png



当然,由于现在暂时没有对搜索引擎开放索引,你也可以暂时不考虑这里 website title 怎么写才好。
到后面,我们说到网站的关键词布局策略时会再次提到网站标题怎么确定。


三、安装 Classic Editor 插件

关于 Gutenberg(古腾堡)编辑器

WordPress 5.0 起,使用了一个基于 Block 布局的 Gutenberg(古腾堡)编辑器。虽然 WordPress 官方极力推荐这种编辑器,但是90%以上的用户试用过一阵子后都是感觉非常不习惯。对于很多的 WP 使用者来说,都已经使用习惯了老版本默认的经典的编辑器,使用这种新的编辑器会非常不方便。

于是我们需要安装一个额外的插件来解决这个问题。在 WP 后台菜单里找到 Plugins(插件),选择安装插件,在弹出的搜索页面输入 Classic Editor,找到这款插件。安装之后,启用即可。这样编辑器就又变成以前的经典编辑器了。


安装 WordPress 插件的方法是:在 WP 后台点击 ”插件“-”安装插件“。在右侧搜索栏中,输入插件名搜索即可出现相应的插件。
在安装之前,很重要的一点是检查跟当前WordPress版本的兼容性。如果插件跟目前的WordPress插件版本不兼容,则会造成页面错误,影响网站的正常显示或某些功能失效。

确认兼容当前的版本之后,点击“现在安装”来安装插件。安装完毕后,点击激活插件。有些插件激活后需要进行设置(Settings),具体设置的地方,可以在“插件” - “已安装的插件”列表中查看该插件的设置链接。

也有一些插件安装激活后直接就生效了,没有设置具体选项的地方,这种也很常见,通常都是小插件,解决某个十分具体的问题或需求。


四、接下来安装 WordPress 主题

建站新手比较推荐使用 Avada 主题。之前写过一篇 WordPress 英文主题的比较的文章:Avada & Enfold & Betheme:最棒的三个外贸建站英文主题

总的来说 Avada 面面俱到,容易上手。Enfold 虽然运行起来比 Avada 稍微快一些,但是缺点是设置不像 Avada 那么丰富,并且有的地方需要写一些 custom css 来达到必要的效果,所以新手来说还是用 Avada 更适合一些。还有一个主题 Betheme,也挺不错。


还是主要说 Avada 吧,作为全球销量第一的 WP 主题,国内英文建站的用户数也是非常多的。我强烈建议你们买正版的主题,在 ThemeForest 上买,这是非常值得花的钱,不用我多说了。


说明:如果自己没买主题,有其他人买了正版Avada主题分享出来,你装上也能凑合用,只是无法自动升级主题。另外,Demo 不能用,LayerSlider 这个组件也无法自动升级。所以如果你觉得打死都不可能再升级主题和相关组件插件,那么就用别人分享的主题也可以,否则还是建议自己购买正版主题。


图片:avada-theme-examples.jpg



五、购买 Avada 主题

访问 Themeforest 上的 Avada 主题页面。(如果你没有注册过账号,还是需要先 注册平台账号 的)
打开主题页面之后,会发现右侧有个 Buy Theme 的按钮。别急着点击,在上方,还有个蓝色字体的链接 more ↓ 。


图片:buy-avada-theme.png



通常 Avada 主题默认的作者技术支持期限是 6 个月。如果你要延期到 12 个月,那么就多付 18 美金。至于是否需要延期,这个就见仁见智了。

如果你最近建站时间比较紧,不一定会在近期完成建站,那么你可以延期到 12 个月保险一点。如果你最近就忙着建站,有时间好好把网站做一下,那么这里的话默认的 6 个月也够了。

另外,Avada 建站的一些常见的小问题,你可以自己百度,我有空也会整理出来。


图片:buy-avada-theme-1.png



下一步,来到购物车,准备结账付款。

图片:buy-avada-theme-2.png



点击 Checkout 之后,会让你选择 Payment 方式。有 信用卡/Paypal/Envato Credit 三种方式。
作为外贸人,通常信用卡和 Paypal 都是很容易搞定的!如果你还没有外币信用卡,那么用 Paypal 也可以(可以绑定国内银联卡),这两种方式都会收取2美金的额外手续费。
支付成功之后,界面如下:


图片:buy-avada-theme-3.png



点击 Download,下载 Avada 主题压缩包。一定要选择 All files & documentation (否则你下载下来的不包含子主题)
整个压缩包大概有 200多M,耐心等吧。

要想快的话,代理用全局模式,速度可以跑到 2-4 M/s,几分钟下载完。
下载完压缩包之后,本地解压。在主题文件夹下找到 Avada 和 Avada Child 压缩包。一个是主题压缩包,一个是主题的子主题压缩包。


六、什么是子主题(Child Theme)

当你使用主题时,必然会根据一些需要做一些修改。好不容易修改折腾好了,而主题升级版发布了。要不要升级呢?如果升级,那么修改的文件要先做备份,否则就白修改了,主题升级之后会覆盖掉之前的文件。所以备份了修改后的文件,然后再次去在升级后的主题文件中修改一遍。很麻烦!因此就有了子主题。
子主题通常包括 css文件和 functions.php 等少量文件,实际上,子主题相当于多挂载了额外的 CSS 和 functions 功能代码。


在子主题的 css 或者 functions.php 做修改,修改后会立即作用于主题,但并不会修改主题的相关文件。主题即使升级之后,子主题修改的内容仍然存在,不需要再次修改,很方便。很多国外WP主题都会带有子主题,方便用户进行自定义个性化的修改。


当我们上传主题时,必须把主题和子主题一起上传到 wp-content/content/themes/ 目录下。

然后在后台 Appearance – Themes 下,启用子主题,即可自动启用主题本身。


七、上传主题 Avada Theme 和 Avada Child Theme

图片:buy-avada-theme-4.png




上传安装主题的方法有很多,这里我们有三种方式:
  • 通过 WordPress 的上传主题压缩包的按钮来安装(SG/VPS)
  • 通过 SiteGround 后台 Cpanel 面板 File Manager 来安装(SG)
  • 通过 FTP 工具来安装
第一种方式最简单,推荐首选此方式。直接在 WP 的后台的【Appearance 外观】- 【Themes 主题】页面点击 Add New,

图片:add-new-theme.png




然后在 Add Themes 的页面上,有个 Upload Theme 的按钮。点击按钮,把解压的主题文件包里的 Avada.zip 和 Avada-Child-Theme.zip 主题压缩包先后上传。WordPress 会自动解压主题压缩包文件,并安装两个主题。

万一这种方式失败,那么可以选择第二种方式:

SiteGround 后台进入 Cpanel,然后找到【File】面板,点击 【File Manager】,会弹出窗口让你选择访问的文件目录。我们默认选择 web root,点击进入。
来到网站文件管理器窗口。在左侧,Public_html 左边有个 + 号,点击,会展开下一级目录。依次点击 wp-content – themes,到达主题文件夹。


图片:buy-avada-theme-5.png




点击上方的 Upload(上传),然后转到文件上传窗口。首先在文件权限那里改数字为 7 5 5,然后点击“选择文件”按钮,在本地电脑硬盘上找到 Avada 主题压缩包 Avada.zip。

图片:buy-avada-theme-6.png



上传之后,右下角会有上传完成提示!

图片:buy-avada-theme-7.png



再次点击选择文件,点击 Avada-Child-Theme.zip 文件。上传完成后,提示:

图片:buy-avada-theme-8.png



关闭文件上传的窗口,回到文件管理器窗口,在左侧重新点击 themes 目录,此时在右侧文件列表中出现刚才上传的两个压缩包。

图片:buy-avada-theme-9.png




图片:buy-avada-theme-10-1.png



解压完之后,可以看到左侧 themes 目录下多了一个 Avada 文件夹。点击之后,里面是主题文件。


图片:buy-avada-theme-11-1.png



再次点击到 themes,对子主题压缩包也执行上面解压步骤。

图片:buy-avada-theme-12.png



上传主题的第三种方式 FTP 方式这里就不介绍了。第一种方式直接后台上传主题压缩包的方式最简单,第二种次之。第三种 FTP 方式需要用 FTP 工具,稍微麻烦。

考虑到文章篇幅,这里不多介绍了。


八、启用Avada主题

注意:由于子主题的存在,我们选择启用子主题即可。
后台 Appreace – Themes,选择 Avada Child Theme,点击  Activate 按钮激活(只激活子主题即可)。


图片:buy-avada-theme-13.png




此时页面会跳到 Avada 主题信息页面,如下图所示。先点击 Registration 选项卡。

九、注册 Avada 主题

图片:avada-theme-installation-1.png



图片:avada-theme-installation-1-1.png



点击之后,跳转到 Envato 网站,重新登录一下。然后跳转到创建 Token name 的页面:

图片:avada-theme-installation-2.png




点击创建提交。这时会跳到成功页面:

图片:avada-theme-installation-3.png



把你刚刚起的 Token name 和 这个自动生成的 Token 口令码都记录下来。然后点击 I confirm,点击 Got it。

回到 WordPress 的 Avada Registration 选项卡那里,填入 Token 口令码,点击提交。正确无误的话,会提示:Congratulations! Your product is registered now.


十、安装激活主题相关的插件

注册完之后,点击右侧的 Plugin 选项卡,会出现一些推荐安装的插件。
建议安装的插件:
  • Fusion Core(主题必装的核心插件,)
  • Fusion Builder(主题必装的页面构建器)
  • LayerSlider WP (幻灯片自动切换插件。也有人选用 Slider Revolution。那样也行,两个任选其一)
  • Contact Form 7 (表单插件)
安装这 4 个插件就够了,其他的暂时不需要安装。

十一、解决一个疑问:是否导入 Demo?

在 Avada 信息页面的 Tab 选项卡上有一个 Demo,在这里你可以查看各种主题 Demo,有合适的 Demo 也可以选择导入。但我强烈建议你不要考虑去导入 Demo!

图片:avada-theme-installation-4.png




导入 Demo 演示数据和设置,似乎你觉得更简单了,网站内容和结构瞬间丰富起来了,但其实很多 Demo 都并不实用,而且加载起来还比较慢。当你导入了 Demo 演示数据之后,你可能会瞬间晕了,好多设置可能一下子完全搞不明白。

就好比你一想到写作文,觉得从零开始写作好累,何不照抄别人现成的作文,然后修改润色一下即可呢?于是你看了别人的作文,发现虽然写得都很好,但是别人的写作的主题,行文风格特色什么的,跟你并不是那么搭配。因此可能你稀里糊涂地抄了一篇牛逼的作文之后,越看越觉得有点离题,你知道你的风格和水平跟这些相差太多了,你实际想写出来的作文也跟这些根本并不一样,你只是想让自己的作文别人读起来感觉你写得很牛逼,但照抄上来之后,感觉终究是不适合自己,总之越看越不舒服,不停地修改,最后累得不想再改了。


因此,除非正好某个 Demo 100% 匹配你的建站需求,否则 Demo 这个东西看起来用他会让你建站更简单,实际上会变得更复杂和麻烦。因此我建议不要尝试导入 Demo。


十二、检查网站主页是否正常显示

刷新网站首页,一般立即就可以正常显示出来主题的页面了。
SiteGround
已经自动预添加了一篇标题为 WordPress Resources at SiteGround 的图文文章。

图片:siteground-avada-homepage.png


如果你访问你的网站主页不是这样的页面,可能是没有完成域名 NS 的设置。


十三、设置Wordpress的固定链接格式


在 WordPress 后台左侧,点击 Setting – Permalinks,选择 Post name,然后点击 save changes 按钮。
另外,如果你没有稳定的 FQ 工具,那么可能操作 WordPress 建站感觉会有点慢。因为 WordPress 程序默认前台和后台都调用谷歌的字体和Ajax库,而国内 Google 被墙了,所以速度比较慢。

你可以用国外未批嗯服务商的工具 ExpressV@P@N,也可以自己淘宝上找个商家解决。
具体见这篇文章:https://www.liaosam.com/how-to-go-outside-for-the-others.html


如果你除了建站外,平时不需要 FQ,那么在 WordPress 后台安装一些替换谷歌字体的插件(如 Disable Google Fonts, Google Font Fix 等)也可以暂时解决这个问题。

十四、Avada 主题的基本设置

在展开讲解之前,先让大家对页面的基本结构布局(Layout)有个基本的认识。如下图:

图片:page-structure.png




最简单的页面布局(Layout)其实就是 4 个元素。Header, Body Content, Sidebar, Footer。左侧栏一般首页不会设置,通常会在内页出现,作为产品分类或者其他内容布置。

有时候,Sidebar 也可能嵌入到 Body Content 里面,比如料网首页的页面布局就是如此。


OK,简单介绍了一下页面大的结构布局之后,我们继续:

在 WordPress 后台左侧,点击 Avada – Theme Options,会出现 Avada 主题设置界面:


图片:avada-theme-options-1.png




看了这么多设置,可能你会觉得头都大了。但是相信我,该头大的绝对不是你,反而是我,因为我要图文讲解清楚具体怎么设置,编辑很累的!

布局【Layout】:建议不要修改,保持默认即可。


两种布局方式的不同:

  • Boxed:通常称之为盒状布局或方框布局。通常页面会有个灰色或者其他颜色的底色,网页主体部分有边框且背景色为白色。
  • Wide:通常页面呈现超宽布局,没有明显的网页主体的位置边框线。英文建站多用这种布局方式,显得大气一些。
  • Boxed 布局例子:http://www.szmillingmachine.com/
  • Wide 布局例子:https://www.nldmagnet.com/
菜单【Menu】:这里是设置菜单相关的内容。暂时不用设置。

响应式【Responsive】:这里设置一些页面针对不同设备浏览时的宽度和样式响应。暂时不用设置。

颜色皮肤【Colors】:网站的主体颜色。里面有三个选项:Predefined Theme Skin(预设的主题皮肤)、Predefined Color Scheme(预设的配色方案)、Primary Color(主色/高亮色)。暂时可不设置,后面根据需要修改颜色设置。


头部【Header】:在这里面先选择一下 Header Content 的布局,从下面这 7 种 Header Content 布局中选择一种适合你的。

图片:header-content.png




一般 1,2,3,5 使用比较多。我们暂时不改动,默认的即可。

十五、设置英文网站字体

在  Avada – Theme Options 中,点击 Typography。

在 Body Typography 中,点击 Font Family 的下拉菜单,选择一个更好看的英文字体。如国外使用较多的 Roboto 或 Open Sans 字体。选好后,点击 Save Changes。


以 Roboto 为例,


图片:body-typography-roboto.png


接着,Headers Typography 中,把 H1 – H 6 的 Font Family 都选择 Roboto 或 Open Sans (下拉菜单那里可以直接输入字体名)。字体大小和行高可以先别改动,后面有需要再改。


H6 下面还有两个 Post Title 相关的,是文章标题,建议也设置一下字体。

耐心去做完。选好后,点击 Save Changes。


接下来要说说怎么在 WordPress 中创建菜单了。


十六、创建导航菜单

在上面 Avada Options – Header 的部分,我们等于是设置了 LOGO 和 菜单的位置,但还没有创建菜单。

网站主菜单和页脚菜单

在做网站之前,最好你已经在网页收藏夹中收藏了5-10个非常不错的国外同行的网站了。你可以多看多借鉴一下页面结构,菜单频道和页面风格等。顶部菜单准备放哪些,哪些下面有二级菜单,这些都先想好。如果有时间的话,你应该至少在纸上或者 Xmind 文档上做过结构图,这样可以帮助你清晰地创建网站结构,你的网页 URL  结构也会很清晰。

比如,看看我做的菜单结构:


图片:website-menu-guide2.png



下面说一下怎么创建菜单:
在 WP 后台左侧的黑色背景菜单中找到 【Appearance】(外观) – 【Menu】(菜单),先创建网站主菜单。

图片:appearance-menu.png


图片:create-menu.png



点击 Create Menu 之后,你就可以开始创建菜单了。

在 WordPress 中,最常见的两种类型是 Post(文章) 和 Page(页面)。由于 WordPress 本身是从博客系统发展成 CMS管理系统的,因此,在 WP 中最重要的类型就是 Post,而且多数的 WP 函数也是基于 post。

可以这么说,Page 也是一种 Post,它是一种特殊类型的 Post (不理解可忽略此句)。

在下面的截图中,你可以看到四种类型:1)页面  2)文章  3)自定义链接  4)文章分类。
有时候你还会看到第五种类型:文章标签(Tags)。


尽管 Post 类型很重要,但它一般用于 Blog 文章展示。在我们建企业展示站的初期,我们还不需要开通 blog 频道做内容营销,所以我们可以先忽略文章类型的内容。

即我们可以暂时忽略 Posts, Categories, Tags 这三种类型的内容。要创建菜单,就用 pages 和 Custom Links 就够了。

Custom Links 的实质就是创建链接锚文本,链接地址可以为站外或站内页面地址,也可以地址为空作为下拉菜单的父级占位文字,点击并不跳转。
比如:本博客网站的顶部菜单的“分类” 和 “音乐” 就是自定义链接,但地址处留空,所以无法点击,只是作为下拉菜
[cn1001639997于2019-05-10 22:40编辑了帖子]
1条评分, 铜币 +1
喜欢6 评分1
博客 https://www.liaosam.com
外贸老鸟之路。关注WX公众号料神外贸,私人号liaosam36。注明“外贸圈”。
cn1001639997
名人堂名人
名人堂名人
  • 用户名cn1001639997
  • 粉丝19735
  • 发帖数994
  • 铜币11356枚
  • 威望35点
  • 外贸达人
  • 社区明星
  • 问答帮帮团
  • 忠实会员
  • 社区居民
沙发#
发布于:2019-05-07 12:13
注意:如果你有任何关于外贸建站的问题,请只在此帖中或我博客中提问,请勿加我签名档中的 VX 提问建站问题。本人 VX 只进行外贸工作和业务类交流,其他问题勿扰!

接上文。

由于你还没有创建新的页面,你的菜单没有更多的内容可以展示。我们就先对 WP 系统自动创建的 Home, Hello Word, Sample Page 这些做个菜单雏形展示,后面再修改。

先点击一下 Save Menu,保存。

图片:create-menu-1.png




注意:如果你是用的 SiteGround (https://www.siteground.com/go/noredirect ) 虚拟主机一键安装的 WordPress,那么这里 Post 就不是 Hello World,应该是一篇 “WordPress Resources at SiteGround” 的日志。
Page 里应该也是空的,没有 Sample Page 的示例页面。因为 SiteGround 对初始化的 WordPress 状态做了一些修改,但这并不影响你正常使用 WordPress。

暂时,你的网站的 Header 是这样的:


图片:create-menu-2.png




很怪,是吧?别急,我们创建好多一些页面就好了。

接着,我们再创建几个 Page,稍微丰富一下主导航菜单。
我们在 【Page】- 【Add New】新建 About Us, Products, Support, Contact 4个页面。只填写一下 Page 的标题,内容什么的都先留空,然后点击 Publish (发布) 页面。


此时再来到菜单页或者重新刷新菜单页,我们把之前的 Hello World! 和 Sample Page 页面从菜单中 Remove,然后把刚才新建的 4 个空的页面都添加到菜单中。


这里我们只需要搭菜单的内容和结构,至于导航过去的页面中有没有内容,我们不用考虑。


图片:main-manu-create.png



先简单创建个菜单,熟悉一下,保存创建的菜单。然后去首页刷新一下,OK!

十七、登录状态下,前台页面隐藏 Admin Bar

你是否觉得浏览网站的时候,总是在顶部有条黑色的 admin bar 很烦人?我们可以让它不显示。

在【Appearance】(外观) – 【Editor】里我们可以添加代码屏蔽。在右侧的 Templates 那里点击 functions.php 文件,然后按照下图粘贴下面代码:


// hide admin bar
add_filter('show_admin_bar', 'hide_admin_bar');
function hide_admin_bar($flag) {
 return false;
}


图片:avada-child-functions.png




我们在网站首页刷新一下页面,OK,顶部那个烦人的黑色 admin bar 消失了。

十八、创建首页

到了这一步,你会发现简单的网站雏形建立了。但是仍有些问题,比如,菜单里的首页只是一个自定义链接,并非真正的首页。并且,网站的首页有一横栏的标题始终显示的是 Blog,如上图所示。

图片:blog-pape-title-bar.png




而我们需要建立大气的企业网站首页,你肯定也不希望展示的是 Blog 文章。这是因为 WordPress 是以最强大的博客建站系统的身份打出江山的,最后扩展到 CMS 丰富的网站内容管理系统,它默认会以动态的 Blog 最新文章为首页。此时我们需要重新设置一下。

首先我们先建立首页,点击 Page,Add New,在标题框中输入 Home,然后点击顶部黑色 admin bar 下的 Screen Options,勾选上 Fusion Builder Setting。然后,再次点击 Screen Options 收起选项,点击页面编辑区域上方的按钮:Use Fusion Builder。


本部分内容设定了隐藏,需要回复后才能看到


图片:main-manu-modify.png





此时重新访问网站首页,可以看到网站首页已变成我们之前创建的首页 page。

图片:home-avada.png




为了让首页更加丰富,接着我们可以利用 Fusion Page Options 对首页显示的各种内容类型进行设置,然后再用 Fusion Builder 来布局,编辑容器和元素。

饭要一口口吃,我们先了解一下 Fusion Page Options 吧。


十九、认识 Fusion Page Options

在 Home 页面的编辑器下方拖到底,可以看到一个区域,区域标题为 Fusion Page Options。
这里可以控制页面上各种类型的布局和元素的设置。


比如:Sliders, Page, Header, Footer, Sidebar, Background, Page Title Bar。
我们首先在 Page Title Bar 那里选择 Hide,不显示。


图片:fusion-page-options-setting.png



(推荐只隐藏首页的 Page Title Bar,其他页面的不要隐藏。因为 Page Title Bar 中含有 H1。而首页已经有了 H1)
这个区域在首页上完全是多余的,除了显示一条明显的 page title block 块级元素之外,没任何卵用。如下图所示:


图片:page-title-bar-avada.png



接着在 Sliders 选项卡中,我们可以看到,默认的 slider type 是 No slider。


图片:fusion-page-options-sliders.png



我们点击下拉菜单,出现几个选项:

  • No Slider
  • LayerSlider
  • Fusion Slider
  • Slider Revolution
  • Elastic Slider
我们安装了 Layer Slider,但是还没有创建首页的轮播 banner slider。我们先去创建 Banner Slider 再来设置。

二十、用 LayerSlider 创建 Home Banner Slider

点击 WP 后台左侧下方 LayerSlider WP -【All Sliders】, 点击 add new slider。接着跟着提示输入 slider name:homepage slider。点击创建按钮。接着页面会跳转到设置页面。

该页面上方有个 tab 选项栏,有 SLIDER SETTING(设置)/ SLIDES(添加幻灯片)/ EVENT CALLBACKS(回调事件)

在左侧的菜单 Layout 这里,默认的模式是 responsive(响应式)。这种模式会随着不同的设备屏幕宽度来缩放尺寸,高度随宽度而变化。通常我们就选这种,但是尺寸修改一下。


图片:slider-setting1.png



宽度根据你想呈现全宽还是非全宽而定。并且,你需要设定一个 slider 区域的高度。

比如,我们之前在【Avada】 的 【Theme Options】- layout 中设置了 1100px 宽度,wide(无边框线风格)。如果这里 slider 我们想做成全宽效果,这里我们把宽度设置为1920,高度则根据我们准备好的 banner 图尺寸,比如420,然后点击 save changes。


由于是响应式,因此,当设备屏幕宽度为 1920 px 时,高度为 420px。如果屏幕分辨率没那么大,或者是平板,手机界面,高度值会随着宽度等比例自动缩减。

总而言之,这里高度和宽度请按照你实际想要呈现的效果来定。


比如,如果你不需要 banner 全宽,你也可以用 1100 宽的 banner 图,那么这里宽度和高度就按照实际你的 banner 图的宽度和高度填写。如果你不太理解,没关系,直接不修改尺寸,用默认的尺寸值先看看效果也可以。


接着,我们点击上方的 SLIDES,准备添加 banner slide images。


图片:slider-setting2.png




添加 slide #1 之后,点击绿色的+号,继续添加 slide #2。。
每个 slide 的 Slide Timing 都要设置一下,建议设置为 duration:3000,shift:1000。然后保存。这样 homepage slider 就创建成功了。

此时,再次点击【Page】- all pages,在页面列表中找到【Home】点击编辑,然后在 Fusion Page Options 的 sliders 中选择 LayerSlider,在列表中选择之前创建的 homepage slider。


图片:fusion_page_options.png



然后,在右边侧栏上方,点击 Update 按钮,更新页面。


然后,刷新网站首页,首页幻灯显示 OK!效果还是相当不错的。

图片:slider-0.png




图片:slider.png




图片:slider-2.png



图片:slider-4.png



这样,首页就建立了 Banner Slider 幻灯轮播图片。

Banner Slider 的下方,由于我们只用了一个 1/1 Container + Text Block,因此有点单调,只有几行文字,和别人高大上的首页好像还相差很远。


别急,只要你已经知道怎样用 Container 容器来占位布局,然后在容器内添加你所需要展示的内容元素即可。比如,你可以放图片,放视频,放文本,放按钮,放图文混排,放图片相册,放客户评价……。


前面我们说过,当你准备建站之前,你至少应该在收藏夹内收藏了几个非常不错的参考网站。即使这些参考网站不一定是用 WordPress 制作的,但是还是可以参考他们网站的布局,然后利用 Fusion Builder 编辑器去实现!

这一点都不难,起码,你已经入门了。

不同的人,建站的布局和风格都不一样。

二十一、页头设置(Header Setting)

我们在之前的 AVADA 主题选项 theme options 里选择了 Header 的布局为最初始的默认布局,这种 Header 布局顶部是没有顶栏的,它的 Header 就是 左侧 LOGO + 右侧 Navigation Menu。
比如三一重工英文站(http://www.sanyglobal.com/)的 Header:


图片:sanyglobal.png



如果你选择的是这种无顶栏的 Header Layout,如果我们选择这种 Header Layout,那么除了 LOGO 和 Main Menu 之外,Header 基本也不需要特别去配置了。
那么这一节 Header Setting 你可以跳过。


Avada 的 Header 布局有好几种。常见的是第 2 种。


图片:avada-header-layout.png




如果你偏好带有多一行顶栏的布局,那就选择第 2 或者 第 3 个 layout 都可以。

比如我们选择第 2 个布局,然后在下方还有这么几个选项:


图片:avada-header-layout-setting.png




这两个下拉菜单中你可以选择:Contact Info(联系信息), Social Links(社交平台链接), Navigation(导航) 以及 Leave Empty(留空)。

比如下面这几个学员的网站,左边就是 Contact Info,右边是 Social Links。


图片:header-layout-newland.png






图片:header-layout-ecoasia-chemical.png




我们可以 Header Content 1 选择 Social Links,Header Content 2 选择 Navigation。


然后点击 Save Changes 按钮,然后刷新首页,你会发现首页没有发生任何变化,并没有多出一行水平的顶栏。这是因为,你并没有去创建一个显示在顶部的 Top Navigation,并且你也没有去填写过任何 Social Links,所以任何信息都不显示出来;如果你在 1 中选择 Contact Info,再保存,刷新首页,就能看到多出一条顶栏,并且在 1 的位置有显示 Contact Info,因为在上面设置里,有默认已经填写的 Contact Info 信息,所以显示出来了。

OK,那么接下来,我们就要去创建 Top Navigation。很简单,还是在【Appearance】-【Menu】中,创建 Menu。点击 Create a new menu,输入菜单名:top menu。


选择要添加到顶栏右侧的网页,组成导航菜单。


图片:top-menu-navigation.png





OK。此时我们刷新首页试试,顶栏右侧已经显示了 Top Navigation Menu。

图片:header-layout-example.png





接着左侧,如果我们不显示 Contact Info 而要显示 Social Links 的话,就要去填写 Social Links。

图片:avada-social-media.png




SAVE CHANGES。然后在 Header Social Icons 设置中,一般只要选择1个地方:Icon Color Type。默认是 Custom Colors,颜色可以在下方调节,比如默认是选了灰色填充图标。

你还可以选择 Brand Colors,这样各个图标就变回各自的颜色了。具体看截图:


图片:avada-header-social-icons-1.png




接着,我们做一系列样式设置。打字好累,看图来做吧。

图片:styling-main-menu-divider.png




把这个调到 0,这样导航上方的小横线就没有了。


接下里设置导航菜单的字体:

图片:styling-main-menu-setting-1.png




设置顶部 Top Navigation Menu 的字体大小为 14px(Avada 里把 top navigation 算为 Secondary Top Menu),并且把 Top Navigation Menu 的分割线颜色为纯白:



图片:styling-menu-secondary-menu-divider-1.png








图片:styling-menu-secondary-menu-divider.png


接着,把顶栏的 Social Media 的填充颜色修改为 #999999。如下图:


图片:header-social-icon-color.png




OK,经过一番设置,现在 Header 部分更 Nice 了!





图片:avada-header-example-2.png



二十二、页脚设置(Footer Setting)

Footer 部分的设置和调节主要是通过两个地方:
  • Avada 的 Theme Options – 【Footer】,包括 Footer Content, Footer Background Image, Footer Styling.
  • 【Appearance】-【Widgets】- Footer Widget 1,2,3,4
其实 Footer 的设置以及内容如何放是最简单的,只要在 footer widget 中添加即可。
比如,我们先看最常见的一种 Footer:

图片:footer-example-1.png



这其实就是 Avada 的 Theme Options – 【Footer】 – Footer Content 里默认的 4 Footer Column。四列 widget column,每个当中根据需要放置你需要展示的内容。


又比如另外一种 Footer 布局:

图片:footer-example-2.png



比较亮的一点是,这里还在 Footer 里添加了一个 Background image,就是那个隐约的地图。


当然,页脚放置 3 个 Footer Column 的也有,如:

图片:footer-example-3.png




还是看需要来设置。我们来到【Appearance】- 【Widget】,点击:

图片:avada-available-widgets-for-footer.png




左侧是我们可以选择的所有小工具,我们各选 1 个,放入 4 个 Footer Widget 中。
比如,我们准备放:

  1. About LSMK/Why LSMK (Text)
  2. New Arrials (Avada: Recent Works)
  3. You May Also interested/Resources (Custom Menu 现在叫 Navigation Menu )
  4. Contact Info (Text)
BTW:关于 Custom Menu 这个 Widget,其实还有人 Footer  4 个 Column widget 全部都用 Custom Menu 来做。比如下图这个:

图片:footer-example-4.png




废话不多说,我们1个个来。

Footer Widget 1:About LSMK/Why LSMK (Text)

我们直接拖 Text 到 Footer Widget 1,Title 输入:About LSMK。Content 输入简单的两三句公司介绍。

图片:footer-widget-1.png




点击保存。然后我们来到 【Avada】-【Theme Options】-【Footer】-【Footer Styling】:

图片:footer-styling-footer-typography.png




进行一下样式设置。然后我们刷新首页,看看页脚:

图片:footer-LSMK.png




OK,footer widget 1 已经设置好了。不过好像文字的颜色有点暗,设置一下 Footer Font 的颜色,选个更浅的颜色即可。


图片:Footer-Font-Color.png



Footer Widget 2:New Arrivals ( Avada: Recent Works)

在 Appearance – Widgets 页面中,把左侧的 Avada: Recent Works 拖到 Footer Widget 2 中,标题和数量随便填,反正随时都可以改。比如填写 New Arrivals,


图片:footer-widget-no2.png





Footer Widget 3 and 4:You May Also interested/Resources (Navigation Menu) + Contact Info (Text)

图片:footer-widget-3-and-4.png



可以看到 Footer Widget 3 这里,我们虽然考虑到用 Custom Menu(现在叫 Navigation Menu),但是我们还没有建立放在下面的页面。那么我们先选择 Top Menu,然后分别在 Widget 3 和 4 的 Save 按钮上点击保存一下,然后刷新首页。

图片:footer-LSMK-3.png




可以看到,1 正常,3正常(但是等会要重建立一个菜单替换掉这里显示的top menu 里的菜单),2 不显示,4 显示格式不正确(不换行)。
我们一个个解决。哎哟,写得好累,编辑得好累,后悔了。

好了,吐槽了一番,休息了一会,继续来写。

2 的问题是因为,我们还没创建产品(详情)页。一旦我们建立了产品页,这里才会显示产品的缩略图,所以这里暂时为空是正常的,不用担心。
至于 Footer Widget 4 的问题,则要修改一下 Footer Widget 4 里的 Content 文字内容,加上换行的 html 代码 即可。


图片:Footer-widget-4-1.png



不要勾选 Automatically add paragraphs 的选项。此时再次刷新首页,发现已经显示 OK 了。
多说一句,我们需要使用 Theme Options 的搜索功能,这个搜索功能很多时候能帮我们迅速找到所要修改的项目。比如你想改某个地方的颜色,又不确定是在哪里设置,那么输入 color 就会出现所有的关于颜色的选项,还是非常实用的搜索功能。


比如我们之前尝试修改 Footer 里面文字的颜色,这里我们在搜索框内输入:footer font


图片:avada-theme-options-search.png




找到一条结果:Footer Font Color,它是在 Footer Styling 栏目里的。这个之前我们已经使用它修改过了。
接着我们解决 Footer Widget 3 的问题。


我们在 Appearance – Menu 页面下,点击 Createt a new menu。在 Menu Name 填写:Footer Menu,然后点击右侧的 Create Menu 按钮。


此时你需要想想,Footer Menu 你想展示什么内容。这个 Footer Menu 里可以是 Post (某篇 blog 文章), 也可以是 Page (某些页面),也可以是一些站内站外的链接,都可以。


比如,我想要展示的是:Sample Policy, Videos, Download, FAQ, Request A Quote 这 5 个页面的 Menu,那我要做的就是先创建这 5 个页面,哪怕这些页面内容是空的没关系,后面再去填充内容和素材。创建好页面后,重新刷新 Menu 页面,然后添加这几个页面。


图片:footer-menu-create.png




点击右侧的 Save Menu 按钮。然后,在 Appearance – Widgets 的 Footer Widget 3 中,选择我们新建的 Footer Menu,保存。

如果 Footer Widget 3 中的 Navigation Menu 的下拉菜单中没有出现 Footer Menu,那是因为页面没有重新刷新,之前我们访问这个小工具页面的时候,当时是没有 Footer Menu 的。


刷新首页,查看 Footer,OK!似乎一切顺利!不过,有两个地方我仍不太满意。



图片:footer-LSMK-4.png




第一:Footer Widget 3 的 Menu 菜单我不想要这个底部边框线,而且每个菜单项的填充值太大,整体下来只有5个页面而已,就显得特别高了。想办法做一些修改。

在 Avada – Theme Options 中搜索 Custom Menu(现在叫 Navigation Menu) 或者 Footer Menu 或 Footer Widget,都找不到任何关于这个自定义菜单项目border 的设置。那么还是需要通过自定义CSS来解决了:

我们在 Avada – Theme Options – Custom CSS 中添加一行 CSS 代码:

.fusion-footer-widget-area .widget_nav_menu li{border-bottom:none;padding:5px 10px 5px 15px;}


保存。我们刷新首页,现在 Nice 多了。整体的高度也往上减少了不少,看起来比较和谐。


图片:footer-LSMK-5.png




很多主题无法设置的问题都可以通过 Custom CSS 来解决。对于这些基本的 CSS 代码,不要紧张,该用就用,写错了也不要紧,修改掉或者删除掉即可。我开始学习 CSS 还是 2005年,到现在依然可以说是外贸人当中 CSS 应用得最熟练的。

第二:最底部的 Copyright 文字要改掉。


我们直接在 Theme Options 搜索框里输入:copyright。可以找到在 Footer Content 中我们可以设置版权信息。如下面截图中这些选项:


图片:copyright-modify.png




只需要在 Copyright Text 中需改内容即可。多说两句,其实这里可以放置一些主要产品的锚文本,更利于 SEO。
比如我们看看 http://www.sanyglobal.com/ 三一重工的网站的底部 Copyright bar 是怎么布局的:


图片:footer-sany.png




有好的方式我们可以借鉴。于是我们在 Copyright Text 里这样填写:

<p style="float:left">Copyright © 2011-2017 LSMK INDUSTRIAL CO., LTD. All RIGHTS RESERVED</p>
<p style="float:right">TAGS:
<a href="//www.ledlightsmfg.com/#">Product1</a>
<a href="//www.ledlightsmfg.com/#">LedBulb2</a>
<a href="//www.ledlightsmfg.com/#">Special3</a></p>
我们先用了3个锚文本 Product1, LedBulb2, Special3 来占位。等我们后面产品页做好以后,我们再修改具体的链接和锚文本文字。
保存。然后我们去修改 Copyright 栏的字体和颜色。



在 Theme Options – Footer – Footer Styling 里:

图片:copyright-modify2.png




保存。刷新网页,可以看到这下 Footer OK 了。

图片:footer-LSMK-7.png




上面截图上,我们添加的 Tags 锚文本,由于最右侧有 Social Icons,所以位置处于中间,这就有点不够简洁了(有些人可能不觉得)。
如果你觉得不够简洁的话,我们有三个选择:


  • 1)不添加 Tags 的这一行锚文本了,只显示 Copyright Text 就好,为了简洁做个取舍。
  • 2)舍去图中1的位置的 Social Icons。
    如果我们 Header 的 Layout 选择的是有顶栏的,而且顶栏中我们放了 Social Icons 的话,底部这里也可以不放。那么自然 Tags 就会处于上图中1的位置。这样就简洁好看多了。
  • 3)舍去图中的 New Arrivals 模块。
    如果你不想在 Footer 中放置最新产品的缩略图,那么你也可以像 Footer Widget 3 那样创建一个 Custom Menu(现在叫 Navigation Menu),然后 Heading 取:Featured Products,菜单里添加产品分类页面。或者直接添加一个Text widget,然后用 HTML 代码写一些带链接的锚文本。
或者,如果你嫌麻烦,那 4 个 Footer Widgets 里面把第 4 个做成搜索框也行。如这样的:

图片:footer-simple.png




具体怎么选择,随便大家了,毕竟思路也给了。Footer 呢暂时就先写到这了。感觉写得太详细的话这篇可能永远写不完了……

总结)

其实底部的 footer widget 有很多种不同的考虑。有人只用3个,有人用4个。有人建站的同时会做内容营销,会写博客,那么 Footer Widget 里会用 Recent Posts 来显示最近的几篇博客文章。具体放置什么内容,还是看你的需求,不要太局限于教程。

未完待续。。字数超了。见下面楼层。
另外,如果有任何外贸建站方面的问题,请只在此帖或我博客上提问。不接受加 VX 询问建站问题。谢谢理解!

关于外贸业务工作上的内容和问题,我整理了一些视频和文档整理给大家,相信一定会对各位有所帮助。需要的直接添加我的VX(添加方式见签名档)
[cn1001639997于2019-05-09 18:29编辑了帖子]

图片

博客 https://www.liaosam.com
外贸老鸟之路。关注WX公众号料神外贸,私人号liaosam36。注明“外贸圈”。
回复(2) 喜欢(3)     评分
cn1527852557smbo
外贸新生
外贸新生
  • 用户名cn1527852557smbo
  • 粉丝6
  • 发帖数716
  • 铜币62枚
  • 威望0点
  • 活跃读者
  • 社区居民
  • 忠实会员
板凳#
发布于:2019-05-07 12:31
定期备份才是王道
听了很多课,听时都很有道理,猛鼓掌,回到公司之后,却不知道怎么做?每个月拿着4,5千薪酬,不够专业?能力不足?很多都是模模糊糊,想拿高薪?【强实操,精技术,可落地,系统化】不一样的培训,胡家联导师让你变身运营高手!【详情 V信 gz_jdsp 企鹅 2406745182】
回复(0) 喜欢(0)     评分
cn1528394652ujli
外贸新生
外贸新生
  • 用户名cn1528394652ujli
  • 粉丝0
  • 发帖数41
  • 铜币27枚
  • 威望0点
  • 社区居民
地板#
发布于:2019-05-07 13:16
技术料神!注意更新,定期备份!
个人soho、业务员如何解决收汇结汇问题?办理个人银行T/T外汇账户, 收汇结汇额度不受5W美金限制, 收汇结汇零手续费,商业汇款、货款不限制..办理简单费用低联系:13380061641 电话即微信
回复(0) 喜欢(0)     评分
cn1526717478ktza
外贸学长
外贸学长
  • 用户名cn1526717478ktza
  • 粉丝3
  • 发帖数198
  • 铜币156枚
  • 威望-1点
  • 社区居民
地下室#
发布于:2019-05-07 13:24
确实要多注意啊
回复(0) 喜欢(0)     评分
cn1528126522wxkr
初来乍到
初来乍到
  • 用户名cn1528126522wxkr
  • 粉丝0
  • 发帖数75
  • 铜币0枚
  • 威望0点
下水道#
发布于:2019-05-07 13:57
Sounds great
回复(0) 喜欢(0)     评分
cn1528434558tomj
外贸本科生
外贸本科生
  • 用户名cn1528434558tomj
  • 粉丝6
  • 发帖数426
  • 铜币527枚
  • 威望0点
  • 社区居民
地下城市#
发布于:2019-05-07 14:03
学习了呃呃呃
回复(0) 喜欢(0)     评分
cn1521208271xrak
外贸新生
外贸新生
  • 用户名cn1521208271xrak
  • 粉丝4
  • 发帖数471
  • 铜币60枚
  • 威望0点
地核#
发布于:2019-05-07 14:08
过马路前一定要看两边,小心交通,不要被车撞了,毕竟人怕出名猪怕撞!
回复(0) 喜欢(0)     评分
cn1522882064ccbd
外贸新生
外贸新生
  • 用户名cn1522882064ccbd
  • 粉丝4
  • 发帖数348
  • 铜币24枚
  • 威望0点
地心#
发布于:2019-05-07 14:11
6666666
回复(0) 喜欢(0)     评分
ki1001565912
外贸学长
外贸学长
  • 用户名ki1001565912
  • 粉丝4
  • 发帖数623
  • 铜币246枚
  • 威望-3点
9重天#
发布于:2019-05-07 21:14
9999999
回复(0) 喜欢(0)     评分
cn1001639997
名人堂名人
名人堂名人
  • 用户名cn1001639997
  • 粉丝19735
  • 发帖数994
  • 铜币11356枚
  • 威望35点
  • 外贸达人
  • 社区明星
  • 问答帮帮团
  • 忠实会员
  • 社区居民
10楼#
发布于:2019-05-08 06:46
先占个位!这篇文章篇幅很长。。

接上面。

二十三、LOGO 设计

当你已经初步入门并且找到建站的感觉之后,可能你最想换掉的就是 Avada 的 LOGO 了。关于网站 LOGO 的设计我强烈建议应该外包。
关于外包设计的资源,可以查看一下这篇文章,里面对外包有介绍:料网推荐:超实用的外贸网络营销工具

引用好友土豆的一段话:
不要自己设计 Logo ,除非你是设计师,或者你的网站像个博客一样无关紧要。
即便是普通的设计师,在配色、联想、运用设计工具上也比普通人要熟练的多,做出的 Logo 更好看,放在网站上直观的感觉就是更有设计感,更“高大上”。
选择自己设计 Logo 或者使用在线网站生成 Logo ,通常没注意到一个山寨气息浓厚的 Logo 对网站整体设计的严重破坏,更没意识到 Logo 对品牌建设起的重要作用。Logo 可以用在很多地方,不仅仅是名片,信纸,产品画册,工作服,挂牌等方面……
关于 LOGO 外包设计,你可以考虑 fiverr.com 或 99designs.com。国内的也可以考虑: logo123.net。
当然,如果你觉得这一步可以先略过,暂时用 avada 的 LOGO 先占个位也行。但无论你是最后再去考虑制作 LOGO 还是一开始就打算解决,我都建议你不要自己去制作 LOGO。


二十四、网站页面结构设计(bh/vps)

如果你建站素材准备得充分,那么现在可以好好考虑一下你的网站的页面和目录结构了。

1)网站的网页结构分成几类:
  • 常规页面(Home, About Us, Products, Support/FAQ, Resource Center, Why Xyz, Contact etc..)所有用于 Header 一级 menu 的页面
  • 附属页面(Factory tour, Certificates, Trade Terms, Policy etc..)一些 Header 二级菜单页面和 footer menu 的页面
  • 分类页面(比如:Interior Led Lights, Exterior Led Lights)
  • 产品页面(产品分类下的具体不同产品页面)
比如:Exterior Led Lights 类别下有这些产品页
  • LED Parking Lot Area Fixture
  • LED Shoebox Flood
  • LED Flood/Flagpole Spot
  • LED Wide Floodlight-Billboard Fixture
  • LED 9-inch Spot and Flood
  • LED Street-Area Fixture
  • LED All Purpose Wallpack
  • LED Area Wallpack
  • LED Half Cutoff Wallpack
  • LED Full Cutoff Wallpack
  • LED Forward Throw Wallpack
  • LED Security Wallpack
  • LED Security Wallpack-120v
  • LED Small Wallpack-120V
  • ……
比如:Interior Led Lights 类别下有这些产品页
  • LED High Bay
  • LED Low Bay
  • LED Architectural High Bay
  • LED Tube Strip
  • LED Tube High Bay Light Fixtures
  • LED Tube Low Bay Shop Fixtures
  • 2×4 LED Prismatic Lay-in
  • 2×4 LED Parabolic Lay-in
  • 2×4 LED Prismatic Surface Mount
  • 2×4 LED Parabolic Surface Mount
  • ……

2)创建网页的顺序

先建立产品分类页面,然后建立每个具体的产品页面,常规页面和附属页面最后创建。相当于 分类-产品-单页 的顺序。

产品其实也属于单页,但是这里就把它标记为产品吧,而公司简介,联系我们这些独立的页面我们这里称之为“单页”。
当然,这个顺序不是死的,我只是根据我的习惯来建议。你也可以先把所有产品页都创建好,然后创建产品分类页,最后创建常规页面和附属页面,那么就相当于 具体-分类-单页 的顺序。


3)怎么创建网页呢?

在 WP 后台左侧菜单 【Page】->【Add New】,然后输入页面的标题,在编辑区域加入图片文字,完成页面创建。
对于网页的布局,你可以用 Fusion Builder 来创建 容器(Container) 和 元素(Element)。


二十五、产品分类页面和产品(详情)页面怎么建?


1)产品详情页面用 Page 还是 Portfolio 来创建?

其实 Product 这些页面 Avada 的作者认为不管是 B2B 还是 B2C,最好是用 WooCommerce 插件来做。
但是,Avada 主题本身就比较复杂了,再去安装 WooCommerce 来做产品系统,感觉太繁琐,所以一般来说,B2B 的外贸网站是不会考虑装 WooCommerce 的,但 B2C 的外贸网站是可以用的,至少 WordPress Avada+WooCommerce 也比 Magento 简单多了。


对于外贸 B2B 网站,通常就用 Portfolio 或者 Page 来建立,两者都可以。用 Page 也可以创建,但是会有点麻烦。因为不是所有的 page 都是产品详情页,比如有些是 about us, contact, resource, FAQ 等等,所以如果通过主题的 theme options 对整体的产品详情页进行布局或功能的设置的话,就没办法单独对产品页类型的 Page 来设定。

因此,我们最好使用 Portfolio 来创建产品详情页面。而且,最新版的 Avada 主题对 Portfolio 的修改使得我们更适合用 Portfolio 来作为产品详情页了。


2)产品分类页面怎么创建?用 Portfolio Category 还是 Page?

由于 Portfolio Category 页面无法编辑,因此我们在 Portfolio 模块创建了 Portfolio Category 之后,也要通过 Page 来创建一次 Category Page。

总的来说,即:每个产品的分类先用 Portfolio 建立一个 Portfolio Category,同时也在 Page 中建立一个 Porduct Category,在该页中用 Fusion Builder 中的 Element 来调用 Portfolio Category。



每个具体的产品用 Portfolio 建,并选择好对应的 Portfolio Category。
如果你以前安装过 Avada:以前的 AVADA 版本是在 Fusion Page Options 中设置 Portfolio 选项,现在新的版本中,Page页的 Fusion Page Options 中不再包含 Portfolio了,这是作者出于优化的目的进行的改动。现在的 Avada,我们直接在 Page中用 Fusion Builder 中的 Container 容器中添加 Element,在 Element 中有 Portfolio,用这种办法来添加并选取要展示的 Portfolio Category,即可。

3)具体流程:

Step1: 确定你的产品的结构

图片:product-structure-0.png



这几乎是最简单的产品结构了,产品分类只有一层。


有些行业分得比较细,产品分类有两级:大分类 – 子分类 – 具体产品


图片:product-structure-2.png




这里由于本文篇幅太长,我们就按照简单的情况来写吧。


按照我们在二十三节所述,产品分类主要是:Exterior Led Lights 和 Interior Led Lights。
这里有个理解上的难点:关于产品分类的。
产品分类页:要先添加 Portfolio Category,然后再添加一个 Page。即产品分类既要用 portfolio (category) 建一次分类,也要用 page 建一次分类。

具体操作:要展示该分类下的产品,就在产品分类的 Page 里,用 avada 的 Fusion Builder 编辑器添加 container。然后添加 portfolio 元素,在里面勾选对应的 portfolio category。



那么我们首先要做的就是,先建立两个 portfolio category,分别为 Exterior Led Lights 和 Interior Led Lights。再建立两个 Page,同样还是这两个分类名。最后建立产品 portfolio页。

Step 2: 创建 Portfolio Categories

在 WP 左侧菜单【Portfolio】-【Portfolio Categories】中,依次添加这2个类别。

图片:Portfolio-Categories-add-new.png



图片:Portfolio-Categories-list.png



Step 3: 为每个具体的产品创建一个 Portfolio 作为产品(详情)页


Step 3.1) 先为所有 Portfolio 产品页设置全局的默认值

我们新建 Portfolio 时,在新建的页面编辑器下方也会有 Fusion Page Options。Fusion Page Options 这个大家应该不陌生了,前面也讲了这个。其中会有 Portfolio 选项。

然后我们一般去在 Fusion Page Options 中去设置一下 Portfolio 的选项。在 Fusion Page Options 的左侧第一个选项就是 Portfolio,


图片:portfolio-fusion-page-options-portfolio.png




仔细看这张截图,对比你的网页,你会发现,我的截图上的 Default 的值跟你的不太一样。为什么呢?

首先我们想想,如果我有100个产品,那么要建立100个 Portfolio,如果每个 Portfolio 创建时还要在下面的 Fusion Page Options 再设置一些细节,那么工作量将会很大。那么有没有针对 Portfolio Single Post 的统一的设置呢?

当然有!

在 【Avada】-【Theme Options】-【Portfolio】- Portfolio Singe Post,按照截图进行如下配置:


图片:portfolio-single-post-setting-1.png



图片:portfolio-single-post-setting-2.png



保存之后,我们重新来创建新的 Portfolio。此时这些值就已经被记录为 Default 值了,这样无需每建一个 Portfolio 都去配置一下 Fusion Page Options 中的 Portfolio 选项。

Step 3.2) 创建 Portfolio 产品(详情)页,一个个地添加。


我们点击左侧的【Portfolio】- Add New,然后输入产品标题,如:LED Area Wallpack。接着,在右侧的 【Portfolio Categories】中勾选所属的产品类别。


接着,在右下的 【Featured Image (特色图片)】那里,添加产品图片。默认最多可以添加 5 张图片。如果要修改这个,可以在主题的 Theme Options 中修改。


注意,一旦我们添加了多张产品图片后,在产品详情页中,Featured Images 会自动带有 Slider 效果。

接着,在编辑区上方,点击 Use Fusion Builder 按钮,点击 +Container,添加一个 1/1 的 Container,然后在 Container 上点击添加 Element,在 Element 中选择 Tabs。


为什么选 Tabs 呢?我找个例子吧。比如下面这个:


图片:example-1.png




如果你想呈现这种产品详情的效果,那么就只有用 Tabs 来实现了。

图片:tabs-element.png



点击编辑的图标,在 Tab 详情页面中,
  • Tab Title 填入:Description
  • Icon 可用可不用,不用更简洁
  • Tab Content 中填入具体的产品描述文字以及图片等素材
搞定完一个 Tab 后,记得,你还要继续做 1-3个(看你的需要)。
做完所有的 Tab 之后,保存,Tabs 就建好了。


图片:avada-portfolio-without-sidebar.png



不过,还有个问题,这个产品页面没有侧边栏,总觉得怪怪的。
这个侧边栏的问题,我们可以去创建一个 Portfolio Sidebar,然后在 Fusion Page Options 的 Sidebars 选型卡中选择我们创建的侧边栏即可。


在【Appearance】-【Widgets】页面,顶部有个 Add New Widget Section 的按钮。点击它,为新的 Widget Section 取名为:Portfolio Sidebar。


图片:portfolio-siderbar-1.png





新建好之后,先随便添加个 widget 进来。比如,Search。我们希望所有的 Portfolio 页面都显示这个 Portfolio Sidebar。

我们来设置:【Avada】-【Theme Options】-【Sidebars】-【Portfolio Posts】


图片:Portfolio-posts-sidebars.png





保存,OK!我们再来刷新看看我们创建的产品页。

图片:Portfolio-posts-sidebars-show.png




可以看到,已经显示了左边的侧栏 portfolio sidebar。由于我们对这个侧栏制作得也比较简单,所以除了一个搜索框以外还空了大片位置。

先这样吧,后面我们再来丰富产品页侧栏的内容。


Step 4: 建立两个产品分类的 Page,分别为 Exterior Led Lights 和 Interior Led Lights


产品分类页:创建新的 Page。在 Page 里,用 avada 的 Fusion Builder 编辑器添加 container。然后添加 portfolio 元素,在里面勾选对应的 portfolio category(前面我们建好的)。


创建过程还是一样的操作,跟你创建产品的 portfolio categories 一样。只不过你还需要在 page 里创建一次 page 下的产品分类。然后从里面调用对应的 portfolio category。


这里我拿个实际的例子来讲解。比如,你的产品有 3 类。分别是 Bag Series, Outdoor Sport Items 以及 Promotional Gifts,那么根据之前我们的流程,首先在 Portfolio 下的 Portfolio Categories 下建立 3 个 portfolio category。


图片:tabs-element.png




然后对应地,有几个分类就在 Page 下建立几个同名的分类名称。一个个地建立。比如先建立这个 Bag Series。填写好名称后,点击 Edit with Fusion Builder。

图片:avada-portfolio-without-sidebar.png




在 Fusion Builder 选择 Container 的布局风格,然后点击添加 Elementor。

图片:portfolio-siderbar-1.png




在添加元素里选择 Portfolio 的模块:

图片:Portfolio-posts-sidebars.png




在 Portfolio 里,有很多可以选择。如 Grid 布局,Grid 就是固定宽高格子化布局(整齐一些)。你可以选择图片尺寸 fixed。还有是否显示 Exceprt 之类。


总之这里面设置不少,但是最最重要的就是 Categories 这里。你如果是建立第一个分类 Bag Series 的话,就选择第一个你建过的 portfolio category。如在这个例子里就是 Bag Series,后面括号中的数字代表这个 portfolio category 下有几个 portfolio。

即 Page下的产品分类中,调用 Portfolio 元素,显示对应的 portfolio category。


图片:Portfolio-posts-sidebars-show.png




最终的效果:
OK,此时重复这个创建 page 分类的操作,把其他的分类的 page 也创建好。


Step 5: 创建 Products 展示所有产品页面



在 【Page】- Add New 创建一个新页面,填入页面标题:Products。点击 Use Fusion Builder 按钮,在编辑状态下

图片:fusion-builder-add-container-1.png




图片:fusion-builder-add-container-2.png




图片:fusion-builder-add-container-3.png




图片:fusion-builder-add-container-4.png





在弹出的 Portfolio 元素配置窗口中,进行设置,每个选项都有英文解释,不难懂。
  • Layout 选择 Grid
  • Picture Size 选择 Auto (如果你能统一产品图片尺寸就选这个,如果不能,就选 Default)
  • Columns 选择 3
  • Column Spacing 设置为 15
  • Posts per Page 设置为 24
  • Portfolio Title Display 选择 Only Title
  • Categories 选择我们之前创建的两个 Portfolio Category
  • Pagination Type: None
  • Excerpt Length: 设为 0
  • CSS Class: 填入 portfolio_products
然后点击保存。

图片:portfolio-setting-categories.png




图片:avada-products-list.png





OK,Products 页显示所有产品一切正常。并且上面有个Filter,点击产品类别名就显示该类别下的产品。
这个页面也可以加上侧栏。比如,在 Fusion Page Options 的 sidebars 中选择之前添加的 portfolio 的 sidebar,然后保存。刷新。


图片:avada-products-list-1.png






二十六、怎样在侧边栏里加上产品目录结构

上面的左侧 的 Portfolio Sidebar 里,我们只添加了 Search 框。这太空了,对比我们之前的截图,这个侧边栏里有产品目录:

图片:example-1 (1).png




那么怎么能实现左侧栏里我们也放上产品目录呢?
先放一张图:


图片:portfolio-sidebar-product-category.png



看懂了没有?利用 Custom Menu(现在叫 Navigation Menu)。我们在 Appearance – Menu 里新建一个菜单,取名 Sidebar Product Menu。


然后从左侧的 Page 列表里把产品 2 个分类页 Interior Led lights 和 Exterior Led Lights 给添加到菜单中去。保存菜单。


然后到 Widgets 中去,如上图所示:在我们之前创建的 Portfolio Sidebar 中添加 Custom Menu,并且选择我们刚新建的菜单:Sidebar Product Menu。保存。



然后刷新 Products 页面。效果如下:

图片:portfolio-sidebar-custom-menu-1.png



显然是成功了!但是可能你要问了,是不是太简单了点,左侧就这两个分类名称的页面吗?

咳咳,别着急啊。这里就要分情况来说了:
  • 如果你的产品结构分类有两级,比如产品结构是 1级分类 – 2级分类 – 产品。那么这里你还可以在 Sidebar Product Menu 中把 2级的产品类别 Page 添加上并且设置好层级。这样这里的产品 Product Category 就不会这么少的分类,显得太单调了。
  • 如果你的产品分类只有一级,但是类别比较多,那么也是 OK 的。这里显示七八个产品类别名。
  • 如果你的产品比较少,分类只有一级,且类别也少,那就有点麻烦了。但可以通过一种办法折中解决。
针对上面的第三种情况来说说对策:

我们知道,添加到 Menu 中的类别有限,我们之前说过最多只有 5 种类型的可以添加到 Menu,分别是 Pages, Posts, Custom links, Categories, Tags。其中 Posts, Categories, Tags 这些都跟文章有关,跟我们产品无关,不考虑。而 Page 是作为产品分类页,具体的产品页面是用 Portfolio。但 Portfolio 不是可以添加到 Menu 菜单中的类型。那怎么办呢?

既然 Pages 我们只能添加产品类别,那么我们就用 Custom Links 来作为显示产品名称和承载产品portfolio页的载体!我们就把一些这个类别下的重要产品用 Custom links 来添加到菜单里,Link Text 写产品名,Link Url 写产品的 Portfolio 的页面 URL。然后设置好层级位置。效果一样是OK的。哈哈,我真是机智!


这个例子就是这样,谁叫我一开始想讲简单一些的产品结构的呢。。说干就干!


图片:sidebar-product-menu.png



添加好了。刷新 Products 页面。


图片:avada-products.png




好了。
现在还有个小问题,那就是左侧栏里的 Search 和 Product Category 的文字字体有点小,我们想把它改大一些。
通过审查元素我们知道,侧边栏的每个 widget工具的标题用的是 H4。


图片:sidebar-h4.png




我们把样式表中的 font-size:13px 的 13px 改成 15px,感觉字体大了一些,这个大小比较合适。由于 H4 是 Heading 的一种,我们可以用 heading 这个关键词来找设置的地方。

在 Theme Options 的搜索框里输入:heading,我们可以在搜索结构里看到一个 Sidebar Styling,提示我们这一项是在 Sidebar 下的 Sidebar Styling 修改。


图片:sidebar-heading-styling.png




我们直接改成 15px,保存。
刷新网页,OK,Search 和 Products Category 的那些 H4 的字体成功修改成 15px。


还有个小问题,左侧的产品目录里面每一项都含有一个底边框,有点不和谐:


图片:product-category-menu-border-bottom.png


我们可以用 Custom CSS 来解决。在 Avada – Theme Options – Custom CSS 中添加一行代码:

#menu-sidebar-product-menu li{border-bottom:none}


保存。刷新页面,OK,清爽多了!(如果你不成功,注意检查 sidebar 和 product 有没有写错,之前的菜单名是不是 sidebar product menu。可能你用了复数等等)

图片:product-category-menu-border-bottom-2.png




关于 Products 页面的创建就说到这里!


接着我们在创建的类别 Page 里:Interior Led Lights 和 Exterior Led Lights 这两个类别页面里,也在 Fusion Page Options 中添加 Container,然后添加 Portfolio 元素,并且设置一番。

注意:Categories 选择与之相对应的 Portfolio Category 即可。



二十七、关于 产品分类页、产品(详情)页、产品归总页的总结说明

产品分类页:要先添加 Portfolio Category,然后再添加一个 Page。即产品分类既涉及 portfolio (category) 也涉及 page。

要展示该分类下的产品,就在产品分类的 Page 里用 avada 的 Fusion Builder 编辑器添加 container。
然后添加 portfolio 元素,在里面勾选对应的 portfolio category.


产品(详情)页:只用 Portfolio 来创建就可以了。

注意创建的时候勾选所属的 Portfolio Category。并且添加 Featured Images 的时候,如果有多个图片,尽量都加上,会自动添加 slider 效果。

产品归总页:只用 Page 来创建就可以了。

要展示所有分类下的产品,就在产品分类的 Page 里用 avada 的 Fusion Builder 编辑器添加 container。然后添加 portfolio 元素,在里面勾选所有的分类 portfolio category. (如果同时有一级分类和二级分类,只勾选一级分类即可)


Portfolio 作为产品(详情)页,URL 中存在的 portfolio-items(或avada_portfolio) 怎么修改?

我们在创建 Portfolio 产品页的时候,会发现在标题框内填写完产品标题后,会自动生成该页面的 permalink:

图片:portfolio-items-permalink.png



Permalink: http://www.ledlightsmfg.com/portfolio-items/your-title-name/


新创建的产品,URL 里会自动带有 portfolio-items。这个在访客浏览我们产品页的时候,体验肯定是不好的。我们怎么修改掉呢?
我们到 Avada 主题设置的 【Portfolio】中去改。在 General Portfolio 中,找到 Portfolio Slug,可以看到填写框默认为 portfolio-items。
我们修改成 product 或 product-view 或者 item 都可以。

图片:modify-portfolio-slug-name.png



此时,我们再点击 WP 左侧的 Portfolio 菜单,来到 Portfolio 列表中,随便选择一个 Portfolio,鼠标移到 view 上去以后,然后看浏览器底部状态栏的链接地址。

图片:portfolio-slug-changed-check.png




我们可以看到,URL 已经变成了:http://www.ledlightsmfg.com/product/your-title-name/
OK。搞定!

如果你发现这个 URL 打开是 404 页面,打不开,那么记得去 Setting - Permalink 下再次点击 save changes 一次即可。


Products 产品汇总页中点击具体产品页,URL 带着个 portfolioCats=xxxxx 的尾巴,怎么去掉?

这个可以在 Element – Portfolio 的具体设置里设置不显示。具体的步骤:编辑 Products 页面,点击 Portfolio Element 元素,在弹出的配置页面上,找到 Hide URL Parameter 这一项。

图片:hide-url-parameter.png


此时再重新刷新 products 页面。OK 顺利解决!

二十八、Portfolio 页面的 Related Projects 修改成 Related Products

注意:如果某个 Portfolio Category 下面只有一个产品,那么访问该产品页面时,就没有 related projects 显示。
Related 的机制是基于:处于同一个 portfolio category 下的产品会显示。


图片:related-projects-example.png





如果你不需要显示相关的产品,可以让这个 Related Projects 模块不显示。

图片:related-projects.png



当然,很多人都希望显示以增加访客访问页面数量,增加停留时间,所以一般情况下我是让它显示的。
接着说 Portfolio 产品页面下方的 Related Projects 怎么改成 Related Products。

首先在 AVADA- THEME OPTIONS 我们搜索 Related Projects 的时候,如上图,并没有可以修改这个名称的地方。于是我们想到到主题文件里去找找。我们在本地的 Avada 主题文件根目录下用 notepad++ 随便打开一个文件,然后使用搜索功能。

图片:related-projects-search-1.png



找到此文件:Avada\includes\avada-functions.php

图片:related-projects-search.png



在上面截图中这一行中,有输出 Related Projects 这个名称。接下来我们说在后台怎么做修改。
点击 Appearance – Editor,在右侧的 Select Theme to Edit 处的下拉菜单中选择 Avada。然后点击 Select。
此时下方会出来很多文件名称,ctrl+f 组合件查找“avada-functions.php”,找到 avada-functions.php,点击进行编辑。在打开的 avada-functions.php 文件页面中继续 ctrl+f,查找“related projects”,找到以后,把 Projects 改成 Products。然后点击 update file 按钮。
接着去某个产品页里看看,此时已经显示成 Related Products 了。

图片:related-products.png





二十九、把分类页设置好父级

前面说了,我主要建了两个大分类:
  • Exterior Led Lights
  • Interior Led Lights
那么如果我们不做任何调整,这两个分类的 URL 是这样的:
  • http://www.ledlightsmfg.com/exterior-led-lights/
  • http://www.ledlightsmfg.com/interior-led-lights/
这不太好,因为没有体现 products 作为父级。此时,在 WP 后台的 Page 列表中,也体现不出来这两个分类和 Products 这个汇总有什么关联。

图片:guanlian1.png


此时我们编辑这两个分类的 Page,在右边 Page Attributes【Parent】那里,选择 【Porducts】,更新保存。

图片:guanlian2.png



OK,此时 Page 列表中则体现了级别关系:

图片:guanlian3.png



这样,分类结构的建立才算完整了。
此时,这两个分类的 URL 是这样的:
  • http://www.ledlightsmfg.com/products/exterior-led-lights/
  • http://www.ledlightsmfg.com/products/interior-led-lights/
三十、在 robots.txt 文件中禁止谷歌收录 portfolio categories 页

之前有个料神米课的学员自己建站时,发现忘了勾选不鼓励搜索引擎索引收录,结果不少页面已经被谷歌收录了。我看了一下,很多被收录的页面她已经建的差不多了没太大问题,但有一类页不应该给谷歌收录,非常影响用户访问体验。
什么页面呢?portfolio category 页面。如果你不知道,你在 Portfolio – Portfolio Categories 中查看你已经建立的分类,然后点击 View 就知道了。

图片:view-portfolio-categories.png


你会发现这个页面的 URL 是:http://www.ledlightsmfg.com/portfolio_category/exterior-led-lights/

而且,这个页面打开,就产品特色图片,而且可能排列还比较乱。

谷歌把 portfolio category 页面给收录了,其实这些页面是不需要展示在网站上的。因为我们建立分类的时候,先是建立了分类的 portfolio category,同时建立了展示这些分类产品的 page。我们希望给访问者展示的是这些 page,而不是 portfolio category。

所以我们需要在蜘蛛协议中禁止搜索引擎抓取这些 portfolio category 页面。你可以通过 SEO 插件 yoast seo 来编辑 robots.txt 文件。

初始状态是这样的:

图片:robots.png



可以看到,由于我们选了禁止搜索引擎收录,所以有一条 Disallow: / 的记录。等我们网站建好,我们会在设置里取消勾选禁止搜索引擎收录,那么这一条记录就会删除。
我们在下面一行加两条记录:Disallow: /wp-admin/Disallow: /portfolio_category/  。即:

User-agent: *
Disallow: /
Disallow: /wp-admin/
Disallow: /portfolio_category/

这样即使后期我们放开搜索引擎抓取,我们也可以保证谷歌不去抓取 portfolio category 页面。


说明:关于 robots.txt 的设置,我们这里先简单提一下,后面建好网站后还需要加不少规则,到那时我们再专门说。

三十一、安装图片压缩插件

非常有必要安装一下图片压缩的插件,能大大地给图片文件瘦身,也可以加快页面加载速度。推荐 TinyPNG 出品的这个插件:
https://www.liaosam.com/wp-plugin-compress-images.html


三十二、Contact 页面以及 CONTACT FORM 7 表单

首先我们要在纸上或者电脑上画出大概的布局框架图。


比如,像我这样对 Contact Us 页面做个布局:

图片:about-us-frame.png




很显然,有了这个布局图之后,我们知道在 Fusion Builder 里面我们要建 3 个 container。
  • 1/1 container for contact us image banner
  • 1/1 container for texts
  • 1/2+1/2 container for contact form and contact info
首先我们要找一个宽度足够大的 contact us 图片。如果我们网页主体宽度为 1100px,那么这个图片的宽度最好大于 1100px。

我们去 【Page】-【Contact】页面里,点击 Use Fusion Builder,然后添加第一个 Container,1/1容器,之后点击 +element,选择 Image Frame。在设置页面选择 Upload image,上传 contact us 图片,然后其他不用设置,点击保存。之后添加第二个 Container,选择1/1容器,之后点击+element,选择 Text Block,然后填入文字。


OK,先添加这两个 Container,然后保存网页。刷新页面,可以看到已经显示 OK!


图片:about-us-2.png





BTW: banner 图片我随便找的,也没怎么做 PS 处理,就随便演示一下。可以用 Photoshop 在图片上添加一些 Contact Us 之类的文字什么,大家自己去弄吧。

还差最后一个复杂一点的两列的 Container 怎么来做,我们下面来讲。


三十三、联系表单如何制作

接着要说怎么添加联系的表单了。一般联系的表单是用 CONTACT FORM 7 插件来做。
在后台 WP 左栏菜单【Contact】 ,点击 Add New 创建新的联系表单。在 Title 那里填入:My Contact From。


图片:contact-form-1.png



在第一行的 <label> 标签前插入以下代码:

<h2 style="font-size: 25px; line-height: 35px;" data-inline-fontsize="true" data-inline-lineheight="true" data-fontsize="25" data-lineheight="35"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</h2>


图片:contact-form-0.png






然后保存。保存完毕之后,在表单列表中有这么一条记录,复制 shortcode。

图片:contact-form-2.png





复制完之后,来到 【Page】-【Contact】页面,在最下面的那个 Container 1/2+1/2。
在左边的 1/2 部分点击 + Element,然后选择 Text Block,然后在编辑器内粘贴上面复制的短代码。


图片:contact-form-3.png





保存。


右侧的 1/2,我们添加 Content Boxes。具体为:

图片:contact-form-5.png





右侧的参数设置好之后,点击左侧的内容列表。点击编辑按钮,进行编辑。

图片:contact-form-6.png





图片:contact-form-7.png





点击保存。然后来到 Fusion Builder 的页面,我们稍微做点美化,我们把中间 banner 图下面的 Container 中的一行文本 text block 进行编辑:

图片:contact-form-8.png




OK,搞定!我们来看看效果:

图片:contact-form-9.png





我们还可以让这个联系表单外观更简洁一些。
编辑 “My Contact Form”,在 Form 选项中把所有的代码替换成下面的代码,保存。

<h2 style="font-size: 25px; line-height: 35px;" data-inline-fontsize="true" data-inline-lineheight="true" data-fontsize="25" data-lineheight="35"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</h2>
<label> [text* your-name placeholder "Name*"] </label>
<label> [email* your-email placeholder "Email*"] </label>
<label> [text* your-country placeholder "Country*"] </label>
<label> [text your-subject placeholder "Subject"] </label>
<label> [textarea your-message placeholder "Message"] </label>
[submit "Send"]


看看效果:


图片:contact-form-10.png



接下来的工作,就是要让这个联系的表单起作用,让任何访客发的邮件,可以自动发到我们的企业邮箱中去。


点击 【Form】选项卡,设置邮件转发。关于 Contact Form 7 的设置以及收发留言邮件,可以看看这篇文章,说得挺详细:

https://www.liaosam.com/contact-form7-wp-smtp-setting.html


三十四、网站首页内容丰富


本文篇幅太长,已经另开一篇文章继更。欢迎继续阅读:
https://www.liaosam.com/wordpress-build-website-operation-part-2-html.html
哎。好累,歇歇!
[cn1001639997于2019-05-08 23:35编辑了帖子]
博客 https://www.liaosam.com
外贸老鸟之路。关注WX公众号料神外贸,私人号liaosam36。注明“外贸圈”。
回复(5) 喜欢(5)     评分
cn1528202041anve
外贸学长
外贸学长
  • 用户名cn1528202041anve
  • 粉丝1
  • 发帖数728
  • 铜币108枚
  • 威望-1点
  • 社区居民
  • 忠实会员
11楼#
发布于:2019-05-08 08:42
学习了!!!!!!!!!
可以搜索大型批发商,可以看到国外采购的实体店铺,可以分析出来采购负责人,可以看到哪些全球哪些客户客户在采购,了解同行客户以及出口数据的神器 免费体验链接: http://t.smartsousou.com/r?i=243FBF 详情咨询QQ1941608420
回复(0) 喜欢(0)     评分
cn1524374116wxxx
外贸新生
外贸新生
  • 用户名cn1524374116wxxx
  • 粉丝1
  • 发帖数139
  • 铜币91枚
  • 威望0点
12楼#
发布于:2019-05-08 09:33
很长的文章,感谢分享
【图灵搜】基于谷歌地图可以做到对谷歌地图快速精准定位,批量获取相同属性的客户。批量获取采购人邮箱,电话,社交账号等详细资料。
注册试用链接:http://t.smartsousou.com/n?i=E38E9D
咨询Q:3166654047
回复(0) 喜欢(0)     评分
cn1524488746tnlq
外贸本科生
外贸本科生
  • 用户名cn1524488746tnlq
  • 粉丝0
  • 发帖数193
  • 铜币519枚
  • 威望0点
  • 活跃读者
  • 社区居民
  • 忠实会员
13楼#
发布于:2019-05-08 09:47
料大你好啊 敬仰已久 我想用阿里云的主机可以一键安装wordpress的主题吗 想学你先建个博客学习先
回复(1) 喜欢(0)     评分
ki1001565912
外贸学长
外贸学长
  • 用户名ki1001565912
  • 粉丝4
  • 发帖数623
  • 铜币246枚
  • 威望-3点
14楼#
发布于:2019-05-08 11:05
学习
回复(0) 喜欢(0)     评分
cn1525076855tfov
外贸本科生
外贸本科生
  • 用户名cn1525076855tfov
  • 粉丝1
  • 发帖数150
  • 铜币311枚
  • 威望0点
  • 社区居民
15楼#
发布于:2019-05-08 11:16
深圳汇顺达国际物流(DHL UPS FedEx TNT EMS) 可出口电池产品。—亚马逊FBA门到门运输入仓—香港UPS-WE直发双清包税,3-5天签收入仓。美国空派,加拿大空派。欧洲空派,大陆飞,香港飞,UPS/FedEx派送入仓。—美国海运专线,美森快船,盐田慢船,卡派。包清关包税派送。---新马泰专线,日韩专线,澳洲专线,国际小包,快递,空运,海运,等服务。———自主线路,一级代理,渠道安全稳定,快速,实惠。随时欢迎您的咨询,多一份选择与服务,助您一路领先:QQ 747425482 微信/Call  18816850981
回复(0) 喜欢(0)     评分
cn1001639997
名人堂名人
名人堂名人
  • 用户名cn1001639997
  • 粉丝19735
  • 发帖数994
  • 铜币11356枚
  • 威望35点
  • 外贸达人
  • 社区明星
  • 问答帮帮团
  • 忠实会员
  • 社区居民
16楼#
发布于:2019-05-08 15:24
cn1524488746tnlq:料大你好啊 敬仰已久 我想用阿里云的主机可以一键安装wordpress的主题吗 想学你先建个博客学习先回到原帖
看你主要用的是什么主机了?阿里云的主机我不太清楚,我的个人博客用的是阿里云ECS,也就相当于是阿里云的VPS。其实需不需要一键安装 wordpress 并不重要,会用 ftp 上传文件就好。手动安装 wordpress 也很简单。
博客 https://www.liaosam.com
外贸老鸟之路。关注WX公众号料神外贸,私人号liaosam36。注明“外贸圈”。
回复(0) 喜欢(0)     评分
tuulin
初来乍到
初来乍到
  • 用户名tuulin
  • 粉丝0
  • 发帖数3
  • 铜币0枚
  • 威望0点
17楼#
发布于:2019-05-08 16:36
学到了
回复(1) 喜欢(0)     评分
cn1528439803xjyq
初来乍到
初来乍到
  • 用户名cn1528439803xjyq
  • 粉丝0
  • 发帖数1
  • 铜币0枚
  • 威望0点
18楼#
发布于:2019-05-08 16:39
66666666666
回复(0) 喜欢(0)     评分
cn1527758918huxj
初来乍到
初来乍到
  • 用户名cn1527758918huxj
  • 粉丝0
  • 发帖数28
  • 铜币0枚
  • 威望0点
19楼#
发布于:2019-05-08 16:50
6666666
回复(0) 喜欢(0)     评分
上一页
游客