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

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

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

  2. HTMLコーディング

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

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

  3. HTMLコーディング

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

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

  4. HTMLコーディング

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

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

  5. HTMLコーディング

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

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

  6. HTMLコーディング

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. レポート

    さくさく進める勉強会準備
  2. WEBデザイン

    SNS共有ボタンを設置しよう!WP Social Bookmarking Lig…
  3. WEBデザイン

    【Photoshop】ボタントレース方法
  4. コピーライティング

    キャッチコピーに役立つキュレーションメディア5選!
  5. WEB集客

    「Googleトレンド」を使いこなして人気のキーワードと流行を把握しよう
PAGE TOP