WordPress主题修改以在标题中交换徽标

Posted 2023-03-06

【中文标题】WordPress主题修改以在标题中交换徽标

【英文标题】：WordPress Theme modification to swap logos in header

【发布时间】：2018-04-21 05:34:55

【问题描述】：

在这个网站上：http://new.thebeatfitness.net/ 我正在使用这个主题的子主题：https://organicthemes.com/demo/startup/ 在这个主题中它有两个内置的标题，一个用于浅色背景，一个用于深色背景。主题有导航交换明暗，但没有标志。看起来很愚蠢，但当我问主题开发人员时，他们说它是这样构建的。

谁能指导我如何让主题除了文本导航之外还根据背景交换徽标？

【问题讨论】：

在这种情况下，您可以使用与标题背景颜色匹配的两个徽标（具有两种不同的颜色）。

这两个不同颜色的标志很明显。我的问题是如何让主题像导航一样根据背景拉入不同的徽标。

【参考方案1】：

基本上，当您滚动时，您的主题会切换一个类。

这个：

<div id="nav-bar" class="dark">

变成这样：

<div id="nav-bar" class="light">

您的徽标是通过 html 中的 img 元素加载的。您可以使用的最简单的选择是通过 css 加载徽标。

.dark .site-logo a background: url('http://new.thebeatfitness.net/wp-content/uploads/2017/11/beat-silver-logo_dark.png'); 
.light .site-logo a background: url('http://new.thebeatfitness.net/wp-content/uploads/2017/11/beat-silver-logo_light.png'); 

您正在修改的原始主题实际上是在两种情况下都使用一张图片。相反，它们会更改文本颜色，这更容易。

【讨论】：

我试过了，我什至添加了一个 z-index，但它不会显示任何徽标，除非我在主题选项面板中添加它。

@CreativEliza 再试一次，我可以看看你的例子。你一定是做错了什么。

在标题中，代码来自原始主题：

我没有看到你在 css 的任何地方设置背景图片。

不知道怎么把背景调进主题里。我在上面展示了调用定制器中添加的徽标的代码。