如何在cmb2插件上创建条件字段?

时间:2015-06-19 20:05:01

标签: wordpress

我想为我的会员信息页面制作一个条件。

$biometabox[] = array(
        'id' => 'first-section',
        'title' => 'Member Data',
        'object_types' => array('dausfmembers'),
        'fields' => array(
            array(
            'name' => 'Gender',
            'type' => 'radio',
            'id' => $dausf.'gender',
            'options' => array(
                'Male' => 'Male',
                'Female' => 'Female'
            )
        ),  
        array(
            'name' => 'Gender',
            'type' => 'radio',
            'id' => $dausf.'mstatus',
            'options' => array(
                'Married' => 'Married',
                'Single' => 'Single'
            )
        ), 

我想让女性和已婚人士在管理面板中显示此文件。

                   array(
                        'name' => 'Husband Name',
                        'type' => 'text',
                        'id' => $dausf.'hname',
                    ),

任何人都可以帮助我解决这个问题吗?

2 个答案:

答案 0 :(得分:1)

“条件字段”似乎尚未集成在CMB2核心中。但是,有一个名为CMB2 Conditionals的插件可以帮助您实现所需的功能。

安装并设置插件后,只需按照以下方式设置字段即可实现:

特别注意'attributes'键,您可以根据插件的说明进行操作。

$biometabox[] = array(
    'id' => 'first-section',
    'title' => 'Member Data',
    'object_types' => array('dausfmembers'),
    'fields' => array(
        array(
         'name' => 'Gender',
         'type' => 'radio',
         'id' => $dausf.'gender',
         'options' => array(
            'Male' => 'Male',
            'Female' => 'Female',
        ),
         'attributes' => array(
         'required'    => 'required',
        )
    ),  
        array(
         'name' => 'Gender',
         'type' => 'radio',
         'id' => $dausf.'mstatus',
         'options' => array(
            'Married' => 'Married',
            'Single' => 'Single',
         ),
         'attributes' => array(
         'required'    => 'required',
        )
    ), 
        array(
         'name' => 'Husband Name',
         'type' => 'text',
         'id' => $dausf.'hname',
         'required' => true,
        ),
         'attributes' => array(
         'required' => true, // Will be required only if visible.
         'data-conditional-id' => $prefix . 'gender',
         'data-conditional-value' => 'Female',
    ),
         'attributes' => array(
         'required' => true, // Will be required only if visible.
         'data-conditional-id' => $prefix . 'mstatus',
         'data-conditional-value' => 'Married',
    ),
...

) );

您需要在此处查看插件的示例函数:https://github.com/jcchavezs/cmb2-conditionals/blob/master/example-functions.php

我希望你设法让你工作。祝你好运。

答案 1 :(得分:1)

虽然这可能有点费解,但您也可以根据所选的选项编写自定义jQuery脚本来显示和隐藏字段:

在您的主题目录中添加两个名为" js"的文件夹。和" css"如果他们不在那里。

然后在/ js中创建一个名为" admin_scripts.js"的文件。并在/ css中创建一个名为" admin.css"。

的文件

所以你有:

theme_directory / CSS / admin.css theme_directory / JS / admin_scripts.css

在你的functions.php中添加以下内容:

function admin_scripts() {
// Adding custom admin scripts file
wp_enqueue_script( 'admin-js', get_template_directory_uri() . '/js/admin_scripts.js', array( 'jquery' ));

// Registering and adding custom admin css
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/css/admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' ); 
}

然后在此功能下方添加:

add_action( 'admin_enqueue_scripts', 'admin_scripts' );

在js / admin_scripts.js中添加以下内容(记得将id和类更改为您的字段&id;和类)

jQuery(document).ready( function() {
    if( jQuery('#cmb2_select_field_id').val() == 'conditional_option') {
        jQuery('.cmb2-field-to-display-on-select').show();
    }
    jQuery('#cmb2_select_field_id').bind('change', function (e) { 
        if( jQuery('#cmb2_select_field_id').val() == 'conditional_option') {
            jQuery('.cmb2-field-to-display-on-select').show();
        }
        else{
           jQuery('.cmb2-field-to-display-on-select').hide();
        }         
    });
});

在css / admin.css中添加以下内容:

.cmb2-field-to-display-on-select {
    display:none;
}