停止Wordpress将图片包装在“ P”标签中


33

我一直在寻找一个简单的解决方案,但是徒劳无功。Wordpress一直将我的图片包装在p标签中,由于我正在处理的网站布局的怪异性质,这非常令人讨厌。

我已经创建了一个jQuery解决方案来解开图像,但这并不是很好。由于页面上加载了其他内容,因此滞后,因此更改缓慢。有没有一种方法可以防止Wordpress仅包装带有p标签的图像?挂钩或过滤器也许可以运行。

上载图像然后将其插入“所见即所得”编辑器时,会发生这种情况。手动进入代码视图并删除p标签不是一种选择,因为客户端在技术上并不是那么无能。

我知道图像是内联的,但是我将站点编码的图像的方式放在div内并设置为阻止,因此它们是有效的代码。


Answers:


34

这是昨天我们在客户端站点上遇到的确切问题的处理方法……我创建了一个快速过滤器作为插件并激活了它。

<?php
/*
Plugin Name: Image P tag remover
Description: Plugin to remove p tags from around images in content outputting, after WP autop filter has added them. (oh the irony)
Version: 1.0
Author: Fublo Ltd
Author URI: http://fublo.net/
*/

function filter_ptags_on_images($content)
{
    // do a regular expression replace...
    // find all p tags that have just
    // <p>maybe some white space<img all stuff up to /> then maybe whitespace </p>
    // replace it with just the image tag...
    return preg_replace('/<p>(\s*)(<img .* \/>)(\s*)<\/p>/iU', '\2', $content);
}

// we want it to be run after the autop stuff... 10 is default.
add_filter('the_content', 'filter_ptags_on_images');

如果将其放入/ wp-content / plugins文件夹中的php文件中,然后将其激活,它应该从仅包含图像的任何para中删除p标签。

我不确定正则表达式是否会因其他编辑器的输出而失败-例如,如果仅用>关闭img标签,它将失败。如果有人有更强的实力,那将真的很有帮助。

干杯,

詹姆士

-改进的过滤器-

要使用链接中包裹的图像,它将链接保留在输出中并删除p标签。

return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);

毫无疑问,这是正确的答案。谢谢詹姆斯,我尝试了一下,效果非常好。
Dwayne Charrington

嗨@Dwayne-感谢您的反馈。我添加了一个改进的过滤器来处理链接,现在我们在客户端站点上使用它。
jamesc 2011年

您绝对应该将其放在Wordpress插件存储库中。谷歌快速搜索显示很多人都遇到了这个问题,但没有好的解决方案。
杰弗里·伯迪

1
请注意,这不适用于HTML5默认img标记,即<img ...>没有斜杠。最好在您的正则表达式中将其设置为可选。或者更好的是,您可以省去它,因为它.*会照顾好它。
Bram Vanroy 2015年

有没有人使其成为工作<img ...>没有/>
Runnick

13

基本上,为了格式化,您需要使WordPress将img视为块级元素。这样的元素被硬编码进去,wpautop()并且列表没有被过滤。

我要做的是:

  1. 叉子 wpautop()以不同的名称。
  2. img将regexp 添加到$allblocks变量中。
  3. 去掉 wpautopthe_content过滤器中。
  4. 将您的分叉版本添加到 the_content
  5. 您可能需要优先处理,并且如果由于更改的处理顺序而发生故障,可能需要删除并重新添加其他过滤器。

我将尝试这种方法。我从没想过将img标签实际添加到allblocks变量,这是一个天才的想法。我去看看。
Dwayne Charrington

首先效果很好,然后我遇到了一个场景,即图像位于锚标记内,并且两者都已位于段落内(因此p> img> a)。将img视为一个块时,wp-autop在img标签开始之前关闭了段落标签,从而破坏了布局。
benz001

2

也许这会有所帮助

remove_filter('the_content', 'wpautop')

但是随后您将手动添加其他所有段落。


我考虑过这种方法,但是因为布局很偏心,正如我所说的那样,它严重依赖于需要p标签。当我做2列文本时,p标记向左浮动以显示2列文本。因此,您可以看到为什么包裹图像的ap标签会成为问题,因为它也是浮动的。
Dwayne Charrington

1

Soska给出了一种简单的方法。

但是我要做的是从内容中提取图像并单独显示。


我也确实考虑过这一点,它仍然是一个选择。但是,由于保存所有麻烦仅是一张图像,因此我可能只是使用精选的帖子缩略图来代替,这将使我可以控制图像的显示方式。
Dwayne Charrington

您也可以将自定义字段添加到帖子/页面,例如缩略图图像,并将图像路径保存为其值...
Avinash

1

这篇文章有些陈旧,但是有一个更简单的解决方案,即不使用CSS。

将img标签包装在div中几乎没有负面影响。


1

我开发了一个可解决此确切问题的插件:http : //wordpress.org/extend/plugins/unwrap-images/

这比设置边距或对那些不想弄乱代码的人直接进入Wordpress代码要好,因为它使用jQuery的本机解包函数来解包其p标签的所有图像。

希望这对某人有帮助!干杯,布莱恩


显然仍然有30多个活动的安装:D
Julix

1

接受的答案仅对图像提供了帮助,但修订后的代码无法很好地处理我网站上的链接图像。 这个博客文章的代码非常有效。

这是代码:

function wpautop_forked($pee, $br = 1) {

if ( trim($pee) === '' )
return '';
$pee = $pee . "\n"; // just to make things a little easier, pad the end
$pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
// Space things out a little
$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li
|pre|select|option|form|map|area|blockquote|img|address|math|style|input
|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer
|nav|figure|figcaption|details|menu|summary)';
$pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', "\n$1", $pee);
$pee = preg_replace('!(</' . $allblocks . '>)!', "$1\n\n", $pee);
$pee = str_replace(array("\r\n", "\r"), "\n", $pee); // cross-platform newlines
if ( strpos($pee, '<object') !== false ) {
$pee = preg_replace('|\s*<param([^>]*)>\s*|', "<param$1>", $pee); // no pee inside object/embed
$pee = preg_replace('|\s*</embed>\s*|', '</embed>', $pee);
}
$pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
// make paragraphs, including one at the end
$pees = preg_split('/\n\s*\n/', $pee, -1, PREG_SPLIT_NO_EMPTY);
$pee = '';
foreach ( $pees as $tinkle )
$pee .= '<p>' . trim($tinkle, "\n") . "</p>\n";
$pee = preg_replace('|<p>\s*</p>|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
$pee = preg_replace('!<p>([^<]+)</(div|address|form)>!', "<p>$1</p></$2>", $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee); // don't pee all over a tag
$pee = preg_replace("|<p>(<li.+?)</p>|", "$1", $pee); // problem with nested lists
$pee = preg_replace('|<p><blockquote([^>]*)>|i', "<blockquote$1><p>", $pee);
$pee = str_replace('</blockquote></p>', '</p></blockquote>', $pee);
$pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)!', "$1", $pee);
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee);
if ($br) {
$pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', create_function('$matches', 'return str_replace("\n", "<WPPreserveNewline />", $matches[0]);'), $pee);
$pee = preg_replace('|(?<!<br />)\s*\n|', "<br />\n", $pee); // optionally make line breaks
$pee = str_replace('<WPPreserveNewline />', "\n", $pee);
}
$pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*<br />!', "$1", $pee);
$pee = preg_replace('!<br />(\s*</?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)!', '$1', $pee);
if (strpos($pee, '<pre') !== false)
$pee = preg_replace_callback('!(<pre[^>]*>)(.*?)</pre>!is', 'clean_pre', $pee );
$pee = preg_replace( "|\n</p>$|", '</p>', $pee );

return $pee;
}

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop_forked');

干杯!


1

我不是专家,只是花了一个下午的时间来尝试解决包装在p标签中的de img,这对我很有用。

我正在研究基于wordpress的主题,并将其添加到functions.js文件中

jQuery函数解包

> $(document).ready(function (){
> 
> // for images wraped in a tags
> 
> $(‘.entry a’).unwrap(‘p’);
> 
> //for images wraped in just p tags
> $(‘.entry img’).unwrap(‘p’);

现在我可以分别工作p和img了。

也可以使用以下方法在img周围添加具有不同类的div:

$(document).ready(function (){

$('.entry img').wrap('<div class="justImg"></div>');

最后一个没有解决我的问题,因为我想用display:none制作p标签。所以我真的不得不把那些img从那里拿走。


3
您真的使用大括号吗?:)
fuxia

我确实早在那时就考虑过这种方法,但是当您可以使用棘手的正则表达式在PHP中进行操作时,通过jQuery进行不必要的DOM操作的想法带来了太多的风险和潜在的不必要的开销。
Dwayne Charrington

0

根据帖子的不同,另一个解决方案可能是使用WP Unformatted插件在每个帖子的基础上禁用auto-p功能。


这非常有用,尽管我唯一可以看到的警告是,如果您希望图像不具有P标签,但页面中也包含文本,那将是一团糟。这对于仅包含图片和几行文字的帖子可能会很好。仍然有用。
Dwayne Charrington

是的,这就是为什么我说这取决于帖子。
Synetech

0

万一有人在寻找一种快速而又肮脏的方法来修复任何标签的问题,这就是我所做的:

  1. 转到wp-content / formatting.php
  2. 找到wpautop函数。(如果您错过了它,那就是WP-AUTO-P,明白吗?)
  3. fins“所有块”变量,应类似于 $allblocks = '(?:table|thead|tfoot|capti...
  4. 最后添加您要忽略的块- imga例如,如果它以(...)menu|summary)';更改 结束 (...)menu|summary|a)';而添加a标签并避免自动pee。注意管道|分隔符-它是regex语法!

就是这样,快乐的Wordpressing!

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.