12. Tạo mới WordPress admin menu page

Một ví dụ đã làm:

Removes an admin submenu.

add_action( 'admin_init', 'wpse_136058_debug_admin_menu' );

function wpse_136058_debug_admin_menu() {
  remove_submenu_page( 'themes.php', 'infinite-photography-pro-license' );
}

Mặc định Admin (Trang quản trị) chỉ hiện thị vài menu có link trỏ đến các page quan trọng như là Pages, Posts, Plugins, Tools…vv, vậy muốn thêm vài menu vào được không ? câu hỏi này được đặt tôi đưa ra trong quá trình học tập và nghiên cứu WordPress, hiện nay có vài plugin hỗ trợ bạn chỉnh sửa giao diện trang admin hoặc thêm mới một vài menu vào. Nhưng tôi sẽ không khuyến khích làm điều này vì không phải bất cứ vấn đề nào bạn cũng có thể lạm dụng cài vào các plugin hỗ trợ, mà tôi sẽ hướng dẫn bạn tự tạo ra plugin để nhúng các menu mới vào vị trí bất kì trong admin mà bạn thích. Nội dung trong bài Tạo mới WordPress admin menu page sẽ rất ngắn gọn nhưng không phải vì thế mà bạn bỏ qua nó đâu nhé, sẽ hối hận về sau đấy.

1/ WordPress Admin menu page là gì ?

Admin menu page là hệ thống quản lý danh sách các menu trong vùng admin, nó giúp bạn tạo ra các menu trỏ link đến các page để quản lý plugin, cài đặt, viết bài mới.

Ngoài các menu mặc định được tạo ra sẵn sau khi cài đặt WordPress, thì bạn hoàn toàn có thể thêm mới một số menu để phục vụ nhu cầu công việc của bạn , ví dụ bạn viết plugin mới và bạn có thiết lập môt page để quản lý các thông số của plugin, bạn buộc phải tạo ra một menu mới dẫn link tới page quản lý của plugin đó.

Vậy chốt lại các vấn đề thì admin menu page là hệ thống quản lý danh sách các menu trong vùng admin, nó trỏ link đến các page để chỉnh sửa và thêm mới một hành động nào đó.

2/ Thêm menu mới vào nhóm menu có sẵn

Mục đích chính trong phần này, tôi sẽ hướng dẫn bạn thêm menu mới vào bất kì vị trí nào trong nhóm menu đã có sẵn trong hệ thống WordPress.

Cú pháp:

1

add_posts_page( $page_title, $menu_title, $capability, $menu_slug, $function);

Với code trên thì bạn sẽ thêm menu mới nằm vào vị trí ở menu Posts. Ngoài ra bạn còn có thể thêm menu mới vào bất kì nhóm menu nào mà bạn thích bằng các danh sách hàm hỗ trợ dưới đây.

Hàm hỗ trợ thêm admin menu page mới

add_dashboard_page(…) – Thêm menu mới vào vùng dashboard add_media_page (…) – Thêm menu mới vào vùng media add_pages_page (…) – Thêm menu mới vào vùng pages add_comments_page (…) – Thêm menu mới vào vùng comments add_theme_page (…) – Thêm menu mới vào vùng Appearance->themes add_plugins_page (…) – Thêm menu mới vào vùng plugin add_users_page (…) – – Thêm menu mới vào vùng users add_management_page (…) – Thêm menu mới vào vùng managent add_options_page (…) – Thêm menu mới vào vùng setttings

Tham số:

· $page_title: Tiêu đề trang, hiển thị trong thẻ <title>

· $menu_title: Tên của menu hiển thị trong admin

· $capability: Khai báo quyền hạn quản lý của menu

· $menu_slug: Tên slug dẫn link tới menu

· $function: Tên hàm chức năng hiển thị nội dung ở trang

Kế tiếp tôi sẽ sử dụng plugin Lionel Filter Hook mà tôi đã trình bày ở bài Sử dụng Filter Hook toàn tập tiếp tục sử dụng cho bài viết này, như bạn đã biết chúng ta có 2 file là frontend.php & backend.php, vậy trong bài này tôi sẽ sử dụng file backend.php để thực thi các hành động hiển thị menu page trong admin.

Nội dung file backend.php:

1

2

3

4

5

6

7

8

9

10

<?php

class LionelBackend {

public function __construct(){

echo "<br />" .__METHOD__;

}

}

Kiểm tra bằng cách truy cập vào link http://localhost/wordpress/wp-admin/, nếu trình duyệt trả về kết quả như hình thì class đã hoạt động rồi đấy.

admin-menu-page-show-method

