Wordpress神秘元素(<p>，<a>)出现在现场

Question

第一次在Wordpress上开发一个网站，并在我的主页上胡闹，以使它看起来更好。当我试图用div包装我的a以使整个框可点击/链接时，我遇到了一个问题。

在页面编辑代码中如下所示：

<a href="random_link1">
  <div>
    <img src="random_image1"/><br>
    random text 1
  </div>
</a>
<a href="random_link2">
  <div>
    <img src="random_image2"/><br>
    random text 2
  </div>
</a>

在这样的一行中有多个div应该并排(使用css显示:内联块)。

但这样的话，现场就会有这些div垂直叠加。在检查使用developer tools (chrome)时，我发现代码可以在div中间显示具有完全相同的p元素的额外a元素：

<a href="random_link1">
  <div>
    <img src="random_image1"/><br>
    random text 1
  </div>
</a>
<p>
  <a href="random_link1"></a>
  <a href="random_link2"></a>
</p>
<a href="random_link2">
  <div>
    <img src="random_image2"/><br>
    random text 2
  </div>
</a>

有人知道怎么解决吗？

Answer 1

Wordpress会自动对您的内容运行一个过滤器，名为wpautop。它用于将从编辑器返回的回车转换为html间距。您可以使用functions.php全局删除它。

remove_filter( 'the_content', 'wpautop' );

...or寻找一个插件，使您能够更细粒度地控制什么是自动编辑的，什么不是。

此外，您还可以选择隐藏空的<p>标记：

p:empty {
  display: none;
}

相同的过滤器(wpautop)将链接包装到<p>元素中。解决办法是：

• 把<a>标签包装成<div>标签，或者.
• 在content上运行您自己的过滤器，在wpautop之后取消wpautop所做的操作。见this question。