wordpress实现拖拽滑块改变logo图片大小

在 WordPress 自定义主题中，左侧“拖拽滑块”实时改变 Logo 的宽度（以及在前端实时预览）。核心思路是：在自定义主题的自定义器（Customizer）中添加一个设置项和控制项，用 JavaScript 监听滑块变化，动态把值应用到 logo 的图片宽度上，并把同样的宽度保存到数据库。

步骤要点

注册 customize 设置、控制器和部分（partial）用于 Logo 宽度的持久化保存。
在前端输出 logo 容器的可控宽度样式，并允许模板中引用这个值。
添加前端 JavaScript 实现滑块拖动时的实时预览。
注意跨设备适配（如单位：px，必要时加入 max/min 限制）。

实现细节（代码示略带注释，放在你的主题中相应位置）

1、functions.php（注册 Customize 设置与控制器）

目标：创建一个名为 logo_width 的设置，默认值如 180，单位为 px。

// 启用主题支持
function my_theme_setup() {
    // 启用自定义Logo支持
    add_theme_support('custom-logo', array(
        'height'      => 100,
        'width'       => 600,
        'flex-height' => true,
        'flex-width'  => true,
    ));
}
add_action('after_setup_theme', 'my_theme_setup');

function mytheme_customize_register($wp_customize)
{
    // 添加一个新的设置：Logo 宽度，单位：px
    $wp_customize->add_setting('mytheme_logo_width', array(
        'default' => 180,
        'sanitize_callback' => 'absint', // 只允许整数
        'transport' => 'postMessage', // 实时预览
    ));

    // 添加控制器：滑块输入
    // 使用 WP 自带的 WP_Customize_Control 的 Range 控件（需要 WordPress 5.9+ 的 Range 支持）
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        'mytheme_logo_width_controlsss',
        array(
            'label' => __('Logo 宽度', 'mytheme'),
            'section' => 'title_tagline', // 放在站点信息区域，可以改成自定义的“Logo 设置”分区
            'settings' => 'mytheme_logo_width',
            'type' => 'hidden',
            'description' => __('通过滑块调整 Logo 的显示宽度（单位：px）', 'mytheme'),

        )
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        'mytheme_logo_width_control',
        array(
            //'label' => __('Logo 宽度', 'mytheme'),
            'section' => 'title_tagline', // 放在站点信息区域，可以改成自定义的“Logo 设置”分区
            'settings' => 'mytheme_logo_width',
            'type' => 'range',
            //'description' => __('通过滑块调整 Logo 的显示宽度（单位：px）', 'mytheme'),
            'input_attrs' => array(
                //'style' => 'width:60%;',
                'min' => 100,
                'max' => 600,
                'step' => 1,
            ),
        )
    ));
    $wp_customize->add_control(new WP_Customize_Control(
        $wp_customize,
        'mytheme_logo_width_controls',
        array(
            //'label' => __('Logo 宽度', 'mytheme'),
            'section' => 'title_tagline', // 放在站点信息区域，可以改成自定义的“Logo 设置”分区
            'settings' => 'mytheme_logo_width',
            'type' => 'number',
            //'description' => __('通过修改值调整 Logo 的显示宽度（单位：px）', 'mytheme'),
            'input_attrs' => array(
                //'style' => 'width:30%;',
                'min' => 100,
                'max' => 600,
                'step' => 1,
            ),
        )
    ));
}

add_action('customize_register', 'mytheme_customize_register');

// 前端通过 postMessage 实时预览
function mytheme_customize_preview_js()
{
    wp_enqueue_script('mytheme-customize-preview', get_template_directory_uri() . '/assets/js/customize-preview.js', array('customize-preview'), '1.0', true);
}

add_action('customize_preview_init', 'mytheme_customize_preview_js');

// 前端使用设置值输出 Logo 宽度
function mytheme_logo_width_style()
{
    $width = get_theme_mod('mytheme_logo_width', 180);
    // 仅在前端输出一个 style 行为，给 logo 容器一个自定义宽度
    if ($width) {
        echo '<style id="mytheme-logo-width-style">.site-logo img { max-width: none; width: ' . intval($width) . 'px;height:auto; }</style>';
    }
}

add_action('wp_head', 'mytheme_logo_width_style');


function mytheme_customizer_inline_controls() {
    ?>
    <style type="text/css">
        /* 针对特定的控件ID */
        #customize-control-mytheme_logo_width_control,
        #customize-control-mytheme_logo_width_controls {
            display: inline-block !important;
            width: 70% !important;
            vertical-align: top !important;
            margin-right: 2% !important;
            float: left !important;
            clear: none !important;
            line-height: 50px;
        }
        .customize-control-range input{
            cursor:pointer;
        }
        #customize-control-mytheme_logo_width_controls {
            margin-right: 0 !important;
            margin-left: 2% !important;
            width:25%!important;
        }

        /* 调整标签和描述 */
        #customize-control-mytheme_logo_width_control .customize-control-title {
            margin-bottom: 5px !important;
        }

        /* 隐藏第二个控件的标签（如果需要） */
        #customize-control-mytheme_logo_width_controls .customize-control-title {
            visibility: hidden !important;
            height: 20px !important;
            margin-bottom: 5px !important;
        }

        /* 输入框样式 */
        #customize-control-mytheme_logo_width_control input[type="range"],
        #customize-control-mytheme_logo_width_controls input[type="number"] {
            width: 100% !important;
            margin-top: 0 !important;
        }
    </style>
    <?php
}
add_action('customize_controls_print_styles', 'mytheme_customizer_inline_controls');

2、customize-preview.js（实现前端实时预览）

文件路径：你的主题下的 assetr/js/customize-preview.js

(function( $ ) {
    // 监听自定义器的设置变化，实时更新到前端
    wp.customize( 'mytheme_logo_width', function( value ) {
        value.bind( function( newval ) {
            // 选择 Logo 里的图片容器，更新宽度
            var logoImg = document.querySelector( '.site-logo img' );
            if ( logoImg ) {
                logoImg.style.width = newval ? newval + 'px' : '';
            }

            // 同步一个全局样式，避免刷新
            var styleTag = document.getElementById( 'mytheme-logo-width-style' );
            if ( styleTag ) {
                styleTag.innerHTML = '.site-logo img { max-width: none; width: ' + newval + 'px; height:auto;}';
            } else {
                var s = document.createElement( 'style' );
                s.id = 'mytheme-logo-width-style';
                s.innerHTML = '.site-logo img { max-width: none; width: ' + newval + 'px; height:auto;}';
                document.head.appendChild( s );
            }
        } );
    } );
} )( jQuery );

3、front-end 模板调整（确保 .site-logo img 是你的 Logo 图像元素）

典型的 header.php 或自定义模板中的 Logo 部分，确保 Logo 的 img 标签有可选的包裹容器，例如：

<div class="site-branding">
    <?php if (has_custom_logo()) : ?>
        <div class="site-logo">
            <?php the_custom_logo(); ?>
        </div>
    <?php else : ?>
        <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
    <?php endif; ?>
</div>