Admin-Seite ausblenden, während das Menü erweitert wird

Ich erstelle einen benutzerdefinierten Adminbereich. Ich habe den folgenden Code:

// 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'); 

Wie Sie in der letzten Codezeile bemerken, wird der erste Parameter von add_submenu_page() auf null . Dies stellt sicher, dass die Seite ” Buch bearbeiten” ausgeblendet ist ( weitere Details hierzu finden Sie hier ). Der Zugriff auf die Seite ” Buch bearbeiten” erfolgt über das Hauptmenü aus der Liste aller Bücher.

Das Problem ist, wenn ich auf die Edit Book- Seite gehe, das Admin-Menü auf der linken Seite kollabiert (auf der anderen Seite ist das Standard-WordPress-Verhalten wie folgt: Wenn Sie auf eine Edit Post- Seite gehen, oder die Edit Page- Seite, beide Das Menü Posts und Pages bleibt für die jeweiligen Bearbeitungsseiten erweitert. In meinem Fall bricht das Menü zusammen.

Wie kann ich das Menü nach links erweitert halten, wenn ich auf die Seite ” Buch bearbeiten” gehe, um mich ähnlich wie WordPress zu verhalten?

Vielen Dank.

Solutions Collecting From Web of "Admin-Seite ausblenden, während das Menü erweitert wird"

Für Ihre spezielle Situation, in der Sie ein Menü registriert haben müssen, aber nicht angezeigt werden, es sei denn, Sie klicken auf einen Link auf einer anderen Seite, können Sie eine bedingte Prüfung hinzufügen, um zu sehen, ob Sie sich auf der Bearbeitungsseite befinden. Wenn dies der add_submenu_page() , dann ersetzen Sie null durch book die Parameter 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' ); } } 

Eine zusätzliche Anmerkung. Wenn es sich herausstellt, dass Sie diesen Menüeintrag auch bei Auswahl ausgeblendet halten müssen, können Sie einen Stil in die Warteschlange stellen, um ihn nur zu verbergen, wenn Sie sich auf dieser Seite befinden.

 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' ); } } ); 

Wo der Inhalt von book-edit.css so einfach wäre wie:

 #toplevel_page_books li.current { display: none; } 

Die Lösung basiert auf den Ideen von @Ian. Vielen Dank.

 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' ); } 

Und wir müssen den ersten Menüpunkt verstecken

 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'); } }); 

Und der Inhalt von menu.css ist:

 #toplevel_page_books li.current { display: none; } #toplevel_page_books li.wp-first-item { display: list-item; } 

Auch der Inhalt von ‘menu.js’ ist:

 jQuery(document).ready(function($) { $('#toplevel_page_books li.wp-first-item').addClass('current'); }); 

TL; DR

Um zu verstehen, wie das alles funktioniert, folgt hier eine Schritt-für-Schritt-Erklärung.

Schritt 1: Wir fügen den Hauptmenüpunkt (den Menüpunkt Bücher ) hinzu, um die Liste der Bücher anzuzeigen

 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); } 

Schritt 2: Wir fügen den Add-book- Menüpunkt als Untermenü zum Hauptbuch-Menüpunkt hinzu

 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' ); } 

Schritt 3: Abschluss Schritt 2 oben fügt den Bücher-Menüpunkt hinzu. Die Menüliste auf der linken Seite würde wie folgt aussehen:

 Books < ---------- This is the main top level menu names Books <---------- This is the first sub-menu Add New <---------- This is the second sub-menu 

Wir sollten das jedoch beheben. Die beabsichtigte Liste sollte so aussehen

 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 

Um dies zu tun, müssen wir unseren Code wie folgt ändern:

 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' ); } 

Schritt 4: Als nächstes sollten wir ein Untermenü hinzufügen, um Bücher zu bearbeiten (der Menüpunkt des Edit-Book ). Nach dem Hinzufügen seines Untermenüs und wenn wir uns auf der Edit-Book- Seite befinden, sollte das Menü auf der linken Seite wie folgt aussehen:

 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 

Die Lösung, die ich zuerst versucht habe, war, was ich in meiner ursprünglichen Frage gepostet habe, was nicht genau funktioniert hat. Also, basierend auf Diskussionen mit @Ian und dem Blick auf seine vorgeschlagene Lösung, kam ich auf Folgendes:

 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' ); } 

Wenn wir jetzt auf den Menüeintrag "Bücher" oder den Menüeintrag "Add-Book" klicken, ist alles in Ordnung. Wenn wir jedoch versuchen, ein vorhandenes Buch zu bearbeiten, wird die folgende Menüliste angezeigt

 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 

Schritt 5: Jetzt bemerken wir Folgendes: Durch Klicken auf das erste Untermenü wird die Seite "Alle Bücher" gerendert und durch Klicken auf das zweite Untermenü wird die Seite "Bearbeiten" gerendert; und in unserem Fall möchten wir die Seite "Alle Bücher" rendern. Deshalb müssen wir das zweite Untermenü ausblenden und das erste Untermenü markieren. Dies geschieht wie folgt:

 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'); } }); 

Und der Inhalt von menu.css ist:

 #toplevel_page_books li.current { display: none; } #toplevel_page_books li.wp-first-item { display: list-item; } 

Auch der Inhalt von 'menu.js' ist:

 jQuery(document).ready(function($) { $('#toplevel_page_books li.wp-first-item').addClass('current'); }); 

Und jetzt funktioniert alles wie ein Zauber.