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

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

Symantec 赛门铁克

Symantec 赛门铁克

全球最大的信息安全厂商和服务商,最权威的数字证书颁发机构,为企业、个人用户和服务供应商提供网络安全解决方案。
查看更多

没有去掉自动生成的空p标记

Symantec 赛门铁克

Symantec 赛门铁克

全球最大的信息安全厂商和服务商,最权威的数字证书颁发机构,为企业、个人用户和服务供应商提供网络安全解决方案。
查看更多

去掉了自动生成的空p标记

比较一下上面的两个 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 ,这中方法也是自己在学习中探索出来的。

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

发布者

Xavier

这个人很懒,什么都懒得写。

发表评论