Kadence主题如何给桌面端和移动端添加文章目录？

Kadence主题文章目录功能是高级功能，可以分别给桌面端和移动端访问添加不同的文章目录功能。如此就能节省一个文章目录插件。接下来魏艾斯笔记会分享如何一步步实现上述功能。

还不了解这个主题的朋友请移步Kadence主题如何快速搭建网站。

1、桌面端和移动端添加文章目录的位置

WordPress网站的文章目录，一般用于博客网站、资讯网站等使用。企业网站、外贸网站是用不到的。

先说给桌面端添加文章目录。一般有两个地方可以放目录：文章第一段后面、侧边栏。

国内博主不管用插件也好、手动代码也好，都是放在第一段后面的；除此之外，国外一部分博主放在了侧边栏，做出粘性跟随页面上下滚动的效果，方便访客随时查看目录和点击跳转，用户体验比放在第一段后面更好一些。

再来说移动端添加文章目录：只能放到文章第一段后面，不能放到侧边栏。因为移动端的屏幕比较小，侧边栏会顺序放到文章内容之后（差不多是屏幕最后面），失去了目录本来的意义。

明确了桌面端和移动端添加目录的位置，下面老魏就开始操作。

2、部署Kadence pro插件

想要启用 Kadence主题自带的目录功能，就要购买Kadence pro和Kadence block Pro插件，上传到 WordPress插件中安装启用。

进入 WordPress后台 > 外观 >kadence，在右侧的 Pro Addons区域，启用 hooked elements。这也是很多主题、页面编辑器中常见的钩子元素。

完成上面两个步骤，下面我们就可以正式给桌面端和移动端添加文章目录了。

3、Kadence主题给桌面端添加目录

再次点击 WordPress后台 > 外观 >kadence，看到下面出现了 elements，进入后点击上面的 add new，选择 default元素形式，开始创建目录之旅。

如下图所示，把两个步骤的截图合并了。

如下图所示，点击添加，搜索 table of content 或 目录 都行。

也可以在编辑区域使用快捷命令 / 来添加。

设置目录样式，如下图点击“设置”按钮，在区块中开始设置。

• 允许标题：取消 h1、h4、h5、h6，保留 h2、h3。h1是文章标题用的只有一个，而大部分文章最多有h2标题和h3小标题，很少用到更小的标题，没有写过那么复杂的内容。即使用到了开启一下就是了。
• 标题设置：是否启用标题、字体大小、行高度、信间隔、文字改变、字体型号等等很多设置选项。
• 折叠设置：目录是否可折叠，是否默认就折叠，折叠小图标选择。
• 列表设定：目录行间隔、目录风格、字体参数设置（同标题）。
• 容器设置：设置内容边界宽度 2，开启阴影并设置最大宽度 300。
• 标题和列表可以分别设置PC端、平板、手机端的不同参数。
• 以上参数都可以随便输入数字看效果，按照个人喜好决定如何设置。

设置目录显示位置，在页面右侧 element settings 开始设置。

placement：目录在文章中的位置。一般放到第一段后面，所以选择 after first paragraph（可选第一段~第四段）。也可以选择像国外博主那种放到侧边栏的方式，下面有讲到具体操作。

Priority优先级：10。

显示设置：show on single 文章。

select post by选择发布者：all。

Device settings：show on device 默认是全部，这里选择 desktop。

以上的目录样式和显示位置设置好之后，记得保存发布。

老魏提前给文章添加一些标题和内容，效果如下图所示。

可以清楚的看到按照上述参数添加了目录边框和阴影等，大家可以凭自己的喜好去修改，直到满意为止。

以上说的是在桌面端把目录放到第一段内容之后。

那么如何像国外博主那样放到侧边栏呢？

在 element settings > placement 选择 after sidebar 即可。

效果如下图所示，这样用户浏览页面时在任意位置都可以快速点击定位到感兴趣的位置，显然这种体验更好。

上面做法是把目录放到侧边栏后面（也就是外部），如果想放到侧边栏的小工具中并粘性跟随页面滑动，又该如何操作呢？

首先要去 element settings > placement，点击x，关闭在内容部分的目录显示功能。

去 WordPress后台 > 外观 >kadence > elements 的列表中，获取桌面端元素的 Shortcode。

在 WordPress后台 > 外观 > 小工具，给侧边栏添加一个简码，把上面的 Shortcode 粘贴进去，保存。

定位到 WordPress后台 > 外观 > 自定义> 通用 > 侧边栏，启用粘性侧边栏，only stick last widget（粘性跟随只对最后一个小部件有效），如果后面无法实现粘性效果就来关闭 only stick last widget。

这样就可以实现目录在侧边栏中粘性跟随效果了。

下面我们再锦上添花一下，做出更吸引人的效果和更好的用户体验。

去 WordPress后台 > 外观 >kadence > elements 的桌面端元素中，点击已有的桌面目录元素，在右侧“设置”> 滚动设定。

开启“平滑滚动到ID”和“在活动区域中滚动时启用突出显示标题”这两个功能，列出条目激活颜色选择比较抢眼的红色。

效果如下图所示，当页面滚动到某个标题时，右侧目录会定位到对应的条目，同时以设置好的红色高亮显示，如果你是访客看到这样的效果，用起来是不是很舒服呢？

4、Kadence主题给移动端添加目录

和上面给桌面端添加目录的操作步骤相似。

定位到 WordPress后台 > 外观 >kadence，进入elements后点击 add new > default。

元素起名为：移动端目录，搜索并添加 kadence的目录。

编辑区域的“设置”与上面的桌面端相同，设置>区块>容器设置>最大宽度：300 或 400，根据实际情况定。

唯一不同是 element settings > device settings 选择 Mobile，代表只给手机端添加目录。

设置好之后记得保存发布。

在谷歌浏览器中按 F12 以手机模式看效果，如下图所示目录出现在第一段之后，点击就能跳转到对应段落，很完美。

5、总结

在 Kadence主题中给桌面端和移动端添加文章目录很简单，需要购买并安装开启 Kadence pro和Kadence Pro插件 ，使用 Hooked Elements 并设置一定的条件，就能立即在对应终端显示了。并且可以自定义样式、布局，效果也很不错。最重要的是这一切操作无需插件即可实现，不会增加多少代码，对于页面速度影响很小，还有利于SEO优化。