• 最終更新日:

【サイト制作】共通部分をパーツ化!効率的にサイトを作るテクニック

HTMLを使った静的サイトを作成するとき、headerやfooterなど共有部分をパーツ化することで効率的にサイトを作ることができます。ページごとにheaderやfooterを何度も書く必要がなく、共通部分に修正があっても全ページに反映されます。

今回はheaderとfooterをパーツ化することを前提に説明していきます。

2020.03.11追記
各ページのtitleとdescriptionをheadに反映させる方法を加えました。

共通部分をパーツ化!効率的にサイトを作る

静的サイトを作る場合、index.htmlなどhtmlファイルを使用しますが、今回はindex.phpのようなphpファイルを使います。サイトを表示させるのはhtmlファイルである必要はなく、以下のファイル名でも表示されます。(上から優先順位が高く表示される)

  • index.html
  • index.htm
  • index.cgi
  • index.php //今回使用するファイル
  • index.shtml
  • index.wml
  • index.hdml

phpファイルといっても今回は場合ではhtmlファイルと書く内容にほとんど違いがありません。ファイル名を変えて、1部だけphpを使うだけで共通部分をパーツ化して使うことができます。

ディレクトリとphpファイルを作る

今回説明するサイトの構成は以下の通り。

画像の左側がサイトのディレクトリ構成で、右側がディレクトリの中に入っているファイルになります。hogehoge.comはtopページ、aboutページ、companyページがあって、_incに共通部分であるheader.phpとfooter.phpがあります。

header.phpに書くこと

各ページに共通するheader部分を書いていきます。例としては以下です。header.phpを作成して、headerまでを書いていきます。titleとdescriptionの部分は各ページごとに変数を用意しておいて、その変数を反映させるようにします。

<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><?=$title?></title> <!-- 各ページのtitleを反映させる -->
<meta name="description" content="<?=$description?>"> <!-- 各ページのdescriptionを反映させる -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
     <div class="wrapper">
      <header>
          
         <!-- ヘッダー部分 -->
           
      </header> 

footer.phpに書くこと

footer.phpに書くことの例としては以下になります。footerを含む、</html>までを書いていきます。

<footer>
        <!-- フッター部分 -->
</footer>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./js/init.js"></script>
</body>
</html>

これで共有部分をパーツ化することができました。あとは各ページでheader.phpとfooter.phpを読み込みます。

index.phpにパーツ化した共通部分を読み込む

index.phpを開いて以下のように共通部分を読み込みます。titleとdescriptionの部分は各ページごとに用意しておきます。そこに書いた情報がheadのtitleとdescriptionに反映されます。

<?php $title = "トップページのタイトルになります。";?> <!-- headのtitleに反映させる -->
<?php $description = "トップページの説明になります。";?> <!-- headのdescriptionに反映させる -->
<?php include("../_inc/header.php"); ?>  <!-- ヘッダー共通部分 -->

       <div class="contents">
                <!-- コンテンツ部分 -->
       </div>
       <aside class="sidebar">
               <!-- サイドバー部分 -->
        </aside>

<?php include("../_inc/footer.php"); ?> <!-- フッター共通部分 -->

これで各ページは共通部分のheader.phpとfooter.phpを読み込むことができます。

topディレクトリを最初に読みこむ設定をする

今回のサイトは以下のようになっています。これだとhogehoge.comにアクセスしても、サーバーはどのディレクトリがトップページなのか判断ができません。

topディレクトリをトップページとして設定するためにはまず、メモ帳でもいいので.htaccessという名前のファイルを作成します。.htaccessが作成できたら以下のように書きます。4行目と7行目にtopとありますね。これはhogehoge.comにアクセスされたら最初にtopディレクトリを読み込め…という意味です。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteRule ^$ top/ [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ top/$1 [L]
</IfModule>

最後に.htaccessを以下の位置に配置すれば完了です。

topディレクトリの中ではなく、hogehoge.comの直下に置く

これでhogehoge.comでアクセスされたときはtopディレクトリにあるindex.phpが読み込まれることになります。(URLもhogehoge.comで表示される)

各ページへのパスの書き方について

例えばトップページからaboutページにリンクさせるなら以下のように書けば拡張子であるphpがURLに表示されません。

<a href="./about/">ABOUT</a>

拡張子のphpを表示させたくない場合は?

トップページはhogehoge.comと表示されますし、hogehoge.com/index.phpとしても表示されます。このindex.phpを表示させず、常にディレクトリ名で表示させるためには各ページのフォルダごとに.htaccessを用意して以下を書きます。

例えばトップページであれば以下のように書きます。これでhogehoge.com/index.phpでアクセスされてもhogehoge.comにリダイレクトされます。aboutページであればtopのところをaboutに変えて、aboutフォルダの中に.htaccessを配置してください。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
RewriteRule ^(.*)index.(html|php)$ http://%{HTTP_HOST}/top/$1 [R=301,L]
</IfModule>

見ての通り、手間がかかる上にあまり意味がないのでオススメはしません。

各ページごとにフォルダで管理するのが面倒くさい場合は?

ページごとにフォルダで管理しなくても以下のようなワークツリーで表示できます。ただし、各ページへのリンクの書き方と.htaccessの内容が変わります。

この場合の各ページのリンクの書き方は、例えばaboutのときは以下のようになります。リンクの最後に/があるとリンクが機能しないので注意しましょう。以下のようにリンク先を設定すればURLにphpの拡張子は表示されません。

<a href="./about">ABOUR</a>

.htaccessは以下のように書きます。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.+)$ $1\.php
</IfModule>

共通パーツを読み込む相対パスも変わります。

<?php $title = "トップページのタイトルになります。";?>
<?php $description = "トップページの説明になります。";?>
<?php include("./_inc/header.php"); ?> <!-- 相対パスが変わります -->

       <div class="contents">
                //コンテンツ部分
       </div>
       <aside class="sidebar">
               //サイドバー部分
        </aside>

<?php include("./_inc/footer.php"); ?> <!-- 相対パスが変わります -->

さいごに…

今回はサイトの共通部分をphpを使ってパーツ化する説明をしましたが、htmlでパーツ化したい方は以下のサイトを参考にしてみてください。

.htaccessの詳しい書き方については以下のサイトが参考になります。