將內容添加到特定類名稱的DIV

Question

我試圖改變Wordpress <?php wp_nav_menu(array('theme_location' => 'primary')); ?>的默認輸出。我希望做什麼：有子菜單看起來像這樣

頁：

<li class="menu-item-has-children"> 
    <a href="#">Page with Submenu</a> 
    <ul class="sub-menu"> 
    <li class="menu-item-has-children"> 
    <a href="#">Level 1 Submenu Page</a> 
     <ul class="sub-menu"> 
     <li><a href="#">Level 2 Submenu Page</a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 

我需要什麼樣子：

<li class="menu-item-has-children"> 
    <a href="#">Page with Submenu <i class="fa fa-caret-down"></i></a> 
    <ul class="sub-menu"> 
    <li class="menu-item-has-children"> 
    <a href="#">Level 1 Submenu Page <i class="fa fa-angle-right"></i></a> 
     <ul class="sub-menu"> 
     <li><a href="#">Level 2 Submenu Page</a></li> 
     </ul> 
    </li> 
    </ul> 
</li> 

我如何可以做到這一點的任何IDEEA CSS，jQuery或PHP？

Answer 1

如果您添加額外的標記只是爲了增加一個向下的箭頭，爲什麼不使用CSS這樣做：

.menu-item-has-children > a { 
    padding-right:20px; 
    position:relative; 
} 
.menu-item-has-children > a:after { 
    content:""; 
    border:5px solid transparent; 
    border-top-color:grey; 
    position:absolute; 
    right:0; 
    top:50%; 
} 

這裏有一個JSfiddle。

Answer 2

要回答您的具體問題：您需要PHP。然後是一些CSS樣式。

更具體地說，您需要使用Custom Walker。使用自定義步行者，你可以告訴WordPress使用不同的菜單樣式，然後使用另一種子菜單樣式等，這是你的確切情況。你甚至有一個例子代碼中有，這我下面粘貼：

class themeslug_walker_nav_menu extends Walker_Nav_Menu { 

// add classes to ul sub-menus 
function start_lvl(&$output, $depth = 0, $args = array()) { 
    // depth dependent classes 
    $indent = ($depth > 0 ? str_repeat("\t", $depth) : ''); // code indent 
    $display_depth = ($depth + 1); // because it counts the first submenu as 0 
    $classes = array(
     'sub-menu', 
     ($display_depth % 2 ? 'menu-odd' : 'menu-even'), 
     ($display_depth >=2 ? 'sub-sub-menu' : ''), 
     'menu-depth-' . $display_depth 
     ); 
    $class_names = implode(' ', $classes); 

    // build html 
    $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n"; 
} 

// add main/sub classes to li's and links 
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0) { 
    global $wp_query; 
    $indent = ($depth > 0 ? str_repeat("\t", $depth) : ''); // code indent 

    // depth dependent classes 
    $depth_classes = array(
     ($depth == 0 ? 'main-menu-item' : 'sub-menu-item'), 
     ($depth >=2 ? 'sub-sub-menu-item' : ''), 
     ($depth % 2 ? 'menu-item-odd' : 'menu-item-even'), 
     'menu-item-depth-' . $depth 
    ); 
    $depth_class_names = esc_attr(implode(' ', $depth_classes)); 

    // passed classes 
    $classes = empty($item->classes) ? array() : (array) $item->classes; 
    $class_names = esc_attr(implode(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item))); 

    // build html 
    $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">'; 

    // link attributes 
    $attributes = ! empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) .'"' : ''; 
    $attributes .= ! empty($item->target)  ? ' target="' . esc_attr($item->target ) .'"' : ''; 
    $attributes .= ! empty($item->xfn)  ? ' rel="' . esc_attr($item->xfn  ) .'"' : ''; 
    $attributes .= ! empty($item->url)  ? ' href="' . esc_attr($item->url  ) .'"' : ''; 
    $attributes .= ' class="menu-link ' . ($depth > 0 ? 'sub-menu-link' : 'main-menu-link') . '"'; 

    $item_output = sprintf('%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', 
     $args->before, 
     $attributes, 
     $args->link_before, 
     apply_filters('the_title', $item->title, $item->ID), 
     $args->link_after, 
     $args->after 
    ); 

    // build html 
    $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
} 
} 

它看起來你知道一些編碼，所以我不會延長這一點，但它很容易地看到你只需要修改這個：

$classes = array(
     'sub-menu', 
     ($display_depth % 2 ? 'menu-odd' : 'menu-even'), 
     ($display_depth >=2 ? 'sub-sub-menu' : ''), 
     'menu-depth-' . $display_depth 
     ); 

和/或

// depth dependent classes 
    $depth_classes = array(
     ($depth == 0 ? 'main-menu-item' : 'sub-menu-item'), 
     ($depth >=2 ? 'sub-sub-menu-item' : ''), 
     ($depth % 2 ? 'menu-item-odd' : 'menu-item-even'), 
     'menu-item-depth-' . $depth 
    ); 

根據您的需要。然而，我強烈推薦您閱讀該頁面，以便了解其工作原理，使用方法以及何時使用它。