Modernize主题之如何建立产品页?

[隐藏]

1.确定产品分类

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

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

2.确定产品页边栏

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

3.建立产品页面

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边栏内,完成内容后就可以进入网站查看产品页的效果了;

4.产品详情页的编辑与排版

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

5.视频讲解

暂无,敬请期待;

“Modernize主题之如何建立产品页?”的4个回复

  1. 无wp和建站相关基础的,确实头大。版主提供建站服务吗,自己是在是搞不了了。而且还会耗费很长时间。

发表评论

电子邮件地址不会被公开。 必填项已用*标注