每个页面上的不同徽标-WordPress

u5i3ibmn 于 2024-01-06 发布在 WordPress

关注(0)|答案(4)|浏览(142)

我尝试在我的每个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;
    }

字符串

wordpress

来源：https://stackoverflow.com/questions/33338949/different-logo-on-each-page-wordpress

4条答案

按热度按时间

jogvjijk1#

而不是使用css，你可以利用WordPress的条件标签。找到php文件，其中有标志图像通常是header.php

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

字符串
假设你有about-us页面的logo1.png徽标，team页面的logo2.png徽标，默认徽标是default.png。

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

型
CSS只有你可以尝试

.page-id-13072 .logo a {

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

型

赞(0）回复(0）举报 2024-01-06

pjngdqdw2#

如果您在主题中使用页面模板，则可以通过创建不同的header.php文件并使用条件标记调用每个标头来实现。
每个header.php文件都有不同的名称，如header-about.php、header-contact.php、header-blog.php
现在，在页面模板中，您应该使用ifelse语句来调用header，如下所示：

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文件。

赞(0）回复(0）举报 2024-01-06

wgxvkvu93#

使用jQuery很简单：

jQuery(document).ready(function( $ ){
$(".page-id-12 img.custom-logo").attr("src", "https://www.example.com/wp-content/uploads/2023/12/XXX1.jpg");
$(".page-id-14 img.custom-logo").attr("src", "https://www.example.com/wp-content/uploads/2023/12/XXX2.jpg");
});

字符串
其中.page-id-XX是您希望更改徽标的body标记中的类。.custom-logo是图像的类，根据安装的模板而有所不同，但您可以理解。

赞(0）回复(0）举报 2024-01-06

ddhy6vgd4#

请不要试图覆盖图像与它的背景，因为它不会发生。为什么你不只是改变图像源？如果不是这样的情况下，而不是img使用div与assigned宽度和高度，基于场景改变其类和background-image。

赞(0）回复(0）举报 2024-01-06