在使用 WordPress 的过程中,写文我一直喜欢使用 WP 后台的文本模式,手动的一个空行 WP 在浏览时会自动生成段落标记,将上下段落进行分割,排版就显得轻松很多,像我这种懒癌晚期的人,根本不用再去手动添加段落标记和换行符了。
不过, WP 自动添加段落标记有时候也是一件很脑残的事,会影响到我们对原文档的布局设计。于是就有了这样一篇文章,通过 jQuery 来去除特定文章中的空的段落标记。


比较一下上面的两个 div ,我相信你能够看懂我想表达的
从写作时的代码来看,两个 div 并没有什么区别:
<div> <div class="ssldiv"> <img class="ico32" src="https://img.54xavier.cn/ssl/Sysmantec.png" alt="Symantec 赛门铁克"/> <div> <span>Symantec 赛门铁克</span> <p> 全球最大的信息安全厂商和服务商,最权威的数字证书颁发机构,为企业、个人用户和服务供应商提供网络安全解决方案。<br> <a href="https://www.qcloud.com/product/symantecssl?fromSource=ssl&_ga=1.907447.701093088.1539832776" target="_Blank">查看更多</a> </p> <p class="ired"> 没有去掉自动生成的空p标记 </p> </div> </div> <div class="ssldiv" id="ssldiv"> <img class="ico32" src="https://img.54xavier.cn/ssl/Sysmantec.png" alt="Symantec 赛门铁克"/> <div> <span>Symantec 赛门铁克</span> <p> 全球最大的信息安全厂商和服务商,最权威的数字证书颁发机构,为企业、个人用户和服务供应商提供网络安全解决方案。<br> <a href="https://www.qcloud.com/product/symantecssl?fromSource=ssl&_ga=1.907447.701093088.1539832776" target="_Blank">查看更多</a> </p> <p class="ired"> 去掉了自动生成的空p标记 </p> </div> </div> </div>
从浏览器源码来看就能发现其中的不同了
<div> <div class="ssldiv"> <img class="ico32" src="https://img.54xavier.cn/ssl/Sysmantec.png" alt="Symantec 赛门铁克"> <p> </p> <div> <span>Symantec 赛门铁克</span> <p> </p> <p> 全球最大的信息安全厂商和服务商,最权威的数字证书颁发机构,为企业、个人用户和服务供应商提供网络安全解决方案。<br> <a href="https://www.qcloud.com/product/symantecssl?fromSource=ssl&_ga=1.907447.701093088.1539832776" target="_Blank" data-slimstat="5">查看更多</a> </p> <p class="ired"> 没有去掉自动生成的空p标记 </p> <p> </p> </div> <p> </p> </div> <div class="ssldiv" id="ssldiv"> <img class="ico32" src="https://img.54xavier.cn/ssl/Sysmantec.png" alt="Symantec 赛门铁克"> <div> <span>Symantec 赛门铁克</span> <p> 全球最大的信息安全厂商和服务商,最权威的数字证书颁发机构,为企业、个人用户和服务供应商提供网络安全解决方案。<br> <a href="https://www.qcloud.com/product/symantecssl?fromSource=ssl&_ga=1.907447.701093088.1539832776" target="_Blank" data-slimstat="5">查看更多</a> </p> <p class="ired"> 去掉了自动生成的空p标记 </p> </div> </div> </div>
很多时候,我们通过后台编写博文的时候,已经自己设计好了整体的显示效果, WP 的这种“好意”,简直是一种画蛇添足。
那么如何去除 WP 的这种好意呢?
有两种方法:
方法一:(此方法会在浏览时去除所有文章自动生成的p标记,慎用)
移除WordPress 文章中自动添加的< p >< br >标签
在当前主题的 functions.php 文件中添加:
remove_filter( 'the_content', 'wpautop' ); remove_filter ( 'the_excerpt', 'wpautop' );
方法二:(此方法只会去掉指定文章指定内容中的p标记,较麻烦)
使用 jQuery 去除 WordPress 自动生成的段落标记
<!--在文章开头引用jQuery--> <script src="https://img.54xavier.cn/jquery.js"></script> <!--对于需要去除空p标记的内容进行包裹(div/p……)--> <div class="id1">Something</div> <!--在文章结尾编写script脚本清除包裹内的空p标记--> <script> $('#id1 p:empty').remove(); </script>
其实这只是很简单的 jQuery 使用,奈何我也才学 jQuery ,这中方法也是自己在学习中探索出来的。
可见,生命在于无休止的学习,这个世界上还有很多是我们所不知的。