WordPress Customizer 自定义器

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

一、进入 Customizer

方法 1：通过后台仪表盘

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

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

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

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

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

模块	功能说明
站点身份（Site Identity）	设置网站标题、副标题、Logo、站点图标（favicon）等。
颜色（Colors）	修改主题主色、背景色、文字颜色等（需主题支持）。
菜单（Menus）	创建、编辑导航菜单，并分配到主题注册的菜单位置（如顶部菜单、页脚菜单）。
小工具（Widgets）	管理侧边栏、页脚等区域的小工具（注意：块主题中此功能可能被“模板部件”替代）。
首页设置（Homepage Settings）	选择首页显示“最新文章”还是“静态页面”，并指定首页和文章页。
其他（Additional CSS）	添加自定义 CSS 样式，实时预览效果。
主题选项（Theme Options）	某些主题（如 Astra、OceanWP）会在此添加布局、字体、按钮样式等高级设置。

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

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

进入 Customizer。
点击 “站点身份”。
点击 “选择 Logo”，从媒体库上传或选择已有图片。
可调整 Logo 尺寸（如果主题支持）。
左侧实时预览变化。
确认无误后，点击右上角 “发布”（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' 即可。

效果

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

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