在 WordPress 中使用 Customizer（自定义器） 是一种直观、实时预览的方式来修改网站的外观和部分功能，而无需直接编辑代码。以下是详细的使用方法：

一、进入 Customizer

方法 1：通过后台仪表盘

1. 登录 WordPress 后台（通常是 your-site.com/wp-admin）。
2. 在左侧菜单中点击 “外观” > “自定义”（Appearance → Customize）。

方法 2：前端快捷入口（如果主题支持）

• 在网站前台登录状态下，顶部工具栏会出现一个黑色管理栏。
• 点击 “自定义” 按钮，直接进入 Customizer 并实时预览当前页面。

二、Customizer 主要功能模块（取决于主题和插件）

不同主题或插件会添加不同的选项，但常见模块包括：

 提示：你看到的选项取决于你当前使用的 主题 和 激活的插件。

三、操作流程示例：修改网站 Logo

1. 进入 Customizer。
2. 点击 “站点身份”。
3. 点击 “选择 Logo”，从媒体库上传或选择已有图片。
4. 可调整 Logo 尺寸（如果主题支持）。
5. 左侧实时预览变化。
6. 确认无误后，点击右上角 “发布”（Publish）保存更改。

四、保存与发布

• 所有修改在 Customizer 中都是 临时预览，不会立即生效。
• 只有点击右上角 “发布” 按钮后，更改才会应用到网站。
• 如果不想保存，可直接关闭页面或点击 “退出自定义”。

五、开发者扩展 Customizer（可选）

如果你是开发者，可以通过 customize_register 钩子向 Customizer 添加自定义面板、章节、控件：

function mytheme_customize_register( $wp_customize ) {
    $wp_customize->add_setting( 'mytheme_phone', array(
        'default' => '',
        'sanitize_callback' => 'sanitize_text_field'
    ) );

    $wp_customize->add_control( 'mytheme_phone', array(
        'label' => '联系电话',
        'section' => 'title_tagline', // 放在“站点身份”下
        'type' => 'text'
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

然后在主题模板中调用：

echo get_theme_mod( 'mytheme_phone' );

六，添加一个全新的选项卡（Panel / Section）

在 WordPress 的 Customizer（自定义器） 中添加一个全新的选项卡（Panel / Section），需要通过 PHP 代码在主题的 functions.php 文件中注册。下面是一个完整、清晰的示例，教你如何创建一个自定义选项卡（比如“联系信息”），并添加设置项（如电话、邮箱等）。

 目标

• 在 Customizer 中新增一个名为 “联系信息” 的选项卡（Section）
• 添加两个输入框：联系电话 和 电子邮箱
• 前端可调用这些值显示

步骤 1：将以下代码添加到主题的 functions.php 文件中

 建议使用子主题（Child Theme）修改，避免主题更新丢失代码。

/**
 * 在 Customizer 中添加“联系信息”选项卡
 */
function mytheme_customize_register( $wp_customize ) {

    // === 1. 添加一个新的 Section（选项卡）===
    $wp_customize->add_section( 'mytheme_contact_section', array(
        'title'       => __( '联系信息', 'mytheme' ),
        'priority'    => 30, // 显示顺序，数字越小越靠前
        'capability'  => 'edit_theme_options',
        'description' => __( '在此设置网站的联系信息。', 'mytheme' ),
    ) );

    // === 2. 添加“联系电话”设置项 ===
    $wp_customize->add_setting( 'mytheme_phone_number', array(
        'default'           => '',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'refresh', // 或 'postMessage'（需配合 JS 实现实时预览）
    ) );

    $wp_customize->add_control( 'mytheme_phone_control', array(
        'label'    => __( '联系电话', 'mytheme' ),
        'section'  => 'mytheme_contact_section',
        'settings' => 'mytheme_phone_number',
        'type'     => 'text',
    ) );

    // === 3. 添加“电子邮箱”设置项 ===
    $wp_customize->add_setting( 'mytheme_email_address', array(
        'default'           => '',
        'sanitize_callback' => 'sanitize_email',
        'transport'         => 'refresh',
    ) );

    $wp_customize->add_control( 'mytheme_email_control', array(
        'label'    => __( '电子邮箱', 'mytheme' ),
        'section'  => 'mytheme_contact_section',
        'settings' => 'mytheme_email_address',
        'type'     => 'email',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

步骤 2：在前端模板中显示这些值

例如，在页脚 footer.php 中显示：

<?php
$phone = get_theme_mod( 'mytheme_phone_number' );
$email = get_theme_mod( 'mytheme_email_address' );

if ( $phone || $email ) :
?>
<div class="site-contact-info">
    <?php if ( $phone ) : ?>
        <p>电话: <?php echo esc_html( $phone ); ?></p>
    <?php endif; ?>
    <?php if ( $email ) : ?>
        <p>邮箱: <a href="mailto:<?php echo esc_attr( $email ); ?>"><?php echo esc_html( $email ); ?></a></p>
    <?php endif; ?>
</div>
<?php endif; ?>

 补充说明

 关于 Panel（面板） vs Section（节）

• Section 是 Customizer 左侧的一个独立选项卡（如“站点身份”、“菜单”）。
• 如果你希望把多个 Section 归类到一个 顶级分组（Panel） 下（比如“主题选项”下包含“联系信息”、“社交媒体”等），可以先创建 Panel：

$wp_customize->add_panel( 'mytheme_options_panel', array(
    'title'       => __( '我的主题选项', 'mytheme' ),
    'priority'    => 150,
) );

// 然后在 add_section 时指定 'panel' => 'mytheme_options_panel'

 实时预览（Live Preview）

若想实现不刷新页面的实时预览（如改颜色立即生效），需将 transport 设为 'postMessage'，并配合 JavaScript。但文本类内容通常用 'refresh' 即可。

 效果

保存后进入 外观 > 自定义，你会看到左侧多出一个 “联系信息” 选项卡，可输入电话和邮箱，并在网站前端安全地显示。

如果你希望添加更多类型（如开关、下拉菜单、颜色选择器等），也可以告诉我，我可以提供对应控件代码！