为WordPress菜单项添加复选框实现target="_blank"属性设置

要完成在WordPress后台菜单编辑页给菜单项添加“在新窗口打开”复选框，并在勾选时为对应链接添加target="_blank"属性，需要分两步操作：

一、后台菜单编辑页添加复选框字段 #

在主题的functions.php文件中添加以下代码，用于在菜单项编辑区域插入复选框，并保存勾选状态：

// 添加菜单项自定义字段
add_action('wp_nav_menu_item_custom_fields', 'add_open_in_new_window_checkbox', 10, 4);
function add_open_in_new_window_checkbox($item_id, $item, $depth, $args) {
    $is_checked = get_post_meta($item_id, '_menu_item_open_in_new_window', true);
    ?>
    <p class="field-open-in-new-window description description-wide">
        <label for="edit-menu-item-open-in-new-window-<?php echo $item_id; ?>">
            <input type="checkbox" id="edit-menu-item-open-in-new-window-<?php echo $item_id; ?>" name="menu-item-open-in-new-window[<?php echo $item_id; ?>]" value="1" <?php checked($is_checked, 1); ?> />
            在新窗口打开链接
        </label>
    </p>
    <?php
}

// 保存菜单项自定义字段值
add_action('save_post', 'save_open_in_new_window_setting');
function save_open_in_new_window_setting($post_id) {
    // 仅处理菜单项类型的帖子
    if (get_post_type($post_id) !== 'nav_menu_item') return;

    if (isset($_POST['menu-item-open-in-new-window'][$post_id])) {
        update_post_meta($post_id, '_menu_item_open_in_new_window', 1);
    } else {
        delete_post_meta($post_id, '_menu_item_open_in_new_window');
    }
}

二、修改菜单Walker类渲染链接属性 #

修改你现有的description_walker类，在生成<a>标签时，判断该菜单项是否勾选了“在新窗口打开”，如果是则添加target="_blank"和安全属性rel="noopener noreferrer"：

<?php wp_nav_menu([
   'theme_location' => 'primary',
   'container'      => '',
   'walker'         => new description_walker(),
]); ?>

class description_walker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
    {
        $title = trim($item->title);
        $classes = (!empty($item->classes)) ? implode(" ", $item->classes) : '';
        $button = (!empty($item->classes) && in_array('menu-item-has-children',
                $item->classes)) ? '<span class="button-show">+</span>' : '';    
        $output .= "<li class='" . $classes . "'>";
        
        // 获取是否需要在新窗口打开的设置
        $open_in_new = get_post_meta($item->ID, '_menu_item_open_in_new_window', true);
        $link_attrs = '';
        if ($open_in_new) {
            $link_attrs .= ' target="_blank" rel="noopener noreferrer"';
        }
        
        $output .= '<a href="' . $item->url . '"' . $link_attrs . '>';
        $output .= $title;
        $output .= '</a>';
        $output .= $button;
    }
}

这样设置后，在后台编辑菜单时，每个菜单项下方会出现“在新窗口打开链接”的复选框，勾选后前端对应的链接就会在新窗口打开。

内容的提问来源于stack exchange，提问作者s.kuznetsov