Wordpress - 是否可以使用 CMB2 在一行中添加多个文本字段？

问题描述 投票：0回答：3

使用 CMB2 我们可以为各种帖子类型创建元框。现在，默认情况下，每个添加的自定义字段都将用新行分隔。

为了更好的可用性，我需要添加一些彼此相邻的文本字段，如下图所示：

CMB2 可以实现这一点吗？

我现在使用的代码是：

   $cmb->add_field( array(
        'name'    => 'Test Text Medium',
        'desc'    => 'Street',
        'default' => '',
        'id'      => 'street',
        'type'    => 'text_medium',
    ) );
wordpress wordpress-theming
3个回答
1
投票

在这种情况下，cmb 具有创建自定义字段类型的强大功能。

希望此链接对您有帮助https://github.com/WebDevStudios/CMB2/wiki/Adding-your-own-field-types#use-the-field-in-your-template

您可以在自定义字段中使用多个字段

这是创建具有多个字段的自定义字段的简单代码

function cmb2_render_address_field_callback( $field, $value, $object_id, $object_type, $field_type ) {
$value = wp_parse_args( $value, array(
    'street1' => '',
    'street2' => '',
    'street3'  => ''
) );
?>
<div class="alignleft"><p><label for="<?php echo $field_type->_id( '_street1' ); ?>">Street</label></p>
    <?php echo $field_type->input( array(
        'class' => 'cmb_text_small',
        'name'  => $field_type->_name( '[street1]' ),
        'id'    => $field_type->_id( '_street1' ),
        'type'  => 'street1',
        'value' => $value['street1'],
    ) ); ?>
</div>
<div class="alignleft"><p><label for="<?php echo $field_type->_id( '_street2' ); ?>'">Street</label></p>
    <?php echo $field_type->input( array(
        'class' => 'cmb_text_small',
        'name'  => $field_type->_name( '[street2]' ),
        'id'    => 'street2',
        'type'  => 'text',
        'value' => $value['street2'],
    ) ); ?>
</div>
<div class="alignleft"><p><label for="<?php echo $field_type->_id( '_street3' ); ?>'">Street</label></p>
    <?php echo $field_type->input( array(
        'class' => 'cmb_text_small',
        'name'  => $field_type->_name( '[street3]' ),
        'id'    => $field_type->_id( '_street3' ),
        'type'  => 'time',
        'value' => $value['street3'],
    ) ); ?>
</div>
<?php
echo $field_type->_desc( true );

}

add_filter( 'cmb2_render_address', 'cmb2_render_address_field_callback', 10, 5 );
0
投票

创建您自己的字段类型，如下所示

