HTMLサイトの共通部分(ヘッダーやフッター)をPHPでパーツ化し、現在のページのメニューにクラスを追加する方法。
コーディングを始めた頃(遠い昔)に学んだテクニックがarutegaさんのブログで紹介されてた。当時「共通化にはまってやりまくってた時にページごとにクラスをつけたいっ！」て思って、頑張って実装したテクニックを思い出したのでメモ。
Index
サイトのヘッダーなど、全ページで共通する部分をパーツ化しよう
まずが共通部分をパーツ化(コンポーネント化)しよう。
コンポーネン化の方法はこちらですごくわかりやすく解説されていたのでリンクを貼らさせていただきました。
共通パーツ化の方法はこちら
現在のページのメニュー部分だけにcurrentクラスを表示させる
共通パーツのファイルに配列を書いてcurrentクラスが入る箇所を予め入れておく
ここでは共通ヘッダーをtpl_header.phpファイルとした場合。
tpl_header.php
<?php $ary[$pageNo] = 'current'; ?>
<ul class="header-meun">
<li class="<?php echo $ary[0]; ?>"><a href="/">ホーム</a></li>
<li class="<?php echo $ary[1]; ?>"><a href="/news/">お知らせ</a></li>
<li class="<?php echo $ary[2]; ?>"><a href="/service/">サービス</a></li>
<li class="<?php echo $ary[3]; ?>"><a href="/company/">会社概要</a></li>
<li class="<?php echo $ary[4]; ?>"><a href="/contact/">お問い合わせ</a></li>
</ul>$ary[$pageNo]が配列になってて、currentの部分がクラス名。
<?php $ary[$pageNo] = 'current'; ?>各liのクラスに配列を挿入。[]に入る数字は順に増えていきます。
<?php echo $ary[0]; ?>">各ページでcurrentクラスを挿入する箇所を設定する
クラスを追加したいページのファイルで該当の$ary[]の数字を指定してあげる。
例えば、ホームだと、tpl_header.phpのホームを指定しているliでは、classに<?php echo $ary[0]; ?>を設定しているので、 ホームを表示させるページindex.phpでincludeの前に$pageNoに0を指定してあげる。
index.php (ホーム)
<div class="header">
<?php $pageNo = 0; include('tpl/tpl_header.php'); ?>
</div>サービスページだと、tpl_header.phpのサービスのメニュー(li)のclassに<?php echo $ary[2]; ?>を設定しているので、 $pageNoに2を指定してあげる。
service.php (サービス)
<div class="header">
<?php $pageNo = 2; include('tpl/tpl_header.php'); ?>
</div>まとめ : コーダー(マークアップエンジニア)はphpもやろう
ゴリゴリに開発出来なくても、コーディングに役立つことはいっぱいあるし、基本的なことはhtmlとcssを学ぶのとそんなに変わらないかなと。これからはコーダーと呼ばれているマークアップエンジニアもphpの知識はデフォルトで必要とされると思うので参考になればぜひ。