Kế tiếp tôi sẽ thêm menu Lionel Settings vào vùng dashboard, tức là nó sẽ hiển thị trong khu vực này.

Để làm việc này bạn cần khởi tạo hai hàm, một hàm hứng các giá trị của hàm hỗ trợ thêm menu, một hàm hiện thị chức năng của menu mới được thêm vào.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<?php

class LionelBackend {

public function __construct(){

add_action('admin_menu', array($this, 'addSettingNewPage'));

}

//=====================================================

// Thêm một menu vào phần dashboard bằng hàm add_dashboard_page

//=====================================================

public function addSettingNewPage(){

$menuSlug = 'add-setting-new-page';

add_dashboard_page('Add setting new page', 'Lionelpham Settings'

,'manage_options',$menuSlug, array($this, 'doSettingNewPage'));

}

public function doSettingNewPage(){

echo "<h2>Add setting new page</h2>";

}

}

Để thêm vào hệ thống WordPress một hành động nào đó tương tác được với plugin thì bạn dùng hàm add_action(), và Hook mà chúng ta muốn can thiệp là admin_menu.

manage_options là phần quyền hạn quản lý menu bạn có thế xem chi tiết hơn tại link http://codex.wordpress.org/Roles_and_Capabilities

Ý nghĩa của các tham số thì tôi đã trình bày ở trên rồi hen, nhưng đễ bạn nắm bắt vấn đề tốt hơn. Tôi sẽ giải thích code trong hàm addSettingNewPage(). Đầu tiên bạn khởi tạo $menuSlug chứa giá trị của slug (link của menu), lý do vì sao phải tạo ra biến này thì tôi sẽ giải thích sau. Hoặc nếu bạn chưa biết đặt slug gì thì có thể sử dụng hằng số __FILE__ lấy tên file đang sử dụng đặt tên cho slug cũng là một giải pháp không tồi tí nào.

Phần quản lý quyền truy cập của menu thì bạn tham khảo thêm ở link phía trên, tôi sẽ cho nó giá trị manage_options, và cuối cùng là gọi hàm doSettingNewPage() để thực hiện việc hiển thị chức năng vào.

Còn hai tham số đầu tiên tôi sẽ không giải thích vì nó quá đơn giản để bạn tiếp thu. Nếu bạn chưa biết nó là gì thì mời kéo bài lên phía trên xem phần định nghĩa tham số.

Kết quả: Khi click vào menu Lionel Settings thì trình duyệt sẽ chuyển bạn tới page thuộc menu Lionel Settings như hình.

admin-menu-page-show-add-new-page

3/ Thêm vào những nhóm menu mới

Sau khi bạn thêm vào thành công menu mới vào vùng của một menu có sẵn trong hệ thống thì kế tiếp, tôi sẽ hướng dẫn bạn thêm vào một menu mới nằm ngang hàng với nhóm menu có sẵn.

Cú pháp:

1

add_menu_page( page_title, menu_title, capability, menu_slug, function,icon_url, position );

Tham số:

Nó gần giống với các tham số ở hàm thêm menu mới vào nhóm menu có sẵn bao gồm 5 tham số cũ và 2 tham số mới như sau.

· $page_title: Tiêu đề trang, hiển thị trong thẻ <title>

· $menu_title: Tên của menu hiển thị trong admin

· $capability: Khai báo quyền hạn quản lý của menu

· $menu_slug: Tên slug dẫn link tới menu

· $function: Tên hàm chức năng hiển thị nội dung ở trang

· $icon_url: Đường dẫn hiển thị hình ảnh biểu tượng menu

· $position: Vị trí sắp xếp menu

Đây là vị trí của nhóm menu có sẵn.

admin-menu-page-position-add-menu

Vậy, giờ bạn sẽ thêm menu mới vào trước nhóm menu Dashboard, tức là tham số position sẽ là số 1.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<?php

class LionelBackend {

public function __construct(){

add_action('admin_menu', array($this, 'settingMenu'));

}

//=====================================================

// Thêm một menu vào phần dashboard bằng hàm add_dashboard_page

//=====================================================

public function addSettingNewPage(){

$menuSlug = 'add-setting-new-page';

add_dashboard_page('Add setting new page', 'Lionel Settings'

,'manage_options',$menuSlug, array($this, 'doSettingNewPage'));

}

public function doSettingNewPage(){

echo "<h2>Add setting new page</h2>";

}

//=======================================================

//2. Them mot nhom menu moi vao he thong menu WP

//=======================================================

public function settingMenu(){

$menuSlug = 'lionel-filter-setting';

add_menu_page('My Setting title', 'My Setting', 'manage_options',

$menuSlug,array($this,'settingPage')

, LIONEL_FILTER_IMG_DIR . '/icon-setting16x16.png', 1);

}

}

