如果body类是home,则使用php显示不同的头部徽标图像


Using php to show a different header logo image if body class is home?

我在一个网站上工作,主页是深色背景,但其他所有页面都是白色背景。

我正在使用pho包括一个标题文件,以显示每一页的徽标,导航栏,电话详细信息等。

由于主页背景为深色,徽标为白色文本,但其他页面上使用的徽标为深色文本。

我正在寻找一种使用php的方法,以便在每个页面上都包含一个单独的头文件。如果主页有一个"主页"类,则显示带有白色文本的徽标图像,而在所有其他页面上显示带有深色文本的徽标图片。

大致如下:

if (body class="home") {
<img src="images/logo-with-white-text" />
else {
<img src="images/logo-with-dark-text" />
};

这可能吗?

如有任何帮助或建议,我们将不胜感激:)

我假设你的主页目前看起来像这样:

<html>
    <head>...</head>
    <body class="home">
        ...
        <?php include 'header.php'; ?>
        ...

您可以使类成为一个变量,并从包含的头文件中引用该变量:

<?php $class = 'home'; ?>
<body class="<?php echo $class; ?>">
...
<?php include 'header.php' ?>
...

在header.php中:

<?php if (isset($class) && $class == 'home'): ?>
    <img src="images/logo-with-white-text" />
<?php else: ?>
    <img src="images/logo-with-dark-text" />
<?php endif; ?>

你可以用这样的代码片段来检查你是否在主页上(取决于你的确切实现):

if (basename($_SERVER['SCRIPT_NAME']) == 'index.php') {
    // home page
}
else {
    // some other page
}

$_SERVER['SCRIPT_NAME']包含从主机到查询字符串的实际加载文件

http://example.com/my/folder.php?a=b=>/my/folder.php

有关更多信息,请参阅PHP手册中的basename

$_SERVER['REQUEST_URI']包含当前页面url(在域之后)。相反,你可以检查页面是否有主页url。

根据你的设置,你会有类似的东西

<?php if ($_SERVER['REQUEST_URI'] == '/') : ?>
    <img src="images/logo-with-white-text" />
<?php else: ?>
    <img src="images/logo-with-white-text" />
<?php endif; ?>

如果使用图像替换技术来显示图像,则不需要PHP。

基本上,你用<h1>或其他东西作为你的标志,带文本,然后用负text-indent来隐藏文本,设置高度和宽度,并用背景图像作为标志。示例:

http://jsfiddle.net/nwNbb/

<h1 id="logo">My Website</h1>
#logo {
 text-indent:-999px;
 background:url(/path/to/logo.png);
 height:100px;
 width:500px;   
}

然后,在您的CSS中,您可以根据body类更改背景图像:

body.home #logo {
 background:url(/path/to/alternate-logo.png);
}

您实际上也可以在图像上进行图像替换

http://jsfiddle.net/nwNbb/3/

img {
     /* 500x100 replacement image */
    background:url(http://lorempixum.com/500/100);
     /* hide original image */
    width:0;
    height:0;
     /* use padding to set width/height of replacement */
    padding:50px 250px;
}