Question

这太疯狂了，我想不出可能发生的事情。

我在functions.php中定义了一个短代码，如下所示：

function company($atts, $content = null) {
extract(shortcode_atts(array(
    "linkto" => 'http://url.com',
    "status" => 'none',
    "size" => 'normal'
), $atts));
return '<a href="'.$linkto.'"><div class="company block size-'.$size.'">'.$content.'<span class="status-'.$status.'"></span></div></a>';
}
add_shortcode("company", "company");

接下来是注册短代码和向TinyMCE添加按钮的通常记录方式。

关键部分是它返回一个包含div的锚（包含一些内容）。但是，当WordPress呈现页面时，HTML输出为：

<p><a href="http://url.com/"></a></p>
<div class="company block size-normal"><a href="http://url.com/"><img class="aligncompanylogo size-full wp-image-60" alt="logo" src="http://path/to/image.png" width="256" height="60"><span class="status-acquired"></span></a></div>
<a href="http://url.com/">
</a>
<p><a href="http://url.com/"></a></p>

你正在读那个：WordPress首先输出ap，然后是div，然后是锚，接着是内容，接着是第三个锚，然后是第四个锚点包含在p标记中。什么。

关于WordPress为什么输出HTML的想法完全不同于它应该的方式？

Answer 1

编辑＃2：当我尝试重现您的问题时，我发现以下内容：Wordpress按预期输出HTML，但浏览器重新排列DOM。我相信浏览器是这样做的，因为你的短代码在p元素中添加了一个div元素，这是一个无效的HTML。

除了下面发布的变通方法之外，您还可以通过将以下内容添加到functions.php来阻止Wordpress将换行符转换为p标记：

remove_filter( 'the_content', 'wpautop' );

~~将div放在锚标记中无效。是否有可能在某处试图修复无效的HTML？~~

~~Wordpress中的某些东西正在考虑使用无效的锚标签嵌套，并尝试修复它。~~两个解决方法，

将div改为跨度。

将div更改为另一个HTML元素并确保TinyMCE通过向functions.php添加一个钩子来认为它是有效的 - 在本例中，我将div更改为文章并将文章添加为锚的有效子项：

function modify_valid_children($settings){
    $settings['valid_children']="+a[article]";
    return $settings;
}
add_filter('tiny_mce_before_init', 'modify_valid_children');

WordPress编写HTML的方式与functions.php不同

1 个答案: