解决方案基于@Ian提供的想法。谢谢
add_action( \'admin_menu\', \'add_the_menus\' );
function add_the_menus() {
// Top level menu
add_menu_page (\'Books\', \'Books\', \'publish_posts\', \'books\', \'render_books_page\', \'\', 17);
// Adding this function to make the first submenu have a different name than the main menu
add_submenu_page(\'books\', \'Books\', \'All Books\', \'publish_posts\', \'books\', \'render_books_page\' );
if ((isset($_GET[\'page\'])) && ($_GET[\'page\'] === \'edit-book\')) {
// The Edit Book menu page and display it as the All Books page
add_submenu_page(\'books\', \'Edit Book\', \'All Books\', \'publish_posts\', \'edit-book\', \'render_edit_book_page\' );
}
// The add-book menu page
add_submenu_page(\'books\', \'Add New Book\', \'Add New\', \'publish_posts\', \'add-book\', \'render_add_book_page\' );
}
我们必须隐藏第一个菜单项
add_action( \'admin_enqueue_scripts\', function () {
if ((isset($_GET[\'page\'])) && ($_GET[\'page\'] === \'edit-book\')) {
// Load CSS file
wp_enqueue_style(\'book-edit\', \'path/to/css/menu.css\');
// Load jQuery
wp_enqueue_script(\'jquery\');
// Load
wp_enqueue_script(\'book-edit-script\', \'path/to/js/menu.js\');
}
});
以及
menu.css 是：
#toplevel_page_books li.current {
display: none;
}
#toplevel_page_books li.wp-first-item {
display: list-item;
}
还有“菜单”的内容。js’是：
jQuery(document).ready(function($) {
$(\'#toplevel_page_books li.wp-first-item\').addClass(\'current\');
});
<小时>
TL;DR
为了了解所有这些是如何工作的，这里有一个逐步的解释。
Step 1: 我们添加主菜单项（书籍菜单项）以显示书籍列表
add_action( \'admin_menu\', \'add_the_menus\' );
function add_the_menus() {
// Top level menu
add_menu_page (\'Books\', \'Books\', \'publish_posts\', \'books\', \'render_books_page\', \'\', 17);
}
Step 2: 我们将添加书本菜单项作为子菜单添加到主书本菜单项
add_action( \'admin_menu\', \'add_the_menus\' );
function add_the_menus() {
// Top level menu
add_menu_page (\'Books\', \'Books\', \'publish_posts\', \'books\', \'render_books_page\', \'\', 17);
// The add-book menu page
add_submenu_page(\'books\', \'Add New Book\', \'Add New\', \'publish_posts\', \'add-book\', \'render_add_book_page\' );
}
Step 3: 完成上述步骤2后，将添加books菜单项，左侧的菜单列表如下所示：
Books <---------- This is the main top level menu names
Books <---------- This is the first sub-menu
Add New <---------- This is the second sub-menu
然而，我们应该解决这个问题。预期列表应如下所示
Books <---------- This is the main top level menu names
All Books <---------- This is the first sub-menu
Add New <---------- This is the second sub-menu
为此，我们必须修改代码如下：
add_action( \'admin_menu\', \'add_the_menus\' );
function add_the_menus() {
// Top level menu
add_menu_page (\'Books\', \'Books\', \'publish_posts\', \'books\', \'render_books_page\', \'\', 17);
// Adding this function to make the first submenu have a different name than the main menu
add_submenu_page(\'books\', \'Books\', \'All Books\', \'publish_posts\', \'books\', \'render_books_page\' );
// The add-book menu page
add_submenu_page(\'books\', \'Add New Book\', \'Add New\', \'publish_posts\', \'add-book\', \'render_add_book_page\' );
}
Step 4: 接下来，我们应该添加一个子菜单来编辑书籍（编辑书籍菜单项）。添加子菜单后，当我们在编辑图书页面时，左侧的菜单应如下所示：
Books
All Books <---------- When we are in the \'edit-book\' page, this menu item is selected and is highlighted (typically white in color), and also clicking on "All Books" would return us back to the "All Books" page.
Add New
我首先尝试的解决方案是我在原始问题中发布的内容，但并不完全有效。因此，根据与@Ian的讨论并查看他提出的解决方案，我得出了以下结论：
add_action( \'admin_menu\', \'add_the_menus\' );
function add_the_menus() {
// Top level menu
add_menu_page (\'Books\', \'Books\', \'publish_posts\', \'books\', \'render_books_page\', \'\', 17);
// Adding this function to make the first submenu have a different name than the main menu
add_submenu_page(\'books\', \'Books\', \'All Books\', \'publish_posts\', \'books\', \'render_books_page\' );
// If we are in the \'edit-book\' page, then display the \'edit-book\' submenu, otherwise, display the regular \'books\' menu
if ((isset($_GET[\'page\'])) && ($_GET[\'page\'] === \'edit-book\')) {
// Display the \'edit-book\' menu page and display it as the \'all-books\' page
// Notice that the slug is \'edit-book\', but the display name is \'All Books\'
add_submenu_page(\'books\', \'Edit Book\', \'All Books\', \'publish_posts\', \'edit-book\', \'render_edit_book_page\' );
}
// The add-book menu page
add_submenu_page(\'books\', \'Add New Book\', \'Add New\', \'publish_posts\', \'add-book\', \'render_add_book_page\' );
}
现在，如果单击“books”（书本）菜单项或“add book”（添加书本）菜单项，则一切正常。但是，如果我们试图编辑现有书籍，则会显示以下菜单列表
Books
All Books <---------- This is the first sub-menu (due to the first submenu call)
All Books <---------- This is the \'edit-book\' page (HIGHLIGHTED)
Add New
Step 5: 现在我们注意到：单击第一个子菜单，将呈现“所有书籍”页面，单击第二个子菜单将呈现“编辑”页面；在我们的例子中，我们希望呈现“所有书籍”页面。因此，我们必须隐藏第二个子菜单并突出显示第一个子菜单。具体操作如下：
add_action( \'admin_enqueue_scripts\', function () {
if ((isset($_GET[\'page\'])) && ($_GET[\'page\'] === \'edit-book\')) {
// Load CSS file
wp_enqueue_style(\'book-edit\', \'path/to/css/menu.css\');
// Load jQuery
wp_enqueue_script(\'jquery\');
// Load
wp_enqueue_script(\'book-edit-script\', \'path/to/js/menu.js\');
}
});
以及
menu.css 是：
#toplevel_page_books li.current {
display: none;
}
#toplevel_page_books li.wp-first-item {
display: list-item;
}
还有“菜单”的内容。js’是：
jQuery(document).ready(function($) {
$(\'#toplevel_page_books li.wp-first-item\').addClass(\'current\');
});
现在一切都像一个魔咒。
