最新消息:为了本站的未来,希望大家能广为分享,另期待您投稿外贸人建站QQ交流群:201706683,验证请输入:卡拉科技

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

WP建站实例教程 Tony 8873浏览 0评论
[隐藏]

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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (4)

  1. 期待更新,刚买的你的这个模板,强力需求教程,最后是从设置首页开始,呵呵。
    卡拉不卡3年前 (2014-04-19)回复
    • ❗ Modernize有2篇文章了,加紧上视频。
      Tony3年前 (2014-04-19)回复
  2. 无wp和建站相关基础的,确实头大。版主提供建站服务吗,自己是在是搞不了了。而且还会耗费很长时间。
    卡拉不卡3年前 (2014-04-21)回复
    • 联系我QQ,或者先看看works.kalated.com
      Tony3年前 (2014-04-21)回复