web-dev-qa-db-ja.com

メニューを拡大したまま管理ページを隠す

カスタム管理セクションを作成しています。次のようなコードがあります。

// 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と同じようにブックの編集ページに移動したときに、左側のメニューを拡大したままにする方法を教えてください。

ありがとう。

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

解決策は@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; DR

これらすべてがどのように機能するのかを理解するために、ここにステップバイステップの説明があります。

ステップ1：メインメニュー項目（booksメニュー項目）を追加してリストを表示します。本

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-bookメニュー項目を追加しますbooksメニュー項目

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：次に本を編集するためのサブメニューを追加します（edit-bookメニュー項目）彼のサブメニューを追加した後、そしてedit-bookページにいるとき、左側のメニューはこのようになるはずです：

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

ステップ5：これで次のことがわかります。最初のサブメニューをクリックすると、「All Books」ページが表示され、2番目のサブメニューをクリックします。 「編集」ページをレンダリングします。私たちの場合は、「All Books」ページをレンダリングします。したがって、SECONDサブメニューを非表示にして最初のサブメニューをハイライト表示にする必要があります。これは次のようにして行われます。

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

});

そして今、すべてが魅力のように機能します。

1
Greeso

特定の状況では、メニューを登録する必要がありますが、別のページのリンクからクリックしない限り表示されません。編集ページにいるかどうかを確認するための条件付きチェックを追加できます。その場合は、add_submenu_page()パラメータに従ってnullをbookに置き換えます。

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;
}
2
Ian