我正在处理WordPress主题，需要允许主题用户为每个设备（桌面、平板电脑、移动设备）的某些控件设置不同的值。我正在考虑根据用户在customizer（桌面、平板电脑、移动设备）中预览的设备/大小来显示/隐藏某些控件的特定于设备的变体。
当用户从customizer responsive previewer切换设备时，是否有方法显示/隐藏控件？
Also note that I am using Kirki for all my customizer controls, all done using kirki.
这里有一个用例可以更好地理解这一点。我得到了如下标题的排版控制。
Kirki::add_field( \'start\', array(
\'type\' => \'typography\',
\'settings\' => \'headings_typography\',
\'label\' => __( \'Headings\', \'start\' ),
\'section\' => \'base_typography\',
\'transport\' => \'auto\',
\'default\' => array(
\'font-family\' => \'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif\',
\'variant\' => \'regular\',
),
\'output\' => array(
array(
\'element\' => array( \'h1\', \'h2\', \'h3\', \'h4\', \'h5\', \'h6\' ),
),
),
) );
我可以为每个控件（台式机、平板电脑和移动设备）创建两个以上的变体，并可以根据媒体查询输出值。
我唯一不能做的是如何在自定义程序中显示/隐藏特定于设备的预览控件？
TIA，穆尼尔
SO网友:Weston Ruter
我不熟悉Kikri，但我standalone example plugin 这显示了我将使用的方法，使控件基于预览的设备上下文。
该插件在站点中的每个元素周围添加彩色轮廓，桌面、平板电脑和移动设备中的元素使用不同的颜色（显然只是为了演示目的）。然后会有特定于每个设备的颜色控件，并且在给定时间仅显示当前预览设备的设备。
插件中的关键逻辑可在中找到wpse-286268-controls.js:
_.each( component.deviceControls, function( controlId, deviceSlug ) {
api.control( controlId, function( control ) {
function isActive() {
return deviceSlug === api.state( \'previewedDevice\' ).get();
}
// Set initial active state.
control.active.set( isActive );
// Update active state whenever previewd device changes.
api.state( \'previewedDevice\' ).bind( function() {
control.active.set( isActive );
} );
// Override whatever the active_callback may send from server when preview loads.
control.active.validate = isActive;
} );
} );
The
isActive 函数根据当前预览的设备返回控件是否应处于活动状态，然后使用此函数设置每个控件的活动状态，然后设置每个控件的
active 当
previewedDevice 状态更改。最后，由于这些控件是用PHP注册的，因此我们重写
validate 防止
active_callback 用于防止控件重写
active 在JS中设置的状态（每当预览刷新
active_callback 因为控件将在服务器上调用，并在预览刷新时发回以更新
active 国家）。
SO网友:Ricky Friederich
这是我与Kirki的解决方案。
我希望这可以帮助一些人。
"use strict";
wp.customize.bind(\'ready\', function () {
var previousDevice;
// first load device
wp.customize.previewer.bind(\'ready\', function () {
// Update Custom respsonsive Buttons
var loadedDevice = wp.customize.previewedDevice.get();
var firstDevice = $(\'.sb-devices .preview-\' + loadedDevice);
firstDevice.addClass(\'active\');
// Update Controls
var getControls = $(\'li[id*="_resp_\' + loadedDevice + \'"]\');
getControls.addClass(\'active\');
// Update previous device
previousDevice = loadedDevice;
});
// Update device on change
wp.customize.previewedDevice.bind(function () {
if (previousDevice) {
// Get updated device
var reloadedDevice = wp.customize.previewedDevice.get();
var updateDevice = $(\'.sb-devices .preview-\' + previousDevice);
updateDevice.removeClass(\'active\');
var updateControls = $(\'li[id*="_resp_\' + previousDevice + \'"]\');
updateControls.removeClass(\'active\');
var setDevice = $(\'.sb-devices .preview-\' + reloadedDevice);
setDevice.addClass(\'active\');
var setControls = $(\'li[id*="_resp_\' + reloadedDevice + \'"]\');
setControls.addClass(\'active\');
previousDevice = reloadedDevice;
}
});
// Update preview device on custom buttons click
$(\'.sb-devices > div\').on(\'click\', function () {
wp.customize.previewedDevice.set($(this).attr(\'data-device\'));
});
});
js文件需要使用customize\\u controls\\u enqueue\\u脚本排队
使用Kirki自定义控件，您可以创建如下内容：
Kirki::add_field( \'domain_kirki_options\', [
\'type\' => \'custom\',
\'settings\' => \'\',
\'section\' => \'domain_theme_header_section\',
\'default\' => \'<div class="sb-device-holder">
<span class="customize-control-title">
Setting Title
</span>
<div class="sb-devices">
<div class="preview-desktop" data-device="desktop"></div>
<div class="preview-tablet" data-device="tablet"></div>
<div class="preview-mobile" data-device="mobile"></div>
</div>
</div>\',
\'priority\' => 10,]);
