Nav Menu Item containers 用于使用附加字段扩展导航菜单编辑屏幕。 字段数据作为帖子元数据为每个链接单独存储。

use Carbon_Fields\Container;
use Carbon_Fields\Field;

Container::make( 'nav_menu_item', __( 'Menu Settings' ) )
    ->add_fields( array(
        Field::make( 'color', 'crb_color', __( 'Color' ) ),
    ));

容器位置

容器按照它们初始化的顺序呈现。

访问字段值

由于每个菜单条目都是来自帖子类型“nav_menu_item”且状态为“publish”的帖子，因此可以使用函数 carbon_get_nav_menu_item_meta( $nav_menu_item_ID, $name ) 访问这些值，其中：

参数	描述
$nav_menu_item_ID	输入值的导航菜单项帖子 ID。
$name	要检索的字段的字段名称模式。

自定义Walkers或Walker Filters

为了使用导航菜单中的值设置，您需要使用自定义Menu Walker或来自位于 .wp-includes/nav-menu-template.php 中的默walker 的过滤器.

这是一个Walker的例子：

/**
 * Location:
 *     wp-includes/nav-menu-template.php
 *     source: Walker_Nav_Menu
 */
class Crb_Main_Menu_Walker extends Walker_Nav_Menu {
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $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, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

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

        $output .= $indent . '<li' . $id . $class_names .'>';

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';


        // Adding a custom color to the links
        $crb_color = carbon_get_nav_menu_item_meta( $item->ID, 'crb_color' );
        $atts['style'] = ! empty( $crb_color ) ? 'color: ' . $crb_color . '; ' : '';
        // --- END --- "Adding a custom color to the links"

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $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 .= '';
        $item_output .= $args->after;

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

} // Walker_Nav_Menu

这是一个过滤器示例，做同样的事情：

// Adding a custom color to the links
add_filter( 'nav_menu_link_attributes', 'crb_nav_menu_link_attributes', 10, 4 );
function crb_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
    $crb_color = carbon_get_nav_menu_item_meta( $item->ID, 'crb_color' );
    $atts['style'] = ! empty( $crb_color ) ? 'color: ' . $crb_color . '; ' : '';

    return $atts;
}

上述两个示例都将导致：

<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
        <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23">
            <a href="#" style="color: #2020f3;">Sample Page</a>
        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24">
            <a href="#" style="color: #f94c4c;">Sample Page</a>
        </li>
        <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
            <a href="#" style="color: #81d742;">Sample Page</a>
        </li>
    </ul>
</div>