Tôi chỉ giải thích hai tham số mới ở đoạn code trên mà thôi, phần biểu tượng hình ảnh thì bạn tìm những hình có kích cỡ 16×16 để hiên thị cho nó đẹp mắt nha., số 1 là vị trí menu mới sẽ hiển thị.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<?php

class LionelBackend {

public function __construct(){

add_action('admin_menu', array($this, 'settingMenu'));

}

//=====================================================

// Thêm một menu vào phần dashboard bằng hàm add_dashboard_page

//=====================================================

public function addSettingNewPage(){

$menuSlug = 'add-setting-new-page';

add_dashboard_page('Add setting new page', 'Lionel Settings'

,'manage_options',$menuSlug, array($this, 'doSettingNewPage'));

}

public function doSettingNewPage(){

echo "<h2>Add setting new page</h2>";

}

//=======================================================

//2. Them mot nhom menu moi vao he thong menu WP

//=======================================================

public function settingMenu(){

$menuSlug = 'lionel-filter-setting';

add_menu_page('My Setting title', 'My Setting', 'manage_options',

$menuSlug,array($this,'settingPage')

, LIONEL_FILTER_IMG_DIR . '/icon-setting16x16.png', 1);

}

public function settingPage(){

echo "<h2>Setting Page</h2>";

}

}

Thực hiện xong đoạn code trên thì bạn F5 trình duyệt sẽ thấy Nhóm menu My Setting hiển thị ở vị trí nằm trên nhóm menu Dashboard,.

admin-menu-page-add-icons-menu

# Hàm add_submenu_page()

Cú pháp:

1

2

add_submenu_page( parent_slug, page_title, menu_title,

capability,menu_slug, function );

Tức là submenu sẽ được thêm vào menu cha bất kì được chỉ định.

Tham số:

· $parent_slug: Slug của menu cha

· $page_title: Tiêu đề trang, hiển thị trong thẻ <title>

· $menu_title: Tên của menu hiển thị trong admin

· $capability: Khai báo quyền hạn quản lý của menu

· $menu_slug: Tên slug dẫn link tới menu

· $function: Tên hàm chức năng hiển thị nội dung ở trang

· $icon_url: Đường dẫn hiển thị hình ảnh biểu tượng menu

$position: Vị trí sắp xếp menu

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<?php

class LionelBackend {

public function __construct(){

add_action('admin_menu', array($this, 'settingMenu'));

}

//=====================================================

// Thêm một menu vào phần dashboard bằng hàm add_dashboard_page

//=====================================================

public function addSettingNewPage(){

$menuSlug = 'add-setting-new-page';

add_dashboard_page('Add setting new page', 'Lionel Settings'

,'manage_options',$menuSlug, array($this, 'doSettingNewPage'));

}

public function doSettingNewPage(){

echo "<h2>Add setting new page</h2>";

}

//=======================================================

//2. Them mot nhom menu moi vao he thong menu WP

//=======================================================

public function settingMenu(){

$menuSlug = 'lionel-filter-setting';

add_menu_page('My Setting title', 'My Setting', 'manage_options',

$menuSlug,array($this,'settingPage')

, LIONEL_FILTER_IMG_DIR . '/icon-setting16x16.png', 1);

//=====================================================

// Submenu được thêm vào menu My Setting

//=====================================================

add_submenu_page($menuSlug, "About title", "About", 'manage_options',

$menuSlug . '-about',array($this,'aboutPage'));

add_submenu_page($menuSlug, "Help title", "Help", 'manage_options',

$menuSlug . '-help',array($this,'helpPage'));

}

public function settingPage(){

echo "<h2>Setting Page</h2>";

}

public function aboutPage(){

echo '<h2> My About</h2>';

}

public function helpPage(){

echo '<h2> My Help</h2>';

}

}

Lý giải hai đoạn code hỗ trợ thêm submenu.

1

2

3

4

5

add_submenu_page($menuSlug, "About title", "About", 'manage_options',

$menuSlug . '-about',array($this,'aboutPage'));

add_submenu_page($menuSlug, "Help title", "Help", 'manage_options',

$menuSlug . '-help',array($this,'helpPage'));

$menuSlug là slug của menu cha, About là tên hiển thị của menu, manage_options là quyền hạn menu cho phép Super Admin& Admin tương tác vào, $menuSlug sẽ nối với tiền tố slug của submenu và cuối cùng là hàm hiển thị chức năng nội dung của page.

admin-menu-page-add-submenu

