WordPress 删除空的 span 标签答案

【问题标题】：WordPress removes empty span tagWordPress 删除空的 span 标签
【发布时间】：2017-10-30 20:35:07
【问题描述】：

我使用 WordPress 编辑器，我想在“span”标签中显示一个图标，如下所示：

<div id="question1" class="box-around">
   <div class="box-left"><span class="fa fa-search" aria-hidden="true"> </span></div>
   <div class="box-right">
      <h3>Some Heading</h3>
      Some Text
      <span id="question1-answer"> </span>
    </div>
</div>

每当我对“visual”进行更改时，它都会删除“span”标签，看起来像这样：

<div id="question1" class="box-around">
  <div class="box-left"></div>
   <div class="box-right">
      <h3>Some Heading</h3>
       Some Text
       <span id="question1-answer"> </span>
    </div>
</div>

奇怪的是，底部的跨度 (id="question1-answer") 被保留了。我错过了什么吗？我已经尝试在标签中设置一个空格“&nbsp”，在更改“visual”中的文本并使用不同的标签后，它将转换为“”（实际空格）。

谢谢！

【问题讨论】：

标签： wordpress html

【解决方案1】：

将此代码添加到您的活动主题 functions.php 文件中。

function override_mce_options($initArray) {
    $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
} 
add_filter('tiny_mce_before_init', 'override_mce_options');

【讨论】：

所以这基本上会使 everything “有效”？更具体一点可能是一个更好的主意，并且只允许这里实际需要的东西......
所以这不是一个好习惯？它现在对我有用，但我担心从长远来看它可能会破坏一些东西或影响它不应该影响的东西。

【解决方案2】：

更具体一点 - 如果标签具有 id、name、class 或 style 属性，则允许使用空标签：

function override_mce_options($initArray) {
  $opts = '*[id|name|class|style]';
  $initArray['valid_elements'] .= ',' . $opts;
  $initArray['extended_valid_elements'] .= ',' . $opts;
  return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

也许我做错了什么，但对我来说它有效。仍然我确信有一个更好的解决方案 - 能够只向有效元素添加一个特定标签会很好。

【讨论】：

这对我有用。谢谢！我将它与 WP Bakery Page Builder 一起使用。

【解决方案3】：

使用上述答案 (Val)，该功能将允许空标签，但由于主题结构或您可能拥有的任何页面构建器插件，这仍然可能无法正常工作。

例如，我正在使用带有自定义功能的 WPBakery 页面构建器。为了允许带有样式的空范围（例如背景），我将上面的代码添加到我的 functions.php 中，并在块中放置了一个
标签。

span 块有一个自定义类 .break 到创建样式的位置，然后我在 .break 类的
标记上设置了 display: none ，因此样式保留但多余的空间被删除。

<span class="break"><br></span>

.break br {display:none;}

现在空的 span 标签应该正常显示了。

【讨论】：