Hướng dẫn thêm Tab vào trong Page Admin WordPress

Bạn đang phát triển plugin WordPress và muốn tạo tab khi click vào Option Page Menu,hãy xem hướng dẫn dưới đây của thiết kế web Sơn Web để thêm tab vào menu admin WordPress

Thêm tab vào plugin Admin WordPress

Bước 1: Tạo trang Admin Page

Bạn có thể dùng code mẫu sau để tạo Admin page

<?php

//Add admin page to the menu
add_action( 'admin_menu', 'add_admin_page');
function add_admin_page() {
  // add top level menu page
  add_menu_page(
    'My Plugin Settings', //Page Title
    'My Plugin', //Menu Title
    'manage_options', //Capability
    'my-plugin', //Page slug
    'admin_page_html' //Callback to print html
  );
}

Bạn có thể thay đổi các cài đặt này cho phù hợp với nhu cầu của mình.The ‘admin_page_html’ là của hàm cần gọi để tạo html cho trang quản trị của bạn. Ghi chú: Nếu bạn đang dùng class, có thể thay callback bằng ($this, ‘admin_page_html’).

Xem thêm: Cách ẩn Dashboard Widgets và thêm trong Bảng tin WordPress

Bước 2: Tạo Page dùng html trong tabs

Bạn có thể dùng đoạn code mẫu sau:

<?php 

//Admin page html callback
//Print out html for admin page
function admin_page_html() {
  // check user capabilities
  if ( ! current_user_can( 'manage_options' ) ) {
    return;
  }

  //Get the active tab from the $_GET param
  $default_tab = null;
  $tab = isset($_GET['tab']) ? $_GET['tab'] : $default_tab;

  ?>
  <!-- Our admin page content should all be inside .wrap -->

<div class="wrap">
    <!-- Print the page title -->
    
<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>

    <!-- Here are our tabs -->
    
<nav class="nav-tab-wrapper">
      <a href="?page=my-plugin" class="nav-tab <?php if($tab===null):?>nav-tab-active<?php endif; ?>">Default Tab</a>
      <a href="?page=my-plugin&tab=settings" class="nav-tab <?php if($tab==='settings'):?>nav-tab-active<?php endif; ?>">Settings</a>
      <a href="?page=my-plugin&tab=tools" class="nav-tab <?php if($tab==='tools'):?>nav-tab-active<?php endif; ?>">Tools</a>
    </nav>
<div class="tab-content">
    <?php switch($tab) :
      case 'settings':
        echo 'Settings'; //Put your HTML here
        break;
      case 'tools':
        echo 'Tools';
        break;
      default:
        echo 'Default tab';
        break;
    endswitch; ?>
    </div>


  </div>


  <?php
}

Ghi chú: Khi tạo tab các thẻ a được dùng trong class nav-tab-wrapper được cung cấp định dạng sẵn từ WordPress. Bài viết tham khảo từ: https://nimblewebdeveloper.com/blog/add-tabs-to-wordpress-plugin-admin-page Bạn cần code mẫu có thể comment bên dưới.