kamenokoki.com

サイトの共通部分はPHPで呼び出せ!ヘッダやフッタの共通化を0から解説!

Posted:  Last Update:

レンタルブログやWordPressを利用せず、自力でサイトを作成したい!そんな方に朗報です。PHPのファイル呼び出しを使えば、サイトの共通部分であるヘッダやフッタを簡単に使いまわすことができます。この記事では、PHPでヘッダやフッタなどのサイトパーツを呼び出す超具体的な手法をご紹介します。

準備編-試験用ページ「index.php」

試験用ページ「index.php」に含まれるパーツ

PHPでサイトの共通部分を読み込む具体的な手法をご紹介するために、まずは下記画像のようなホームページを準備してみました。「ヘッダ」「本文」「ナビゲーションバー」「フッタ」の四つの部分から構成されています。パーツの区分けが分かりやすいようにヘッダやフッタを色分けしてみました。

2020.10.16 テスト用HTMLの画像

ここまではHTMLのタグのみで作成し、「index.php」というファイルで保存してあります。よければソースをコピペしてテストに使ってみてください。メモ帳などにコピーして、「index.php」というファイル名で保存します。

index.php

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" charset="utf-8"><link rel="stylesheet" href="stylesheet.css"></head>
<body>
  <header>New Webpage ヘッダ</header>
    <main>
    <article>
      <h1>本文記事</h1>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
      </article>
    <aside>右のナビゲーションバー</aside>
    </main>
  <footer>New Webpage フッタ</footer>
</body>
</html>

背景色などはスタイルシートで設定しました。上記「index.php」の3行目「<link rel="stylesheet" href="stylesheet.css">」で呼び出しています。一緒に作業をしてみたい方は、下記のコードをコピーしてメモ帳などに貼り付け、「stylesheet.css」というファイル名で「index.php」と同じフォルダに保存してください。色や配置がはっきりとしているので、出来上がりがよくわかります。

stylesheet.css

header{
  background-color:green;
  color: white;
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}
main{
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
}
article{
  background-color: white;
  width: 600px;
  margin:1em;
}
aside{
  background-color: coral;
  width: 200px;
  margin:1em;
}
footer{
  background-color: darkolivegreen;
  color: white;
  text-align: center;
  padding: 1em;
}

index.phpをブラウザ表示すると構文が表示される時の対処法

上記で準備した「index.php」をブラウザで表示すると、「<?xml version="1.0" encoding="UTF-8"?>」という構文がそのまま表示されてしまう方。PHPとApacheの設定は済んでいますか?

PHPは「サーバーサイドプログラミング言語」というもので、サーバーがないと動きません。ローカルでテストを行う場合には、ApacheとPHPが必要です。また、テスト用のサーバーをローカルに立ち上げておくと、テストを行う際にとても便利です。

ApacheとPHPについては「PHP自作サイトに必須のローカル環境とは」で詳しく解説しています。また、テスト用のサーバーの立て方は「ローカルで内部転送テストをしたいときのApacheの設定」の「サイトの専用ホストを準備しよう」に紹介してあります。参考にしてみてください。

解説編-ヘッダを別ファイルに保存する

ここから、さっそくPHPでヘッダやフッタを呼び出すための作業に入ります。手法のご説明のために、まずはヘッダ部分だけ呼び出す作業をしてみましょう。

最初に、さきほど準備した「index.php」から「<header> ~ </header>」部分を切り取って、メモ帳に貼り付け、「header.php」という名前でindex.phpと同じ階層に保存します。のちほど、「index.php」でPHPを使い、この「header.php」というファイルを読み込みます。

※1 ファイルの保存場所は別の場所でもかまいません。ここでは後ほどの説明が分かりやすいようにindex.phpと同じ階層にしています。詳しくは記事の後半で。 ※2 「header.php」は「header.txt」など別の拡張子も利用できますが、ここでは分かりやすいように 「header.php」にしています。詳しくは記事の後半で。

作業前の「index.php」と、作業後の「header.php」およびは「index.php」以下のようになります。

作業前の「index.php」

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" charset="utf-8"><link rel="stylesheet" href="stylesheet.css"></head>
<body>
  【↓ここを切り取る↓】
  <header>New Webpage ヘッダ</header>
    <main>
    <article>
      <h1>本文記事</h1>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
    </article>
    <aside>右のナビゲーションバー</aside>
    </main>
  <footer>New Webpage フッタ</footer>
