Modernize外贸建站企业建站视频教程

全套高清视频教程购买:http://i.xue.taobao.com/detail.htm?courseId=30344

1-Modernize安装主题和子主题

2-Modernize主题设置之Gerneral

Modernize主题介绍:

目前在ThemeForest网站,Modernize在WordPress主题销售排行中第12名,可见它的欢迎度是极高的。

这套主题支持自适应,WP多语言插件,模块化建站非常方便,SEO优化完善。扁平化设计,高端大气上档次,能够满足中小企业,小商城和个人建站需要,特别适合外贸网站。如果您有WordPress快速建站的需求,强烈推荐您学习本课程。

学习了本课程能达到什么目标:

1,全面了解Modernize的绝大部分特性,节省摸索时间;
2,熟悉使用本主题建站的流程,快速上手;
3,实例操作能够让您跟着学,增加学习信心和兴趣;
4,能够独立建站;

WordPress主题之GoodSpace外贸建站企业建站视频教程

【购买GOODSPACE全套高清视频教程】:http://i.xue.taobao.com/detail.htm?courseId=30779

请注意DEMO地址已经更换到:http://www.yobots.org/goodspace/

GoodSpace主题推出时间较早,有一批死忠粉,自然有它的道理,您不容错过。

这套主题支持自适应,模块化建站非常方便,SEO优化完善。扁平化设计,高端大气上档次,能够满足中小企业和个人建站需要,特别适合外贸网站。如果您有WordPress快速建站的需求,强烈推荐您学习本课程。

本视频实例操作部分讲了很多代码修改定制网站,您不但能定制自己的网站,还能学到更实在的建站实操干货。

学习了本课程能达到什么目标:

1,全面了解GoodSpace的绝大部分特性,节省摸索时间;

2,熟悉使用本主题建站的流程,快速上手;

3,实例操作能够让您跟着学,增加学习信心和兴趣;

4,能够独立建站;

Modernize主题的短代码使用和自建站问题汇总

通过前面2篇文章的介绍,加上各位自己的摸索,相信你基本熟悉了Modernize主题特性。对于本主题模块化操作,我建议是大家将每个模块都添加一下,尝试着排版来熟悉它的功能。作为本主题的最后一篇介绍,我们讲一下排版时用到的一些短代码,另外还有主题面板里的一些设置。

 1,显示短代码按钮

默认情况下,短代码是隐藏的,如图点击展开所有按钮即可。这些短代码按钮相当于一个快捷操作,不使用这些按钮,我们依然可以在内容区域手动输入。当然了,如果不采用内容区域而采用模块拼接,就不需要了解大部分短代码的功能了。

2014-04-20 20-57-26

2,排版时灵活使用divider和space短代码

默认的DIVIDER代码插入是[divider scroll_text=”SCROLL_TEXT”],可将SCROLL_TEXT改为“Go to Top”,当然也可以不使用这个文字而直接采用[divider],divider的作用是插入分隔线。但在实际操作时会发现,分隔两部分内容时,下面与分隔线的距离太近,显示很不协调。这里我们要使用到space短代码,紧接着上面的短代码加入:[space height=”10″],数值“10”可任意修改。

3,更改portfolio为products

地址栏的URL中显示portfolio总是看着不舒服,改为products会比较顺眼,很高兴的是此主题支持我们在后台修改(很多主题并不支持)。进入主题面板即可看到如图,将其改为products,接着save changes。为确保修改生效,请进入setting ->Permalink,将固定链接先切换到默认项->保存,接着再切换到你预设的项目 ->保存。—-大家一定要注意这个操作,在很多涉及到修改源码/安装插件导致前台页面链接失效(出现404错误)时,这样的操作能够起到重置链接数据的作用。

2014-04-20 21-14-12

4,启用自适应

Modernize是支持自适应的,意思是网站在手机和平板上都能自动适应屏幕而达到很好的浏览体验。默认是关闭这项功能,请进入主题面板开启ENABLE RESPONSIVE项。

