如果您想要在内容中使用 <img>
,但不想让它们像 WordPress 那样被“自动 P 化”。
问题示例
blah blah blah
<img src="monkey.jpg">
blah blah blah
变成
<p>blah blah blah</p>
<p><img src="monkey.jpg"></p>
<p>blah blah blah</p>
我们可以用这个来解决
function filter_ptags_on_images($content){
return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');
如果您复制粘贴以上代码,请务必小心。为了解决渲染问题,我在 preg_replace 函数中 opening ‘ 后添加了一个零宽度空格。在复制粘贴时,您需要删除零宽度空格。
对于您的 `functions.php` 文件,或者,请参阅参考 URL 以获取插件。有了这个,我们得到
<p>blah blah blah</p>
<img src="monkey.jpg">
<p>blah blah blah</p>
…这意味着像浮动图像这样的事情会容易得多。
我刚开始做这个,是的,这是一个持续存在的问题。对于我管理的网站来说不是这样,但对于客户来说是。回车符(或缺乏回车符)和喜欢玩 WYSIWYG 编辑器的客户,您将获得灾难性的配方。
在过去,我在用户可能已关闭 JS 的情况下使用过以下 JS 代码,其他方案不会破坏任何东西…并不是完全相同,当然也不像这样可靠,但可以为您提供一些额外的灵活性。
我会将其扩展到
jQuery("p:has(img) img").unwrap()
谢谢!天啊,谢谢。
如何在 Joomla 中实现相同的效果?
抱歉忘了补充:我在 index.php 模板文件中插入了 PHP 代码,当我运行它时,我得到了以下错误
致命错误:在
回复有点晚,但它需要放在 functions.php 文件中的 PHP 标签内。
感谢您的代码,我正在尝试这样做,但没有弄明白。
您好 - 原始帖子 (Fublo 博客上的 WordPress P 标签移除) 已经更新了用于在 iframe 上删除 p 标签的代码。
此外,还有指向其他 WP 文章的链接,这些文章包含相关的讨论和针对 HTML5 调整的正则表达式。
您好,James,感谢您发布链接。我正在寻找的正是这个(如何从 iframe 周围删除 p 标签)。Fublo 博客已经不存在了,请问有人可以建议如何做到这一点吗?
我真应该先搜索答案… 在发布后直接找到了! :)
http://blog.iamcreative.me/code-snippets/remove-phantom-paragraph-tags-iframes-images-wordpress/#.Uw-Bkl6cfxg
谢谢。这很有帮助。特别是在客户喜欢玩弄 HTML 的情况下…
您可以将 for 更改为 a 以避免出现问题,如果您的 css 中有填充或其他内容。
因为我在评论中没有正确格式化我的代码,所以这里是完整版本
Leif
谢谢!
每个网站都有 Chris 版本,我得到的结果混合了。我刚刚插入了您更新的代码,我们又恢复了正常。
您好 Leif,想知道您是否可以帮我理解您的 preg_replace 和上面原始代码片段之间的区别。您的代码对我有用,而原始代码没有,我正在努力理解原因。:)
提前感谢。
这个很好用。谢谢!
您将如何使用此函数将帖子中的每个图像都用 div 包裹起来??
我爱你。感谢您的好意 :)
不幸的是,我发现这会导致非常混合的结果。一旦客户开始乱搞,并在 WYSWYG 编辑器中最大化帖子,这个 hack 就会崩溃。
我在自己创建的多用户网站上测试了它,发现它在部分帖子中有效。
感谢您的提示 - 图像周围的段落标签让我抓狂!
太棒了!应该成为标准,但至少有 CSS-Tricks 来拯救这一天!
每当我遇到问题,我都会知道可以在 CSS Tricks 上找到答案。说真的,我是个大粉丝。可以给我你的亲笔签名吗?就像变魔术一样有效。
感谢,完美运行,有一个
<
p> 包裹在我的标签周围,弄乱了我的编码强迫症!
我知道这篇文章有点旧了。然而,根据萨缪尔·伍德(奥托)(WordPress 名人)的说法,这是无效的 HTML。在这里阅读帖子(5 年了!但仍然有效):http://wordpress.org/support/topic/wp-adds-paragraph-tags-to-images?replies=6
完全错误。
图像不在块级元素中并不无效。我认为它从未无效过。
如果您实际解释了将此代码放在哪里,将会很有帮助。
您的主题 functions.php 文件
如果您实际阅读了文章,将会很有帮助。它实际上是代码块下第一行
“对于您的 functions.php 文件,或者,请参阅参考 URL 以获取插件。”
这个网站是 CSS 及其他方面的最佳资源,总是能够提供典型问题的答案,而没有通常的废话介绍。直接切入主题,提供简洁有效的解决方案。设计也很漂亮!感谢,感谢,感谢!
感谢您的教程。
您节省了我今天的时间,哈哈
非常感谢!
如果将图像对齐设置为“居中”,这不会删除
<p>
,因为它不再是空的<p>
标签;它变成了<p style="text-align: center;">
。好吧,我必须感谢您。我已经在这个问题上工作了 11 个小时,现在才偶然发现您的网站。我创建了一个子主题,并使用您的代码修改了 functions.php,它运行良好
救命恩人,谢谢您!
为什么这对每个人都有效,唯独对我无效?
尝试了原始代码和修改后的代码(在回复中),在我的 functions.php 中,就是无法摆脱这个该死的 P 标签
对我来说也不起作用。我正在使用最新版本的 WordPress,不知道这是否有影响
不起作用…
代码已插入 functions.php 中。没有效果….
更正!它确实有效
我将以下代码插入“外观 > 编辑器 > Functions.php”
我在文件中的以下位置添加了以下内容
<?php
粘贴在下面……..
function filter_ptags_on_images($content){
return preg_replace('/\s?(|)?\s/s’, ‘\1’, $content);
}
add_filter(‘the_content’, ‘filter_ptags_on_images’);
如何从 img.alignone 周围删除段落标签?
非常感谢您。我已经与这个东西斗争了一个多小时,然后我想,与其与它斗争,不如直接从标签中删除 img。这太棒了!
最好确定这在 WP3.9.2 中是否仍然有效。到目前为止还没有成功…
干杯!
我的问题是,每次我按下回车键,WP 都会添加“。
这无法通过 HTML5 验证,因为 p 标签从未打开。
有什么办法解决这个问题?
如何在 WooCommerce 中删除 p 标签
这最初对我来说不起作用……在与正则表达式斗争了几个小时后,我发现问题在于 WordPress 没有在(在我的情况下,图像直接后跟一个我认为弄乱了事情的短代码)中放入结束 </p> 标签。浏览器会自动更正 - 因此 </p> 会在控制台中显示出来,等等,但是当我查看源代码时,它不在那里。
因此,我修改了过滤器如下,似乎有效
基本上将结束标签</p>放在括号中,后面跟着?——使其成为可选的。
我并不是正则表达式专家,所以欢迎任何改进!
非常感谢你,解决方案立即生效!
嗨,
很棒的代码!我也在寻找同样的方法来定制围绕iframe的
标签… 我发现了这个
这对于删除
标签效果很好,但在我的情况下,它更像是
但显然,这不起作用… :/ 有人能帮忙吗?
我想我们大多数人可以使用这个技巧,不仅用于图片,也用于iframe,你觉得呢?
谢谢
您也可以选择通过将此代码添加到主题的 functions.php 文件中来关闭所有元素的 p 标签包装。
这是解释如何操作的 WP 文章。
http://codex.wordpress.org/Function_Reference/wpautop
确实,这行代码:
remove_filter( 'the_content', 'wpautop' );
在你的 functions.php 中,将实现与使用谢谢。
谢谢 exoboy,这对我有用……再次感谢
您好,
非常感谢您分享这一点。
我在搜索“wordpress 在图像周围添加段落”时偶然发现了这个页面。
现在我想删除关闭自动段落的功能,并开始使用 wordpress 可视化编辑器,而不是自己编写每个 HTML 代码。
谢谢您:)
哇!我在 2016 年遇到了这个问题(在你的帖子发布 5 年后)。它确实起作用了,但在<IMG>具有对齐类时失败了,该对齐类与纯文本一起包装在<P>中。如下所示
<p><img class="alignright" src="" />段落文本在此处</p>
但是我可以为此创建以下表达式
不幸的是,如果段落文本出现在图像标签之前,这仍然不起作用。例如,如果图像放置在一些段落文本之间,如下所示。
<p>图像之前的文本<img class="alignright" src="" />图像之后的文本</p>
我在正则表达式中尝试了最后一个(组)“任何东西”(.*?),将它放在第一个组之前,使其总数为 3 组。但它并没有像我预期的那样工作。
你能在这方面提供帮助吗?
收到此错误
警告:preg_replace() [function.preg-replace]:分隔符不能是字母数字或反斜杠
您好,
存在可以使用的方法。如果你添加
remove_filter( ‘the_content’, ‘wpautop’ );
remove_filter( ‘the_excerpt’, ‘wpautop’ );
在你的 functions.php 中,它会完成工作。
参见
https://stackoverflow.com/questions/11248628/disable-wordpress-from-adding-p-tags
将<p>标签更改为<figure>标签而不是删除它的表达式是什么?