• 締切済み

2階層目の現在ページをナビで表示させるには

こんにちわ。 WORDPRESSでホームページを作成しております。 添付画像の様にグローバルナビで現在の位置を背景色緑で表示してるのですが、1階層目の時しか表示されません。 WORKSの2階層目である「コンサルティング」も同様にしたいのですが、2階層目も反映してくれるにはどの様なPHPを記述すればいいのでしょうか。 ---------PHP記述--------- <ul id="nav"> <li<?php if(is_home()){echo ' class="current_page_item"';} ?>> <a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('title_li=&depth=1'); ?> </ul> --------------------------- ---------CSS(CSSは関係ないと思いますが、一応)------------------ #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 110px; text-decoration: none; color: #333333; border-top: 1px solid #fff } #nav li a:hover { color: #00645C; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #00645C; border-right-color: #00645C; border-left-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; border-top: 1px solid #00645C } --------------------------- また、ページ内リンクをしたいのですが、絶対パスで単純にサーバーにアップされてるURLを記述する方法しかないのでしょうか。

  • PHP
  • 回答数1
  • ありがとう数0

みんなの回答

  • t_freak
  • ベストアンサー率70% (12/17)
回答No.1

例えばURLが http://www.exampe.com/works/hoge.html だった場合、 環境変数 $_SERVER['REQUEST_URI'] によってhttp://www.exampe.comより後ろの部分 /works/hoge.html を取得することができます。 $request_url = $_SERVER['REQUEST_URI']; そして、split関数で、“/”をセパレータとして配列に分割。 $a = split("/",$request_url); その結果取得した配列は print_r($a); ↓ Array ( [0] => [1] => works [2] => hoge.html ) ================================================ <ul id="nav"> <li<?php if(is_home()){echo ' class="current_page_item"';} ?>> <a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <li<?php if($a[1] == "works"){echo ' class="current_page_item"';} ?>> <a href="/works/" title="Works">Works</a></li> </ul> ================================================ wp_list_pages()ではそこまで細かい指定はできないように思われるので、こんな感じでやった方が確実かと。 ページ内リンクは、例えば http://www.exampe.com/works/hoge.html にリンクさせるのであれば <a href="/works/hoge.html">~</a> とやれば、どの階層からでも変わりなく目的のページにリンクさせることができます。