</body>
</html>

新しく保存した「header.php」

<header>New Webpage ヘッダ</header>

作業後の「index.php」

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" charset="utf-8"><link rel="stylesheet" href="stylesheet.css"></head>
<body>

    <main>
    <article>
      <h1>本文記事</h1>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
    </article>
    <aside>右のナビゲーションバー</aside>
    </main>
  <footer>New Webpage フッタ</footer>
</body>
</html>

ちなみに、今「index.php」をブラウザで表示すると下記のようにヘッダがなくなっているはずです。

2020.10.16 header部分をheader.phpに保存した画像

解説編-PHPでヘッダを呼び出す

ここまでの作業で、「index.php」と「header.php」という二つのファイルが準備できました。ここからPHPの出番です。「index.php」にPHP構文を書いて、「header.php」を読Hみ込んでみましょう。

使うのは「include」というPHPの文です。PHPを書くときは、「<?php」で初め、PHPの構文を書き、「?>」で閉じます。PHP構文は、includeの後にファイル名を「""」で囲って記入し、最後に「;」でこの処理が終了したことを宣言します。

先ほどの「index.php」の、「<header> ~ </header>」を切り取った部分に、下記のようにPHP構文を足してみましょう。

「index.php」

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" charset="utf-8"><link rel="stylesheet" href="stylesheet.css"></head>
<body>
  【↓PHHPの構文を入れる↓】
  <?php
  include "header.php";
  ?>

    <main>
    <article>
      <h1>本文記事</h1>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
    </article>
    <aside>右のナビゲーションバー</aside>
    </main>
  <footer>New Webpage フッタ</footer>
</body>
</html>

index.phpをブラウザで表示してみてください。再びヘッダが現れていると思います。

2020.10.16 PHPでヘッダを呼び出した様子

本番-パーツを別ファイルに保存する

ヘッダをPHPで呼び出すことはできましたか?では、他のパーツも別のファイルに保存し、PHPで呼び出してみましょう。ナビゲーションバーとフッタの全てをPHPで呼び出せるように、まずはファイルを準備します。先ほどと同じように、「index.php」から該当部分を切り取り、それぞれを別のファイルに貼り付けて保存します。

作業前の「index.php」

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" charset="utf-8"><link rel="stylesheet" href="stylesheet.css"></head>
<body>
  <?php
  include "header.php";
  ?>

    <main>
    <article>
      <h1>本文記事</h1>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
    </article>
    【↓切り取ってaside.phpに貼り付け↓】
    <aside>右のナビゲーションバー</aside>
    </main>
  【↓切り取ってfooter.phpに貼り付け↓】
  <footer>New Webpage フッタ</footer>
</body>
</html>

新しいファイル「aside.php」

<aside>右のナビゲーションバー</aside>

新しいファイル「footer.php」

<footer>New Webpage フッタ</footer>

ちなみに、ファイルを分ける作業をした後の「index.php」と、ブラウザで表示した画面はこのようになっているはずです。

作業後の「index.php」

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" charset="utf-8"><link rel="stylesheet" href="stylesheet.css"></head>
<body>
  <?php
  include "header.php";
  ?>

    <main>
    <article>
      <h1>本文記事</h1>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
      <h2>小見出し</h2>
      <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
    </article>
    
    </main>
  
</body>
</html>

作業後の「index.php」をブラウザで表示した様子

2020.10.16 ファイルを分けた後のindex.phpの様子

本番-PHPでパーツを呼び出す

ファイルが準備できたところで、一気にPHPで呼び出してみましょう。先ほど紹介したPHPの「include」文を使って、「aside.php」「footer.php」をそれぞれ呼び出します。

  <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html>
  <html>
  <head><meta http-equiv="content-type" charset="utf-8"><link rel="stylesheet" href="stylesheet.css"></head>
  <body>
    <?php
    include "header.php";
    ?>

      <main>
      <article>
        <h1>本文記事</h1>
        <h2>小見出し</h2>
        <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
        <h2>小見出し</h2>
        <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</P>
      </article>
      【↓aside.phpを呼び出す↓】
      <?php
      include "aside.php";
      ?>

      </main>
    【↓footer.phpを呼び出す↓】
    <?php
    include "footer.php";
    ?>

  </body>
  </html>

