使用模块化配置实现多种网站布局-布局教程、模块使用及可视化配置详解

建设一个wordpress网站，网站的布局肯定是最重要的。美观漂亮且易于阅读又能突出网站重点的布局设计更容易吸引力用户浏览网站。对于站长来说，网站布局也是最让人头疼的一件事儿了。zibll子比主题为了解决这个问题，采用模块化配置，将页面分为多种容器，再将不同的内容做成不同的模块，站长可自由的将任意模块放置到任意位置容器中，从而实现高度自由化，轻松的实现多种布局样式！

熟悉布局概念

首先我们了解，什么是布局容器？
我们将一个空白的页面，分为多个不同位置的方块，每一个方块里面都可以放置任意的模块，同时这些方块可以自由的删除、清空，方块里面的内容也就是模块也可以随意的添加、删除、更换、排序。那么我们就把这样可以放置模块的方块叫为容器。

如果你还不明白，那么看一下这一样图，子比主题是如何设计布局容器的。

通过上面的图片可以看出来，一个页面的固定内容有：顶部导航、页面主内容、底部页面。那么除此之外，其它位置都是可放置模块的容器，换句话说就是默认是没有内容的，只有你在容器内添加了模块那么该容器位置才会显示内容！

了解了布局容器之后，还有一个重要的布局要素也是：页面区分。
为了实现在不同类型的页面能组合不同的布局内容，比如我们需要在首页的顶部全宽度显示一个幻灯片模块，但是其它类型页面不显示。那么子比主题在设计容器的时候，每一个不同类型的页面都有该页面类型单独的容器：
例如：顶部全宽度容器，那么对应的就有：
首页-顶部全宽度、文章页-顶部全宽度、分类页顶部全宽度、用户页-顶部全宽度、搜索页顶部全宽度、其它页面-顶部全宽度

另外请注意，所有页面的侧边栏都是可以单独开启或者关闭的，那么如果在没有开启侧边栏页面中，全宽度容器和主内容容器其实是一样的效果！如图所示：

最后，出了上图之外的容器，还有没有其它位置的容器呢？
答案是有的！除了页面主要位置之外，子比主题还设计了一个在移动端弹出菜单内的容器，方便将模块添加到此处。

开始配置

熟悉了模块容器之后我们开始配置布局，整个布局配置流程大概分为：
1.必要的主题设置 2.页面的布局设置 3.添加模块

必要的设置

我们按照从页面的顶部到底部的流程进行设置，首先我们来设置顶部导航栏的样式。

顶部导航栏分为PC端样式和移动端样式，设置的方法都在主题设置-页面显示-顶部导航
具体方法请查看以下文章：

Zibll子比主题-主题导航菜单设置教程

老糖

35.2W+26

接下来就是最主要的侧边栏设置，针对不同页面选择是否开启侧边栏，以及设置侧边栏靠左还是靠右

进入主题设置-全局&功能-页面&显示

同时每一篇文章、页面都可以单独的设置侧边栏功能。编辑文章或页面时候， 在右下角的扩展功能处进行设置

最后我们设置页面底部

进入主题设置-页面显示-底部页脚

添加模块

一些必要的设置完成之后，我们就可以开始添加模块了。在上面的内容中，我们了解了不同页面的各个位置为容器，那么接下来我们需要把模块添加到对应的容器中，实现我们想要的布局效果。

添加模块支持可视化配置的，每一次修改都可以实时预览，自己每一次的添加、修改都一目了然，推荐刚刚接触模块配置的新用户使用！
进入方式：1.前台管理员登录后，点击模块配置 2.wp后台-外观-小工具-使用实时预览管理

对于已经很熟悉容器位置的老用来说，可以直接在wp后台-外观-小工具处进行配置，可以更加快速的添加、修改模块，同时加载速度更快

注意：使用实时预览管理，不会显示全部位置容器，只会显示当前页面存在的容器，进入之后默认是在首页，那么只会显示在首页的容器，如果你想在文章页面添加模块，需要先在右侧页面点击进入任意文章页。

