ナビゲーション：子を持つ親ページにクラス属性を付与したい

  • 解決済 yamayama

    (@yamayama)


    13年、 3ヶ月前

    グローバルナビゲーションのメニューの表示について、子ページを持つ場合、親ページにクラス属性を付与したいのですが、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件中)
  • kz

    (@kz)

    13年、 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;
}

    nobita

    (@nobita)

    13年、 3ヶ月前

    こんにちは

    jQueryではどうですか？

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

    (@yamayama)

    13年、 3ヶ月前

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

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

    感謝感謝。

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