WordPress修改了我的DOM结构？

Question

我做了一个WordPress插件，它创建了一个返回以下字符串的短代码：

<span class="video-link-box">
    <a class="video-link" href="http://www.youtube.com/watch?v={$videoid}">{$content}</a>
    <div class="video-box video-box-hidden">
        <a class="video-box-exit" href="javascript:void(0)"></a>
        <iframe width="{$width}" height="{$height}" src="http://www.youtube.com/embed/{$videoid}?enablejsapi=1" allowfullscreen></iframe>
        <aside>{$caption}</aside>
    </div>
</span>

然而，下面是Google chrome所说的它是如何呈现的。在我把它变成WordPress插件(static HTML、JS和CSS)之前，这是可行的。WordPress会导致我的JavaScript和样式表部分失败。发生了什么?我如何防止这种情况发生？

​

​

编辑: WordPress仍然在侵入性地添加p标签。上面的屏幕截图不再反映XHTML是如何呈现的，但是如何防止WordPress这样做呢？

Answer 1

您可以使用wpautop关闭Wordpress自动格式化功能(或者更好的方法是禁用该过滤器)。还有一个插件可以关闭每个帖子的自动格式化。

啊，我忘了WordPress也不使用HTML5。看起来我需要更改<aside>

不，你不需要，最新版本的Wordpress know about the HTML5-tags。但正如在另一个答案中提到的，wpautop-function还会检查块元素嵌套是否正确。

Answer 2

<span>标记永远不能包含<div>。因为<span>是用于块内部格式化的内联元素，如<div>或<p>标记。内联元素永远不能包含块元素，Chrome正在尝试规范化您给它的无效标记。

要解决这个问题，您应该将video-link-box设置为div。也许你需要应用一些额外的格式。