ホームページで複数のページを作る時WordPressを使うと共通パーツの管理が楽になりますが、WordPressを使わない案件もあるかと思います。
そんな時はPHPのインクルードを使ってパーツを共通化することで管理が楽になります。
今回はPHPを使って複数ページでパーツを共通化する方法をご紹介します。
INDEX
ディレクトリ構造
まず今回サンプルで作るページは下記のようなコーポレートサイトなどでよく見かける複数ページのサイトを想定しています。
その中で共通パーツとなるのは「includes」フォルダにあるhead.php
・header.php
・footer.php
・sidebar.php
の4パーツを作成していきます。(header.phpとfooter.phpのやり方は同じなので同時に説明します)
rootディレクトリ
├── index.html
├── service
│ └── index.html
│ └── index2.html
│ └── index3.html
├── about
│ └── index.html
│ └── index2.html
│ └── index3.html
├── assets
│ └── images
│ └── img.jpg
│ └── css
│ └── style.css
│ └── js
│ └── script.js
└── includes
├── head.php
├── header.php
├── footer.php
└── sidebar.php
header.php / footer.php
まず初めにheader.php
・footer.php
のインクルードのやり方をご説明します。
インクルードする方法は基本的には「相対パス」と「絶対パス」の2つの方法があります。
今回はディレクトリが異なる複数のページで再利用する共通パーツになりますので、全てのページで同じ記述ができる絶対パスを利用します。
// 相対パス
<?php include(dirname(__FILE__) . "/../includes/header.php"); ?>
// 絶対パス
<?php include($_SERVER['DOCUMENT_ROOT']."/includes/footer.php"); ?>
また、PHPの変数を利用することでより記述を短くすることもできます。変数を利用する際はページのどこかで変数をあらかじめ指定してください。
実際にインクルードを使用する際は下記のように記述することで簡単に共通パーツを作成することができます。
<head>
<!-- 変数 -->
<?php $root = $_SERVER['DOCUMENT_ROOT']; ?>
<head>
<body>
<header>
<?php include($root."/includes/header.php"); ?>
</header>
<main><main>
<footer>
<?php include($root."/includes/footer.php"); ?>
</footer>
</body>
今回は記述を短くするためルートディレクトリを変数に指定して進めていきます。変数は必ずしも必要ではないためお好きなやり方を試してみてください。
head.php
次にhead.php
の共通化の方法をご説明します。
まず<head>
の中身は下記のような「meta」「favicon」「ogp」「css」「js」が入ることを想定しています。
しかし今回はタイトルやディスクリプションなど、中身をページごとに少しずつ変更する必要があります。
その場合は先ほどのheader.php
・footer.php
で出てきた変数を利用することでページごとに内容を書き換えることができます。
<!-- meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>タイトル</title><!-- ページごとにタイトルが変わる -->
<meta name="description" content="ディスクリプション"><!-- ページごとにディスクリプションが変わる -->
<meta name="keywords" content="キーワード, キーワード, キーワード">
<!-- favicon/webclipicon -->
<link rel="icon" href="/favicon.ico">
<!-- ogp -->
<meta property="og:site_name" content="サイトネーム">
<meta property="og:url" content="https://sample.com/それぞれのページのURL"><!-- ページごとにURLが変わる -->
<meta property="og:type" content="website または article"><!-- TOPページとその他のページで変わる -->
<meta property="og:title" content="タイトル">
<meta property="og:description" content="ディスクリプション">
<meta property="og:image" content="/common/images/ogp.png">
<meta property="og:locale" content="ja_JP">
<!-- css -->
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/top.css"><!-- TOPページのみ -->
<!-- js -->
<script src="/assets/js/script.js" defer></script>
<script src="/assets/js/service.js" defer></script><!-- serviceページのみ -->
実際に記述する際は下記の通りです。
基本的にはページごとに置き換える必要がある箇所を変数に格納して置き換えているだけです。
しかし$is_home
という部分だけ変数ではなく状態を判定して、表示非表示を切り替えています。
下記の例ですと$is_home = true;
の場合top.css
を記載するという記述になっています。
逆に表示させたくない場合は<head>内に書かれている$is_home = true;
を削除すれば実際のhtmlには表示されません。
またservice.js
を表示させたい場合は $is_service = true;
と記載することで表示非表示を切り替えることができます。
これで<head>
内を共通化することができました。
<head>
<?php
// ページタイトル
$title = 'タイトル';
// ディスクリプション
$description = 'ディスクリプション';
// ogpで利用
$url = '';
// トップページの判定
$is_home = true; // トップページのみ記載
// ルートディレクトリ
$root = $_SERVER['DOCUMENT_ROOT'];
// インクルードの読み込み
include($root.'/includes/head.php');
?>
</head>
<!-- meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title><?php echo $title; ?></title>
<meta name="description" content="<?php echo $description; ?>">
<meta name="keywords" content="キーワード, キーワード, キーワード">
<!-- favicon/webclipicon -->
<link rel="icon" href="/favicon.ico">
<!-- ogp -->
<meta property="og:site_name" content="サイトネーム">
<meta property="og:url" content="https://sample.com/<?php echo $url; ?>">
<meta property="og:type" content="<?php echo isset($is_home) ? 'website' : 'article' ?>">
<meta property="og:title" content="<?php echo $title; ?>">
<meta property="og:description" content="<?php echo $description; ?>">
<meta property="og:image" content="/common/img/ogp.png">
<meta property="og:locale" content="ja_JP">
<!-- css -->
<link rel="stylesheet" href="/assets/css/style.css">
<?php echo isset($is_home) ? '<link rel="stylesheet" href="/assets/css/top.css">' : '' ?>
<!-- js -->
<script src="/assets/js/script.js" defer></script>
<?php echo isset($is_service) ? '<link rel="stylesheet" href="/assets/js/service.js">' : '' ?>
sidebar.php
最後にsidebar.php
の共通化を行います。
サイドバーの中身はページごとに丸ごと変わることが多いため、今回はページごとに吐き出す内容を変える方法をご紹介します。
やり方は<head>
内で$current
という変数を指定して、sidebar.php
側でif文を使って判定してhtmlを吐き出すようにしています。
<head>
<?php
//サイドバーで表示させるディレクトリ
$current = 'service';
// ルートディレクトリ
$root = $_SERVER['DOCUMENT_ROOT'];
?>
</head>
<aside>
<?php include($root.'/includes/sidebar.php'); ?>
</aside>
<nav>
<?php if ($current == "service") { ?>
<h2>service</h2>
<ul>
<li>・・・</li>
<li>・・・</li>
</ul>
<?php } else if ($current == "about") { ?>
<h2>about</h2>
<ul>
<li>・・・</li>
<li>・・・</li>
</ul>
<?php } ?>
</nav>
まとめ
いかがでしたでしょうか。
インクルードに変数や条件分岐を利用することで、簡単に共通ページを作ることができました。
是非共通パーツを使う際はこのPHPの使い方を参考にしてみてください。