共通部分のh1をトップページと下層ページで切り替え

今回ご紹介する方法はPHPを使用します。
PHPが使えないレンタルサーバーなんてほぼないはずですから。

またPugなどテンプレートエンジンを使用している場合は今回紹介する方法は必要ないかと思います。

対象サイト

下記のようなサイトには今回方法が向いているかと思います。

静的サイト
PHPが使用可能
ヘッダーなどをincludeで共通化している
共通部分にh1がある
トップページではh1、下層ページではpなど別のタグにしたい
Pugなどテンプレートエンジンを使用していない

ソースコード

ソースコードは以下となります。
コピペで使用できます。

<?php $url = $_SERVER["REQUEST_URI"]; ?>
<?php if ($url == "/" || $url == "/index.php" || $url == "/index.html") : ?>
  //ここにトップページ用のHTML
<?php else : ?>
  //ここに中ページ用のHTML
<?php endif; ?>

使用例

使用例は以下のようになります。
この例ではトップページではヘッダー内のロゴはh1、下層ページではpになります。

<header class="l-header">
<?php $url = $_SERVER["REQUEST_URI"]; ?>
<?php if ($url == "/" || $url == "/index.php" || $url == "/index.html") : ?>
  <h1 class="l-header-logo">
    <a href="/" class="l-header-logo__content">
      <img src="logo.svg" alt="ロゴ" class="l-header-logo__content-image">
    </a>
  </h1>
<?php else : ?>
  <p class="l-header-logo">
    <a href="/" class="l-header-logo__content">
      <img src="logo.svg" alt="ロゴ" class="l-header-logo__content-image">
    </a>
  </p>
<?php endif; ?>
</header>

解説

仕組みは単純です。

$_SERVER["REQUEST_URI"];

これは現在のURLを取得します。
URLがhttps://〇〇〇.comだった場合は/となります。
https://〇〇〇.com/index.htmlのindex.htmlとなります。

トップページは大抵以下の3つに当てはまるはずなので。

/
index.php
index.html

if文で分岐させているだけです。

if ($url == "/" || $url == "/index.php" || $url == "/index.html")

これだけです超簡単ですね。

最後に

今回の方法は完全に静的サイトでPHPが使えること前提です。
そもそもWordPressなどシステムが入っている場合はシステム側で対応できるはずなので今回の方法は使わなくてOK。

僕はたま〜に完全静的サイトを作る機会があるので今回の方法を使用しています。
この方法は別にh1の切り替え以外にも使えますがHTMLが汚くなるので今回の場合以外では使用していません。

PHPの記事一覧

静的サイトで共通部分のh1をトップページと下層ページで切り替える方法