更改不同页面的标题徽标答案

【问题标题】：Change header logo for different pages更改不同页面的标题徽标
【发布时间】：2012-06-17 17:59:22
【问题描述】：

我正在研究如何根据<body> 中的任一类或发布type/page 模板更改徽标。我对 PHP if 语句不太了解，我猜我需要完成这项工作。

我认为如果我将所有徽标都放在一个 sprite 图形中并使用 css 类更改为每个页面的不同徽标，那么 php 只会更改类。

类似的东西？

if(body class="home") {
  <div class="logo1"><img src="images/logo.png" /></div>
} elseif(body class="page1") {
  <div class="logo2"><img src="images/logo.png" /></div>
} else {
  <div class="logo"><img src="images/logo.png" /></div>
}

我还没有尝试过这段代码，只是想知道这是否正确。

【问题讨论】：

标签： php css wordpress wordpress-theming

【解决方案1】：

iambriansreed 在我之前回答得很好，并且提供了一个很好的答案，但我想扩展他所说的内容，而且我还有很多话要说而不是评论，所以我发布了我自己的答案。

在您的 HTML 中，您将只有一个徽标元素，例如一个 div 或一个 h1 标签：

<h1 class="logo">My Company</h1>

然后使用 CSS 你将隐藏文本，并用图片替换它：

.logo {
    background: url(mylogo.png) 0 0 no-repeat;
    width: 200px; /* match logo width */
    height: 80px; /* match logo height */
    text-indent: -9999px; /* hides text */
}

我已经展示了一种隐藏文本的技术。还有其他方法。将文本留在标记中的原因是为了 SEO 和可访问性。

在子页面上，您将使用更具体的选择器，基于附加到您的主体标签的类，来更改徽标背景：

.section2 .logo {
    background: url(mylogo.png) 0 -80px no-repeat;
}

PHP 没有加入等式，只是根据正在呈现的部分/页面将唯一类附加到 body 标记。

【讨论】：

是的，当我可以使用 css 时，我通过添加 php 来思考这个问题！

【解决方案2】：

大多数主题在 body 标签中添加了一些类，可以是 slug 或 page-id-number。

在 body 标记中检查页面的源代码，是的，使用 sprite。

PHP 太过分了。使用 CSS。

【讨论】：