특정 클래스 이름을 가진 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

:

.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 
    ); 

. 그러나 강력하게 추천합니다 페이지를 읽으면 어떻게 작동하는지, 어떻게 사용하고 언제 사용하는지 이해할 수 있습니다.

그냥 CSS와 함께이 작업을 수행하지 왜, 아래쪽 화살표를 추가하기 위해 추가 마크 업을 추가하는 경우