Question

我正在尝试在每个Wordpress页面上使用不同的徽标。我已经尝试将其添加到我的css文件中，但旧徽标仍显示在其下方：

.page-id-13072 .full-center #logo.has-img a > img {
    position: inherit !important;
    left: 0;
    top: 100px;
    width: 450px;
    z-index: 99;
    max-width: 100%;
    background: url(http:///LogoPink.png) no-repeat;
    }

Answer 1

您可以使用wordpress条件标签，而不是使用CSS。找到具有徽标图像的php文件通常是header.php

<?php
    $logo_img = 'default'; 
    if (is_page('about-us')) {
        $logo_img = 'logo1'; 
    } elseif (is_page('team')) {
        $logo_img = 'logo2'; 
    } 
?>

假设logo1.png页面有about-us徽标，logo2.png页面有team，默认徽标为default.png。

<img src="/images/logo<?php echo $logo_img; ?>.png">

只有css才能尝试

 .page-id-13072 .logo a {

   background: url(images/logopink.png) no-repeat; 
 }

Answer 2

请不要试图用它的背景覆盖图像，因为它不会发生。你为什么不改变图像源？如果不是这种情况而不是img使用具有宽度和高度分配的div，则基于场景更改其类和背景图像。

Answer 3

如果您在主题中使用页面模板，则可以通过创建不同的header.php文件并使用条件标记调用每个标题来实现此目的。

每个header.php文件都有不同的名称，例如header-about.php，header-contact.php header-blog.php

现在在您的页面模板中，您应该使用ifelse语句现在调用标题，如下所示：

if(is_page_template('about.php')){

    get_header( 'about' ); // Calls the about page header

   } 
        elseif(is_page_template('contact.php')){

    get_header('contact'); // Calls the contact page header

   } 
      elseif(is_page_template('blog.php'){

   get_header('blog'); // Calls the about page header

   } 
  else{

   get_header();// Calls the default header is any other page is created

   }

这些标题中的每一个都会有不同的徽标和不同的样式。这种方法使您可以轻松进行将来的更新，因为您只需编辑特定的header.php文件。

每页不同的徽标-wordpress

3 个答案: