禁用WP在图像后自动插入换行符

时间:2014-06-28 作者:user1255049

我已经将中等大小的图像设置为自定义大小,这应该允许两个图像在帖子中水平对齐。(全部贴子宽度为880px,中等图像设置为413px。)

我的挑战是图像没有均匀对齐-右侧的图像总是稍低一些,除非下面有另一组中等图像,在这种情况下,第二组图像将均匀对齐。

我认为这可能与WP在图像后自动插入换行符有关,但我尝试过的几种禁用方法都没有成功。。

我在帖子里写的是:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />
浏览器读取的内容:

<p><img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><br />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" /><br />
尝试的(失败的)解决方案-1How do I disable linebreaks after images?2.Why is Wordpress adding a linebreak after my floated image?

Site link.

enter image description here

10 个回复
最合适的回答,由SO网友:jocken 整理而成

如果是这样的话:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />
然后你必须像这样把它们放在一起:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" /><img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />
因为如果你这样做(wpautop):

remove_filter( \'the_content\', \'wpautop\' );
remove_filter( \'the_excerpt\', \'wpautop\' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( \'the_content\', \'wpse_wpautop_nobr\' );
add_filter( \'the_excerpt\', \'wpse_wpautop_nobr\' );
你可能会破坏你所写的一切,这不值得。

SO网友:Ray Gulick

快速修复方法是将图像标记包装在div标记中。这将防止WP将图像包装在P标记中。然后,您可以为div设置一个类,以进一步控制外观/排列。

SO网友:TBI Infotech

我们不能上钩wpautop() 作用因为这样它会删掉所有段落并从内容中删除标记。

在编辑器中插入图像后,只需单击“Text“选项卡,并删除图像之间的段落和分隔标记。

有关更多选项(如对齐和其他属性),请单击图像,然后使用“Advanced setting“选项

SO网友:Tom J Nowell

你说得对it is the <br> tags, 但还有一种选择:

Place each image in their own paragraph, not adjacent lines

以下是WordPress内容中的换行操作:

段落

This is paragraph 1

This is paragraph 2
短换行符

This is paragraph 1
This is also paragraph 1 but on a new line without a space
因此,不要使用短暂的休息,使用完整的段落。例如,如果您将它们分别放在各自的行中,并将其包装在段落标记中,则会起作用。

因此,不是:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />
<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />
执行:

<img class="alignleft size-medium wp-image-8530" alt="..." src="#" width="413" height="275" />

<img class="alignleft size-medium wp-image-8529" alt="..." src="#" width="413" height="275" />
现在,每个图像都包装在自己的段落标记中,为您提供以下输出:

因此:

holy moly, the alignment issue has vanished

如果你喜欢冒险,你可以完全删除图片周围的p标签(在前端),但我建议不要在你的网站上这样做。如果你想知道如何做到这一点,可以提出另一个问题。

SO网友:sMyles

您可以尝试使用jQuery删除它们:

jQuery(document).ready(function($){
    $(\'img\').next(\'br\').remove();
});
这将删除图像后的所有br标记,因为next将选择下一个元素。如果这给你带来了问题,你可以试试.nextAll(\'br:first\') 相反

看见here 有关更多示例和内容,请尝试。

SO网友:René Skou

删除图像之间的换行标记。

示例:

<img src="" alt="" /> <br/> <img src="" alt="" />

SO网友:TBI Infotech

这个wpautop() 函数添加<p><br> 标记内容以保留换行符。如果您希望自己添加这些标记,则可以删除将此功能应用于帖子内容的过滤器:

remove_filter( \'the_content\', \'wpautop\' );
remove_filter( \'the_excerpt\', \'wpautop\' );


remove_filter( \'the_content\', \'wpautop\' );
remove_filter( \'the_excerpt\', \'wpautop\' );

function wpse_wpautop_nobr( $content ) {
    return wpautop( $content, false );
}

add_filter( \'the_content\', \'wpse_wpautop_nobr\' );
add_filter( \'the_excerpt\', \'wpse_wpautop_nobr\' );

SO网友:karpstrucking

假设问题是<br> 标签(我相信这是正确的),根据您的一条评论,您不希望返回并编辑帖子,您可以使用the_content 筛选以查找仅由新行分隔的两个中等大小图像的实例(新行被替换为<br> 标记为WordPress的一部分\'wpautop() 功能)并删除新行:

add_filter( \'the_content\', \'gowp_152091\' );
function gowp_152091( $content ) {
  preg_replace( "/(<img.*?size-medium.*?>)\\n(<img.*?size-medium.*?>)/", "$1$2", $content );
  return $content;
}
参考文献:

the_content

功能:preg_replace

SO网友:Jas

使用jQuery可以通过以下方式删除它:

jQuery(\'.zoomthumbnail-image\').next(\'br\').remove();

SO网友:larsemil

尝试在编辑器中使用shift+enter,而不是enter。

结束