関連するQ&A

  • タブ式グローバルナビのブラウザ崩れの件で

    はじめまして、タブ形式のグローバルナビを作成しており、以下スタイルシートを適用しております。 IE7.6だとタブを触った時にcurrent_page_item aの該当ページが背景色緑なのですが、その下に1ピクセルの隙間が生じてしまいます。 添付ご参照ください。 FireFOXだと大丈夫なのです。 ブラウザの崩れなので、どの様に修正すればよいか不明です。 どなたか教えてください。 宜しくお願い致します。 ----html------- <ul id="nav"> <li><a href="#">TOP</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">ACCESS</a></li> </ul> ----------- ---------css----------- #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 100px; text-decoration: none; color: #333333; } #nav li a:hover { display: block; width: 100px; color: #00645C; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #00645C; border-right-color: #00645C; border-left-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; }

    • ベストアンサー
    • HTML
  • CSSで枠線の太さを変えるとき

    CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが1pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします(CSSは初心者程度のレベルです)。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================

    • ベストアンサー
    • CSS
  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またsafari、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 *html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="#”></div> </div> <span id="menu"><ul><li><img src="#" alt="#" width="200" height="100" /></li><li><img src="#" alt="#" width="200" height="100" /></li><li><img src=”#" alt="#" width="200" height="100" /></li><li><img src="#" alt="#" width="200" height="100" /></li></ul></span> <h2><img src="#" alt="#" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ~~ ~~ </div> <div id="footer"> <span align="center">&copy;#</span> </div> </div> </body> </html> *css body { font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:30px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • トップページの横幅を画面いっぱいに表示させたい。

    トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/xxx.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }

    • 締切済み
    • CSS
  • wordpressのnavi表示の件で

    wordpressでサイトを作成しており、グローバルナビ部分をphpで読み込んでおります。 該当ページになると、緑背景で該当ページと分かる様にしたいのですが、どの様にphpを設定すればいいのでしょうか? 参考ページは下記URLの該当ページの時に緑背景になってる「育児」部分の様にしたいです。 http://allabout.co.jp/children/ お手数ですが、どなたか教えてください。 ちなみに読み込んでるphp ------------------------- <ul> <li class="page_item"><a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('sort_column=menu_order & depth=1 & title_li='); ?> </ul> ------------------------- ちなみに読み込んでるスタイルシート ------------------------- #header ul { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; font-size:90% ; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #header li { text-align: center; float: left; line-height: 2em; } #header li a { display: block; width: 100px; text-decoration: none; color: #000000; } #header li a:hover { color: #FFFFFF; background-color: #00645C; } -------------------------

    • 締切済み
    • PHP
  • liタグのナビボタンがFirefoxで二重に表示。

    liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }

    • ベストアンサー
    • CSS
  • オンマウスにしたときのborder-colorの指定(CSS)

    スタイルシートで立体的に見せるボタンを作成しています。 .menu05 ul { list-style-type: none; line-height: 170%; } .menu05 li { border-top: solid 2px #ffffff; border-right: solid 2px #c0c0c0; border-bottom: solid 2px #c0c0c0; border-left: solid 2px #ffffff; display: block; float: left; } .menu05 a:hover { border-top: solid 2px #c0c0c0; border-right: solid 2px #c6c6c6; border-bottom: solid 2px #c6c6c6; border-left: solid 2px #c0c0c0; color:#ff0000; display: block; } で、 HTMLの記述は、 <div class="menu05"> <ul><li><a href="#">ご案内</a> <li><a href="#">プラン</a> <li><a href="#">プレゼント</a></ul> </div> です。 オンマウスにしてもborder-colorが変わりませんが、どこを修正したらよいでしょうか?

    • ベストアンサー
    • HTML
  • phpグローバルナビについて

    はじめまして、以下phpでグローバルナビを読み込んでますが、2行目のphp設定である、該当ページの時だけ.current_page_itemのスタイルシートを設定する宣言をしてるのですが、なぜかトップページ以外は正常に.current_page_itemの設定がされるのですが、トップページは.current_page_itemが反映されません。 <?php if(is_home()){echo 'class="current_page_item"';} ?>の 宣言がトップページにも反映させるにはどの様にすればいいのでしょうか? お手数ですが教えてください。 --------php設定---------------- <ul id="nav"> <li<?php if(is_home()){echo 'class="current_page_item"';} ?>> <a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('title_li=&depth=1'); ?> </ul> </div> ------------------------ ------------グローバルナビのスタイルシート------------ #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 100px; text-decoration: none; color: #000000; } #nav li a:hover { color: #FFFFFF; background-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; }

    • ベストアンサー
    • PHP
  • 縦型 レスポンシブ対応 多階層プルダウンウンリスト

    www.oct.ac.jp こちらの専門学校と同じ体裁のサイトを作りたいです。 左は固定(可変でも可)、右は可変 にしたい。 <HTML> <div class="content"> <div class="frame-left"> <div class="aaa"> <ul class="nav"> プルダウンリスト </ul> </div> </div> <div class="frame-right"> メイン記事内容 </div> </div><!--.content--> <CSS> ここでつまずきました。 .content{ display: -webkit-flex; display: flex;} .frame-left{ width:20%; } .frame-right{ width:80%; } .aaa { overflow: hidden; width: 750px; height: 300px; margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; } .nav { width: 150px; margin: 0; padding: 0; } .nav li { position: relative; width: 150px; height: 40px; } .nav > li { border-bottom: none; } .nav li:last-child { border-bottom: none; } .nav li:hover > ul > li { border-bottom: none; } .nav li > ul > li:last-child { border-bottom: none; } .nav li a { display: block; width: 150px; height: 40px; color: #fff; font-size: 14px; line-height: 2.8; padding: 0 5px; background: #9fb7d4; border-bottom: 1px solid #eee; box-sizing: border-box; text-decoration: none; transition: 0.5s; } .nav > li:hover > a {/*layer-1*/ color: orange; background: #afc6e2; transition: 0.5s; } .nav > li li:hover > a {/*layer-2*/ color: olive; background: #afc6e2; } .nav li:hover > ul > li { overflow: visible; top: -40px; left: 110px; height: 40px; } .nav li ul li { overflow: hidden; height: 0; left: 110px; list-style: none; transition: 0.2s; } .nav li ul li a { background: #9fb7d4; transition: 0.5s; } .nav li ul:before { position: absolute; content: ""; top: 14px; left: 140px; border: 5px solid transparent; border-left: 5px solid #fff; } 1)これだと2階層目が上から下までの全幅にならない 2)画面を縮小すると、プルダウンメニューがはみ出す width:auto; などにしてみましたが、上手くいきませんでした。 やり方を教えていただきたく、よろしくお願い致します。 ※できればCSSだけでなんとかしたいですが、無理ならJavaScriptや jQueryなどを使って実現したいです。

    • ベストアンサー
    • CSS
  • display:table;を多段表示させたい

    <style> .navi { display:table; } .navi li:nth-child(3n+1) { display:table-row; color:#F00; } .navi li { display:table-cell; width:50%; } /* 色づけ */ * {margin:0;padding:0;list-style:none;} .navi {width:600px;border-top:solid 1px #CCC;border-left:solid 1px #CCC;margin:0 auto;} .navi li {border-right:solid 1px #CCC;border-bottom:solid 1px #CCC;padding:5px;} </style> <ul class="navi"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> </ul> こうすると、1,4,7,10…番目の要素が改行されますが、 <li></li>に何も入れないようにしなければならず、 行き詰ってしまいました。 table要素で多段表示させることはできないのでしょうか?

    • 締切済み
    • CSS

専門家に質問してみよう