Скрытие Страницы Администратора При Сохранении Расширенного Меню
Я создаю пользовательский раздел администратора. У меня есть следующий код:
// 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
// Details: https://wordpress.stackexchange.com/questions/66498/add-menu-page-with-different-name-for-first-submenu-item
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 Book', 'publish_posts', 'add-book', 'render_add_book_page');
// The Edit Book menu page (this page is hidden from the menu, and accessed via the All Books page only)
add_submenu_page(null, 'Edit Book', 'Edit Book', 'publish_posts', 'edit-book', 'render_edit_book_page');
Как вы заметили в последней строке кода, первый параметр add_submenu_page() имеет значение null. Это делается для того, чтобы страница Редактировать книгу была скрыта ( подробнее об этом здесь ). Доступ к странице Редактировать книгу осуществляется через главное меню из списка всех книг.
Проблема в том, что когда я перехожу на страницу Редактировать книгу, меню администратора слева сворачивается (с другой стороны, поведение WordPress по умолчанию выглядит следующим образом: если вы перейдете на страницу Редактировать сообщение или страницу Редактировать страницу, меню Сообщения и Страницы остаются развернутыми для соответствующих страниц редактировать). В моем случае меню сворачивается.
Как я могу держать меню слева развернутым, когда я перехожу на страницу Редактировать книгу, чтобы вести себя так же, как в WordPress?
Спасибо.
2 answers
Для вашей конкретной ситуации, когда вам нужно зарегистрировать меню, но оно не отображается, если вы не нажмете на него по ссылке на другой странице, вы можете добавить условную проверку, чтобы узнать, находитесь ли вы на странице редактирования. Если это так, то измените заменить null на book в соответствии с параметрами add_submenu_page().
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 Book', 'publish_posts', 'add-book', 'render_add_book_page' );
// Check the get parameter for page to see if its the page you want to display in the menu only when you're on it.
if ( $_GET['page'] === 'edit-book' ) {
// The Edit Book menu page (this page is hidden from the menu, and accessed via the All Books page only)
add_submenu_page( 'books', 'Edit Book', 'Edit Book', 'publish_posts', 'edit-book', 'render_edit_book_page' );
} else {
// The Edit Book menu page (this page is hidden from the menu, and accessed via the All Books page only)
add_submenu_page( null, 'Edit Book', 'Edit Book', 'publish_posts', 'edit-book', 'render_edit_book_page' );
}
}
Дополнительное примечание. Если окажется, что вам также нужно скрыть этот пункт меню, даже если он выбран, вы можете поставить в очередь стиль, чтобы скрыть его, только когда вы на нем страница.
add_action( 'admin_enqueue_scripts', function () {
if ( $_GET['page'] === 'edit-book' ) {
wp_enqueue_style( 'book-edit', get_stylesheet_directory_uri() . '/assets/css/book-edit.css' );
}
} );
Где содержимое файла book-edit.css было бы таким простым, как:
#toplevel_page_books li.current {
display: none;
}
Решение основано на идеях, предоставленных @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;
}
Также содержание 'menu.js 'это:
jQuery(document).ready(function($) {
$('#toplevel_page_books li.wp-first-item').addClass('current');
});
TL; ДР
Чтобы понять, как все это работает, вот пошаговое объяснение.
Шаг 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);
}
Шаг 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' );
}
Шаг 3: Завершение шага 2 выше добавляет пункт меню книги, список меню с левой стороны будет выглядеть следующим образом:
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' );
}
Шаг 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
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
Шаг 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;
}
Также содержание 'menu.js 'это:
jQuery(document).ready(function($) {
$('#toplevel_page_books li.wp-first-item').addClass('current');
});
И теперь все работает как по маслу.