5~N,占位编辑(根据用户和留言反馈,我们会将新的知识点归纳在此。欢迎大家在使用中将问题通过评论反馈,不要旺旺或QQ提问,谢谢配合!)

Modernize主题之安装和简要设置

前言

Modernize主题既适合零基础者,也适合wordpress爱好者二次开发(很强的扩展性);同时主题附带的portfolio模块支持侧边栏(左/右都可),有了这个模块,实现产品列表就方便多了,而很多主题是不支持portfolio页面侧边栏的,详细请看“第六节:发布产品前得知道Portfolio适合你吗?”;最后,页面和文章都可以通过内置小模块的拖拽来排版,操作简单易懂。

由于本人也是外贸人,另外做外贸站须为英文为主,所以建议大家做站时最好是选用英文wordpress后台,避免搜索引擎识别冲突。所以本教程的截图引用英文界面。

本教程并不是主题自带教程的翻译版本,但是在看本教程之前,如果你有足够的时间、精力和英文基础,我还是强烈建议大家看看自带的英文教程。英文教程是以旧版wordpress后台演示,并且没有导入演示数据的操作,所以对于初次接触者理解主题有一定的难度。本教程主要讲解快速安装和详细解说主题使用,力求做到初学者看完就能独立建站。

话不多说,正式开始!

安装

确保WORDPRESS安装在LINUX主机上,如果WP和主题安装出现问题,请先排查主机问题;

1),通过FTP安装主题

第1步:解压下载下来的压缩包,你会看到如下所示的一些文件;

2014-04-18 22-47-30

document是自带英文教程,modernize-v3-15是主题文件夹,demo-xml.xml是演示数据,modernize-v3-15.zip是主题文件压缩包

第2步,利用FTP工具,将modernize-v3-15文件夹上传到wp-cotent/themes目录下;

第3步,启用主题,安装完毕;

2),在WP后台面板安装主题

注:由于类似主题压缩包通常都超过2M,而一般的主机又限制上传文件不得超过2M,所以在WP后台安装有可能会不成功,所以只能使用FTP安装。

第1步,进入’Apperance -> Themes’;

第2步,点击’Add New’;

第3步,点击’Upload Theme’,上传modernize-v3-15.zip压缩包,完成安装,并启用主题;

导入演示数据

第1步,进入’Tools -> Import’,安装wordpress导入插件并启用之;

2014-04-18 23-03-59

第2步,利用此插件导入演示数据demo-xml.xml,可勾选导入演示图片。

2014-04-18 23-18-34

第3步,等待3到5分钟,导入成功,会显示如下提示;

2014-04-18 23-23-14

导入所花费时间根据双方服务器的速度决定,也可能会导入失败,在网络好的情况下多试几次即可,如果继续有问题,请排查服务器故障和权限问题。{上图所示的有些错误,请仔细分析,因为本主题兼容WOO COMMERCE插件,所以演示数据里含有商城数据,而我们并没有提前安装WOO插件,所以这部分数据导入时会失败,这并不影响我们建站,切勿纠缠此处。}

设置首页,菜单和其它

第1步,进入’setting -> reading’,将main设置为首页;

2014-04-18 23-30-35

第2步,进入’Appearance -> menu’,设置主题预设的两个菜单(主菜单和顶部);

2014-04-18 23-33-26

第3步,进入主题面板’Modernize’,点击’Save Changes’(如果不操作这步就去查看网站首页,你会发现所有的图片会闪动,这是因为演示数据导入后没有与本站兼容而导致,通过点击SAVE CHANGES,有重置的作用。);

好了,演示站的安装到此就结束了,请查看网站首页,发现除了FOOTER没有显示,其它的内容与官方演示几乎一样了,接下来我们了解主题的详细知识。

头部/边栏(SIDERAR)/FOOTER/COPYRIGHT

1),进入主题面板’Modernize -> Overall Elements -> Logo’,通过UPLOAD上传LOGO,另有三处MARGIN数值供填写,来调整LOGO的位置;

