2012-01-22 6 views
3

私はホームページが暗い背景を持っているが、他のすべてのページは白い背景を持っているWebサイトで作業しています。ボディクラスがホームである場合、phpを使用して別のヘッダーロゴイメージを表示しますか?

私は、すべてのページにロゴ、ナビゲーションバー、電話の詳細などを表示するヘッダーファイルを含めるためにphoを使用しています。

ホームページの背景が暗いため、ロゴには白いテキストが表示されますが、他のページのロゴの使用には暗いテキストがあります。

私はすべてのページに1つのヘッダーファイルを含めるように、PHPを使用する方法を探しています。ホームページに「ホーム」のクラスがある場合は、白いテキストのロゴイメージが表示され、他のすべてのページには、暗いテキストのロゴイメージが表示されます。これらの線に沿って

何か:

if (body class="home") { 

<img src="images/logo-with-white-text" /> 

else { 

<img src="images/logo-with-dark-text" /> 

}; 

これは可能ですか?あなたはこのようなスニペットを(あなたの正確な実装に応じて)あなたは、ホームページ上にあるかどうかをチェックすることができ

任意のヘルプやアドバイスをいただければ幸いです:)

+0

これは間違いなく、何が問題ですか? –

答えて

4

私はあなたのホームページは現在、次のようになりますと仮定しています:

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

あなたはクラス変数行い、含まから、この変数を参照することができヘッダファイル:

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

In 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; ?> 
+0

これは私によく見える:) – ade123

3

を:

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

詳細はbasename in the PHP manualをご覧ください。

1

$_SERVER['REQUEST_URI']には、現在のページのURL(ドメインの後ろ)が含まれています。代わりに、ページにホームページURLがあることを確認することができます。

設定によって、あなたは画像を表示するimage replacement techniqueを使用する場合は、このためのPHPを必要としない

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

のようなものを持っていると思います。

基本的には、あなたのロゴにはテキストを使用してtext-indentを使用して、テキストを非表示にし、高さと幅を設定し、ロゴに背景イメージを使用します。例:あなたが実際に行うことができます

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

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に、あなたは身体クラスに基づいて背景画像を変更することができますイメージ交換イメージ同様:

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; 
} 
+0

それは私がそれをやる方法です。プレゼンテーションはスタイルシートに属します。 – Herbert

+0

イメージがプレゼンテーションかコンテンツかの議論です。私はそれが両方であると言うでしょうが、それは良い線です。いずれにしても、私はいつもロゴにIRを使用しているので、これをやっていく方法です。 –

+0

有効なポイントを作成します。私は確かにイラストを内容として分類するだろう。ロゴは会社/組織/ブランドを「例示」するのに役立つと主張することができますが、AKAIKのロゴはそのプレゼンテーション以外の目的には役立ちません。 – Herbert

関連する問題