Wordpress 神秘元素（<p>、<a>）出现在现场

Question

第一次在 Wordpress 上开发一个网站，然后在我的主页上胡思乱想以使其看起来更好。我在尝试用a 包装我的div 以使整个框可点击/链接时遇到问题。

在页面编辑代码如下：

<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 display: inline-block）

但是实时站点将这些 div 垂直堆叠。在使用开发人员工具 (chrome) 进行检查后，我发现代码可以在 div 中间使用完全相同的 a 出现额外的 p 元素：

<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' );

...或者寻找一个插件，使您能够更细粒度地控制哪些是自动编辑的，哪些不是。

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

p:empty {
  display: none;
}

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

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