web-dev-qa-db-ja.com

カスタムナビゲーションメニューでリストアイテムに多数のクラスが生成されるのはなぜですか？どうにかこれを管理できますか？

以下は一例です。現在のアイテムを除いて、各アイテムに3つのクラスが添付されています。現在のアイテムには6があります。

<ul id="menu-global-nav" class="sf-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-5 current_page_item menu-item-63"><a href="#">Home</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="#">Services</a>
   <ul class="sub-menu">
   <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39"><a href="#">Case Studies</a></li>
   <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38"><a href="#">Story Discovery</a></li>
   </ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="#">Company</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="#">Why Case Studies?</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="#">Case Study Showcase</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="#">Resources</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="#">Online Store</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="#">Contact Us</a></li>
</ul>
menus
6
Ray Gulick

私はこれで大多数に反対するつもりです:)

はい、それを削除することをお勧めします。個人的にはcurrent-xxx型のクラスだけを保持し、それらをactiveに置き換えます、およびactive-parent（アクティブな親項目または先祖項目用）.

どうして？

  • ウェブ上では、activeがアクティブメニュー項目の標準クラスになりました（それに加えて、WPの間でクラスの命名規則に矛盾がありますそれ自身のクラス名）.
  • あなたはより少ないCSSルールを書くようになる。節約した帯域幅はそれほど大きくないかもしれませんが、CSSファイルを読みやすくするためです。

更新されたコード

// for custom menus 
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes(array $classes, $item = null){

  // old classes to be replaced with 'active'
  $replacements = array(
    'current-menu-item',
    'current-menu-parent',
    'current-menu-ancestor',
    'current_page_item',
    'current_page_parent',
    'current_page_ancestor',
  );

  // if any of the classes above are present,
  // return an array with a single class ('active')
  return array_intersect($replacements, $classes) ? array('active') : array();
}

更新：このコードを使っている人のために、active-parentクラスはもう必要ありません（IE 6のサポートがまだ必要でない限り）。子セレクタ（>）を使用すると、アクティブな親とアクティブな子に任意の方法で効果的にスタイルを設定できます。

7
onetrickpony

現在のバージョンのWP（3.5.1）では動作しないため、One Trick Ponyのコードから変更しました。

WPとしてダッシュクラスが追加され、ページ階層クラスのアンダースコアバージョンとダッシュバージョンの両方が含まれるようになりました。

Diffがフィルタ処理されたリストの代わりにすべてのクラスを返すようにarray_diff - > array_intersectを変更しました。

// for custom menus
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes($classes, $item){

  // old class => new class
  $replacements = array(
    'current-menu-item'     => 'active',
    'current-menu-parent'   => 'active-parent',
    'current-menu-ancestor' => 'active-parent',
    'current_page_item'     => 'active',
    'current_page_parent'   => 'active-parent',
    'current_page_ancestor' => 'active-parent',
    'current-page-item'     => 'active',
    'current-page-parent'   => 'active-parent',
    'current-page-ancestor' => 'active-parent'
  );

  // do the replacements above
  $classes = strtr(implode(',', $classes), $replacements);
  $classes = explode(',', $classes);

  // remove any classes that are not present in the replacements array,
  // and return the result

  return array_unique(array_intersect(array_values($replacements), $classes));
}
4
Nicholas Turbanov

これらのクラスはすべて、IE6のためだけではなく、スーパーフィッシュのようなもののためにJavaScriptに便利にフックするためのものです。

また、current_page_itemのようなクラスがないと、ナビゲーション内で現在のページをハイライトすることはできません。

柔軟性が鍵です。すべてのクラス（リスト内の固有の項目に対する固有のクラス）を追加すると、エンドデザイナーはスタイルを柔軟に変更できます。しかし私は同意します、それはクラスのバットロードです。まともなHTMLプログラマーであるデザイナーは、はるかに少ないコードで同等のことを実行できます。

編集：私が何を意味するのかをより明確にし、失礼を意図するものではない

4
Dan Gayle

wp_nav_menu 関数を使用すると、コンテナとメニューの両方のIDとクラスを変更できます。しかしLI要素ではありません。

LI要素を構築している ソース を見てみると（start_el（）関数）;あなたはそれがフィルタnav_menu_css_classを使っているのを見ることができます。フィルタは与えられた（文字列の）配列を受け取り、それを使ってクラスタグを作成します。

注：コードに表示されているものから、空の配列を渡した場合。 WordpressはLI要素のclass属性を含みますが、空になります。

4
Ryan Gibbons

それを削減することはお勧めしません。はい、マークアップは肥大化しているように見えるかもしれませんが、これはのみの方法です。 、ＩＥ６。 IE6は本来複数のセレクターをサポートしていない（つまりli.menu-item.currentは壊れてデフォルトでli.currentになる）ので、気の利いたCSSを使っていてIE6で動作させたいのであればそれが良い十分ではないより多くの利用可能なクラスセレクタを持つこと。

したがって、実際には、リストをclass = "menu-item"に切り詰めることができます。複数の投稿タイプを持つメニューには、menu-item-type-post_type ...が必要です。もっと見やすいフィルタリングをしたい場合は、menu-item - ##クラスの恩恵を受けることになります。

覚えておいて、あなたのサイトの背後にある実際のコードを誰も見たことがないでしょう、そして複数のクラスを定義しても何も害を及ぼさないでしょう。

2
EAMann

@ Ray Gulick：私はダイビングをするのが嫌いですが、@ Dan Gale、@ EAMann、および@ Insanity5902に同意します。 「肥大化」は問題を引き起こすことはなく、デザイナーが多くの柔軟な方法でメニューをテーマ設定できるようにします。

私はなぜ「肥大」があなたを悩ませているのですか？私はそれがきれいではないことを知っていますが、誰も隣に誰も見ることができないでしょう。そのパフォーマンス上の問題が何百もの 他に最初に対処すること をしている場合、HTTPリクエストを減らして画像のサイズを削るなどの後者桁違いに多くの利点があります。

2
MikeSchinkel