Hướng dẫn wordpress admin menu - menu quản trị wordpress

Trong bài này mình sẽ hướng dẫn cách tạo menu trong admin WordPress bằng cách sử dụng các hàm add_menu_page và add_submenu_page cực dễ dàng.add_menu_page và add_submenu_page cực dễ dàng.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Ở bài tạo trang quản lý Options mình đã hướng dẫn các bạn thêm một sub menu vào menu Appearance, tuy nhiên vẫn còn khá nhiều vấn đề xung quanh menu của Admin, nên mình viết bài này để hướng dẫn các bạn hiểu rõ hơn về hệ thống Admin Menu trong WordPress.

1. Hệ thống Admin Menu trong WordPress

Có lẽ mình không cần phải giải thích ý nghĩa của từng mục menu trong WordPress nữa vì đó là kiến thức căn bản, bạn phải quản lý nội dung trong WordPress tốt thì mới có thể theo dõi series này được.

Khi bạn đăng nhập vào Admin thì sẽ có một hệ thống menu như sau:

Bài viết này được đăng tại [free tuts .net]

Mỗi menu cha như vậy bạn hoàn toàn có thể thêm menu con vào bằng cách sử dụng hàm add_submenu_page. Ngoài ra bạn cũng có thể tự tạo một menu cha bằng cách sử dụng hàm add_menu_page.

Vấn đề nên thêm menu vào vị trí nào thì tùy thuộc vào mỗi lập trình viên, họ có thể muốn thêm menu vào phần Post nếu menu đó liên quan đến bài viết, thêm menu vào media nếu liên quan đến việc upload xử lý file. Nhưng thông thường mỗi theme sẽ có một menu riêng biệt để giúp quản trị viên có thể quản lý dễ dàng hơn.

Hook hiển thị menu: Hooks hiển thị menu có tên là admin_menu và đây là một Action Hook.: Hooks hiển thị menu có tên là admin_menu và đây là một Action Hook.

Bây giờ mình sẽ trình bày cách thêm từng loại menu nhé.

2. Thêm một menu vào admin của WordPress

Để xem danh sách các function API hỗ trợ việc tạo Admin Menu trong WordPress thì bạn có thể click vào đây để tham khảo.

Để thêm một Menu mới vào hệ thống Menu trong Admin thì bạn sử dụng hàm add_menu_page, hàm này có cấu trúc như sau:

add_menu_page ($page_title, $menu_title, $capability, $menu_slug, $function = '', $icon_url = '', $position = null );

Trong đó::

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  0: Tiêu đề của trang nằm trên thẻ title

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  1: Tên của menu hiển thị ở danh sách menu

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  2: Tên quyền chứa những nhóm có thể thao tác với Menu, xem danh sách tại đây.

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  3: Slug URL của trang

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  4: Hàm sẽ được gọi khi bạn click vào menu, thông thường chúng ta tạo mã HTML trong hàm này.

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  5: Đường dẫn tới Icon của menu

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  6: Vị trí hiển thị menu tính từ trên xuống.

Ví dụ: Thêm một menu tên là Plugin Options vào danh sách Admin Menu của WordPress.: Thêm một menu tên là Plugin Options vào danh sách Admin Menu của WordPress.

Trước tiên bạn tạo cho tôi một file tên là

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

7 nằm trong thư mục includes của

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

8 plugin (xem hinh).

Đừng quên require file này trong file chính của plugin

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

9 nhé.

Bạn bổ sung đoạn code sau vào file

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

7.

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

Bây giờ bạn login vào Admin và xem trên dàn menu sẽ thấy xuất hiện thêm một menu mới.

Bạn click vào menu Plugin Options sẽ thấy nó chuyển sang một trang mới với nội dung là "Đây là trang Plugin Options". Tại đây bạn có thể thay đổi giao diện để code chức năng theo yêu cầu.

3. Thêm Sub Menu vào Admin WordPress

Để thêm submenu thì bạn sử dụng hàm add_submenu_page, hàm này có cấu trúc như sau:

add_submenu_page ($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function = '' );

Trong đó::

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  0: Tiêu đề của trang nằm trên thẻ title

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  0: Tiêu đề của trang nằm trên thẻ title

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  1: Tên của menu hiển thị ở danh sách menu

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  2: Tên quyền chứa những nhóm có thể thao tác với Menu, xem danh sách tại đây.

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  3: Slug URL của trang