2),进入主题面板’Modernize -> Overall Elements -> Top Right Area’,可以填写内容(支持HTML),它们会显示在网站顶部右侧;

3),进入主题面板’Modernize -> Overall Elements -> Social Network’,可以填写社交媒体链接,它们会出现在网站的头部右侧;

4),进入主题面板’Modernize -> General  -> Sidebar’,新建侧边栏(上限数量未知,通常建立三五个足矣,须用英文名),现在很多主题都支持自定义SIDEBAR,这是主题扩展性的重要特征,这样我们可以对不同的页面、文章来显示不同的侧边栏。

5),FOOTER预设了6种形式,进入主题面板’Modernize -> General  -> Footer Style’,选定任一种形式;

6),进入主题面板’Modernize -> Overall Elements -> Copyright Area’,填写底部copyright内容(支持HTML);

以上讲到的SIDEBAR,现在并不需要急于添加内容,但我们必须知道这里的设置只是第一步,接下来我们需要进入’Appearance -> Widgets ‘,将小工具拖拽(添加)到相应的SIDEBAR内。对于FOOTER,我们也是在Widgets里操作。

页面设置

1),在第3节第一步操作,我们完成了首页的设置,首页的名称是main,那我们现在进入这个页面(Pages -> All pages)进行首页制作;

2),进入main编辑页面时,为了便于接下来网站显示,建议将main名称改为Home,内容项此时是空的,这是因为本主题支持模块拼接来排版,如下图所示;

2014-04-19 10-18-03

接下我们看

2014-04-19 10-44-02

【A】页面布局:默认的首页,并没有侧边栏,所以我们选择的是无侧边栏布局。但是不是首页就一定不需要侧边栏呢,答案是否定的,如www.wksolar.com,我们就是采用了Both sidebar的布局。这个需要根据实际需求而定,对于其它所有页面和文章,通常要么是只需要一个侧边栏就可以了(Right Sidebar 或者 Left Sidebar)。

【B】页面标题:首页不需要显示标题,其它页面视情况而定;

【C】页面内容:之前提到本主题也支持模块拼接来排版内容,如果不采用模块拼接来排版,那么也是可以使用短代码在内容区域排版。本首页采用的是模块拼接来排版,同时也显示页面内容(虽然内容为空)。建议:如果内容为空,此项设置为NO。

2014-04-19 10-59-35

【D】幻灯片设置:主题预设有4种幻灯片,如果是简单的图片展示,建议使用FLEX幻灯,操作也比较简单。复杂些的采用LAYER SLIDER,这个操作有些麻烦,建议看自带英文教程来学习。

以上是默认首页的设置,大家可以任意调整设置后,再去刷新首页看看有哪些变化,这样的尝试方便快速理解主题的功能。

视频讲解

暂无,敬请期待!

第九节:SEO要点简述

回到目录:WordPress快速建站之系列教程

SEO(Search Engine Optimization),翻译为搜索引擎优化,顾名思义将你的网站优化后以便用搜索引擎抓取收录并提升搜索自然排名。如果有时间好好看看百度百科的介绍,可能你就会明白,SEO是一门非常专业而复杂的工作,不是数日数月就可以掌握的一门技艺。之所以这样说,是因为有太多的人认为花三五百块钱请人做一下网站SEO,然后就可以等着客户自动上门了,完了默念:马上有钱!

网站优化
网站优化

简单归纳一下,网站SEO大概分为:网站结构优化,页面优化和外部链接建设。针对第一条,作为中小企业和个人来说,采用WordPress程序并购买质量优秀的主题(已完成SEO)来建站,基本可以解决这个问题。当然如果有足够的资金和强大的团队独立开发会更好,试想有必要吗?第三条的外部链接建设,通常我们是没有足够的能力去寻求高质量的链接,因为权重高的网站凭什么给你链接,除非有关系或找关系。

我们来着重讲一下第二条的页面优化,这是我们可以花时间和精力逐步完善的工作,而且这项工作需要持之以恒、精雕细琢。这里涉及到关键词优化、标题、图片ALT文字和链接锚文字等,那么如何去做呢?建议购买《SEO实战密码》一书。

