サポート » 使い方全般 » header.phpに書いたグローバルナビゲーションのアクション表示

  • お世話になります。

    訪問中のページ(各固定ページ)のナビボタンをユーザーが今どのページにいるかわかりやすいようにhover時と同じ状態にしたいのです。

    現在自作テーマにてブログではない、一般のサイトを作っています。header.phpにグローバルナビゲーションを

    <div id="nav">
     <ul id="gnav">
      <li id="toppage"><a href="topページの固定ページのパーマリンク"></a></li>
      <li id="basic"><a href="basicページの固定ページのパーマリンク"></a></li>
      <li id="good"><a href="goodページの固定ページのパーマリンク"></a></li>
      <li id="select"><a href="selectページの固定ページのパーマリンク"></a></li>
      <li id="blogs"><a href="blogsページの固定ページのパーマリンク"></a></li>
      <li id="shop"><a href="shopページの固定ページのパーマリンク"></a></li>
     </ul><!--gnav end-->
    </div><!--nav-->

    このように書き、外部cssにて

    #nav {width: 100%; height: 50px; background: #3f2911;}
    #gnav {width: 960px; height: 50px; overflow: hidden; margin: 0 auto;}
    #gnav li {float: left;}
    
    #toppage a {width: 113px; height: 50px; background: url(../img/off時ナビ画像1.jpg) no-repeat; display: block;}
    #toppage a:hover {background: url(../img/on時ナビ画像1.jpg) no-repeat;}
    #basic a {width: 188px; height: 50px;
    	background: url(../img/off時ナビ画像2.jpg) no-repeat; display: block;}
    #basic a:hover {background: url(../img/on時ナビ画像2.jpg) no-repeat;
    }

    ・・・
    といった感じでhover時の表記をonとoffの画像を用いて表しています。そしてテンプレートのpage.phpに

    `<?php get_header(); ?>
    <?php if(have_posts()):while(have_posts()):the_post(); ?>
    <?php remove_filter (‘the_content’, ‘wpautop’); ?>
    <?php the_content(); ?>
    <?php endwhile;endif; ?>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>`

    こんな感じで呼び出しています。

    ローカルの時はページごとにそのページ部分のナビボタンに<a class="here" href="そのページ>を付けて変えて、cssでは

    #toppage a:hover →#toppage a.here,#toppage a:hover

    と表記して訪問中のページだということがわかるようにナビボタンをページごとにhover状態に表していましたが、wordpressではheader.phpに書いたため、どのページにも訪問中はすべてoffの状態に表記されています。
    htmlとcssの知識はあるのですがphp初心者の為、どう表記していいかわかりません。

    まだ制作途中ですがよろしければご確認ください。
    http://www.oliveoilcafe.com

    ご指導のほど、よろしくお願いいたします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • wp_nav_menu()というワードプレス関数を使うといいです。

    http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_nav_menu

    class=”here” に相当する current-page-item,current-menu-item といったクラスが割り振らせますし、管理画面から、いつでもメニューを変更できます。

    現在のテーマで、管理画面 外観・メニューの項目は表示されていますか?

    トピック投稿者 napia37

    (@napia37)

    ありがとうございます。

    functions.phpに
    add_theme_support('menues');
    と書き込んであり、外観→メニューに入れます。

    現在headerにul liでnaviを表示していますがそこに

    <?php wp_nav_menu(); ?>

    を表記すればいいでしょうか?
    もしよろしければもう少し詳しい手順を教えていただけますか?

    Twentytwelveなどの標準テーマに切り替えて、何かメニューを作って表示させてみてください。

    うまくいったら、header.phpのwp_nav_menu()の部分をコピーして、ご自身のテーマに貼り付けて、メニューが表示されるかどうか確認し、表示できていれば、後はスタイルを調整してください。

    TwentyTwelveのwp_nav_menu()は45行目

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

    です

    成功したら、リンク先をよく読んで、更にカスタマイズする方法や、引数の意味などを、しっかり覚えれば、更に便利なものになります

    トピック投稿者 napia37

    (@napia37)

    nobitaさん、ご連絡が遅くなってスミマセン。。。
    サーバーの引っ越しと重なってしまい、とりあえず後回しになってしまいました。

    wordpressの引っ越しで只今いろいろな不具合が起きてしまって、とりあえずサイトをちゃんと見れるようにして、尚且つ、管理画面が正常になりましたら再びチャレンジいたします!
    アドバイス、ありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「header.phpに書いたグローバルナビゲーションのアクション表示」には新たに返信することはできません。