我能够实现我的目标,不是通过创建一个具有多个输入字段的自定义控件,而是通过创建一个仍然接受单个输入但将与其他控件内联显示的自定义控件。
以下是用于内联数字输入的自定义控件:
class Customizer_Number_Inline_Control extends WP_Customize_Control {
public $fieldwidth = \'text\';
public $type = \'number\';
protected function render() {
$id = \'customize-control-\' . str_replace( \'[\', \'-\', str_replace( \']\', \'\', $this->id ) );
$class = \'customize-control customize-control-\' . $this->type; ?>
<li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>" style="clear:none;display:inline-block;max-width:<?php echo $this->fieldwidth . "%"; ?>">
<?php $this->render_content(); ?>
</li>
<?php }
public function render_content() { ?>
<label class="inline">
<span class="customize-control-title" style="font-size:10px;line-height:10px;height:20px;"><?php echo esc_html( $this->label ); ?></span>
<input type="number" <?php $this->link(); ?> value="<?php echo intval( $this->value() ); ?>" />
</label>
<?php }
}
我添加了一个额外的参数来设置控件的宽度,因此,如果要内联三个控件,请将它们分别设置为33%(33%),如果要2个,请将它们分别设置为50%。。等
将其实现到一个设置中看起来是这样的。
$wp_customize->add_setting( \'width\', array (
\'default\' => \'77\',
\'type\' => \'option\',
) );
$wp_customize->add_control( new Customizer_Number_Inline_Control( $wp_customize, \'width\', array (
\'label\' => \'Width\',
\'type\' => \'number\',
\'section\' => \'site\',
\'priority\' => 1,
\'fieldwidth\'=> \'50\', //set the field to 50% width so that we can display a second one next to it
) ) );