Php 如何添加一个类来选择联系人表单7中的元素标记?
我是联系人表单7的忠实粉丝,我总是需要对表单进行一些扩展定制。这一次,我很沮丧地试图将不同的类添加到select元素标记中,但没有结果 我想做的是实现一种很酷的风格和效果,将下拉列表从中删除,正如屏幕截图所示,它工作得很好,但是,图标没有显示出来,因为为了显示它们,选择元素中的标记需要有自己的类 例如: 首先,我需要用id=cd下拉列表和class=cd select创建一个select元素,直到这里,这可以通过下面的CF7短码生成器轻松实现Php 如何添加一个类来选择联系人表单7中的元素标记?,php,html,wordpress,contact-form-7,Php,Html,Wordpress,Contact Form 7,我是联系人表单7的忠实粉丝,我总是需要对表单进行一些扩展定制。这一次,我很沮丧地试图将不同的类添加到select元素标记中,但没有结果 我想做的是实现一种很酷的风格和效果,将下拉列表从中删除,正如屏幕截图所示,它工作得很好,但是,图标没有显示出来,因为为了显示它们,选择元素中的标记需要有自己的类 例如: 首先,我需要用id=cd下拉列表和class=cd select创建一个select元素,直到这里,这可以通过下面的CF7短码生成器轻松实现 [select* select-profissao
[select* select-profissao id:cd-dropdown class:cd-select "Professional" "Nurse" "Lawyer"]
Contact Form 7前面提到的快捷代码生成html select元素,如下所示:
<select id="cd-dropdown" class="cd-select">
<option value="" selected>Professional</option>
<option value="" >Nurse</option>
<option value="" >Lawyer</option>
</select>
但是我希望能够向标记添加一个类。甚至可以通过使用CF7短码生成器来实现这一点吗?通过使用javascript/jQuery甚至PHP,是否有任何解决办法来实现这一点
<select id="cd-dropdown" class="cd-select">
<option value="" selected>Professional</option>
<option value="" class="icon-nurse">Nurse</option>
<option value="" class="icon-lawyer">Lawyer</option>
</select>
我非常感谢您对这个问题的指导。
提前感谢。在plugin dir modules/select.php wpcf7\u select\u shortcode\u处理程序函数中修改:
function wpcf7_select_shortcode_handler( $tag ) {
$tag = new WPCF7_Shortcode( $tag );
if ( empty( $tag->name ) )
return '';
$validation_error = wpcf7_get_validation_error( $tag->name );
$class = wpcf7_form_controls_class( $tag->type );
if ( $validation_error )
$class .= ' wpcf7-not-valid';
$atts = array();
$atts['class'] = $tag->get_class_option( $class );
$atts['id'] = $tag->get_option( 'id', 'id', true );
$atts['tabindex'] = $tag->get_option( 'tabindex', 'int', true );
if ( $tag->is_required() )
$atts['aria-required'] = 'true';
$atts['aria-invalid'] = $validation_error ? 'true' : 'false';
$defaults = array();
if ( $matches = $tag->get_first_match_option( '/^default:([0-9_]+)$/' ) )
$defaults = explode( '_', $matches[1] );
$multiple = $tag->has_option( 'multiple' );
$include_blank = $tag->has_option( 'include_blank' );
$first_as_label = $tag->has_option( 'first_as_label' );
$name = $tag->name;
$values = $tag->values;
$labels = $tag->labels;
$empty_select = empty( $values );
if ( $empty_select || $include_blank ) {
array_unshift( $labels, '---' );
array_unshift( $values, '' );
} elseif ( $first_as_label ) {
$values[0] = '';
}
$html = '';
$posted = wpcf7_is_posted();
foreach ( $values as $key => $value ) {
$selected = false;
// changed here
if (! ( $attributes = json_decode($value, true) ) ) {
$attributes = array(
'value' => $value
);
} else {
$value = (isset($attributes['value'])) ? $attributes['value'] : null;
}
if ( $posted && ! empty( $_POST[$name] ) ) {
if ( $multiple && in_array( esc_sql( $value ), (array) $_POST[$name] ) )
$selected = true;
if ( ! $multiple && $_POST[$name] == esc_sql( $value ) )
$selected = true;
} else {
if ( ! $empty_select && in_array( $key + 1, (array) $defaults ) )
$selected = true;
}
// changed here
$item_atts = array('selected' => $selected ? 'selected' : '' );
$item_atts = array_merge($attributes, $item_atts);
$item_atts = wpcf7_format_atts( $item_atts );
$label = isset( $labels[$key] ) ? $labels[$key] : $value;
$html .= sprintf( '<option %1$s>%2$s</option>',
$item_atts, esc_html( $label ) );
}
if ( $multiple )
$atts['multiple'] = 'multiple';
$atts['name'] = $tag->name . ( $multiple ? '[]' : '' );
$atts = wpcf7_format_atts( $atts );
$html = sprintf(
'<span class="wpcf7-form-control-wrap %1$s"><select %2$s>%3$s</select>%4$s</span>',
$tag->name, $atts, $html, $validation_error );
return $html;
}
不幸的是,我无法测试这个没有安装wordpress的插件。在plugin dir modules/select.php wpcf7\u select\u shortcode\u处理程序函数中修改:
function wpcf7_select_shortcode_handler( $tag ) {
$tag = new WPCF7_Shortcode( $tag );
if ( empty( $tag->name ) )
return '';
$validation_error = wpcf7_get_validation_error( $tag->name );
$class = wpcf7_form_controls_class( $tag->type );
if ( $validation_error )
$class .= ' wpcf7-not-valid';
$atts = array();
$atts['class'] = $tag->get_class_option( $class );
$atts['id'] = $tag->get_option( 'id', 'id', true );
$atts['tabindex'] = $tag->get_option( 'tabindex', 'int', true );
if ( $tag->is_required() )
$atts['aria-required'] = 'true';
$atts['aria-invalid'] = $validation_error ? 'true' : 'false';
$defaults = array();
if ( $matches = $tag->get_first_match_option( '/^default:([0-9_]+)$/' ) )
$defaults = explode( '_', $matches[1] );
$multiple = $tag->has_option( 'multiple' );
$include_blank = $tag->has_option( 'include_blank' );
$first_as_label = $tag->has_option( 'first_as_label' );
$name = $tag->name;
$values = $tag->values;
$labels = $tag->labels;
$empty_select = empty( $values );
if ( $empty_select || $include_blank ) {
array_unshift( $labels, '---' );
array_unshift( $values, '' );
} elseif ( $first_as_label ) {
$values[0] = '';
}
$html = '';
$posted = wpcf7_is_posted();
foreach ( $values as $key => $value ) {
$selected = false;
// changed here
if (! ( $attributes = json_decode($value, true) ) ) {
$attributes = array(
'value' => $value
);
} else {
$value = (isset($attributes['value'])) ? $attributes['value'] : null;
}
if ( $posted && ! empty( $_POST[$name] ) ) {
if ( $multiple && in_array( esc_sql( $value ), (array) $_POST[$name] ) )
$selected = true;
if ( ! $multiple && $_POST[$name] == esc_sql( $value ) )
$selected = true;
} else {
if ( ! $empty_select && in_array( $key + 1, (array) $defaults ) )
$selected = true;
}
// changed here
$item_atts = array('selected' => $selected ? 'selected' : '' );
$item_atts = array_merge($attributes, $item_atts);
$item_atts = wpcf7_format_atts( $item_atts );
$label = isset( $labels[$key] ) ? $labels[$key] : $value;
$html .= sprintf( '<option %1$s>%2$s</option>',
$item_atts, esc_html( $label ) );
}
if ( $multiple )
$atts['multiple'] = 'multiple';
$atts['name'] = $tag->name . ( $multiple ? '[]' : '' );
$atts = wpcf7_format_atts( $atts );
$html = sprintf(
'<span class="wpcf7-form-control-wrap %1$s"><select %2$s>%3$s</select>%4$s</span>',
$tag->name, $atts, $html, $validation_error );
return $html;
}
不幸的是,我无法测试这个没有安装wordpress的选项。我认为使用jQuery将类添加到选项客户端会更容易,假设您已经在使用jQuery作为SimpleDropDownEffects插件 通过联系人表单呈现的选择示例:
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1">Sun</option>
<option value="2">Clouds</option>
<option value="3">Snow</option>
<option value="4">Rain</option>
<option value="5">Windy</option>
</select>
优点:不侵入插件文件,不更新插件。
缺点:类名是用js编码的,我认为如果您已经在使用jQuery作为SimpleDropDownEffects插件,那么使用jQuery将类添加到选项客户端会更容易 通过联系人表单呈现的选择示例:
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1">Sun</option>
<option value="2">Clouds</option>
<option value="3">Snow</option>
<option value="4">Rain</option>
<option value="5">Windy</option>
</select>
优点:不侵入插件文件,不更新插件。
缺点:类名是用js编码的,只需添加以下jquery:
只需添加以下jquery:
查看插件文件,查看它在哪里生成选项,并根据您的喜好进行编辑。嘿@Billy Mathews,txt获取提示!无论如何,我不确定我是否能够做到这一点,我的意思是,我认为这需要在插件核心文件中进行深入的调整,以创建额外的选项,为每个标记添加一个唯一的类,将所有内容存储在数据库中等等。但我还是会继续研究它…查看插件文件,看看它在哪里生成选项,然后根据您的喜好进行编辑。嘿@Billy Mathews,txt获取提示!无论如何,我不确定我是否能够做到这一点,我的意思是,我认为这需要在插件核心文件中进行深入的调整,以创建额外的选项,为每个标记添加一个唯一的类,将所有内容存储在数据库中等等。但我还是会继续研究的……嘿@ravipatel,这对我来说太棒了!如果WPCF7开发团队能够在插件的选项中提供此功能,这将非常有用。无论如何,谢谢你的帮助!嘿@ravipatel,这对我来说太棒了!如果WPCF7开发团队能够在插件的选项中提供此功能,这将非常有用。无论如何,谢谢你的帮助!破解插件不是一个好主意。更新后的更改将消失。破解插件不是一个好主意。更新时,更改将消失。
$( "#cd-dropdown option" ).addClass(function(index) {
return "icon-" + $(this).text().toLowerCase().split(' ').join('-');
});