Wordpress導航錨定標籤的自定義類

我目前使用的是具有自定義菜單的主題。我有一個包含6個鏈接的導航。我想要做的是將不同的背景圖像添加到導航列表項內的定位標記。如果我使用內置的CSS自定義類選項Wordpress的導航項目，自定義類被添加到列表項，這不是我需要的。Wordpress導航錨定標籤的自定義類

我需要的是爲每個導航項目的錨標籤添加不同的類。我嘗試從列表項中移除$ class_names變量並將其添加到錨標記，但導航的活動狀態和懸停狀態停止工作。

<li><a href="#" class="icon white"></a></li> 
<li><a href="#" class="icon black"></a></li> 
<li><a href="#" class="icon yellow"></a></li> 
<li><a href="#" class="icon blue"></a></li> 
<li><a href="#" class="icon red"></a></li> 
<li><a href="#" class="icon green"></a></li> 

class Maha_Mega_Menu extends Walker_Nav_Menu { 

function start_lvl(&$output, $depth = 0, $args = array()) { 
    $indent = str_repeat("\t", $depth); 
    $output .= "\n$indent<div class=\"nav-sub-menus\"><ul>\n"; 
} 

function end_lvl(&$output, $depth = 0, $args = array()) { 
    $indent = str_repeat("\t", $depth); 
    $output .= "$indent</ul></div>\n"; 
} 

function start_el(&$output, $item, $depth = 0, $args = array(), $current_object_id = 0) { 

    global $wp_query; 
    $cat = $item->object_id; 
    $indent = ($depth) ? str_repeat("\t", $depth) : ''; 
    $class_names = $value = ''; 
    $classes = empty($item->classes) ? array() : (array) $item->classes; 
    $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item)); 
    $class_names = ' class="' . esc_attr($class_names) . '"'; 
    $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; 

    $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  ) .'"' : ''; 

    $item_output = $args->before; 
    $item_output .= '<a'. $attributes .'>'; 
    $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; 
    $item_output .= '</a>'; 
    $children = get_posts(array(
     'post_type' => 'nav_menu_item', 
     'nopaging' => true, 
     'numberposts' => 1, 
     'meta_key' => '_menu_item_menu_item_parent', 
     'meta_value' => $item->ID 
    )); 
    // echo $depth.' x '; 
    if (! empty($children) || ! get_field('menu_latest_posts', 'category_' . $cat) || get_field('menu_latest_posts', 'category_' . $cat) == 'latest_posts_on') { 
     // if ($depth == 0 && $item->object == 'category' || $item->object == 'page') { 
     if ($depth == 0 && $item->object == 'category' || $item->object == 'page' || $item->object == 'custom') { 
      $item_output .= '<div class="nav-sub-wrap container"><div class="nsw row">'; 
     } 
    } 
    $item_output .= $args->after;

來源

2014-05-01 EddieBlaine

爲此，您可以使用CSS itself-

<style> 
    li:nth-child(1) a { 
     background-image: url('//imageurl'); 
    } 
    li:nth-child(2) a { 
     background-image: url('//imageurl'); 
    } 
    ... 
    ... 

    li:nth-child(6) a { 
     background-image: url('//imageurl'); 
    } 
</style>

來源

2014-05-01 21:42:06 Neil

我不是在尋找一個只有CSS的方法.. – EddieBlaine

Wordpress導航錨定標籤的自定義類

回答

相關問題