HTMLコーディング

【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法

先日会社の人たちと初登山へ行ってきましたが3回ほど盛大にコケてオシリが痛くなったともさんです、こんにちわ。
・・・いや、登山楽しかったですよ。次回は靴を買い直します。はい。

さて、今回はPHPです。
どうしても、サイドメニューの内容をページ毎に変えたくなって調べてみました。
ちなみに、wordpressではございません、あしからず。

状況を整理します

まず、メニューを見てみましょう。

<ul>
<li><a href="aboutus.php">会社案内</a></li>
<li><a href="service.php">事業内容</a></li>
<li><a href="works/">案件実績</a></li>
<li><a href="recruit.php">採用情報</a></li>
<li><a href="contact/">お問い合わせ</a></li>
</ul>

よくあるタイプですね。
「案件実績」と「お問い合わせ」は、フォルダ内のindexファイルにリンクしてます。

やりたいこと

「会社案内」や「採用情報」などのページ内に移動すると、サイドメニューを表示させるようにします。
さらに、ページ内ではそれぞれのメニューを表示させたいとしましょう。

例えば、「会社案内」では以下のメニューを。

<ul>
<li><a href="aboutus.php#01">会社概要</a></li>
<li><a href="aboutus.php#02">代表メッセージ</a></li>
<li><a href="aboutus.php#03">アクセスマップ</a></li>
<li><a href="aboutus.php#04">関連企業</a></li>
<li><a href="aboutus.php#05">採用情報</a></li>
<li><a href="contact">お問い合わせ</a></li>
</ul>

「採用情報」では以下のメニューを。

<ul>
<li><a href="recruit.php#01">採用情報</a></li>
<li><a href="recruit.php#02">募集要項</a></li>
<li><a href="recruit.php#03">先輩社長からのメッセージ</a></li>
<li><a href="recruit.php#04">選考方法</a></li>
</ul>

これは、htmlでは解決できませんね。
動的に処理する必要があります。
ここでPHPの出番です。

やったこと

前提として、index.phpにはconfig.phpを読み込ませています。
config.phpというのは、phpの処理などをまとめて指定している設定ファイルです。

分岐条件

分岐条件は、ファイル名とします。

aboutus.phpに行くと、「会社案内」のサイドメニューを表示。
recruit.phpに行くと、「採用情報」のサイドメニューを表示。

このような形です。

まずはconfig.phpに設定を書き込む

config.php

//ファイル名取得
$dir = basename($_SERVER['SCRIPT_NAME']);

$dirという変数をたてて、その中にbasename($_SERVER[‘SCRIPT_NAME’])を格納します。
$_SERVER[‘SCRIPT_NAME’]で、現在のスクリプトのパスを返してくれます。
今、このページにいますよーって教えるやつです。
basenameでくくると、読み込んでいるスクリプトのパスからファイル名だけをひっぱってきてくれます。
なんて便利。

でも、ファイル名だけをひっぱってきてくれるというのは、えてして困ったことにもなるわけで。

すべてのページがファイル名でリンクされているわけではない場合は、この方法だけでは乗り越えられないんですよね。
フォルダへリンクしている場合(正しくは、フォルダ内のindex.phpにリンクしている場合)、ファイル名だけをひっぱられると解決できません。

そこで、以下の設定も書き込みます。

//親ディレクトリ取得
$thisdir = basename(dirname($_SERVER['SCRIPT_NAME']));

$thisdirという変数をたてて、その中にbasename(dirname($_SERVER[‘SCRIPT_NAME’]))を格納します。
さっきと比べてみると、新たにdirnameというやつが加わってます。
この子は、いま見ているページの親ディレクトリを返してくれます。
便利すぎて泣きそう。

これで分岐条件としてはすべてです。

分岐を書いていきます

では、サイドメニューを表示させる場所に分岐を書いていきましょうか。

