Question

我正在构建WordPress主题并需要在自定义程序中添加自定义controls，输入字段会显示，但是当我更改输入值时，没有任何反应。

这是我的代码。

class WP_Customize_Custom_Control extends WP_Customize_Control {
  public $type = 'custom_control';

  function render_content(){
  }
  public function content_template() {
    ?>
    <input type="text" id="custom_control" name="custom_control" />
    <?php
  }
}

function company_customize_register( $wp_customize ){
  $wp_customize->register_control_type( 'WP_Customize_Custom_Control' );
  $wp_customize->add_setting('custom_smthing', array( 'default' => get_theme_mod( "custom_smthing" ), 'transport' =>'postMessage' ) );
  $wp_customize->add_control(new WP_Customize_Custom_Control($wp_customize,'custom_smthing',
    array(
      'label'      => __( 'Custom Control', 'company' ),
      'section'    => 'body_backgrounds',
      'settings'   => 'custom_smthing',
     )
   )
  );
}
add_action( 'customize_register', 'company_customize_register' );

和js是

( function( $ ) {
  console.log("test1");
  wp.customize( 'custom_smthing', function( value ) {
    console.log("test2");
    value.bind( function( to ) {
      console.log("test3");
    } );
  });
})( jQuery );

test1和test2正在运行，但test3从未触发。

Answer 1

我修改了您的代码，发现您的代码在许多情况下或根据最新的 WP 版本无法运行。

您没有在代码中提及 body_backgrounds 部分。所以我假设 Body Backgrounds 是您的自定义部分，因为我没有在 WordPress 中找到默认的 body_backgrounds 部分。

所以我添加了一个部分。

$wp_customize->add_section( 'body_backgrounds' , array(
    'title'      => 'Body Backgrounds',
    'priority'   => 20,
) );

WP_Customize_Control 仅在实际使用主题定制器时加载。因此，您需要在函数“company_customize_register”中定义您的类。否则，它会给 PHP Fatal error: Class 'WP_Customize_Control' not found

您没有提到如何将 js 加入队列，但最好添加依赖项 jquery 和 customize-preview。

function customizer_live_preview() {
    wp_enqueue_script(
        'theme-customizer',
        get_template_directory_uri() . '/assets/js/theme-customizer.js',
        array( 'jquery', 'customize-preview' ),
        '1.0.0',
        true
    );
}
add_action( 'customize_preview_init', 'customizer_live_preview' );

您需要将 data-customize-setting-link 传递给您的输入以绑定您的值。

<input type="text" id="custom_smthing" name="custom_smthing" data-customize-setting-link="custom_smthing" />

PHP

function company_customize_register( $wp_customize ){

    class WP_Customize_Custom_Control extends WP_Customize_Control {
        public $type = 'custom_control';

        function render_content(){ }
        
        public function content_template() {?>
            <input type="text" id="custom_smthing" name="custom_smthing" data-customize-setting-link="custom_smthing" />
        <?php }
    }

    $wp_customize->register_control_type( 'WP_Customize_Custom_Control' );
    $wp_customize->add_section( 'body_backgrounds' , array(
        'title'      => 'Body Backgrounds',
        'priority'   => 20,
    ) );
    $wp_customize->add_setting('custom_smthing', array( 'default' => get_theme_mod( "custom_smthing" ) ? get_theme_mod( "custom_smthing" ) : '', 'transport' =>'postMessage' ) );
    $wp_customize->add_control(new WP_Customize_Custom_Control($wp_customize,'custom_smthing',
            array(
                'label'      => __( 'Custom Control', 'company' ),
                'section'    => 'body_backgrounds',
                'settings'   => 'custom_smthing',
            )
        )
    );
}
add_action( 'customize_register', 'company_customize_register' );

function customizer_live_preview() {
    wp_enqueue_script(
        'theme-customizer',
        get_template_directory_uri() . '/assets/js/theme-customizer.js',
        array( 'jquery', 'customize-preview' ),
        '1.0.0',
        true
    );
}
add_action( 'customize_preview_init', 'customizer_live_preview' );

“theme-customizer.js”

(function( $ ) {
    "use strict";

    wp.customize('custom_smthing', function(value) {
        value.bind(function(value) {
            console.log(value);
        });
    });

})( jQuery );

经过测试并有效。

Answer 2

也许我的答案不是您要找的，但 content_template 用于下划线 JS 模板。我不完全确定您的回答是否需要它。但是您可以找到更多信息 here。

如果您删除 register_control_type 行并将您的输入重新定位到 render_content 方法中，它会起作用。

你的 PHP 部分会像

class WP_Customize_Custom_Control extends WP_Customize_Control {
  public $type = 'custom_control';

  public function render_content() {
    ?>
    <label>
        <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <input class="custom_control" id="custom_control" type="text" <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>">
        </label>
    <?php
  }
}

function company_customize_register( $wp_customize ){

  // $wp_customize->register_control_type( 'WP_Customize_Custom_Control' ); - remove this line

  $wp_customize->add_setting('custom_smthing', array( 'default' => get_theme_mod( "custom_smthing" ), 'transport' =>'postMessage' ) );

  $wp_customize->add_control(new WP_Customize_Custom_Control($wp_customize,'custom_smthing',
    array(
      'label'      => __( 'Custom Control', 'company' ),
      'section'    => 'body_backgrounds',
      'settings'   => 'custom_smthing',
     )
   )
  );
}
add_action( 'customize_register', 'company_customize_register' );

Answer 3

test3仅在custom_smthing的值更改时触发。

Answer 4

我已经解决了这个问题。
如果前两个日志被触发，那么问题就没有问题
那里没有错误，一切都按照官方 wordpress 主题开发手册中的说明进行。
问题出在 index.php
wp_head(); 和 wp_footer(); 必须存在
我删除了它们 = 只触发前两个日志
我把它们戴上 = 所有三个日志都被解雇了
让我生气的是为什么 wordpress 官方手册中没有提到这一点。
在整个手册的最后是
但这并不是说很多事情都必须工作，包括这一项。

Wordpress定制器自定义控件传输postMessage无法正常工作

4 个答案: