如何删除Contact Form 7中的span包装器？

Question

我在WordPress主题中使用Contact Form 7.

它目前正在返回span并且input:

<span class="wpcf7-form-control-wrap name">
  <input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name">
</span>

但我只需要input:

<input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name">

如何删除span包装？

Answer 1

我遇到了同样的问题,最后通过使用wpcf7_form_elements过滤器来删除<span>带有正则表达式的标记.例如,您可以将此代码复制粘贴到functions.php文件中.这里我传递一个匿名函数作为回调,所以一定要PHP> = 5.3.

add_filter('wpcf7_form_elements', function($content) {
    $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content);

    return $content;
});

Answer 2

您可以使用jQuery删除span包装器:

$("#name").unwrap();

它将删除输入的父元素,因此在这种情况下它将删除跨度.请注意,删除跨度后,某些Contact Form 7功能可能无法正常工作.例如,验证可能不起作用.

$("button").click(function(){
  $("#name").unwrap();
});

span {
  background-color: #333;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap name">
  <input type="text" name="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name" aria-required="true" aria-invalid="false">
</span>

<button>Remove span</button>

Answer 3

前几天我尝试过类似的东西,很多人都提到,Regex不是改变HTML /删除标签等的正确方法,而且听起来很合理.

所以我去了DOMDocument并提出了以下解决方案:

add_filter('wpcf7_form_elements', function( $content ) {
  $dom = new DOMDocument();
  $dom->preserveWhiteSpace = false;
  $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

  $xpath = new DomXPath($dom);
  $spans = $xpath->query("//span[contains(@class, 'wpcf7-form-control-wrap')]" );

  foreach ( $spans as $span ) :
    $children = $span->firstChild;
    $span->parentNode->replaceChild( $children, $span );
  endforeach;

  return $dom->saveHTML();
});

编辑: 我现在还添加了一些HTML /文本到我的表单,并在我使用DOMDocument类后第一个标题元素没有正确包装.它从第一行开始,在表单的最后结束.所以我将整个表单包装在div中,是什么让标记再次正常返回.

Answer 4

从WPCF7版本4.9开始，调整上面的答案以使错误消息不会丢失：

首先，在CMS的编辑器中，包装您的输入字段和要分组的任何其他元素，例如：

<span class="wpcf7-form-control-wrap your-name">{field codes, etc, here}</span>

请注意，您将需要使用“ wpcf7-form-control-wrap”类和与您的字段名称匹配的类。

接下来，在中使用此正则表达式代码functions.php。它可能需要适应您的特定需求

add_filter('wpcf7_form_elements', function($content) {
    preg_match_all('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', $content,$matches);

    foreach($matches[2] as $match):
        $content = str_replace(trim($match),trim(preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $match)),$content);
    endforeach;
    return $content;
});

这将在输入字段周围剥离span标签，同时保持新的span标签不变。效果实际上是将span标签从仅输入字段周围移动到要包装的元素周围。

这样做的原因是不幸的是，表单提交的代码很难被编码。为了完全自由地使用HTML结构，您需要执行以下任一操作：

1. 在第295行周围的rest-api.php中更改代码，以将“ into”值更改为不太具体的值。当然，这不是推荐的方法，尽管它为您提供了完全自由地构造内容的自由。插件更新将覆盖它。

   foreach ( (array) $result['invalid_fields'] as $name => $field ) {
       $invalid_fields[] = array(
           'into' => 'span.wpcf7-form-control-wrap.'
               . sanitize_html_class( $name ),
           'message' => $field['reason'],
           'idref' => $field['idref'],
       );
   }
   

2. 点击wpcf7：invalid事件，然后对结果运行您自己的验证代码。不用说，这正在重复该插件已经为您完成的许多工作，当接受（暂时）以上述方式使用“ wpcf7-form-control-wrap”类的span标签时，该插件保留了所有功能撤消插件中最烦人的硬编码之一。