2016-01-22 69 views
0

我在wordpress博客中建立一個導航。的項目被顯示這樣的:WordPress的wp_nav_menu沃克:動態內容

enter image description here

的圖標是通過使用自舉類glyhicon-glyphiconname施加。我動態地添加類。對於PHP代碼:

function add_specific_menu_location_atts($atts, $item, $args) { 
    // check if the item is in the primary menu 
    if($args->theme_location == 'directentries') { 
     foreach($item as $key => $value) { 
      if($key == 'title') { 
      $catIcon = setCatIcon($value); 
      } 
     } 
     // add the desired attributes: 
     $atts['class'] = 'btn btn-primary btn-lg glyphicon glyphicon-'.$catIcon; 
    } 
    return $atts; 
} 
add_filter('nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3); 

$args = array(
     'theme_location' => 'directentries', 
     'depth'  => 1, 
     'container' => false, 
     'menu_class'  => 'nav', 
     'link_before' => '<br>', 
     //'link_before' => 'span class"glyphicon"', 
     'walker'  => '' 
    ); 
    wp_nav_menu($args); 

這裏的問題是,該鏈接文字的字體是glyhicon(當然),否則圖標將不適用於鏈接。所以:正確的方法是在初始化菜單時應用範圍使用鏈接 - 在參數之前。 但是我需要將我的動態類名應用於範圍。 我想我可以使用$ args參數我過濾器類中訪問link_before PARAM ..

當前的標記是這樣的: enter image description here 而我需要的是臨客是: enter image description here 沒有人有一個想法如何應用跨度和改變類?

+0

請加上烏爾導航項目的標記 – Trix

+0

請考慮upvoting有用的答案要感謝的時間和精力的人投資於你的問題 – Trix

+0

當然。這正是我爲什麼在你回答1-2天后回覆你的答案的原因。我也在回答中提到你。你認爲哪種額外的行動來表達我的感激之情? –

回答

0

雖然自定義導航沃克類可能是一個很好的(更好的?)解決方案作爲@Trix的建議,我想回答這個問題如何申請使用我的過濾器的跨度。這段代碼做到了:

function add_specific_menu_location_atts($atts, $item, $args) { 
    if($args->theme_location == 'directentries') { 
     foreach($item as $key => $value) { 
      if($key == 'title') { 
      $catIcon = setCatIcon($value); 
      } 
     } 
     foreach($args as $key => $value) { 
      if($key == 'link_before') { 
       $args->$key = '<span class="glyphicon glyphicon-'.$catIcon.'"></span><br>'; 
      } 
     } 
     // add the desired attributes: 
     $atts['class'] = 'btn btn-primary btn-lg'; 
    } 
    return $atts; 
} 
add_filter('nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3); 
1

1.首先將以下代碼添加到您的functions.php中。

class Nav_Walker_Nav_Menu extends Walker_Nav_Menu { 
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { 
     global $wp_query; 
     $indent = ($depth) ? str_repeat("\t", $depth) : ''; 

     $class_names = ''; 

     $classes = empty($item->classes) ? array() : (array) $item->classes; 
     $classes[] = 'menu-item-' . $item->ID; 

     $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args)); 
     $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : ''; 

     $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args); 
     $id = $id ? ' id="' . esc_attr($id) . '"' : ''; 

     $output .= $indent . '<li' . $id . $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; 

     if ('primary' == $args->theme_location) { 
      $submenus = 0 == $depth || 1 == $depth ? get_posts(array('post_type' => 'nav_menu_item', 'numberposts' => 1, 'meta_query' => array(array('key' => '_menu_item_menu_item_parent', 'value' => $item->ID, 'fields' => 'ids')))) : false; 
      $item_output .= ! empty($submenus) ? '<span class="glyphicon"></span>' : ''; 
     } 
     $item_output .= '</a>'; 
     $item_output .= $args->after; 

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

2.下你的header.php添加代碼,其中已安裝wp_nav_menu。

下面解釋的是代碼,所以它在這種情況下安裝新的自定義菜單將是Nav_Walker_Nav_Menu

<?php wp_nav_menu(array('container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Nav_Walker_Nav_Menu())); ?>