如何扩大WordPress TwentySixteen主题头部的Logo显示空间？

问题描述 #

我有一张宽度超过2000px的Logo，设置为主题左上角Logo后被压缩至约200px：

• 修改style.css中的.custom-logo的max-width为400px，无效果

.custom-logo {
    max-width: 180px;
}

• 修改functions.php中add_theme_support('custom-logo')的width参数为400px，前端显示仍无变化

add_theme_support(
    'custom-logo',
    array(
        'height'      => 240,
        'width'       => 240,
        'flex-height' => true,
    )
);

• 头部区域有足够空间容纳更宽的Logo（左侧Logo到右侧导航之间有充足空间）

解决方案 #

1. 用高优先级CSS强制覆盖样式 #

主题原有CSS可能存在更高优先级的限制规则，直接在外观→自定义→额外CSS中添加以下代码（避免修改主题文件，防止主题更新丢失配置）：

/* 释放Logo容器和图片的宽度限制 */
.site-logo .custom-logo-link {
    max-width: 100%;
}
.custom-logo {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

!important用于强制覆盖原有样式，确保新规则生效。

2. 调整头部布局，让Logo填充剩余空间 #

Twenty Sixteen的头部默认布局可能限制了Logo区域宽度，添加以下CSS优化桌面端布局：

@media screen and (min-width: 56.875em) {
    .site-header-main {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .site-logo {
        flex: 1;
        margin-right: 20px;
    }
}

这段代码会在屏幕宽度大于910px时，让头部使用弹性布局，自动让Logo区域填满右侧导航前的所有可用空间。

3. 配置WordPress允许Logo自适应宽度 #

修改functions.php中的自定义Logo支持参数，添加flex-width: true，允许Logo自适应宽度，之后重新上传Logo：

add_theme_support(
    'custom-logo',
    array(
        'height'      => 240,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true, // 新增：允许Logo自适应宽度
    )
);

修改后进入外观→自定义→站点标识，重新上传Logo，WordPress会保留原始尺寸的使用权限。

4. 清除缓存确保生效 #

修改后如果看不到效果，按Ctrl+F5强制刷新浏览器页面，或清除网站缓存插件的缓存内容。

内容的提问来源于stack exchange，提问作者DavidN