【超簡単】自作Webサイトで部品を共通化し、管理を簡単にする方法

HTML/CSS

2022.01.162021.12.15

こんにちはときえのきです。
今回は、偶然WordPress等の自動生成ツール禁止縛りでWebサイトを作っていたのもあって、手打ちのhtmlでも部品を共通化できるよ！しかも簡単！って話をします。

共通化とは
コピペすればいいじゃん
方法

共通化とは

まず簡単に、共通化について話をします。
例えばホームページを作る際に、indexと404とinfoという3つのページを作るとしましょう。
この際、必要な部品は基本的に以下のようになります。

html
- head
  - meta
  - title
- body
  - header
    - サイトロゴ、メインメニューなど
  - main
    - div
      - コンテンツ1
    - div
      - コンテンツ2
  - footer
    - コピーライトなど

いたってシンプルなWebサイトですね。そして、トップページ以外にも404とinfoページも作る必要があります。
ではトップページとそれ以外のページで内容が違う部分はどこか？
これが今回の大きな肝となります。

ぶっちゃけhead内のtitleとbody内のmain以外、同じ内容じゃね？

これなんです。
同じサイト内でページによってメニューがバラバラだったりしたら泣きたくなりますよね。
なのでここはhtmlファイルに直接書き込まずに、別のファイルに書いておいて呼び出した方が効率的なんです。

コピペすればいいじゃん

ご最もです。完成後のサイトに、今後一切手を加えないと約束できるならですけどね…
そうです、サイトのレイアウトを変えたいとかファビコンを変えたいとか、そんな事を言い出すたびに先ほどのindex、404、infoの全ページを書き換える必要があります。
3つならまだいいでしょう。ただ、それがブログサイトだったりしたらどうしますか？

ということで、ファイルに直接書き込むのはやはりよろしくないですね。

方法

ここからが本題です。

まず、通常のhtmlファイルでは外部ファイルからコードを読み込んで表示なんて凄いことはできません。
とりあえず何も考えずに、ファイルの拡張子をhtmlからphpに変更します。

そして、ファイルの構成を次のようにします。

/
- index.php
- 404.php
- info.php
- head.php（新規作成）
- header.php（新規作成）
- footer.php（新規作成）

三つの新規ファイルを作成しました。
headの中にはhead要素（metaとかファビコンとか、タイトルは共通化しないので入力しない）を入力します。
headerの中にはheader要素（左上のサイトロゴとかメインメニューとか）を入力します。
footerの中にはfooter要素（コピーライトとか製作者情報とか）を入力します。

中身はそれぞれこんな感じ。

<link rel="sylesheet" href="style.css">
<link rel="icon" href="favicon.jpg">
<meta name="description" content="このWebサイト内では全てここの文章が説明文として使われる">

<ul>
  <li><a href="/">トップページへ</a></li>
  <li><a href="info.php">お問い合わせ</a></li>
</ul>

<h1>製作者情報</h1>
<p>わ、た、し、だ…</p>

そうしたらもともとあったindex、404、infoの中身は以下のようにします。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトルは普通に入力</title>
    <?php
      $webroot = $_SERVER['DOCUMENT_ROOT'];
      include $webroot."/head.php"
    ?>
  </head>
  <body>
    <header>
      <?php
        $webroot = $_SERVER['DOCUMENT_ROOT'];
        include $webroot."/header.php"
      ?>
    </header>
    <main>
      <div>
        ここにコンテンツを書く
      </div>
    </main>
    <footer>
      <?php
        $webroot = $_SERVER['DOCUMENT_ROOT'];
        include $webroot."/footer.php"
      ?>
    </footer>
  </body>
</html>

これで完成です。早速ページを確認してみましょう…

動かない。

そうです。ファイルを開いてもphpのコードは実行されません。
PHPというのはサーバーを起動して初めて動くものなので、基本的に確認作業は本番環境でしか行えません。
ただし、抜け道もあります。パソコン内部にlocalhostを立てて、仮のオフラインサーバーとしてファイルを表示する方法です。
ただ、こちらも書くと文章量が一気に増えるのでこれはまた別のお話で…ちなみに使ったソフトはXAMPPです。

そういや今回この方法を使って作っているサイトはここですね（）