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コーディング

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

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

  2. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう

    はじめまして、制作チームキャップの徳永です。今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったの…

  3. HTMLコーディング

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

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

  4. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法

    テイクフォーにジョインして早3ヶ月が経ちましたがあきらか飲む回数が増えてるともさんですこんにちは。・・・前はそんな、毎週飲むとか、なかったンデスヨ…

  5. HTMLコーディング

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

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

  6. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう

    皆様あけおめです。ともさんです。あけおめ・・・もう2月ですよ。どうしましょう。なにをしてたんでしょうか。というわけで、今回もはりきってゴー…

コメント

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

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

CAPTCHA


最近の記事

  1. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編…
  2. HTMLコーディング

    社内勉強会を行いました。
  3. WEB集客

    誰でもわかるFacebook広告の仕組みについて
  4. WEBデザイン

    WordPressを日本語化させよう!WP Multibyte Patchって?…
  5. WEBデザイン

    SNS共有ボタンを設置しよう!WP Social Bookmarking Lig…
PAGE TOP