推荐Advance Category Template插件:定制产品页展示

在这之前讲到Blog in Blog插件,也算是比较好的插件,能够很好的用POST(文章)展示产品。当然如果你使用一些商业插件,PORTFOLIO是标配,所以用POST来显示新闻,用PORTFOLIO来展示产品比较合适。

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

DEMO:http://www.yobots.org/goodspace/portfolio-category/products-test/

但新问题又来了,想正确使用面包屑,可没有这么简单,因为在显示最终项目时,面包屑是指向上一级分类目录的。所以使用今天的推荐插件,就可以将分类定制成豆腐块(当然你想弄成其它的效果也是OK的)来展示产品。请注意,本文只是针对GOODSPACE主题来设置,其它的主题设置原理类似,但具体操作很不一样。

1,安装插件 Advance Category Template

2,设置使用portfolio分类

3,新建分类模板文件(本文提供了现成的文件,上传即可)

4,添加自定义CSS

5,新建一个PORTFOLIO分类,给这个分类附加一些内容,就可以看看效果了。

注意事项:

A,分页数量由“博客页面至多显示”决定,

B,特色图像大小一致,标题长度保持一致

C,进入GOODSPACE主题设置,将SEARCH/ARCHIVE项设置为LEFT SIDEBAR或RIGHT SIDEBAR

D,进入小工具,拖一些小工具到边栏里,就可以看看效果啦。

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

视频讲解

暂无,敬请期待;