1. HOME
  2. フロントエンド
  3. HTMLファイルでPHPを使って共通部分を管理する

HTMLファイルでPHPを使って共通部分を管理する

フロントエンド

.phpファイルだともろにデータを扱っていますと言っているような感じがして個人的にはとても嫌なので、CMSを使わずに作業する場合には.htmlファイルでphpを使えるようにしています。忘れないようにメモ。

htmlファイルでphpを使えるようにする

MAMPの場合

MAMPでは【/Applications/MAMP/conf/apache/】の【httpd.conf】を編集することでhtmlファイルでphpを使えるように設定を変更できます。

AddType application/x-httpd-php .php .phtml

上記の記述がphpが使えるファイルの拡張子を指定しているので、ここにhtmlファイルでも動かせるように【.html】を追加します。

AddType application/x-httpd-php .php .phtml .html

変更後保存をし、MAMPを再起動するとphpが使えるようになっているはずです。

レンタルサーバーの場合

.htaccessへ記述をします。基本的には下記のどちらかを記述するようです。

AddType application/x-httpd-php .php .html

または

AddHandler application/x-httpd-php .php .html

どちらかを書くのかはレンタルサーバーによって異なります。CPIさんの場合は「AddHandler」の方のようです。

また特定のファイルのみphpを使えるようにしたい場合は

<Files "◯◯◯.html">
//ここに記入
</Files>

Fileの中に記入すると特定のファイルでのみ動かせるようになります。

共通部分をphpで管理する

共通させるのはヘッダーやフッター、ヘッド内のメタ要素などが主です。 例として[ index.html ]と [ header.php ]を用意します。 名前などはどんなものでも構いません。 ※読み込み元ファイルと読み込むファイルの区別をつけるために、読み込み元ファイルは拡張子を【.php】にしています。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<title>共通部分をphpで管理するデモ</title>
	<style>
		header,footer{
			height: 100px;
			text-align: center;
		}
		header{
			background-color: #F2F5A9;
		}
		footer{
			background-color: #CEF6F5;
		}
		main{
                        height: 500px;
			background-color: #F6CEF5;
		}
	</style>
</head>
<body>
		//ここにheader要素を読み込みます
        <main>
             phpでmainの要素を読み込みました
        </main>
	<footer>
		ここはfooterです。
	</footer>
</body>
</html>

header.php

<header>
phpでheader要素を読み込みました
</header>

index.htmlのコメントアウトで「ここにheader要素を読み込みます」と書かれている部分に

<?php include( $_SERVER['DOCUMENT_ROOT'] . 'header.php'); ?>

または

<?php include( dirname(__FILE__) . 'header.php'); ?>

と記載して背景がピンクのheader要素が表示されればOKです!

phpのincludeでは下記のような書き方だとエラーがでます。

include('/php/header.php');
include('./php/header.php');

includeする際にはファイルが置かれたディレクトリのパスを表示する【dirname(FILE) 】またはドキュメントルートのパスを表示する【$_SERVER[‘DOCUMENT_ROOT’]】が必要になります。

MAMPでdirname(__FILE__) / $_SERVER[‘DOCUMENT_ROOT’]で動作することを確認済み(サーバー未)


MAMP
php
html

この記事を読んだ方におすすめ