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,能够独立建站;

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主题之如何建立产品页?

确定产品分类

1),进入’Portfolio -> Portfolio Categories’,新建或修改产品分类(football, basketball, handball);

2),进入’Portfolio -> Add New’,添加portfolio(产品),并将这些产品正确的归到产品分类中;

确定产品页边栏

进入主题面板,新建一个名为products的边栏,稍后我们希望这个边栏显示产品分类和联系信息在产品页面的左侧;

建立产品页面

1),进入’Pages -> Add New’,新建三个页面,名称分别为football,basketball和handball;

2),利用模块拼接排版,在ADD ITEMS里选取portfolio添加,如果想每行显示4个产品,那么保持模块比例不变。如果想每行显示3个产品,点击+号,将其改为1/3;

2014-04-19 19-05-37

3),点击编辑标识,对产品模块显示进行配置,由于图片太长不便展示,所以将各项英文解释翻译如下:

  1. HEADER TITLE – 标题,留空即可;
  2. PORTFOLIO SIZE – 产品大小,只有两个选项(1/3和1/4),自行实验如何选定;
  3. CHOOSE CATEGORY – 选择产品分类,那我们已经建立了三个分类,此时如果你是新建第一个页面,那便是football;
  4. ENABLE FILTERABLE – 是否显示过滤按钮,请选择NO;
  5. PORTFOLIO NUM FETCH – 每页显示产品数量,自由填写,如果是每行四个,那就填写16吧,产品显示4行4列;
  6. SHOW TITLE – 是否显示产品标题,通常是选择YES;
  7. SHOW VIEW ALL PROJECT – 选择NO;
  8. SHOW EXCERPT – 是否显示产品摘要,产品图片下方会显示一些文字解释;
  9. LENGHT OF EXCERPT – 这里就是文字解释的长度限定;
  10. SHOW READ MORE BUTTON – 通常不需要了,选择NO;
  11. SHOW VISIT WEBSITE BUTTON – 选择NO;
  12. ENABLE PAGINATION – 选择YES,当然需要页码啦!:-)

4),选择左侧边栏,边栏为products,不要显示页面标题和内容(因为现在用的是模块拼接排版);

2014-04-19 19-24-49

4-a),当然如果你想在产品模块展示的同时,在希望添加一些文字说明,那么请将SHOW PAGE CONTENT选定为YES,同时在内容里添加文字即可(这个功能是个人比较推荐的做法,分类的说明能让客户更清晰的了解我们的产品);

5),发布;如是操作,我们完成三个页面,分别是football,basketball和handball;

6),进入’Appearance -> menu’,新建一个菜单,譬如命名为balls,将以上三个页面添加进去;

2014-04-19 19-36-19

7),进入’Appearance -> widgets’,将“Custom Menu”拖拽到products边栏内,填写标题并选择菜单为balls,记得Save;

2014-04-19 19-40-57

8),继续拖拽文本小工具或其它的到products边栏内,完成内容后就可以进入网站查看产品页的效果了;

产品详情页的编辑与排版

1),默认的portfolio详情页如下图所示,这种展示并不适合产品,所以我们需要对此进行改造;

2014-04-19 20-30-15

2),portfolio详情页支持侧边栏,我们将其设置为左侧边栏,同样使用之前设定的products边栏;另仅需将SOCIAL NETWORK SHARING设置为YES,其它的选项都可以不用管了;

3),进入主题面板General -> Additinal Css ,添加以下CSS代码,将上图的123全部隐藏;

 div.single-port-nav, div.single-port-thumbnail-image, div.single-port-info { display:none !important;}

4),进入’Appearance -> Editor’,找到single-portfolio.php,在133行处,将twelve改为sixteen(不要问为什么,照做就OK);

现在再次浏览portfolio(产品)详情页,看到效果会如下所示,至于内容图片的排版这个在后台就可以自己编辑了(插入图片而已);

2014-04-19 21-01-07

视频讲解

暂无,敬请期待;

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,这个操作有些麻烦,建议看自带英文教程来学习。

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

视频讲解

暂无,敬请期待!