一直以来,我有一个写“长文章”的习惯。最开始的时候像写消息一样来写博客,文章简短,但依然觉得很难写,找不到合适的语句来表达。后来想出一个“懒主意”——给文章添加大量的图片,一来可以增加文章内容,二来图文结合的文章读起来更有乐趣。
但是图文结合的文章一般来说都比较长,有时网页拉到了最下方才能完整地看完一篇文章,非常地不方便。又听说文章目录有利于SEO(PS:事实上经常能够在搜索结果中看到文章目录链接),于是就有了挖站否的文章目录,自动插入,看起来也很顺眼。
为了能够将文章目录最大化的利用,我们还可以将文章目录在侧边栏固定,随着网页下拉而滚动,读者可以随时返回自己关注的内容,用户体验非常地好,常见的一些开发文档就是这样的。本文就来分享一下给Wordpress设定侧边栏固定并滚动的文章目录方法。
更多的关于WordPress建站以及网站建设的文章,请查看:
PS:2019年11月3日更新,WordPress服务器如果内存足够大的话,可以将页面缓存到内存达到加速的目的,参考:利用Cachify插件将WordPress页面缓存到Memcached实现优化加速。
PS:2019年12月2日更新,WordPress插件用的多的话容易出现各种冲突与问题,检测的方式有: WordPress错误诊断模式-专治WP页面空白,服务器500错误,插件冲突 。
如果有代码能力的朋友可以使用代码,本着能用代码就少用插件的原则,有利于加快Wordpress运行速度,这里分享两款自动给Wordpress文章插入目录的插件。
插件:
Easy Table of Contents插件主要特点:
1.自动在Wordpress文章中插入目录,也支持手动在任意位置插入目录。
2.包含多项样式,可以选择是显示数字还是显示符号等。
3.支持是否显示分层,支持小工具,可设置例外。
激活Easy Table of Contents插件后,你就可以选择是否在某一个页面启用文章目录了。(点击放大)
接着,你就可以设置目录位置、是否分层、是否包括序号、平滑滚动等。(点击放大 )
Easy Table of Contents文章目录效果如下:
插件:
LuckyWP Table of Contents这款插件和Easy Table of Contents的功能非常类似,两者设置也差不多,同样包括外观、位置、分层、平滑滚动等。(点击放大)
两个插件都支持自定义CSS,你可以根据自己的Wordpress主题来选择。
LuckyWP Table of Contents插件效果如下:
打开Wordpress的小工具,添加Easy Table of Contents和LuckyWP Table of Contents小工具。
有些Wordpress主题是自带了侧边栏固定和下拉滚动,所以你只需要添加小工具到侧边栏就可以实现该效果了。个别不支持的,可以下载插件:Q2W3 Fixed Widget for WordPress
Q2W3 Fixed Widget for WordPress固定侧边栏的效果如下图:
启用了Q2W3 Fixed Widget for WordPress后,到你的小工具下面就可以选择中固定位置了。
按照上面的方法,我们可以看到WordPress文章目录固定在侧边栏了,同时当页面往下拉时会自动滚动提示,wzfou.com测试的效果如下图:
给Wordpress添加文章目录比较适合长文章或者是图文结合的文章,一来方便读者阅读,二来有利于SEO。Easy Table 和LuckyWP Table这两个插件功能都差不多,且都支持自定义CSS,效果也不错。
Q2W3 Fixed Widget for WordPress是一个非常强大的插件,它可以让任意的侧边栏固定并下拉滚动,如果你发现没有效果,检查一下有没有JS冲突,最好用Chrome审查元素检测一遍。
文章出自:挖站否 https://wzfou.com/wp-toc/,版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。
文章更新于: %s = human-readable time difference 上午10:57
查看评论
博主是用的fixed-toc插件吗,如何设置浮动目录,默认是展开的呢?我用这个插件,默认是图标,需要点击才能展开呢~
是的,fixed-toc后台有一项是设置是否展开的,我是在后台点击设置的。
哇!!好喜欢博主目前旁边这个浮动目录,还可以展开,太棒了!不知道博主有没有兴趣做一期您现在使用的目录攻略呢?
好的,我马上去整理一下。
博主,现在用的哪一款目录插件?看上去非常不错啊
现在改用themeforest的Toc插件了。
找了一圈也没找到特别中意的插件,用的主题又不带目录功能
索性自己用纯JS实现了文章标题提取->自动生成目录
比起直接魔改WP或者主题,算是一种折中的办法
https://www.rainng.com/js-wordpress-catalog/
挺不错,主题也好看。
博主,fixed toc 怎么设定浮动框的高度呀。博主的貌似自适应高度。
我的右侧全高呀。
在插件有一个设置,可以设置最高的调试,还有宽度。默认的是100%
你的博客的目录也是用的这几个吗?
目前用的是这个:https://codecanyon.net/item/fixed-toc-wordpress-plugin/7264676
你用什么工具录制视频的?
用的是screentogif。
沙发,写长文章的时候这个是必须的。