以上讲了很多,完全个人的理解,并不保证观点正确。接下来我们需要针对WordPress网站讲几点:

1,SEO插件

比较有名的是WordPress SEO by Yoast和All in One SEO Pack,它会帮助你完成页面优化和检测工作。这两款插件都支持中文版,如果想了解更多,建议安装中文版WordPress后安装插件学习一段时间,再正式安装在英文版站点上,否则设置太多会让人找不着北。

2,Google XML Sitemaps网站地图插件

这个几乎是所有WordPress网站必装插件,虽然与上述的YOAST插件里有内置地图功能重复。但我还是劝你安装它,支持自动/手动生成XML网站地图,搜索引擎蜘蛛来爬行时,就会轻松很多。

3,提交URL给搜索引擎

这个页面里找一些适合你的搜索引擎提交你的网站吧,记得是网站完成后再提交。

最后再提醒一句:SEO是一项长久而细致的工作,千万别急于求成做黑帽SEO,否则后悔莫及。内容为王,原创才是正道!按下那颗浮躁的心默默前行,以此共勉!

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjgxNjkxNDMy.html

第八节:网站基本设置和辅助

回到目录:WordPress快速建站之系列教程

后台的设置和技巧有很多需要学习和推敲的地方,即使一个WordPress老鸟,对于各种设置和技巧也有不同的理解和偏重。对于我们建设个人网站和企业站,很多设置采用默认即可,关注最重要的设置才是起步学习的正确方法。因此,我们这节主要讲网站的基本设置。

1,添加和管理用户

添加和管理用户
添加和管理用户

如果你想授权公司员工发布新闻和管理网站日常事务,不应该将管理员的权限给他,而是添加一个用户,并分配“编辑”的权限,这样对网站安全是非常重要的。

2,设置

WordPress后台基本设置
WordPress后台基本设置

1),常规:这里需要注意“站点标题”、“副标题”、“电子邮件地址”和“日期格式”。前两项根据网站情况来如实填写,通常“副标题”需要我们组织一句完整的话,将网站的主题很好的表达出来。

2),阅读:首页显示这个选项我们将会在后续的教程中经常遇到,用来设置首页和文章页。特别注意的是最后一项“对搜索引擎的可见性”,如果新建网站,建议先勾选上(闭关数日),待网站建设完成后再取消选择而正式发布网站(重磅推出)。

