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插件（静态HTML，JS和CSS）之前，这个工作正常。 WordPress导致我的JavaScript和样式表部分失败。发生了什么，我该如何防止这种情况发生？

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

Answer 1

<span>代码永远不能包含<div>。因为<span>是一个内联元素，用于格式化<div>或<p>标记等块内部。内联元素永远不会包含块元素，Chrome会尝试规范化您提供的无效标记。

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

Answer 2

您可以使用wpautop关闭Wordpress自动格式化（或者通过禁用该过滤器更好）。还有一个插件可以在每个帖子的基础上关闭自动格式化。

  

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

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