WP定制器JS模板不保存颜色字段

时间:2017-04-02 作者:HiroHito

我正在尝试创建自定义排版控件,在保存颜色值时遇到问题,请查看我的代码:

<?php
class Customizer_Typo_Control_Typography extends WP_Customize_Control {

/**
 * The type of customize control being rendered.
 */
public $type = \'typography\';

/**
 * Array
 */
public $l10n = array();

/**
 * Set up our control.
 */
public function __construct( $manager, $id, $args = array() ) {

    // Let the parent class do its thing.
    parent::__construct( $manager, $id, $args );

    // Make sure we have labels.
    $this->l10n = wp_parse_args(
        $this->l10n,
        array(
            \'color\'       => esc_html__( \'Font Color\',   \'ctypo\' ),
        )
    );
}

/**
 * Add custom parameters to pass to the JS via JSON.
 */
public function to_json() {
    parent::to_json();

    // Loop through each of the settings and set up the data for it.
    foreach ( $this->settings as $setting_key => $setting_id ) {

        $this->json[ $setting_key ] = array(
            \'link\'  => $this->get_link( $setting_key ),
            \'value\' => $this->value( $setting_key ),
            \'label\' => isset( $this->l10n[ $setting_key ] ) ? $this->l10n[ $setting_key ] : \'\'
        );

    }
}

/**
 * Underscore JS template to handle the control\'s output.
 */
public function content_template() { ?>

    <# if ( data.label ) { #>
        <span class="customize-control-title">{{ data.label }}</span>
    <# } #>

    <# if ( data.description ) { #>
        <span class="description customize-control-description">{{{ data.description }}}</span>
    <# } #>

    <ul>

    <# if ( data.color ) { #>

        <li class="typography-font-color">

            <# if ( data.color.label ) { #>
                <span class="customize-control-title">{{ data.color.label }}</span>
            <# } #>

        <input type="text" data-default-color="{{ data.color.default }}" value="{{ data.color.value }}" class="color-picker" {{{ data.color.link }}} />
        </li>
    <# } #>


    </ul>
<?php } }
下面是我打印选项的方式:

  $wp_customize->add_setting( \'p_font_color\',   
  array( \'default\' => \'#666111\',     
    \'sanitize_callback\' => \'sanitize_hex_color\',              
    \'transport\' => \'postMessage\' ) 
  );

 $wp_customize->add_control(
new Customizer_Typo_Control_Typography(
    $wp_customize,
    \'p_typography\',
    array(
        \'label\'       => esc_html__( \'Paragraph Typography\', \'ctypo\' ),
        \'description\' => __( \'Select how you want your paragraphs to appear.\', \'ctypo\' ),
        \'section\'     => \'p_typography\',

        \'settings\'    => array(
            \'color\'       => \'p_font_color\',
        ),

        \'l10n\'        => array(),
    )
)
);

1 个回复
SO网友:Sayed Taqui

您正在使用content_template 用于呈现下划线JS模板,这意味着您还必须使用api.Control.extend({ 然后自己处理。

然而,通过查看您的代码,情况似乎并非如此,我认为如果要更改html内容,则需要重写render_content 像这样

protected function render_content() {
    ?>
    <label>
        <?php if ( ! empty( $this->label ) ) : ?>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
        <?php endif;
        if ( ! empty( $this->description ) ) : ?>
            <span class="description customize-control-description"><?php echo $this->description; ?></span>
        <?php endif; ?>
        <input type="text" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(\'color\'); ?> />
    </label>
    <?php
}

相关推荐

Underscores in custom fields

在尝试使用meta\\u Query()执行WP\\u查询时,我遇到了一些问题,因为插件创建的自定义字段_ 在它名字的开头。虽然我注意到它是以这种方式存储在数据库中的,但我不知道它为什么会在那里,我想我必须引用它而不带下划线(对于记录,这是错误的)。为什么一些自定义字段以下划线开头,而其他字段不以下划线开头?下划线的作用是什么?在某些情况下它们是强制性的吗?