Bạn có thể kiểm tra bằng cách click vào link của 2 menu con mới vừa thêm vào xem nó có nhảy tới page và slug vừa khởi tạo không.

# Hàm remove_menu_page() & remove_submenu_page

Để xóa một menu đã tồn tại trong hệ thống thì bạn dùng cú pháp như sau.

1

2

3

$menuSlug = 'lionel-filter-setting';

remove_submenu_page( $menuSlug, $menuSlug . '-about' );

remove_menu_page( $menuSlug );

– $menuSlug: Tên slug menu cần xóa – $menuSlug . ‘tien_to’: Tên slug cha nối với tiền tố của slug con muốn xóa

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<?php

class LionelBackend {

public function __construct(){

add_action('admin_menu', array($this, 'removeMenu'));

}

//=====================================================

// Thêm một menu vào phần dashboard bằng hàm add_dashboard_page

//=====================================================

public function addSettingNewPage(){

$menuSlug = 'add-setting-new-page';

add_dashboard_page('Add setting new page', 'Lionel Settings'

,'manage_options',$menuSlug, array($this, 'doSettingNewPage'));

}

public function doSettingNewPage(){

echo "<h2>Add setting new page</h2>";

}

//=======================================================

//2. Them mot nhom menu moi vao he thong menu WP

//=======================================================

public function settingMenu(){

$menuSlug = 'lionel-filter-setting';

add_menu_page('My Setting title', 'My Setting', 'manage_options',

$menuSlug,array($this,'settingPage')

, LIONEL_FILTER_IMG_DIR . '/icon-setting16x16.png', 1);

//=====================================================

// Submenu được thêm vào menu My Setting

//=====================================================

add_submenu_page($menuSlug, "About title", "About", 'manage_options',

$menuSlug . '-about',array($this,'aboutPage'));

add_submenu_page($menuSlug, "Help title", "Help", 'manage_options',

$menuSlug . '-help',array($this,'helpPage'));

}

public function settingPage(){

echo "<h2>Setting Page</h2>";

}

public function aboutPage(){

echo '<h2> My About</h2>';

}

public function helpPage(){

echo '<h2> My Help</h2>';

}

//=======================================================

//3. Xoa bo cac menu trong he thong menu cua WP

//=======================================================

public function removeMenu(){

$menuSlug = 'lionel-filter-setting';

remove_submenu_page( $menuSlug, $menuSlug . '-about' );

remove_menu_page( $menuSlug );

}

}

Đoạn code này sẽ làm nhóm menu My Setting sẽ bị loại bỏ ra khỏi hệ thống quản lý menu của WordPress.

Ngoài ra bạn cũng có thể thực hiện đoạn code này để loại bỏ danh sách menu mặc định.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//=====================================================

// Xóa các menu đang tồn tại trong admin

//=====================================================

public function removeMenuAll() {

remove_menu_page( 'index.php' ); //Dashboard

remove_menu_page( 'edit.php' ); //Posts

remove_menu_page( 'upload.php' ); //Media

remove_menu_page( 'edit.php?post_type=page' ); //Pages

remove_menu_page( 'edit-comments.php' ); //Comments

remove_menu_page( 'themes.php' ); //Appearance

remove_menu_page( 'plugins.php' ); //Plugins

remove_menu_page( 'users.php' ); //Users

remove_menu_page( 'tools.php' ); //Tools

remove_menu_page( 'options-general.php' ); //Settings

}

Chiêu này thường dùng cho việc khách hàng không thanh toán tiền, hoặc xích mích hay vi phạm điểu khoản gì đó

4/ Kết bài

Bạn thấy đấy, việc tạo ra nhóm menu mới thêm vào bên trong admin menu page cũng khá là đơn giản, chỉ cần hiểu được cấu trúc và cách sử dụng các hàm mà WordPress hỗ trợ là làm được ngay, đâu cần phải cài thêm plugins hỗ trợ làm gì cho website load nặng hơn chứ. Qua bài Tạo mới WordPress admin menu page thì tôi tin rằng bạn đang sở hữu một lượng kiến thức nhỏ nhưng rất quan trọng trên con đường chinh phục WordPress. Thông điệp mà tôi muốn gửi đến bạn rằng, bạn hoàn toàn có thể tự viết ra những plugin riêng cho mình, đừng lúc nào cũng sử dụng plugin của người khác bởi vì bạn đang là “Nhà phát triển WordPress”.

Series Navigation<< Sử dụng Filter Hook toàn tậpSử dụng WordPress Options API toàn tập >>

Nguồn: laptrinhweb.org

Previous11. Sử dụng Filter Hook toàn tậpNext13. Sử dụng WordPress Options API toàn tập

Last updated