在导航设置中添加自定义菜单项Metabox

时间:2015-06-08 作者:Phil Hoyt

我一直在设想一种功能,可以扩展WordPress拖放菜单的创建。本质上是添加一个自定义菜单项按钮,用于添加不同类型的项目,而不仅仅是链接。

我设想一个基本用法只是一个文本字段,但未来的应用程序可能包括在菜单项中添加小部件区域。

Visual Mockup of Idea:

Mockup of base idea

如果有任何信息和资源可以帮助我找到可能的解决方案,我将不胜感激。

1 个回复
SO网友:helgatheviking

我知道这是一个非常老的问题,但当我发布一个类似的问题,关于在Customizer.

在WordPress 5.4之前,向菜单项添加字段的唯一方法是替换Walker_Nav_Menu_Edit 带着一些定制的东西的步行者。这有一个主要的缺点,那就是你只能有一个助行器,并且会引起很多冲突。

在漫长的8年之后,WP 5.4引入了wp_nav_menu_item_custom_fields 钩子,下面是一些关于如何使用钩子的示例代码。

首先,我们将显示文本输入:

/**
* Add custom fields to menu item
*
* This will allow us to play nicely with any other plugin that is adding the same hook
*
* @param  int $item_id 
* @params obj $item - the menu item
* @params array $args
*/
function kia_custom_fields( $item_id, $item ) {

    wp_nonce_field( \'custom_menu_meta_nonce\', \'_custom_menu_meta_nonce_name\' );
    $custom_menu_meta = get_post_meta( $item_id, \'_custom_menu_meta\', true );
    ?>
    <div class="field-custom_menu_meta description-wide" style="margin: 5px 0;">
        <span class="description"><?php _e( "Extra Field", \'custom-menu-meta\' ); ?></span>
        <br />

        <input type="hidden" class="nav-menu-id" value="<?php echo $item_id ;?>" />

        <div class="logged-input-holder">
            <input type="text" name="custom_menu_meta[<?php echo $item_id ;?>]" id="custom-menu-meta-for-<?php echo $item_id ;?>" value="<?php echo esc_attr( $custom_menu_meta ); ?>" />
            <label for="custom-menu-meta-for-<?php echo $item_id ;?>">
                <?php _e( \'Custom menu text\', \'custom-menu-meta\'); ?>
            </label>
        </div>

    </div>

    <?php
}
add_action( \'wp_nav_menu_item_custom_fields\', \'kia_custom_fields\', 10, 2 );
然后我们将保存数据。由于菜单项是WordPress自定义的帖子类型,所以处理数据与在常规帖子或页面中添加和检索post\\u meta是一样的。

/**
* Save the menu item meta
* 
* @param int $menu_id
* @param int $menu_item_db_id   
*/
function kia_nav_update( $menu_id, $menu_item_db_id ) {

    // Verify this came from our screen and with proper authorization.
    if ( ! isset( $_POST[\'_custom_menu_meta_nonce_name\'] ) || ! wp_verify_nonce( $_POST[\'_custom_menu_meta_nonce_name\'], \'custom_menu_meta_nonce\' ) ) {
        return $menu_id;
    }

    if ( isset( $_POST[\'custom_menu_meta\'][$menu_item_db_id]  ) ) {
        $sanitized_data = sanitize_text_field( $_POST[\'custom_menu_meta\'][$menu_item_db_id] );
        update_post_meta( $menu_item_db_id, \'_custom_menu_meta\', $sanitized_data );
    } else {
        delete_post_meta( $menu_item_db_id, \'_custom_menu_meta\' );
    }
}
add_action( \'wp_update_nav_menu_item\', \'kia_nav_update\', 10, 2 );
最后,我们可以在菜单标题后显示一些额外的文本。

/**
* Displays text on the front-end.
*
* @param string   $title The menu item\'s title.
* @param WP_Post  $item  The current menu item.
* @return string      
*/
function kia_custom_menu_title( $title, $item ) {

    if( is_object( $item ) && isset( $item->ID ) ) {

        $custom_menu_meta = get_post_meta( $item->ID, \'_custom_menu_meta\', true );

        if ( ! empty( $custom_menu_meta ) ) {
            $title .= \' - \' . $custom_menu_meta;
        }
    }
    return $title;
}
add_filter( \'nav_menu_item_title\', \'kia_custom_menu_title\', 10, 2 );
我在上的完整日志adding custom fields to WordPress menu items 以及full source code

结束

相关推荐

更新上传图片的metabox时出现问题

我创建了一个自定义帖子类型和元框,用于上载另一个图像。问题是,当我添加图像时,它会正确显示在后端的位置,当我更新它时,它也会显示相同的图像。但是当我回到帖子修改它时,我找不到图片,如果我更新帖子,那么就没有图片显示。<?php function hotels_meta_boxes() { add_meta_box( \'hotels_form\', \'Hotels - Détails\', \'hotels_form\', \'hotels\', \'normal\', \'