如何添加自定义属性？

Question

如何在没有javascript的联系表单7 字段中添加自定义属性？

例如,页面上有这样一个字段:

<input type="text" name="name" class="form-control" id="name-1" data-attr="custom" data-msg="????? 1"> 

问题:是否可以在管理面板中设置这些字段的自定义属性(data-attr,data-msg)？

Answer 1

找到您的字段的名称.

[text* text-21]

如果您的字段名称="text-21",就像在我的示例中一样,请将此代码添加到function.php文件中.

add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
    $str_pos = strpos( $content, 'name="text-21"' );
    $content = substr_replace( $content, ' data-attr="custom" data-msg="????? 1" ', $str_pos, 0 );
    return $content;
}

注意,它会将自定义属性添加到名称为text-21的所有表单元素中,在所有具有name ="text-21的表单中,如果要阻止它,则为表单元素添加一些唯一名称[text*inique-name]

然后将代码更改为

add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
    $str_pos = strpos( $content, 'name="inique-name"' );
    $content = substr_replace( $content, ' data-attr="custom" data-msg="????? 1" ', $str_pos, 0 );
    return $content;
}

Answer 2

这是一个通用解决方案，不涉及对字段名称和属性进行硬编码

add_filter( 'wpcf7_form_tag', function ( $tag ) {
    $datas = [];
    foreach ( (array)$tag['options'] as $option ) {
        if ( strpos( $option, 'data-' ) === 0 ) {
            $option = explode( ':', $option, 2 );
            $datas[$option[0]] = apply_filters('wpcf7_option_value', $option[1], $option[0]);
        }
    }
    if ( ! empty( $datas ) ) {
        $id = uniqid('tmp-wpcf');
        $tag['options'][] = "class:$id";
        add_filter( 'wpcf7_form_elements', function ($content) use ($id, $datas) {
            return str_replace($id, $name, str_replace($id.'"', '"'. wpcf7_format_atts($datas), $content));
        });
    }
    return $tag;
} );

它适用于所有数据属性，因此您可以像这样使用它

[text* my-name data-foo:bar data-biz:baz placeholder "Blabla"]
Output: <input type="text" name="my-name" data-foo="bar" data-biz="baz" placeholder="Blabla">

由于 wpcf7 不提供直接挂钩选项的方法，因此解决方案使用一种技巧，并临时将唯一生成的类添加到字段中，然后在稍后的过滤器中用添加的属性替换该类

如果您需要它不仅仅处理数据属性，您可以通过替换此行将更多属性列入白名单

if ( strpos( $option, 'data-' ) === 0 ) {

类似于以下内容

if ( preg_match( '/^(data-|pattern|my-custom-attribute)/', $option ) ) {

注意：wpcf7_format_atts不会输出空属性，因此请确保为属性赋值