web-dev-qa-db-ja.com

子供がいるメインメニューのリンクにクラス（矢印）を追加する？

Appearance> Menusツリーに子を持つ2番目、3番目、4番目、その他のレベルの項目に異なるクラスを追加することが可能かどうか疑問に思いますか。

それが私がメニューを呼ぶ方法です：

 <?php $menu_args = array(
    'container'       => '', 
    'menu_class'      => '', 
    'menu_id'         => 'my-menu',
    'walker'          => new Description_Walker);

    wp_nav_menu($menu_args );   
 ?>

すべてのリンクが<li id="menu-item-3230">のように異なるIDを所有していることは知っていますが、解決策を動的にしたいので、変更するたびにコードを編集する必要はありません。最も簡単な方法は、これらの項目にクラスを追加することですが、どうすればいいのでしょうか。

enter image description here

menusjavascriptwalker
2
Wordpressor

これを行うには2つの方法があります。

  • Javascript JQueryを使用して、クラス「サブメニュー」の<li>の子を持つ<ul>を選択したり、コンテンツを挿入したり、CSSスタイルを追加したりしてスタイルを設定できます。例えば、$('.sub-menu').parent().addClass('myclass')

  • PHP、新しいウォーカー関数wp-includes/nav-menu-template.phpから（およそ109行目まで）コードをテーマのfunctions.phpにコピーして、新しいウォーカーを作成します。このWalkerをメニュー呼び出しの引数として渡します。修正されたWalkerでは、サブメニューレベルの項目の矢印に<span>を挿入します。

    function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<span class=\"right-arrow\">&rarr;</span><ul class=\"sub-menu\">\n";
}

    これで小さな矢印が追加され、サブメニューのリスト項目の直前にスタイルを設定できます。

3
Jamie

メニューウォーカーを拡張し、サブメニューを持つアイテムに "has_children"クラスを追加することができます。

class My_Walker_Nav_Menu extends Walker_Nav_Menu{
  public function display_element($el, &$children, $max_depth, $depth = 0, $args, &$output){
    $id = $this->db_fields['id'];    

    if(isset($children[$el->$id]))
      $el->classes[] = 'has_children';    

    parent::display_element($el, $children, $max_depth, $depth, $args, $output);
  }
}

そしてクラスのインスタンスを wp_nav_menu() の引数として渡します。

wp_nav_menu(array(
  'theme_location'  => 'whatever',
  'walker'          => new My_Walker_Nav_Menu(),
));

次に、Philipが投稿したように、矢印をCSSで追加します。

li.has_children > a:after { content: " →"; }
5
onetrickpony

1つの解決策は、管理者でメニューを作成/編集しているときにカスタムCSSクラスを追加することです。 CSSオプションボックスがまだ表示されていない場合は、メニュー管理ページの画面オプションに移動してチェックマークを付けます。

3
SarahA

cssでは、 contentプロパティ を使うこともできます。

#div-id ul li a:after { content: " →"; }
2
Philip