• 作成日:

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

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

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

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

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

静的サイトを作る場合、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までを書いていきます。


<!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>
<meta name="description" content="ヘッダー部分に書くことを説明しています。">
<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を開いて以下のように共通部分を読み込みます。


<?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が作成できたら以下のように書きます。ピンク色の行に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で表示される)

さいごに…

すべてのページをディレクトリでわけている理由はURLにindex.phpと表示させないためです。トップページはhogehoge.comと表示されますし、aboutページもhogehoge.com/aboutと表示されます。もちろんhogehoge.com/about/index.phpと打っても表示されますが、ページ内のリンクにディレクトリ名だけ書いておけば基本は表示されないでしょう。

 

中にはphpではなく、htmlファイルでパーツ化したい人もいると思います。その場合は以下のサイトで詳しく説明されていたので参考にしてみてください。

【header/footer共通化】htmlをphp includeする方法がおすすめ | なべわかし