Wordpress 定制器自定义控件传输 postMessage 不起作用

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

也许我的答案不是你要找的，但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 2

我修改了您的代码，发现您的代码在许多情况下或按照最新的 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 3

test3 只会在custom_smthing 的值发生变化时触发。

Answer 4

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