PHPがわからなくてもオッケー。HTMLをPHPにして共通パーツを外部読み込みする。

Webデザイナーの平尾誠です。

例えばヘッダーとかフッターは全ページ共通のパーツだったりしませんか？

たくさんのページで使われる同じソースコードは、コンポーネント化してインクルードしましょう。

PHPを使いますが、理解してなくてもオッケーです。

コンポーネント化とは、同じソースコードをファイル化して外部ファイルとして読みこむことです。
外部ファイルとして読み込むことをインクルードと言います。

要するに、理屈はCssを複数ページで読み込ませるのと同じです。
そうすることで、共通パーツを読み込んだページ全てにHTMLの変更をかけることができます。

PHPが動くようにする
phpをincludeする
1. PHPに置き換えます
まとめ：PHPでコンポーネント化して高速化

PHPが動くようにする

PHPはHtmlのようにそのままではデスクトップで表示されません。
まずはローカルにPHPが動く環境を作らないといけません。

MAMPを使うと良いです。

参考はこちら
MAMPの初期設定 – MAMPの使い方

phpをincludeする

まずはファイル名をindex.htmlからindex.phpにしましょう。
これでphpファイルとして使用することができます。

例えば、ナビゲーション部分は全ページで一緒だったりしますよね。
これをheader部分のHTMLを、PHPの別ファイルにします。
今回はheader.phpと名前をつけました。

元のindex.htmlはこんな感じ

<div class="l-header">
<header>
      <nav class="drawer-nav">
        <p class="u-pc-hidden brand">サイトタイトル</p>
        <ul class="drawer-menu">
            <li><a href="/">Home</a><span class="drawer-menu-small">トップページ</span></li>
            <li><a href="/whoweare">Who We are</a><span class="drawer-menu-small">〇〇について</span></li>
            <li><a href="/curriculum">Curriculum</a><span class="drawer-menu-small">カリキュラム</span></li>
            <li><a href="/interview">Interview</a><span class="drawer-menu-small">生徒の声</span></li>
            <li><a href="/news">News</a><span class="drawer-menu-small">お知らせ</span></li>
            <li><a href="/faq">FAQ</a><span class="drawer-menu-small">よくある質問</span></li>
            <li><a href="/contact">Contact</a><span class="drawer-menu-small">お問い合せ</span></li>
            <li><a href="/entry">Entry</a><span class="drawer-menu-small">説明会</span></li>

        </ul>
    </nav>
</header>
</div>

PHPに置き換えます

長かったソースコードをコンパクトにまとめます。
さっきのindex.htmlの拡張子をindex.phpに変更します。
長かったheaderの中身を別のheader.phpに記述して、外部読み込みします。

    <div class="l-header">
        <?php include("inc/header.php"); ?>
    </div>

読み込み先のheader.php中身はこんな感じですね。

<header>   
  <nav class="drawer-nav">
        <p class="u-pc-hidden brand">サイトタイトル</p>
        <ul class="drawer-menu">
            <li><a href="/">Home</a><span class="drawer-menu-small">トップページ</span></li>
            <li><a href="/whoweare">Who We are</a><span class="drawer-menu-small">〇〇について</span></li>
            <li><a href="/curriculum">Curriculum</a><span class="drawer-menu-small">カリキュラム</span></li>
            <li><a href="/interview">Interview</a><span class="drawer-menu-small">生徒の声</span></li>
            <li><a href="/news">News</a><span class="drawer-menu-small">お知らせ</span></li>
            <li><a href="/faq">FAQ</a><span class="drawer-menu-small">よくある質問</span></li>
            <li><a href="/contact">Contact</a><span class="drawer-menu-small">お問い合せ</span></li>
            <li><a href="/entry">Entry</a><span class="drawer-menu-small">説明会</span></li>
        </ul>
    </nav>
</header>