function cmb2_get_state_options( $value = false ) {
        $state_list = array( 'AL'=>'Alabama','AK'=>'Alaska','AZ'=>'Arizona','AR'=>'Arkansas','CA'=>'California','CO'=>'Colorado','CT'=>'Connecticut','DE'=>'Delaware','DC'=>'District Of Columbia','FL'=>'Florida','GA'=>'Georgia','HI'=>'Hawaii','ID'=>'Idaho','IL'=>'Illinois','IN'=>'Indiana','IA'=>'Iowa','KS'=>'Kansas','KY'=>'Kentucky','LA'=>'Louisiana','ME'=>'Maine','MD'=>'Maryland','MA'=>'Massachusetts','MI'=>'Michigan','MN'=>'Minnesota','MS'=>'Mississippi','MO'=>'Missouri','MT'=>'Montana','NE'=>'Nebraska','NV'=>'Nevada','NH'=>'New Hampshire','NJ'=>'New Jersey','NM'=>'New Mexico','NY'=>'New York','NC'=>'North Carolina','ND'=>'North Dakota','OH'=>'Ohio','OK'=>'Oklahoma','OR'=>'Oregon','PA'=>'Pennsylvania','RI'=>'Rhode Island','SC'=>'South Carolina','SD'=>'South Dakota','TN'=>'Tennessee','TX'=>'Texas','UT'=>'Utah','VT'=>'Vermont','VA'=>'Virginia','WA'=>'Washington','WV'=>'West Virginia','WI'=>'Wisconsin','WY'=>'Wyoming' );
    
        $state_options = '';
        foreach ( $state_list as $abrev => $state ) {
            $state_options .= '<option value="'. $abrev .'" '. selected( $value, $abrev, false ) .'>'. $state .'</option>';
        }
    
        return $state_options;
    }
    
    function cmb2_render_address_field_callback( $field, $value, $object_id, $object_type, $field_type ) {
    
        // make sure we specify each part of the value we need.
        $value = wp_parse_args( $value, array(
            'address-1' => '',
            'address-2' => '',
            'city'      => '',
            'state'     => '',
            'zip'       => '',
        ) );
    
        ?>
        <div><p><label for="<?php echo $field_type->_id( '_address_1' ); ?>">Address 1</label></p>
            <?php echo $field_type->input( array(
                'name'  => $field_type->_name( '[address-1]' ),
                'id'    => $field_type->_id( '_address_1' ),
                'value' => $value['address-1'],
                'desc'  => '',
            ) ); ?>
        </div>
        <div><p><label for="<?php echo $field_type->_id( '_address_2' ); ?>'">Address 2</label></p>
            <?php echo $field_type->input( array(
                'name'  => $field_type->_name( '[address-2]' ),
                'id'    => $field_type->_id( '_address_2' ),
                'value' => $value['address-2'],
                'desc'  => '',
            ) ); ?>
        </div>
        <div class="alignleft"><p><label for="<?php echo $field_type->_id( '_city' ); ?>'">City</label></p>
            <?php echo $field_type->input( array(
                'class' => 'cmb_text_small',
                'name'  => $field_type->_name( '[city]' ),
                'id'    => $field_type->_id( '_city' ),
                'value' => $value['city'],
                'desc'  => '',
            ) ); ?>
        </div>
        <div class="alignleft"><p><label for="<?php echo $field_type->_id( '_state' ); ?>'">State</label></p>
            <?php echo $field_type->select( array(
                'name'    => $field_type->_name( '[state]' ),
                'id'      => $field_type->_id( '_state' ),
                'options' => cmb2_get_state_options( $value['state'] ),
                'desc'    => '',
            ) ); ?>
        </div>
        <div class="alignleft"><p><label for="<?php echo $field_type->_id( '_zip' ); ?>'">Zip</label></p>
            <?php echo $field_type->input( array(
                'class' => 'cmb_text_small',
                'name'  => $field_type->_name( '[zip]' ),
                'id'    => $field_type->_id( '_zip' ),
                'value' => $value['zip'],
                'type'  => 'number',
                'desc'  => '',
            ) ); ?>
        </div>
        <br class="clear">
        <?php
        echo $field_type->_desc( true );
    
    }
    add_filter( 'cmb2_render_address', 'cmb2_render_address_field_callback', 10, 5 );

要注册新类型，请使用以下代码

...
    'fields' => array(
        array(
            'name' => 'Address',
            'desc' => 'Custom Address Field',
            'id'   => '_cmb2_person_address',
            'type' => 'address',
        ),
    ),
...

为了显示，我们可以使用如下

$post_id = get_the_ID();
$address = get_post_meta( $post_id, '_cmb2_person_address', 1 );

// Set default values for each address key
$address = wp_parse_args( $address, array(
    'address-1' => '',
    'address-2' => '',
    'city'      => '',
    'state'     => '',
    'zip'       => '',
) );

?>
<p><strong>Address:</strong> <?php echo esc_html( $address['address-1'] ); ?></p>
<?php if ( $address['address-2'] ) : ?>
    <p><strong>Address 2:</strong> <?php echo esc_html( $address['address-2'] ); ?></p>
<?php endif; ?>
<p><strong>City:</strong> <?php echo esc_html( $address['city'] ); ?></p>
<p><strong>State:</strong> <?php echo esc_html( $address['state'] ); ?></p>
<p><strong>Zip:</strong> <?php echo esc_html( $address['zip'] ); ?></p>

更多详情请查看CMB2文档

0
投票

我遇到了和你一样的问题，我使用了类似的东西，首先我使用这样的组类型创建了字段，并向其中添加了自定义类“单行”

$cmb_menu->add_field(array(
    'name' => 'menu_item_padding',
    'id' => 'header_menu_padding',
    'type' => 'group',
    'classes' =>'one-row',
    'repeatable' => false,
    'options'     => array(

        //'sortable'          => false,
        'closed'         => false, // true to have the groups closed by default
        // 'remove_confirm' => esc_html__( 'Are you sure you want to remove?', 'cmb2' ), // Performs confirmation before removing group.
    ),
    'fields' => array(
        array(
            'name' => 'Top',
            'id' => 'top',
            'type' => 'text_small',
            'default' => '5',
        ),
        array(
            'name' => 'Right',
            'id' => 'right',
            'type' => 'text_small',
            'default' => '5',
        ),
        array(
            'name' => 'Bottom',
            'id' => 'bottom',
            'type' => 'text_small',
            'default' => '5',
        ),
        array(
            'name' => 'Left',
            'id' => 'left',
            'type' => 'text_small',
            'default' => '5',
        ),
    ),
));

然后您需要做的就是设置 .one-row 类的样式

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.