「index.php」を開くと、最初と同じ画面になっているはずです。

2020.10.16 icludeを使って全てのパーツを呼び出すと最初の画面と同じになる

練習編-「test.php」を作ってパーツを呼び出してみよう

せっかくPHPでパーツを呼び出せるようになったので、練習に1ページ作ってみましょう。「test.php」というファイルを作り、「index.php」と同じフォルダに保存してください。ヘッダ、ナビゲーションバー、フッタは「index.php」と同じようにPHPを使って呼び出してみましょう。「index.php」との差が分かりやすいように、本文(article)部分には先ほどと違う文章を書いてみてください。

では、「test.php」をブラウザで表示してみましょう。「index.php」と共通のヘッダ、ナビゲーションバー、フッタが表示されましたか?

ちなみに、私がテストで作った「test.php」とブラウザで表示したページがこちら。上記で「test.php」の作成がうまくいかなかった方は、ご自分の構文と比べてみてください。

「test.php」

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <?php include "header.php";?>
    <main>
    <article>
      <h1>PHPでのサイト作成に挑戦</h1>
      <h2>最初にファイルを作成</h2>
      <p>「test.php」という新しいファイルを作ってみた。
      <h2>PHPで呼び出す</h2>
      <p>「index.php」とヘッダ、ナビゲーションバー、フッタは共通のパーツを呼び出したい</P>
    </article>
    <?php include "aside.php";?>
    </main>
  <?php include "footer.php";?>
</body>
</html>

ブラウザで表示した「test.php」

2020.10.16 test.phpにも共通のパーツを呼び出してみた

運用上のヒント

※1 ファイルの保存場所

今回の記事では、説明を分かりやすくするため、ファイルの保存場所をすべて「index.php」と同じ階層にしています。しかし、ファイルを別の場所に保存することも可能です。ファイルを別の場所に保存した場合には、呼び出し側のファイルからの相対パスでファイルを指定するか、ファイルの絶対パスで呼び出しましょう。たとえば、「index.php」と同じ階層に「parts」というフォルダがあり、「parts」フォルダに「header.php」や「footer.php」を保存した場合には、下記のように相対パスで呼び出すことができます。

<?php include "./parts/header.php";?>
<?php include "./parts/footer.php";?>

※2 PHP以外の拡張子の呼び出し

今回の記事では、PHPで呼び出すファイルの拡張子もphpとして説明していますが、別の拡張子のファイルも呼び出すことができます。たとえば、ヘッダは「header.txt」に、フッタは「footer.txt」に保存して、PHPで呼び出すことができます。その場合には、下記のように拡張子を変えてPHPで呼び出します。PHPファイルを呼び出したときと同じ結果が得られます。

<?php include "header.txt";?>
<?php include "footer.txt";?>

ブラウザで表示されるソース

ここでちょっと箸休めの余談です。ここまで作業してきた「index.php」をブラウザで表示して、ソースを見てみてください。ソースを見る方法ですが、たいていのブラウザでは画面上で右クリックをすると「ページのソースを表示」という項目があります。「ページのソースを表示」をクリックすると、表示しているページのソースが別ウィンドウで表示されると思います。

ソースの内容はいかがでしょうか。PHPの構文は表示されず、PHPで呼び出したHTMLのタグだけが表示されていますね。PHPはサーバー側で動くので、実際にブラウザに表示されるのはHTMLのタグだけです。「index.php」を呼び出す度に、PHPがページを生成してブラウザに送ってくれるので、裏側でどのような処理をしているかはユーザーには分かりません。ちなみに、このページもPHPでほぼすべてのパーツを呼び出していますが、ソースを表示するとHTMLタグしか表示されません。

まとめ

PHPを利用すれば、HTMLのiframeなどを使うよりも簡単にパーツを呼び出すことができます。この記事がサイトを自作している同志の方々の一助になれば幸いです。

今回はサイトの主要なパーツを呼び出す方法を紹介しましたが、PHPでの呼び出しはたくさんのことに応用できます。たとえば、今回は1つのファイルだったナビゲーションバー。ナビゲーションバーの素材を別々に作って、表示するページに応じて呼び出すページを変えることもできます。また、URLに従って、呼び出す本文を変えることもできます。ぜひいろいろ試してみたください!

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

RELATED

サイトパーツ作成方法 ・PHPの小技集 

広告