【jQuery】智能自动调整 WordPress 边栏高度

在 WordPress 中由于边栏小工具(widget)的引入使我们配置边栏区块内容变得非常方便例如:放置广告谷歌小工具放置腾讯滔滔、等等各种小工具,但随着小工具的增多,边栏也逐渐变得比正文更高,特别是如果摘要列表页只有一篇文章的时候,整个页面会被撑开实在有损美观,这里有一句基于 jQuery 的代码可以在边栏超过主体内容的时候动态删除最后一个小工具达到页面平衡的目的……

首先是原理,其实很简单对于两栏的博客来说,当页面主要内容部分的高度小于边栏的高度时,就删除边栏上最后一个小工具(因为我的小站最下面几个小工具都是无关紧要的小组件所以删除几个也不会有什么影响)代码如下:

    

简单解释一下:首先是载入 jQuery 库然后用了一个 while 循环,如果边栏高度大于主体内容的高度就 remove 掉最后一个 class 为 toys 的小工具,然后再次循环检查直到主体内容高度大于边栏。当然这里的 side 为边栏的 class 这里的 main 为页面主体内容的 class 还有 toys 为边栏每个小工具的 class 这些名字需要根据你的主题模板调整后再将代码放入你的主题的 head 标签中即可。

一条评论

  1. 今天在发布一篇内容极短的内容时发现上面的代码有一个问题,就是如果删掉所有的 .toys 之后仍然边栏较高,于是陷入死循环 IE 和 FF 双双挂掉,最好还是附上一个判断:

    jQuery(‘.toys’).size() > 0

    这样可以限制一下,马虎是祸水啊,完整代码随后更新。

已关闭评论。