这只是另一个普通菜单。您可以在菜单中使用CSS类来添加自定义CSSmain-menu-item-before-divider 对于在CSS类字段中充当分隔符的菜单项，可在下激活Screen Options 菜单页顶部的选项卡。您可以为菜单的font awesome类创建另一个自定义字段。代码形式修改很少here.

<?php
/**
 * Proof of concept for how to add new fields to nav_menu_item posts in the WordPress menu editor.
 * @author Weston Ruter (@westonruter), X-Team
 */

add_action( \'init\', array( \'XTeam_Nav_Menu_Item_Custom_Fields\', \'setup\' ) );

class XTeam_Nav_Menu_Item_Custom_Fields {
    static $options = array(
        \'item_tpl\' => \'
            <p class="additional-menu-field-{name} description description-thin">
                <label for="edit-menu-item-{name}-{id}">
                    {label}<br>
                    <input
                        type="{input_type}"
                        id="edit-menu-item-{name}-{id}"
                        class="widefat code edit-menu-item-{name}"
                        name="menu-item-{name}[{id}]"
                        value="{value}">
                </label>
            </p>
        \',
    );

    static function setup() {
        if ( !is_admin() )
            return;

        $new_fields = apply_filters( \'xteam_nav_menu_item_additional_fields\', array() );
        if ( empty($new_fields) )
            return;
        self::$options[\'fields\'] = self::get_fields_schema( $new_fields );

        add_filter( \'wp_edit_nav_menu_walker\', function () {
            return \'XTeam_Walker_Nav_Menu_Edit\';
        });
        //add_filter( \'xteam_nav_menu_item_additional_fields\', array( __CLASS__, \'_add_fields\' ), 10, 5 );
        add_action( \'save_post\', array( __CLASS__, \'_save_post\' ), 10, 2 );
    }

    static function get_fields_schema( $new_fields ) {
        $schema = array();
        foreach( $new_fields as $name => $field) {
            if (empty($field[\'name\'])) {
                $field[\'name\'] = $name;
            }
            $schema[] = $field;
        }
        return $schema;
    }

    static function get_menu_item_postmeta_key($name) {
        return \'_menu_item_\' . $name;
    }

    /**
     * Inject the 
     * @hook {action} save_post
     */
    static function get_field( $item, $depth, $args ) {
        $new_fields = \'\';
        foreach( self::$options[\'fields\'] as $field ) {
            $field[\'value\'] = get_post_meta($item->ID, self::get_menu_item_postmeta_key($field[\'name\']), true);
            $field[\'id\'] = $item->ID;
            $new_fields .= str_replace(
                array_map(function($key){ return \'{\' . $key . \'}\'; }, array_keys($field)),
                array_values(array_map(\'esc_attr\', $field)),
                self::$options[\'item_tpl\']
            );
        }
        return $new_fields;
    }

    /**
     * Save the newly submitted fields
     * @hook {action} save_post
     */
    static function _save_post($post_id, $post) {
        if ( $post->post_type !== \'nav_menu_item\' ) {
            return $post_id; // prevent weird things from happening
        }

        foreach( self::$options[\'fields\'] as $field_schema ) {
            $form_field_name = \'menu-item-\' . $field_schema[\'name\'];
            // @todo FALSE should always be used as the default $value, otherwise we wouldn\'t be able to clear checkboxes
            if (isset($_POST[$form_field_name][$post_id])) {
                $key = self::get_menu_item_postmeta_key($field_schema[\'name\']);
                $value = stripslashes($_POST[$form_field_name][$post_id]);
                update_post_meta($post_id, $key, $value);
            }
        }
    }

}

// @todo This class needs to be in it\'s own file so we can include id J.I.T.
// requiring the nav-menu.php file on every page load is not so wise
require_once ABSPATH . \'wp-admin/includes/nav-menu.php\';
class XTeam_Walker_Nav_Menu_Edit extends Walker_Nav_Menu_Edit {
    function start_el(&$output, $item, $depth = 0, $args = [], $id = 0) {
        $item_output = \'\';
        parent::start_el($item_output, $item, $depth, $args, $id);
        // Inject $new_fields before: <div class="menu-item-actions description-wide submitbox">
        if ( $new_fields = XTeam_Nav_Menu_Item_Custom_Fields::get_field( $item, $depth, $args ) ) {
            $item_output = preg_replace(\'/(?=<div[^>]+class="[^"]*submitbox)/\', $new_fields, $item_output);
        }
        $output .= $item_output;
    }
}


// Somewhere in config...
add_filter( \'xteam_nav_menu_item_additional_fields\', \'mytheme_menu_item_additional_fields\' );
function mytheme_menu_item_additional_fields( $fields ) {
    $fields[\'fa-class\'] = array(
        \'name\' => \'fa-class\',
        \'label\' => __(\'Font Awesome Class\', \'xteam\'),
        \'container_class\' => \'fa-class\',
        \'input_type\' => \'text\',
    );

    return $fields;
}

添加上述代码后，您应该能够看到另一个自定义字段，用于font awesome类，您可以将fa类放置为fas fa-tv然后您可以使用walker nav类，如下所示。

class Custom_Walker_Nav_Primary extends Walker_Nav_menu {

    function start_lvl( &$output, $depth = 0, $args = array() ){ //ul
        $indent = str_repeat("\\t",$depth);
        $submenu = ($depth > 0) ? \' sub-menu\' : \'\';
        $output .= "\\n$indent<ul class=\\"dropdown-menu$submenu depth_$depth\\">\\n";
    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ){ //li a span

        $indent = ( $depth ) ? str_repeat("\\t",$depth) : \'\';

        $li_attributes = \'\';
        $class_names = $value = \'\';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = \'main-menu-item\'; // common class for li items
        $classes[] = ($args->walker->has_children) ? \'dropdown\' : \'\';
        $classes[] = ($item->current || $item->current_item_ancestor) ? \'active main-menu-item-selected \' : \'\'; // Add selected class for current menu item
        $classes[] = \'menu-item-\' . $item->ID;
        if( $depth && $args->walker->has_children ){
            $classes[] = \'dropdown-submenu\';
        }

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

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

        $output .= $indent . \'<li\' . $id . $value . $class_names . $li_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 .= ( $args->walker->has_children ) ? \' class="dropdown-toggle" data-toggle="dropdown"\' : \'\';


        $item_output = $args->before;
        $item_output .= \'<a\' . $attributes . \'>\';

        $fa_class = get_post_meta($item->ID,\'_menu_item_fa-class\',true) ?: false;  // Get font awesome class
        if( $fa_class ){

            $item_output .= \'<span class="\'.$fa_class.\'"></span>\'; // Add span if the fa classes exists

        }

        $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ( $depth == 0 && $args->walker->has_children ) ? \' <b class="caret"></b></a>\' : \'</a>\';
        $item_output .= $args->after;

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

    }

}

然后您可以使用wp_nav_menu() 获取菜单

  wp_nav_menu( array(\'menu\' => \'Main\', \'container\' => \'\', \'items_wrap\' => \'<ul class="nav navbar-nav" id="mymenu">%3$s</ul>\' , \'walker\' => new Custom_Walker_Nav_Primary()));     // you may need to change some args as per your requirement for example "menu" => "Some menu"