サポート » 使い方全般 » ナビゲーション:子を持つ親ページにクラス属性を付与したい

  • 解決済 yamayama

    (@yamayama)


    グローバルナビゲーションのメニューの表示について、子ページを持つ場合、親ページにクラス属性を付与したいのですが、wp_list_pages()の仕様をググってみたものの使用例がなかったので、ご質問です。

    <ul class="navi">
    <li class="home"><a href="/">HOME</a></li>
    <li class="page_item"><a href="/">親ページ</a>
    	<ul class="children">
    		<li class="page_item"><a href="/">子ページ</a></li>
    		<li class="page_item"><a href="/">子ページ</a>
    			<ul class="children">
    			<li class="page_item"><a href="/">孫ページ</a></li>
    			</ul>
    		</li>
    	</ul>
    </li>
    <li class="page_item"><a href="/">親ページ</a>
    	<ul class="children">
    		<li class="page_item"><a href="/">子ページ</a></li>
    		<li class="page_item"><a href="/">子ページ</a></li>
    	</ul>
    </li>
    <li class="page_item"><a href="/">親ページ</a></li>
    <li class="page_item"><a href="/">親ページ</a></li>
    </ul>

    wp_list_pagesを展開すると上記になります。
    それを下記のように変更したいのですが…。

    <ul class="navi">
    <li class="home"><a href="/">HOME</a></li>
    <li class="page_item <blockquote>child</blockquote>"><a href="/">親ページ</a>
    	<ul class="children">
    		<li class="page_item"><a href="/">子ページ</a></li>
    		<li class="page_item"><a href="/">子ページ</a>
    			<ul class="children">
    			<li class="page_item"><a href="/">孫ページ</a></li>
    			</ul>
    		</li>
    	</ul>
    </li>
    <li class="page_item <blockquote>child</blockquote>"><a href="/">親ページ</a>
    	<ul class="children">
    		<li class="page_item"><a href="/">子ページ</a></li>
    		<li class="page_item"><a href="/">子ページ</a></li>
    	</ul>
    </li>
    <li class="page_item"><a href="/">親ページ</a></li>
    <li class="page_item"><a href="/">親ページ</a></li>
    </ul>

    ご教唆いただければと思います。よろしくお願いします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • #未検証

    テーマフォルダの functions.php に以下を追加:

    add_filter( 'page_css_class', 'my_page_css_class', 10, 2 );
    function my_page_css_class( $css_class, $page ) {
      if ( $page->post_parent ) {
        $css_class[] = 'parent'; // 追加したいクラス名
      }
      return $css_class;
    }

    こんにちは

    jQueryではどうですか?

    <script type="text/javascript">
    	  jQuery(function() {
    	   jQuery(".page_item").has(".children").addClass("papamama");
    	  });
    	</script>
    トピック投稿者 yamayama

    (@yamayama)

    出来ました。kz様、nobita様ありがとうございます。
    functions.phpでは使えませんでした。(ソースが悪いのではなく、たぶんいろいろといじくっている為)
    kz様すいません。

    .has()は知らなかったので、こんな方法があったのかと感心しています。
    javascriptで行こうと思います。

    感謝感謝。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「ナビゲーション:子を持つ親ページにクラス属性を付与したい」には新たに返信することはできません。