web-dev-qa-db-fra.com

Masquer la page d'administration tout en maintenant le menu développé

Je crée une section d'administration personnalisée. J'ai le code suivant:

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

Comme vous le remarquez dans la dernière ligne de code, le premier paramètre de add_submenu_page() est défini sur null. Ceci permet de s'assurer que la page Edit Bookest cachée ( , plus de détails à ce sujet ici ). L'accès à la page Edit Bookse fait par le menu principal, à partir de la liste de tous les livres.

Le problème est que, lorsque je vais à la page Éditer le livre, le menu Admin à gauche s’effondre (en revanche, le comportement par défaut de WordPress est le suivant: Si vous allez à Modifier la pagepage, ou la page Modifier/, les deux messageset Pagesmenu restent étendus pour leurs pages respectivesedit). Dans mon cas, le menu s'effondre.

Comment puis-je garder le menu à gauche élargi lorsque je vais à la page Éditer le livreafin de me comporter de manière similaire à celle de WordPress?

Merci.

menusadminadmin-menuadd-menu-pageadd-submenu-page
1
Greeso

La solution est basée sur les idées fournies par @Ian. Merci.

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

Et nous devons cacher le premier élément de menu

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

Et le contenu de menu.css est:

#toplevel_page_books li.current {
    display: none;
}

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

Aussi le contenu de 'menu.js' est:

jQuery(document).ready(function($) {

    $('#toplevel_page_books li.wp-first-item').addClass('current');

});

TL; DR

Pour comprendre comment tout cela fonctionne, voici une explication détaillée.

Étape 1: Nous ajoutons l'élément du menu principal (les livresélément de menu) pour afficher la liste des livres.

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

Étape 2: Nous ajoutons l'élément de menu dans un sous-menu aux livres principauxélément du 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);

    // The add-book menu page
    add_submenu_page('books', 'Add New Book', 'Add New', 'publish_posts', 'add-book', 'render_add_book_page' );
}

Étape 3: En terminant, l'étape 2 ci-dessus ajoute l'élément de menu de livres. La liste de menus sur le côté gauche devrait ressembler à ceci:

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

Cependant, nous devrions résoudre ce problème. La liste prévue devrait ressembler à ceci

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

Pour ce faire, nous devons modifier notre code comme suit:

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

Étape 4: Ensuite, nous devrions ajouter un sous-menu pour éditer les livres (le edit-bookélément de menu). Après avoir ajouté son sous-menu, et quand nous sommes à la page edit-book, le menu de gauche devrait ressembler à ceci:

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

La solution que j'ai essayée en premier lieu était ce que j'avais posté dans ma question initiale, qui ne fonctionnait pas exactement. Donc, basé sur des discussions avec @Ian et en regardant sa solution proposée, je suis arrivé avec ceci:

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

Maintenant, si nous cliquons sur l'élément de menu "livres" ou l'élément de menu "add-book", tout ira bien. Cependant, si nous essayons de modifier un livre existant, la liste de menus suivante sera affichée.

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

Étape 5: Maintenant, nous remarquons ce qui suit: En cliquant sur le premier sous-menu, la page "Tous les livres" sera affichée et en cliquant sur le deuxième sous-menu, la page "Éditer" sera affichée. et dans notre cas, nous voulons rendre la page "Tous les livres". Par conséquent, nous devons masquer le sous-menu SECOND et mettre le premier sous-menu en surbrillance. Cela se fait comme suit:

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

Et le contenu de menu.css est:

#toplevel_page_books li.current {
    display: none;
}

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

Aussi le contenu de 'menu.js' est:

jQuery(document).ready(function($) {

    $('#toplevel_page_books li.wp-first-item').addClass('current');

});

Et maintenant tout fonctionne comme un charme.

1
Greeso

Pour votre situation particulière, où vous devez avoir un menu enregistré, mais non affiché à moins que vous ne cliquiez dessus à partir d'un lien sur une autre page, vous pouvez ajouter une vérification conditionnelle pour voir si vous êtes sur la page d'édition. Si tel est le cas, remplacez null par book par les paramètres 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' );
    }
}

Une note supplémentaire. S'il s'avère que vous devez également garder cet élément de menu masqué même lorsqu'il est sélectionné, vous pouvez mettre un style en file d'attente pour le masquer uniquement lorsque vous êtes sur cette 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' );
    }
} );

Où le contenu de book-edit.css serait quelque chose d'aussi simple que:

#toplevel_page_books li.current {
    display: none;
}
2
Ian