模块明细

进入模块配置之后，就可以选择添加模块了。在这里你就可以看到十分丰富的模块了，将不同的模块添加到需要的位置，同时支持拖动排序。目前子比主题支持以下模块，同时还在不断的更新中！

• 幻灯片模块(功能超级强大)【查看教程】
• 一言模块：显示精彩一言
• 个人信息模块： 未登录时候显示登录注册按钮，登录后显示用户的个人信息 【查看截图】
• 分类专题图文模块： 将分类、专题显示为图文卡片 【查看截图】
• 文章列表模块：根据设置显示文章列表
• 文章mini模块：样式小一点的文章列表 【查看截图】
• 多栏目文章模块：一个模块显示多个栏目的文章
• 多栏目mini模块：样式小一点的多栏目文章 【查看截图】
• 搜索框模块：多功能的搜索模块 【查看截图】
• 文章目录树模块：显示在文章页的文章目录树【查看教程】
• 评论模块：显示最近评论的模块 【查看截图】
• 标签云模块：根据设置显示网站的的标签 【查看截图】
• 公告模块：添加多个公告滚动显示 【查看截图】
• 用户列表模块：根据设置显示用户列表
• 链接列表模块：实现友情链接、合作伙伴等链接列表功能
• 图像模块：显示图片
• 画廊模块：显示多张图片
• 超级视频模块(V5.2)：支持更多格式的视频 【查看截图】 【查看教程】
• 超级嵌入模块 (V5.2) ：可以嵌入任意在线播放器或任意在线内容 【查看截图】 【查看教程】
• 图文封面模块 (V5.2) ：显示图片和文字封面的模块 【查看截图】
• 分类专题聚合模块 (V5.2) ：显示分类或专题内容及文章的聚合模块 【查看截图】
• 付费购买模块(V5.2)：显示付费文章的购买卡片 【查看截图】
• 图标卡片 (V5.2) ：显示图标和文字的卡片 【查看截图】
• 帖子列表模块：显示论坛帖子列表，多种显示样式及配置【查看截图】
• 板块列表模块：显示论坛板块列表【查看截图】
• 板块信息模块：用于显示一个板块详细信息的模块【查看截图】
• 社区话题模块：显示社区论坛话题【查看截图】
• 付费卡片模块：显示付费购买信息【查看截图】
• 热门榜单模块：根据评论量、查看量、点赞量等显示文章排行榜【查看截图】
• 用户排行榜模块：显示用户排行榜【查看截图】
• 图标卡片[横版]模块：横版显示的图标卡片【查看截图】
• 图标卡片[竖版]模块：竖版显示的图标卡片【查看截图】
• 更多模块正在添加中….

空白页面添加模块

上面说到，主题设定了首页、文章页、分类页等页面的容器，那我们如果需要新建一个空白页面，然后再给这个页面添加模块，该如何操作呢？

1.新建页面，有右侧底部开启布局容器，并选择需要的容器位置

2.保存后就可以看到对应的容器了，使用模块配置添加需要的模块即可！

更多配置技巧

V8.0更新了一个强大的功能，那就是每一个模块都可以根据内容ID来隐藏或显示，比如我们想要把一个‘图片广告’模块只添加到文章‘A’这个页面中，或者我们要把一个‘重要通知的帖子’模块添加到侧边栏，但是需要在‘a/b/c’这是几个帖子页面不显示，这时候就可以用此功能即可实现。同时此功能让子比主题的模块化配置再次变得更加灵活、自由！【查看截图】

根据上面的教程，我们配置了整体页面的布局，为了更好的效果，我们还需要配置一些其他设置。

如果需要调整文章列表的显示效果，请查看以下文章：

Zibll子比主题-如何设置文章列表为卡片模式、多图模式、自动模式等

老糖

42.7W+52

最后提醒一下：使用模块配置，可以将任意模块添加到任意位置的容器。但是！并不是所有模块都适合添加到任意位置！请根据实际效果合理调整！