3),固定链接:采用何种链接对SEO的影响,这是一个值得探讨的问题,但至于什么是最好的需要实践来验证。不明白何为固定链接,请选择一项后保存,接着访问网站的文章看看URL。找了一些内容并归纳为四不:日期不要出现在固定链接里面、分类的链接不要出现在固定链接里面、链接不要过深、不要让中文字符出现在固定链接里面。如本站的链接就采用最简单的以/%post_id%.html来伪静态URL(https://www.kalated.com/1243.html)。

3,设置网站图标

注意一下本站的网站图标为一个卡通红色小人,通过源码可看到如下图:

网站图标
网站图标

所以,我们需要先上传图片到空间里,再用这样的代码添加在主题文件(通常是header.php)里就可以了。

4,添加统计代码

网站建成后,肯定希望有很多人来访问,如果没有跟踪代码来记录,你无从知道网站被多少人、哪些国家和地区的人访问了。所以我们需要在网站的源码内添加一段统计代码(通常添加在footer.php)。

好了,这节内容就这些了,不明白的地方欢迎留言。

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjgxNjgzMzMy.html

第五节:建立页面和排版内容,幻灯片的使用

回到目录:WordPress快速建站之系列教程

上一节我们简单认识了HTML代码和WordPress主题的短代码,这一节将针对特定主题做一些页面排版的讲解。同时建立页面时,我们需要选择合适的模板,当然这些模板也是主题自带的。我觉得幻灯片也是属于页面排版的一部分,所以将其纳入本节内容。幻灯片插件有很多种,在这之前有一篇关于Revolution Slider幻灯片的使用视频,再次提醒下,幻灯片插件很多,使用方法各异,同时插件不断升级后,界面和功能都会有所增强,所以对这些插件的使用,需要进一步的学习和研究。

1,新建页面

鼠标移至“页面” – “新建页面“,即可点击创建一个页面。键入页面标题,标题下方会自动生成固定链接,当然你可以手动修改,这也是我们建议的操作。在页面的右侧有”发布“,”页面属性“,”特色图像“等,如果没有可以通过后台上方的”显示选项“来设置,如图所示。

新建页面-wordpress后台
新建页面-wordpress后台

2,排版内容

现在就是我们使用短代码大显身手的时候了,当然你得提前准备好文字内容和图片。网站是否好看,很大程度上取决于你的审美、图片是否精美和排版是否合理,多参考一些酷站,力求图文混搭合理,从我的经验来看,很多不懂HTML代码的朋友(设计出身),他们的排版出来的页面却非常精美。关于如何排版,请看视频讲解。

3,幻灯片的使用

有的幻灯片已经与主题整合在一起,只需要在新建页面时设置显示多张图片就可以,而有的主题的幻灯片插件是独立的,新建幻灯片后,再进入页面通过短代码或选项设置即可显示。

最后,因为主题不一样,页面排版中使用的短代码和幻灯片插件使用都不尽相同,需要大家区别对待。我们已经筹划将推出更多的针对特定主题的详细讲解视频,便于大家快速掌握建站技巧。本系列教程属于零起步教程,如果你没有WordPress基础,建议还是要耐心看完接下来的几节内容。

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjgxNzAyMTAw.html

第六节:发布产品前得知道Portfolio适合你吗?

回到目录:WordPress快速建站之系列教程

既然是使用WordPress主题来建设企业站,那么必然要展示我们的产品。以国人的习惯通常是将本企业所有的产品都发布出来,以便客户去查阅,而且更倾向于使用豆腐块式展示,如下图:

豆腐块式产品展示
豆腐块式产品展示

这种方式没有好坏之说,因产品的不同,有时选择这种方式展示产品也是必然的选择,虽然老外可能更倾向于看到更多更丰富的页面排版或PDF文档下载。在这里我们不去探讨何种产品展示更适合老外浏览,既然是外贸,相信老外访问你的网站就是为了找到需要的产品而不是为了欣赏。

刚刚说了,如果你倾向于用豆腐块来展示产品,那么可能很多企业级WordPress主题都会让你失望的,因为它们偏偏没有产品发布这样的模块。而是提供了一个名叫Portfolio的东西,并且很多主题提供的Portfolio模块并不支持侧边栏。(注:文中提到很多WordPress主题中的Portfolio并不适合产品发布,但也有一些主题的Portfolio设置完美支持豆腐块产品,这需要我们擦亮双眼去寻找喽。)

对于以上说到的问题,我们有两个解决办法,一是修改Portfolio模块,二是利用插件定制产品模块。对于修改Portfolio模块,这是一项比较复杂而且难度较大的工作,这里我们就不去探讨。利用插件定制产品模块是怎么回事呢?我推荐使用Blog-in-blog插件来实现,前提是你需要懂得一定的HTML和CSS基础知识,视频里我们会简单讲解一些关于如何使用这个插件和实现产品展示功能。

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjgxNTc4MjAw.html

第七节:联系表单

回到目录:WordPress快速建站之系列教程

之所以将Contact Form 7作为一个单独章节来讲,是因为联系表单承载着潜在客户与企业主直接联系的任务。费劲心思建设网站、优化和推广,目的就是让客户找到我们,了解我们从而能够联系我们place an order。如果在最后一环(联系)出现问题,那可太糟糕了。

Contact Form 7是目前最流行和使用最广泛的WordPress插件,在后台搜索“Contact Form 7”即可在线安装。如果你的WordPress是中文版,那么你安装的将也是中文版(多语言插件啦这个是),安装完激活即可进入“联系”使用插件。

安装后会有一个默认的表单,更改名称,设置内容,保存后回到主目录下。你会发现类似如下的短代码。

 [contact-form-7 id="223" title="contact form"]

将短代码复制到你想展示的地方就可以了,甚至你可以将短代码放在侧边栏。

当你将表单安排妥当后,需要认真检测,如果发现邮件发送不及时或邮件跑到垃圾箱内,你可能就需要试一下WP SMTP插件了,这个插件可以避免这两个问题。但如果你的服务器(主机)关闭相应SMTP端口,可能你联系服务器客服都无济于事,原因可以看这里

总的来说,这节内容很简单,但等你摸索清楚Contact Form 7的性能后,你还可以通过其它插件/代码辅助它来实现如下的效果(页边停靠按钮,点击按钮弹出联系表单)。

弹出联系表单(contact form 7)
弹出联系表单(contact form 7)

勘误:视频中讲到mail.163.com是错误的,应该是smtp.163.com,错误之处,请谅解!
视频中讲解的WP SMTP插件已经更新可用了(2014-03-23),请大家留意。

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjgxNjcyODQw.html

第四节:HTML代码和WordPress主题的短代码如何使用?

回到目录:WordPress快速建站之系列教程

在认识和学习HTML代码和主题短代码前,我们得先了解一下所见即所得编辑器,如图1所示,编辑器上方有很多类似Word里的按钮,用以排版内容,注意在右上角有可视化/文本选项。

图1:所见即所得编辑器(可视化)
图1:所见即所得编辑器(可视化)

虽然主题短代码在可视化状态下是可以看见的,但HTML代码必须在文本状态下才可以看到,如图2所示。

图2:所见即所得编辑器(文本)
图2:所见即所得编辑器(文本)

1,HTML代码

由于种种原因,在可视化状态下编辑内容有时候会出现错位等问题,所以我们不得不切换到文本状态下检查HTML代码是否正确。HTML代码是以”<“和”>”左右尖括号包围的,同时以带“/”来结束的。

加粗代码:
<strong>内容</strong>
斜体代码:
<em>内容</em>
链接代码:
<a href="https://www.kalated.com" target="_blank">卡拉科技</a>

我们可以将HTML代码理解为一个容器,那么大容器里是可以放小容器的,下面的代码是正确的。

<p>这儿是一些内容,对我<strong>加粗</strong></p>

事实上容器是不可以交叉的,如下面的代码就是错误的。

<p>这儿是一些内容,对我<strong>加粗</p></strong>

通常情况下在后台添加和编辑内容并不需要我懂得一丁点儿HTML代码,但上面讲到的这个错误示例经常会遇到,大家需要注意一下。

2,主题定义的短代码

主题定义的短代码其实是一个个函数,只是避免让用户直接面对太多源码而简化的结果。短代码通常是以“[”和“]”包围的,并以“/”结束(有些没有)。由于主题的不同,各自短代码的含义也是不同的,所以在拿到新的主题时,需要对短代码进行详细了解。同样的,上面提到的HTML错误示例也适用这里,短代码也是不允许交叉的,更不允许HTML代码和短代码交叉。

以下代码是错误的:
[list]这儿是一些内容,对我<strong>加粗[/list]</strong>
[list]这儿是一些内容,对我用[red]红色[/list][/red]

以下代码是正确的:
[list]这儿是一些内容,对我<strong>加粗</strong>[/list]
[list]这儿是一些内容,对我[red]<strong>加粗</strong>[/red][/list]

在页面排版中,短代码的使用是非常必要的,也是必须掌握的基本知识。做网站无非是做好框架,填充图片和文字内容,这些都会用到短代码。

更改与说明:在视频中讲到“列”短代码时,由于没有详细查看主题分列规则的说明,所以造成了一定的误区,大家在理解这个主题的分列规则可以通过主题自带的页面说明来理解,请看http://centum.purethemes.wpengine.com/full-width/

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjc5ODMyNzky.html