Uncode主题子主题实现移动端与桌面端不同Logo技术咨询

首先得先明确你具体要对Logo做什么修改——是替换图片、调整HTML结构，还是仅仅修改外观样式？不同的需求对应不同的处理方式，下面分情况说明：

1. 仅修改Logo的样式（尺寸、位置、hover效果等）→ 只用CSS就行 #

如果你的需求只是调整Logo的视觉表现（比如改高度、加阴影、调整间距），完全不需要碰HTML/PHP文件，直接在子主题的style.css里添加自定义CSS即可。

比如你想覆盖当前的180px高度，同时保持图片比例，可以写：

/* 覆盖Logo容器的inline高度样式 */
.logo-image.logo-skinnable {
  height: 200px !important;
}
/* 确保图片自适应容器且比例正确 */
.logo-image img.img-responsive {
  width: auto;
  max-height: 100%;
}

这种方式最简单，也不会破坏主题的原有结构，子主题的CSS会自动加载覆盖父主题样式。

2. 修改Logo的HTML结构（比如改alt文本、加额外链接/元素、替换图片源）→ 需要编辑PHP模板文件 #

如果要改动HTML结构（比如把alt文本从"logo"改成你的网站名称，或者直接替换Logo图片的URL），那就要找到输出这个Logo的模板文件，复制到子主题对应路径后修改。

怎么找到对应的文件？ #

Uncode主题的Logo输出逻辑通常在父主题的framework/parts/header/logo.php文件里（你可以在父主题文件夹里搜索.logo-image这个class，就能快速定位到具体文件）。找到后，不要直接修改父主题文件，按照以下步骤操作：

• 在你的子主题文件夹里创建和父主题对应的路径：比如子主题里新建framework/parts/header/文件夹
• 把父主题的logo.php复制到这个子主题的路径下
• 打开子主题的logo.php，找到输出<div class="logo-image...">和<img>标签的代码段，修改你需要的部分（比如修改alt属性值、替换src的URL）

这样修改后，WordPress会优先加载子主题的模板文件，父主题更新时也不会丢失你的修改。

3. 既改结构又改样式 → 两者结合 #

如果你的需求既要调整HTML结构，又要改外观，那就先按照上面的步骤修改子主题的模板文件，再在style.css里添加对应的样式即可。

额外提醒 #

因为你用的是Uncode + WPBakery（原Visual Composer），主题的Logo设置原本在Theme Options里，如果你只是想替换Logo图片，其实可以直接在Theme Options里重新上传，不需要改代码——只有当Theme Options满足不了你的自定义需求时，才需要用上面的方法。

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