PHP：wp_nav_menu 添加图标

Posted 2023-03-05

【中文标题】PHP：wp_nav_menu 添加图标

【英文标题】：PHP : wp_nav_menu adding icons

【发布时间】：2013-08-06 00:06:30

【问题描述】：

我该怎么做： 我想使用 wp_nav_menu() 创建菜单并稍微自定义它的输出 html。我想将< i > 放入链接< a > 中的每个< li > 菜单项中。

我知道我可以在 css 中使用 < li > 项目的背景图像来完成此操作，但我的目标是在导航中使用字体图标。

我也知道，为了实现这一点，我们可以在 wp_nav_menu() 或使用 wp_get_nav_menu_object() 函数中使用 walker 函数，但我根本无法让它正常工作。

【问题讨论】：

我发现 walker 参数方法对于如此简单的事情来说是一种复杂的方式。看看这个：***.com/questions/26079190/…

【参考方案1】：

将代码粘贴到您输出导航的页面

<?php
            wp_nav_menu(
                            array(
                                     'theme_location' => 'primary',
                                      'container' => false,
                                      'walker' => new my_nav_walker()
                                   )
                                 );
  ?>

然后在functions.php中调用walker.php

require get_template_directory().'/inc/walker.php';

从 wp-includes 文件夹中复制 class-walker-nav-menu.php 中的类 Walker_Nav_Menu 将 Walker_Nav_Menu 类更改为 my_nav_walker

然后在 my_nav_walker 类的函数 start_el 中 创建一个名为 $description 的变量：

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

将此代码粘贴到 my_nav_walker 类的 start_el 函数中

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $description.$args->link_before . $title . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;

如果您在菜单项的描述中添加fa-user，则后端用户图标出现在li内的href标记之间

【参考方案2】：

使用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>

但是，这里是您在 header.php 文件或任何其他主题文件中的 wp nav 菜单代码：

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

【参考方案3】：

我也在尝试在我的菜单中添加图标。

我尝试了before 和link_before 选项，但我没有找到在这些参数中获取任何项目变量的方法。

我的目标是使用来自Customize Menus 的Custom Link 中设置的Title Attribute 获得以下输出

<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>

我也检查了其他答案，但我不知道如何在Customize Menus 的Custom Link 中添加缩略图。

【参考方案4】：

您是否尝试过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 );