Wordpress神秘元素（<p>，<a>) shows up on live site

Question

first time developing a website on Wordpress and mucking about on my home page to make it looks better. I ran into a problem when trying to wrap my div with a to make the entire box clickable/link.

in page editing code looks like this:

<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>

And there are multiple divs in a row like this that is supposed to be side by side (using css display: inline-block)

But then the live site would have these divs stack vertically. Upon examining using developer tools (chrome), I find the code to turn up extra p element with the exact same a in the middle of the divs:

<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>

Anyone knows how to fix this?

Answer 1

Wordpress会自动在您的内容上运行过滤器，称为wpautop。它用于将编辑器中的回车转换为html间距。您可以使用functions.php

全局删除它

remove_filter( 'the_content', 'wpautop' );

...或者寻找一个插件，它可以让你对自动编辑的内容进行更细粒度的控制。

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

p:empty {
  display: none;
}

相同的过滤器（wpautop）会将您的链接包装到<p>个元素中。解决方案是：

• 将<a>标记包装到<div>标记中，或者......
• 在content上运行您自己的过滤器，在wpautop之后撤消wpautop所做的事情。见this question。