Question

我正在为我正在开发的主题创建WP Customizer选项。我在使用网站预览iframe时遇到了问题。

我的网站在桌面上的原始宽度为1170像素。在我的MacBook 13英寸Retina显示屏上，当我在WordPress定制器中打开我的网站时，转到外观＆gt;从WordPress仪表板自定义，网站的宽度减少到980像素，因为它显示在网站预览iframe中。因此，自定义程序UI仅显示网站的平板电脑（宽度<981px）版本。

有什么办法可以调整网站预览iframe的大小吗？这样它就可以在定制器中显示完整的桌面版本。

Answer 1

大小设置是在wp-admin / css / themes.css

中定义的

因此，要覆盖它们，您可以使用customize_controls_print_styles

所以将此添加到您的主题 functions.php （所以现在您可以搞乱设置）

    function my_customizer_responsive_sizes() {

    $mobile_margin_left = '-240px'; //Half of -$mobile_width
    $mobile_width = '480px';
    $mobile_height = '720px';

    $tablet_margin_left = '-540px'; //Half of -$tablet_width
    $tablet_width = '1080px';
    $tablet_height = '720px';

    ?>
    <style>
        .wp-customizer .preview-mobile .wp-full-overlay-main {
            margin-left: <?php echo $mobile_margin_left; ?>;
            width: <?php echo $mobile_width; ?>;
            height: <?php echo $mobile_height; ?>;
        }

        .wp-customizer .preview-tablet .wp-full-overlay-main {
            margin-left: <?php echo $tablet_margin_left; ?>;
            width: <?php echo $tablet_width; ?>;
            height: <?php echo $tablet_height; ?>;
        }
    </style>
   <?php
   }

add_action( 'customize_controls_print_styles', 'my_customizer_responsive_sizes' );

这里还有一个helpful link给你。玩得开心:)）

调整WP Customizer网站预览iframe的宽度

1 个答案: