web-dev-qa-db-ja.com

Contact Form 7でスパンラッパーを削除するにはどうすればよいですか？

私は Contact Form 7 myWordPressテーマ）を使用します。

現在、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ラッパーを削除するにはどうすればよいですか？

wordpresscontact-form-7
18
HamSter

同じ問題に直面し、最後にwpcf7_form_elementsフィルターを使用して<span>タグを正規表現で削除して終了しました。たとえば、このコードをfunctions.phpfileにコピーアンドペーストできます。ここでは、コールバックとして匿名関数を渡すので、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;
});
32
Guicara

先日、似たようなことを試してみましたが、多くの人が言ったように、正規表現はHTMLを変更したりタグを削除したりする適切な方法ではありません sounds logic 。

だから私は 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();
});

EDIT：また、フォームにhtml/textを追加しました。DOMDocumentクラスを使用した後、最初の見出し要素が正しくラップされませんでした。最初の行から始まり、フォームの最後で終わりました。そこで、フォーム全体をdivにラップしました。これにより、マークアップが再び適切に戻りました。

7
honk31

JQueryを使用してスパンラッパーを削除できます。

$("#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>
7
Paul Janicki

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タグはそのまま残ります。その効果は、入力タグの周りからスパンタグを本質的に移動して、ラップしたい要素の周りに配置することです。

これは、フォーム送信のコードが残念ながら非常にハードコード化されているためです。 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タグを使用することを受け入れると、プラグインがすでに行っている多くの作業が重複しています。プラグインの最も厄介なハードコーディングの1つを元に戻しながらプラグイン。

6
niaccurshi

Guicaraのphpコードに加えて、次のjavascriptコードはエラーメッセージのテキストを取得できます。

document.addEventListener('wpcf7invalid',function(e){
    if ('validation_failed' === e.detail.apiResponse.status){
        $.each(e.detail.apiResponse.invalidFields,function(i,el){
        console.log('this is error response and form object',el.message, $('#'+el.idref));
        });
    }
});
1
user3811354