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

Тег

A <span> никогда не может содержать <div>. Потому что <span> - это встроенный элемент, используемый для форматирования внутри блоков, таких как теги <div> или <p>. Встроенные элементы никогда не могут содержать блочные элементы, и Chrome пытается нормализовать недопустимую разметку, которую вы ей дали.

Чтобы решить эту проблему, вы должны сделать video-link-box делением. Возможно, вам нужно применить дополнительное форматирование.

Answer 2

Вы можете отключить автоматическое форматирование Wordpress, используя wpautop (или лучше, отключив этот фильтр). Существует также плагин для отключения автоматического форматирования для каждого поста.

Ах, и я забыл, что WordPress тоже не использует HTML5. Похоже, мне нужно изменить <aside>

Нет, вам не нужно, последние версии Wordpress знают о HTML5-тегах . Но, как упоминалось в другом ответе, функция wpautop также проверяет правильность вложенности блочных элементов.