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

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

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

  2. HTMLコーディング

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

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

  3. HTMLコーディング

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

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

  4. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールしてみよう

    あけましておめでとうございます。今年もよろしくお願いいたします。2018年一発目の記事は、WordPressです(≧▽≦)WordPr…

  5. HTMLコーディング

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

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

  6. HTMLコーディング

    EC-CUBE3でテンプレート適用後にパスが通らなくなってしまったときの対処法

    こんにちわ、ともさんです。みなさん元気ですかそうですか。さて、この前業務でEC-CUBEを触っていた時にとんでもないことが起こりました。…

コメント

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

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

CAPTCHA


最近の記事

  1. WEBデザイン

    よく見る方眼紙のようなパターンの作り方
  2. WEBデザイン

    Photoshopで水彩風画像を作成してみよう
  3. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールして…
  4. WEBデザイン

    WordPressを日本語化させよう!WP Multibyte Patchって?…
  5. WEB集客

    「いらすとや」について考察してみました
PAGE TOP