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

wordpress.stackexchange https://wordpress.stackexchange.com/questions/23

  •  16-10-2019
  •  | 
  •  

質問

以下は例です。各アイテムに添付された3つのクラス。現在のアイテムを除く。

<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>
役に立ちましたか？

解決

私はこれについて過半数に反対します:)

はい、それを取り除くのは良い考えかもしれません。個人的には私だけを守っています current-xxx クラスを入力して、それらを置き換えます active, 、 と active-parent （アクティブな親または祖先のアイテムの場合）。

なんで？

  • ウェブの周り、 アクティブ アクティブなメニュー項目の標準クラスになりました（その上に、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サポートが必要な場合）。子セレクターを使用する（>）あなたはあなたが望むどんな方法でもアクティブな親とアクティブな子供を効果的にスタイリングすることができます。

他のヒント

wp_nav_menu 関数により、コンテナとメニューの両方のIDとクラスを変更する機能が得られます。しかし、LI要素ではありません。

を見てみると ソース Li Elements（start_el（）function）を構築している場合。フィルターnav_menu_css_classを使用していることがわかります。フィルターは、（文字列の）配列を使用し、それを使用してクラスタグを作成します。

注：コードに表示されているものから、空の配列を渡すと。 WordPressには、LI要素のクラス属性が引き続き含まれますが、空になります。

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

また、などのクラスがありません current_page_item, 、ナビゲーション内の現在のページを強調表示することはできません。

柔軟性が重要です。リスト内のユニークなアイテムのすべてのクラスを追加し、エンドデザイナーにスタイリングに多くの柔軟性を与えます。しかし、私は同意します、それはクラスのバットロードです。まともなHTMLプログラマーであるデザイナーは、コードがはるかに少ないと同等のことを行うことができます。

編集：私が何を意味するのかをより明確にしました、意図した無礼はありません

WP（3.5.1）の現在のバージョンでは、1つのTrick Ponyのコードから修正されました。

WPには、ページ階層クラスのアンダースコアバージョンと破線バージョンの両方が含まれるため、破線のクラスを追加しました。

array_diffを変更 - > 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));
}

私はそれを減らすことをお勧めしません。はい、マークアップは肥大化しているように見えるかもしれませんが、これは それだけ たとえば、IE6でサイトを良く見せたい場合は、スタイリングを本当に絞り込むことができます。 IE6は複数のセレクターをネイティブにサポートしていないことに留意してください（つまり、li.menu-item.currentは壊れてデフォルトでli.currentにデフォルトです）。十分ではないよりも多くのクラスセレクターを利用できるようにします。

だから、実際には、あなた できる リストをclass = "menu-item"にペアリングしてください...しかし、複数の投稿タイプのメニューがある場合は、メニュー-ITEM-Type-post_typeが必要です...よりファンシーフィルタリングを行いたい場合は、メニューアイテム - ##クラスの恩恵を受けることができます。

誰もあなたのサイトの背後にある実際のコードを見ることはないでしょう、そして、複数のクラスを定義することは何も傷つけないでしょう。

@Ray Gulick：私は飛び込むのが嫌いですが、@Dan Gale、@eamann、 @Insanity5902に同意します。 「肥大化」は、かつての問題を引き起こすことはなく、デザイナーが多くの柔軟な方法でメニューをテーマにすることができます。

なぜ「膨らんだ」があなたを悩ませるのか興味がありますか？私はそれがきれいではないことを知っていますが、隣に誰もそれを見ることはありません。数百のパフォーマンスの懸念の場合 最初に対処する他のこと HTTPリクエストを減らしたり、画像のサイズをシェービングするなど、後者のサイズはおそらく数桁の利益をもたらすでしょう。

ライセンス： CC-BY-SA と 帰属
所属していません wordpress.stackexchange
scroll top