<aside id="sidebar">
<dl>
<?php if($dir == "aboutus.php"){/* ---[aboutus.phpの時に以下を表示]--- */ ?>
<dt>会社案内</dt>
<dd>
<ul>
<li><a href="aboutus.php#01">会社概要</a></li>
<li><a href="aboutus.php#02">代表メッセージ</a></li>
<li><a href="aboutus.php#03">アクセスマップ</a></li>
<li><a href="aboutus.php#04">関連企業</a></li>
<li><a href="aboutus.php#05">採用情報</a></li>
<li><a href="contact">お問い合わせ</a></li>
</ul>
</dd>
<?php }else if($dir == "service.php"){/* ---[service.phpの時に以下を表示]--- */ ?>
<dt>事業内容</dt>
<dd>
<ul>
<li><a href="#">事業内容</a></li>
</ul>
</dd>
<?php }else if($thisdir == "works"){/* ---[worksの時に以下を表示]--- */ ?>
<dt>案件実績</dt>
<dd>
<ul>
<li><a href="works/detail.php#01">飲食店</a></li>
<li><a href="works/detail.php#02">アパレル</a></li>
<li><a href="works/detail.php#03">美容室</a></li>
<li><a href="works/detail.php#04">その他ビジネス</a></li>
</ul>
</dd>
<?php }else if($dir == "recruit.php"){/* ---[recruit.phpの時に以下を表示]--- */ ?>
<dt>採用情報</dt>
<dd>
<ul>
<li><a href="recruit.php#01">採用情報</a></li>
<li><a href="recruit.php#02">募集要項</a></li>
<li><a href="recruit.php#03">先輩社長からのメッセージ</a></li>
<li><a href="recruit.php#04">選考方法</a></li>
</ul>
</dd>
<?php }/* ---分岐終了--- */ ?>
</dl>
</aside><!-- /sidebar -->

wordpressとかでもよく見るifelse ifですー
見ているページのファイル名で分岐してます。

aboutus.phpの時にはコレ、service.phpの時にはコレ、みたいな感じです。

フォルダの時は$thisdirを使ってます。
分岐条件が違うのでね(; ・`д・´)

これで、意図したとおりにサイドメニューが表示されるようになりましたー(`・ω・´)

まとめ

さて、今回PHPを記事にしたわけなんですけど、私はプログラムはからっきしダメです。
フルスクラッチで組むなど夢のまた夢・・・

wordpressのおかげで、ある程度読めるようにはなりましたけども。
それだけですね。

でも、プログラムできたらきっと楽しいんですよね。
がんばります。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    高機能で簡単!レスポンシブ対応のjQueryスライダー「bxSlider」を設置してみよう

    もう年の瀬ですね。当社の営業日も実質今日で終わりです。あとは大掃除を残すのみ(/・ω・)/そんな中でのこんなブログ記事です。仕事熱…

  2. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

    今回はWebフォント「Font Awesome」の使い方を紹介します。Font Awesomeとは、Web上でアイコンをフォントとして利用できるW…

  3. HTMLコーディング

    社内勉強会を行いました。

    こんにちわ、入社2ヶ月のともさんです。さて、去る9月16日(金)19:00~社内勉強会を行いました。テイクフォーでは初の勉強会となります。…

  4. HTMLコーディング

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの対処法

    大阪はすっきりしない天気が続いてロードバイクに乗れずテンション下がりまくりのともさんですこんにちは。さて、前回に引き続き今回もEC-CUBE関…

  5. HTMLコーディング

    棒グラフをcssで表現してみよう

    何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。先日の案件で、サイト内に棒グ…

  6. HTMLコーディング

    EC-CUBE3をローカル環境へインストールしてみよう

    寒い!((((;゚Д゚))))寒すぎてロードバイク諦めかけてるともさんです、こんにちわ。EC-CUBE3のテスト環境を作りたくて、どこに作…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    色相環でグラデーションを描いてみよう
  2. ガジェット

    スマートフォン用VRゴーグルを買ったのでレビューします!
  3. HTMLコーディング

    cssでグラデーションを描いてみよう
  4. ガジェット

    オススメのモバイルバッテリーを紹介します
  5. お知らせ

    【2018年】新年あけましておめでとうございます
PAGE TOP