WebサイトをPHPで共通化する
Webサイトを作っていると出来るだけ効率良く制作したいです。
今回は、動的サイトの共通部分をPHPでパーツ化して、管理しやすく変更に強いサイト制作を紹介します。
目次
共通化できる場所
Webサイト内の共通部分を挙げると、
・header
・パンくずリスト
・footer
あとは、
サイトによって使い回しの出来る項目などがパーツ化の対象になります。
階層構造（例）
includeフォルダ → 共通化できるパーツ入れ。
config.phpファイル → 各ページの情報を記述しておくファイルです（後述します）
パーツ化して使うためのPHP記述
<?php
require_once (dirname(__FILE__) . '/include/〇〇〇〇.php');
?>解説
require_once → ファイルを読み込む命令。
(dirname(__FILE__) → 絶対パスで読み込む記述。この記述のあとは /（ｽﾗｯｼｭ） が必要。
［ . ］ → 結合（文字列や変数を繋げる）
［ ' ファイル参照先 ' ］（ｼﾝｸﾞﾙｸｫｰﾄで囲む） → 文字列型 (string) にする。
使い方
<?php
require_once(dirname(__FILE__) . '/include/header.php');
?>
<main class="l-main">
<!---------------------------------------------
コンテンツが入ります
------------------------------------------------->
</main>
<?php
require_once(dirname(__FILE__) . '/include/footer.php');index.php内の記述はこんな感じです。
同じ階層にある includeフォルダ内の header.php、footer.phpを参照しています。
header.php や footer.phpは、いつも通りの記述で大丈夫です。
ここで気になるのが、
「各ページごとに違うタイトルやページの説明、CSSやJavaScriptへのパスはどうするの？」
です。
config.php の説明
各ページごとに違う要素は、この config.phpに変数として記述します。
記述例（ config.php ）
<?php
// 実行された phpファイル名を取得
$dir = basename($_SERVER['SCRIPT_NAME']);
// 変数の準備
$description = "サイトの説明文ほにゃほにゃ〜";
$relative_path = './';
$relative_path_page = '../';
$folder_page = 'page';
$file_top = 'index.php';
$file_page_〇〇 = 'page-〇〇.php';
$title_top = 'トップページ';
$title_page_〇〇 = '下層ページ名';
$js_simple_para = 'simpleParallax.js';
$js_drawer_mm = 'drawer-mm.js';
$js_script = 'script.js';
/*=================================================
トップページ
=================================================*/
// 読み込まれたファイルが $file_top だったら
if ($dir == $file_top) {
$path = $relative_path;
$title = $title_top;
$navs = [
array(
'now' => 'current',
'link' => '',
'name' => $title_top
),
array(
'now' => '',
'link' => $folder_page . '/' . $file_page_〇〇,
'name' => $title_page_〇〇,
)
];
// フッター内
$js_load = [
array(
'js' => $js_simple_para
),
array(
'js' => $js_drawer_mm
),
array(
'js' => $js_script
)
];
}
/*=================================================
下層ページ
=================================================*/
if ($dir == $file_page_〇〇) {
$path = $relative_path_page;
$title = $title_page_〇〇;
$navs = [
array(
'now' => '',
'link' => $relative_path_page,
'name' => $title_top
),
array(
'now' => 'current',
'link' => '',
'name' => $title_page_〇〇,
)
];
// パンくず
$bread_title = $title_page_〇〇;
// フッター内
$js_load = [
array(
'js' => $js_drawer_mm
),
array(
'js' => $js_script
)
];
}使用例（header.php）
<?php
require_once(dirname(__FILE__) . '/config.php');
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- サイトの説明 -->
<meta name="description" content="<?php echo $description; ?>">
<!-- ファビコン -->
<link rel="icon" href="<?php echo $path; ?>assets/img/favicon.ico">
<!-- CSS -->
<link rel="stylesheet" href="<?php echo $path; ?>assets/sass/style.min.css" type="text/css">
<!-- サイトタイトル -->
<title><?php echo $title; ?></title>
</head>
<body id="body">
<!-- ヘッダー -->
<header id="top" class="l-header p-header" role="banner">
</header>１〜３行目で config.phpを読み込ませています。
（OGP設定やGナビゲーションなどの読み込みは、あえて記載していません。）
使用例（footer.php）
<!-- フッター -->
<footer class="l-footer" role="contentinfo">
<ul class="l-footer_menu">
<!-- foreach文 で書き出し -->
<?php foreach ($navs as $name) : ?>
<li class="l-footer__menu-item">
<a class="<?php echo $name['now']; ?>" href="<?php echo $name['link']; ?>">
<?php echo $name['name']; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</footer>
<!-- foreach文 で書き出し -->
<?php foreach ($js_load as $name) : ?>
<script type="text/javascript" src="<?php echo $path; ?>assets/js/<?php echo $name['js']; ?>"></script>
<?php endforeach; ?>
</body>
</html>
header.phpの頭で config.phpを読むことによって、ページ全体で変数を使うことが可能になっているので、
footer.php内では forEach文を使うことで、繰り返される項目も簡略化できます。
説明は以上です。
まとめ
WordPressの勉強前にPHPパーツ化を知っていると、WordPressへの抵抗が薄まりますね。
最後まで読んでいただき、ありがとうございました。
