PHP：wp_nav_menu添加圖標

我該怎麼做：
我想用wp_nav_menu（）創建菜單並定製它的輸出html。在菜單的每個<li>項目裏面想在<i>鏈接<a>。PHP：wp_nav_menu添加圖標

我知道我可以在css中使用<li>項目的背景圖像來實現這一點，但我的目標是在導航中使用字體圖標。

我也知道爲了實現這個我們可以在wp_nav_menu()裏面使用walker功能或者使用wp_get_nav_menu_object()函數，但是我根本無法使它正確工作。

2013-08-05 vlad

我發現walker參數方法是一種很容易的複雜方式。看看這個：http://stackoverflow.com/questions/26079190/add-featured-image-to-wp-nav-menu-items/26079191 –

您是否嘗試過before或link_before選項？

before會在輸出<a>和link_before之前輸出<a>之前的文字。

http://codex.wordpress.org/Function_Reference/wp_nav_menu

$settings = array(
    'before' => '<i class="icon"></i>', 
    'link_before' => '<i class="icon"></i>' 
); 

wp_nav_menu($settings);

來源

2013-08-05 11:03:49 hungerstar

我'也試圖在我的菜單中添加圖標。

我試過before和link_before選項，但我沒有找到方法讓這些參數中的任何項目的變量。

我的目標是從Customize Menus

<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"> 
    <a title="social-facebook" href="http://facebook.com"> 
     <i class="fi-social-facebook"></i>Facebook Page 
    </a> 
</li> 

<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"> 
    <a title="social-google-plus+" href="http://plus.google.com"> 
     <i class="fi-social-google-plus"></i>Google+ Page 
    </a> 
</li>

得到使用Custom LinkTitle Attribute集下面的輸出，我還檢查其他的答案，但我不知道如何在Customize Menus的Custom Link添加縮略圖。

來源

2015-12-13 23:32:39 Freedux

使用wp walker函數並在其中插入wp menu description。更多的解釋如下 -

只是把這個代碼在主題functions.php文件：

class fluent_themes_custom_walker_nav_menu extends Walker_Nav_Menu { 

private $blog_sidebar_pos = ""; 
// 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(
     'dropdown-menu', 
     ($display_depth % 2 ? 'menu-odd' : 'menu-even'), 
     ($display_depth >=2 ? '' : ''), 
     '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, $wpdb; 
    $indent = ($depth > 0 ? str_repeat("\t", $depth) : ''); // code indent 

    // depth dependent classes 
    $depth_classes = array(
     ($depth == 0 ? '' : ''), //class for the top level menu which got sub-menu 
     ($depth >=1 ? '' : 'dropdown'), //class for the level-1 sub-menu which got level-2 sub-menu 
     ($depth >=2 ? 'sub-sub-menu-item' : ''), //class for the level-2 sub-menu which got level-3 sub-menu 
     ($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="' . ($depth > 0 ? '' : '') . '"'; 

    // Check if menu item is in main menu 
    $has_children = $wpdb->get_var("SELECT COUNT(meta_id) 
          FROM wp_postmeta 
          WHERE meta_key='_menu_item_menu_item_parent' 
          AND meta_value='".$item->ID."'"); 

    if ($depth == 0 && $has_children > 0 ) { 
     // These lines adds your custom class and attribute 
     $attributes .= ' class="dropdown-toggle"'; 
     $attributes .= ' data-toggle="dropdown"'; 
     $attributes .= ' data-hover="dropdown"'; 
     $attributes .= ' data-animations="fadeInUp"'; 
    } 
    $description = ! empty($item->description) ? '<i class="fa '.esc_attr($item->description).'" aria-hidden="true"></i>' : ''; 

    $item_output = $args->before; 
    $item_output .= '<a'. $attributes .'>'; 
    $item_output .= $description.$args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; //If you want the description to be output after <a> 
    //$item_output .= $description.$args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; //If you want the description to be output before </a> 

    // Add the caret if menu level is 0 
    if ($depth == 0 && $has_children > 0 ) { 
     $item_output .= ' &nbsp;<i class="fa fa-caret-down"></i>'; 
    } 

    $item_output .= '</a>'; 
    $item_output .= $args->after; 

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

看到這一行：

$description = ! empty($item->description) ? '<i class="fa '.esc_attr($item->description).'" aria-hidden="true"></i>' : '';

這行：

$item_output .= $description.$args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;

這裏你看$ item-> desctiption是一個變量。例如：如果您將fa-user作爲菜單的菜單項描述。上面一行的HTML輸出將是：

菜單的完整的HTML輸出將是這樣的：

<ul class="top-nav nav-right"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" data-animations="fadeInUp"> 
          <i class="fa fa-user" aria-hidden="true"></i>My Profile 
          <i class="fa fa-caret-down"></i> 
         </a> 
         <ul class="dropdown-menu "> 
          <li><a href="#"><i class="icon-bargraph"></i> Dashboard</a></li> 
          <li><a href="#"><i class="icon-gears"></i> Profile Setting</a></li> 
          <li><a href="#"><i class="icon-heart"></i> Questions</a></li> 
          <li><a href="#"><i class="icon-lock"></i> Logout</a></li> 
         </ul> 
        </li> 
       </ul>

然而，這裏是您的wp導航菜單代碼在你的頭。php文件或任何其他的主題文件：

wp_nav_menu(array('theme_location' => 'top_bar_login','container' => false,'container_id' => '','conatiner_class' => '','menu_class' => 'top-nav nav-right','echo' => true,'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>','depth' => 10, 'walker' => new fluent_themes_custom_walker_nav_menu));

如果你不能確定哪裏是WordPress的菜單的描述，或者您想用截圖的更多細節。你可以閱讀這篇文章Adding Different Icons To Different Items Of WP Nav Menu

來源

2017-01-24 21:54:52

PHP：wp_nav_menu添加圖標

回答

相關問題