WordPress 主题定制器（Customizer）开发：实时预览设置

WordPress 主题定制器（Theme Customizer）提供了实时预览功能，让用户在保存前就能看到修改效果。本文介绍如何在主题中添加自定义定制器选项，包括颜色选择器、字体设置、布局开关等。

定制器的基本结构

定制器由三个层级组成：Panel（面板）——顶层分组，如"主题设置"；Section（区块）——面板内的分组，如"颜色设置"；Control（控件）——具体的设置项，如颜色选择器。每个控件对应一个 Setting（设置），存储用户的选择值。

注册定制器选项

在 functions.php 中使用 customize_register 钩子：add_action('customize_register', function($wp_customize){ // 添加区块 $wp_customize->add_section('colors_section', array('title'=>'颜色设置','priority'=>30)); // 添加设置 $wp_customize->add_setting('primary_color', array('default'=>'#0073aa','sanitize_callback'=>'sanitize_hex_color')); // 添加控件 $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'primary_color', array('label'=>'主色调','section'=>'colors_section'))); });

常用控件类型

WP_Customize_Color_Control——颜色选择器；WP_Customize_Image_Control——图片上传；WP_Customize_Media_Control——媒体选择；WP_Customize_Upload_Control——文件上传；普通 text/checkbox/radio/select 控件通过 type 参数指定。

在模板中使用设置值

使用 get_theme_mod('primary_color', '#0073aa') 获取设置值，第二个参数为默认值。在 wp_head 钩子中输出动态 CSS：add_action('wp_head', function(){ $color = get_theme_mod('primary_color', '#0073aa'); echo "<style>a { color: {$color}; }</style>"; });

实时预览（Live Preview）

通过 JavaScript 实现实时预览，无需刷新页面：在 customize_preview_init 钩子中加载 JS 文件，使用 wp.customize API 监听设置变化并实时更新 DOM。

总结

定制器是提升主题用户体验的重要功能。通过定制器，用户可以直观地调整主题外观，而无需接触代码。