• function add_admin_menu()
  {
      add_menu_page (
              'Plugin Options', 
              'Plugin Options', 
              'manage_options', 
              'plugin-options', 
              'show_plugin_options', 
              '', 
              '2' 
      );
  }
  
  function show_plugin_options()
  {
      echo '
  Đây là trang Plugin Options
  ';
  }
  
  add_action('admin_menu', 'add_admin_menu');

  4: Hàm sẽ được gọi khi bạn click vào menu, thông thường chúng ta tạo mã HTML trong hàm này.

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

5: Đường dẫn tới Icon của menu: Thêm 2 menu con gồm General Settings, Advance Settings vào menu Plugin Options mà ta đã tạo ở trên.

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

6: Vị trí hiển thị menu tính từ trên xuống.

function add_admin_submenu()
{
    add_submenu_page ('plugin-options', 'General Settings', 'General Settings', 'manage_options', 'plugin-options-general-settings', 'show_general_setting_page' );
    add_submenu_page ('plugin-options', 'Advanced Settings', 'Advanced Settings', 'manage_options', 'plugin-options-advanced-settings', 'show_advanced_setting_page' );
}

function show_general_setting_page()
{
    echo '
Đây là trang Plugin Options - General Settings
';
}

function show_advanced_setting_page()
{
    echo '
Đây là trang Plugin Options - Advanced Settings
';
}

add_action('admin_menu', 'add_admin_submenu');

Ví dụ: Thêm một menu tên là Plugin Options vào danh sách Admin Menu của WordPress.

Trước tiên bạn tạo cho tôi một file tên là

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

7 nằm trong thư mục includes của

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

8 plugin (xem hinh).

Đừng quên require file này trong file chính của plugin function add_admin_menu() { add_menu_page ( 'Plugin Options', 'Plugin Options', 'manage_options', 'plugin-options', 'show_plugin_options', '', '2' ); } function show_plugin_options() { echo '

Đây là trang Plugin Options

'; } add_action('admin_menu', 'add_admin_menu');9 nhé.

Bạn bổ sung đoạn code sau vào file

function add_admin_menu()
{
    add_menu_page (
            'Plugin Options', 
            'Plugin Options', 
            'manage_options', 
            'plugin-options', 
            'show_plugin_options', 
            '', 
            '2' 
    );
}

function show_plugin_options()
{
    echo '
Đây là trang Plugin Options
';
}

add_action('admin_menu', 'add_admin_menu');

7.

• Bây giờ bạn login vào Admin và xem trên dàn menu sẽ thấy xuất hiện thêm một menu mới.
• Bạn click vào menu Plugin Options sẽ thấy nó chuyển sang một trang mới với nội dung là "Đây là trang Plugin Options". Tại đây bạn có thể thay đổi giao diện để code chức năng theo yêu cầu.

remove_menu_page()

3. Thêm Sub Menu vào Admin WordPress

function remove_menu()
{
    remove_menu_page('themes.php');
}

add_action('admin_menu', 'remove_menu');

remove_submenu_page()

Để thêm submenu thì bạn sử dụng hàm add_submenu_page, hàm này có cấu trúc như sau:Add New trong menu Users.

function remove_submenu()
{
    remove_submenu_page('users.php', 'user-new.php');
}

add_action('admin_menu', 'remove_submenu');

add_submenu_page ($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function = '' );2: URL của menu cha.

Ví dụ: Thêm 2 menu con gồm General Settings, Advance Settings vào menu Plugin Options mà ta đã tạo ở trên.

• add_dashboard_page()
• add_posts_page()
• add_media_page()
• add_pages_page()
• add_comments_page()
• add_theme_page()
• add_plugins_page()
• add_users_page()
• add_management_page()
• add_options_page()

Vì kiến thức quá nhiều nên mình sẽ không trình bày cách sử dụng các hàm này, bạn hãy click vào để xem các ví dụ mà WordPress Codex đã đưa ra để hiểu rõ hơn nhé.

5. Lời kết

Với danh sách các hàm này bạn có thể tạo một menu bất kì rồi đấy, tuy trong bài mình không trình bày đầy đủ nhưng với những đường link mình dẫn đến trang codex thì bạn hoàn toàn có thể tự học được.

Bài này mình xin dừng tại đây, bài tiếp theo có lẽ chúng ta sẽ tìm hiểu về Custom Meta Box.