简体   繁体   English

更改不同页面的标题徽标

[英]Change header logo for different pages

I am looking how to change a logo based on either class in the <body> or post type/page template. 我正在寻找如何根据<body>或帖子type/page模板中的类更改徽标。 I am not too knowledgeable with PHP if statements which I am guessing I will need to make this work. 我不太了解PHP,如果我猜想我需要进行这项工作的语句。

I think what would work great is if I had all the logos in a sprite graphic and using a css class to change to the different logos for each page so the php would just change the class. 我认为,如果我将所有徽标都放在一个精灵图形中,并使用css类将其更改为每个页面的不同徽标,那么php只会更改该类,那将是很好的选择。

Something along like this? 像这样吗?

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>
}

I have not tried this code yet just want to know if this correct way. 我还没有尝试过此代码,只是想知道这种正确的方法。

Most themes add a few classes in the body tag, either the slug or page-id-number. 大多数主题都会在body标签中添加一些类,即slug或page-id-number。

Checkout out your page's source look in the body tag and yes, use a sprite. 在body标签中签出页面的源外观,是的,请使用sprite。

PHP is overkill. PHP太过分了。 Use the CSS. 使用CSS。

iambriansreed answered well before me, and has provided a good answer but I want to expand on what he said, and I have more to say than will fit in a comment, so I am posting my own answer. iambriansreed在我之前作了很好的回答,并且提供了很好的答案,但是我想扩大他的发言范围,而我的发言要超出评论范围,所以我发表自己的回答。

In your HTML you would have a single logo element eg a div or an h1 tag: 在HTML中,您将只有一个徽标元素,例如div或h1标签:

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

Then using CSS you would hide the text, and replace it with an image: 然后,使用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 */
}

I've shown one technique for hiding the text. 我已经展示了一种隐藏文本的技术。 There are other ways. 还有其他方法。 The reason for leaving the text in the markup is for SEO and accessibility. 将文本留在标记中的原因是SEO和可访问性。

On sub pages you would use a more specific selector, based on the class attached to your body tag, to alter the logo background: 在子页面上,您可以根据您的body标签所附的类使用更具体的选择器来更改徽标背景:

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

PHP doesn't come into the equation except to attach the unique class to the body tag based on which section/page is being rendered. 除了将唯一的类根据要呈现的部分/页面附加到body标记之外,PHP不会进入方程式。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM