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>
发表评论