WordPress 外观菜单添加自定义字段

一，添加自定义字段

在 WordPress 中，为菜单项添加自定义字段可以让你在每个菜单项中存储和显示额外的信息。

使用 `wp_nav_menu_item_custom_fields` 钩子以及一些自定义代码来实现，代码如下：

步骤 1: 添加自定义字段到菜单项

首先，你需要使用 `wp_nav_menu_item_custom_fields` 钩子来添加自定义字段到菜单项编辑界面。你可以将以下代码添加到你的主题的 `functions.php` 文件中：

function my_custom_fields($item_id, $item, $depth, $args) {
    ?>
    <p>自定义字段标题</p>
    <input type="text" id="custom-field" name="custom-field[<?php echo $item_id; ?>]" value="<?php echo get_post_meta($item_id, '_custom_field', true); ?>">
    <?php
}
add_action('wp_nav_menu_item_custom_fields', 'my_custom_fields', 10, 4);

这段代码会在每个菜单项的配置区域添加一个文本输入框，用于填写自定义字段的值。

步骤 2: 保存自定义字段数据

为了确保你输入的数据能够被正确保存，你需要挂钩到 `wp_update_nav_menu_item` 动作上。以下是示例代码：

function my_save_menu_custom_fields($menu_id, $menu_item_db_id, $menu_item_args) {
    if (defined('DOING_AJAX') && DOING_AJAX) return;
    if (!isset($_REQUEST['custom-field'][$menu_item_db_id])) return;

    $custom_field_value = $_REQUEST['custom-field'][$menu_item_db_id];
    update_post_meta($menu_item_db_id, '_custom_field', $custom_field_value);
}
add_action('wp_update_nav_menu_item', 'my_save_menu_custom_fields', 10, 3);

这段代码会监听菜单项更新的动作，并根据提供的值更新相应的自定义字段。

步骤 3: 使用自定义字段

一旦你完成了上述步骤，你就可以通过 `get_post_meta()` 函数获取并使用这些自定义字段了。例如，在你的主题模板文件中：

$menu_item_id = // 获取当前菜单项ID的方法取决于上下文
$custom_field_value = get_post_meta($menu_item_id, '_custom_field', true);
echo esc_html($custom_field_value);

这样，你就可以在前端显示这个自定义字段的内容了。

二，添加自定义图片

在 functions.php 中添加：

// 添加自定义图片字段到菜单项
function add_menu_custom_image_field($item_id, $item, $depth, $args) {
    ?>
    <p class="field-custom-image description">
        <label for="edit-menu-item-custom-image-<?php echo $item_id; ?>">
            自定义图片 URL
        </label>
        <input type="text" id="edit-menu-item-custom-image-<?php echo $item_id; ?>" 
               class="widefat code edit-menu-item-custom-image" 
               name="menu-item-custom-image[<?php echo $item_id; ?>]" 
               value="<?php echo esc_attr(get_post_meta($item_id, '_menu_item_custom_image', true)); ?>" />
        <button type="button" class="button button-secondary upload-custom-image">选择图片</button>
    </p>
    <?php
}
add_action('wp_nav_menu_item_custom_fields', 'add_menu_custom_image_field', 10, 4);

// 保存自定义图片字段
function save_menu_custom_image_field($menu_id, $menu_item_db_id, $menu_item_args) {
    if (defined('DOING_AJAX') && DOING_AJAX) return;

    if (isset($_POST['menu-item-custom-image'][$menu_item_db_id])) {
        $image_url = $_POST['menu-item-custom-image'][$menu_item_db_id];
        update_post_meta($menu_item_db_id, '_menu_item_custom_image', esc_url_raw($image_url));
    } else {
        delete_post_meta($menu_item_db_id, '_menu_item_custom_image');
    }
}
add_action('wp_update_nav_menu_item', 'save_menu_custom_image_field', 10, 3);


// 加载媒体上传脚本
function enqueue_menu_image_script() {
    wp_enqueue_media();
    wp_enqueue_script('menu-image-upload', get_template_directory_uri() . '/js/menu-image-upload.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'enqueue_menu_image_script');

然后在你的主题目录下创建 js/menu-image-upload.js 文件，内容如下：

jQuery(document).ready(function($) {
    $(document).on('click', '.upload-custom-image', function(e) {
        e.preventDefault();

        var button = $(this);
        var input = button.siblings('.edit-menu-item-custom-image');

        var frame = wp.media({
            title: '选择图片',
            button: {
                text: '选择图片'
            },
            multiple: false
        });

        frame.on('select', function() {
            var attachment = frame.state().get('selection').first().toJSON();
            input.val(attachment.url);
        });

        frame.open();
    });
});

效果如下：