WP Customizer自定义控件类：enqueue函数获取自定义参数值失败

问题场景 #

开发WP Customizer自定义控件时，为控件添加了自定义参数foo，该参数在render_content()方法中可正常输出，但尝试将其作为脚本入队路径的一部分时，不仅脚本无法加载，连render_content()中的foo输出也消失了。

原自定义控件类代码 #

class Foo_Control extends WP_Customize_Control {

 public $type = 'foo_control';  
 
 public $foo; // 声明foo参数


 public function __construct( $manager, $id, $args = array(), $options = array() ) {
    
    parent::__construct( $manager, $id, $args );
        
    add_action( 'customize_controls_enqueue_scripts', array( $this, 'foo_enqueue' ), 15 );                      
 } 
 
 public function foo_enqueue() {
                        
    wp_enqueue_script( 'foo-script', get_template_directory_uri() . '/js/foo-script.js', array( 'jquery' ), '1.0', true );
    
    // $this->foo = $foo_dir;   
    // wp_enqueue_script( 'foo-script', get_template_directory_uri() . '/js/'.$foo_dir.'.js', array( 'jquery' ), '1.0', true );

    // 使用$foo_dir时JS文件无法加载，且会导致render_content中foo的显示失效                    
 }

 public function render_content() {

    echo $this->label;          // Foo标签
    echo $this->description;    // Foo描述

    echo $this->foo;  // foo-script                         
 }
}

原添加设置与控件代码 #

$wp_customize->add_setting( 'my_foo_control', array(
    'type' => 'theme_mod',
));

$wp_customize->add_control( new Foo_Control( $wp_customize,'my_foo_control', array(
    'section'       => 'homepage',
    'label'         => 'Foo label',
    'description'   => 'Foo desc',       
    'foo'           => 'foo-script', // 自定义参数

) ));

问题原因 #

1. 构造函数中多余的$options参数导致父类构造无法正确初始化控件属性，包括自定义的foo参数。
2. 在构造函数中直接绑定customize_controls_enqueue_scripts钩子，此时控件实例的属性可能还未完全初始化，钩子触发时访问$this->foo会出现异常，进而影响render_content()中的属性输出。

解决方案 #

使用WP Customizer控件官方推荐的enqueue()方法处理脚本入队，同时修正构造函数参数：

修正后的自定义控件类代码

class Foo_Control extends WP_Customize_Control {
    public $type = 'foo_control';  
    public $foo; // 声明foo参数

    public function __construct( $manager, $id, $args = array() ) {
        // 移除多余的$options参数，匹配父类构造函数签名
        parent::__construct( $manager, $id, $args );
    }

    // 使用官方标准的enqueue方法处理脚本入队
    public function enqueue() {
        // 直接使用已初始化的$this->foo拼接脚本路径
        $script_url = get_template_directory_uri() . '/js/' . $this->foo . '.js';
        wp_enqueue_script( 'foo-script', $script_url, array( 'jquery' ), '1.0', true );
    }

    public function render_content() {
        echo $this->label;          // Foo标签
        echo $this->description;    // Foo描述
        echo $this->foo;            // 正常输出foo参数
    }
}

关键说明 #

• 移除构造函数中多余的$options参数，确保父类构造函数能正确解析$args中的自定义参数（包括foo）并赋值给实例属性。
• 替换手动绑定钩子的方式为enqueue()方法，这是WP Customizer控件的标准脚本入队方式，确保脚本在控件初始化完成后加载，能正常访问实例属性。
• 直接在enqueue()中使用$this->foo拼接路径，此时参数已被正确初始化，不会出现属性失效的问题。

内容的提问来源于stack exchange，提问作者Wenatech