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

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

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

  2. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう

    前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょ…

  3. HTMLコーディング

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

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

  4. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Type編】

    最近、耳をふさがないイヤホンを見つけて衝動買いしてしまったワタクシ、ともさんです。こんにちわ。Bluetoothではないのに、まあまあ高め…

  5. HTMLコーディング

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

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

  6. HTMLコーディング

    【SVGことはじめ その1】SVG形式の画像ファイルを作って表示させてみよう

    このあいだ社長の大好きなラフロイグというウイスキーを飲ませてもらい独特の匂いに驚きのけぞったともさんです、こんにちは。みなさん、svgって知っ…

コメント

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

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

CAPTCHA


最近の記事

  1. WEBデザイン

    「いらすとや」の素材を使ってマンガを作成しよう!
  2. レポート

    HARIO V60がきた!
  3. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法
  4. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランク…
  5. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム…
PAGE TOP