Question

我使用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>

每当我在“视觉”中进行更改时，它会删除“span”-tag，如下所示：

<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”）。我错过了什么吗？我已经尝试在标签中设置一个空格“＆amp; nbsp”，在“视觉”中更改文本后，它将转换为“”（实际空白），并使用不同的标签。

谢谢！

Answer 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');

Answer 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');

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

Answer 3

根据上述答案 (Val)，该函数将允许使用空标签，但由于主题结构或您可能拥有的任何页面构建器插件，这仍然可能不起作用。

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

span 块有一个自定义类 .break 来创建样式，然后我在 .break 类中的
标签上设置了一个 display: none 以便样式保留，但额外的空间被删除。< /p>

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

.break br {display:none;}

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

WordPress删除空span标记

3 个答案: