使用#jQuery#去除#WordPress#自动生成的段落标记

在使用 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&amp;_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&amp;_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 ，这中方法也是自己在学习中探索出来的。

可见，生命在于无休止的学习，这个世界上还有很多是我们所不知的。