用多个字段控件扩展WP_Customize_Control

时间:2014-05-28 作者:davidcondrey

我试图找出如何编写自定义控件,但令人沮丧的是,我在网上找到的所有信息都指向创建单个文本字段的相同示例。

我想创建一个自定义控件,它提供4个填充输入字段(上、右、下、左)

<table border="0" cellpadding="1" cellspacing="0">
    <tr>
        <th>Top</th>
        <th>Right</th>
        <th>Bottom</th>
        <th>Left</th>
    </tr>
    <tr>
        <td><input type="number" name="top" min="0" max="20"></td>
        <td><input type="number" name="right" min="0" max="20"></td>
        <td><input type="number" name="bottom" min="0" max="20"></td>
        <td><input type="number" name="left" min="0" max="20"></td>
    </tr>
</table>

1 个回复
最合适的回答,由SO网友:davidcondrey 整理而成

我能够实现我的目标,不是通过创建一个具有多个输入字段的自定义控件,而是通过创建一个仍然接受单个输入但将与其他控件内联显示的自定义控件。

以下是用于内联数字输入的自定义控件:

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
) ) );

结束

相关推荐

Admin Theme customization

我遵循wordpress codex网站上关于通过插件创建管理主题的说明。我激活了插件,但我的样式表没有包含在<head>.. 这是我的代码:add_action( \'admin_init\', \'kd_plugin_admin_init\' ); add_action( \'admin_menu\', \'kd_plugin_admin_menu\' ); function kd_plugin_admin_init() { /* Register