こんばんは。
今回は鰐間兄弟もニッコリの備忘録です。
静的サイトでもトップページを判別したい
「トップページの時だけheaderにクラスを付与したい!」とお兄は言ってる
そういう時ありますよね。
例えばトップページの時だけheaderタグに「is-home」クラスを付与したい、とか。
WordPressサイトなら、header.phpでis_front_page()やis_home()で判別すれば済む話です。
問題は静的サイトの時。
静的サイトの共通ヘッダー
静的サイトではSSIやPHPインクルードで共通ファイルを読み込むことが多いと思います。
例えばPHPインクルードだと以下の感じ。
<?php include($_SERVER['DOCUMENT_ROOT'].'/assets/inc/header.php'); ?>
header.phpの中身は以下の感じ。
<header class="header"> // コンテンツが入ります </header>
これを、こうします。
<header class="header<?php echo ($_SERVER['REQUEST_URI'] === '/' || $_SERVER['REQUEST_URI'] === '/index.html' || $_SERVER['REQUEST_URI'] === '/index.php') ? ' is-home' : ''; ?>"> // コンテンツが入ります </header>
PHPコードの部分をコピペして頂ければ使い回し可能です。
クラス名などは適宜変更して下さい。
やってることは、URLのドメイン以降の部分が「/」「/index.html」「/index.php」なら「 is-home」を追加しているだけです。
多分SSIの場合でも同じようにできます。試してませんが。