Tạo Settings Page đúng chuẩn WordPress, dễ mở rộng

Vì sao cần viết đúng chuẩn?

• Dễ bảo trì: Code rõ ràng, chia lớp hợp lý, không phụ thuộc theme.
• Dễ mở rộng: Dễ thêm field, thêm tab, hay tùy chọn mà không sửa code cũ.
• Tuân thủ nguyên tắc: Dùng hàm WordPress có sẵn như register_setting, add_settings_section, add_settings_field.
• Thân thiện với người dùng: Có giao diện admin quen thuộc, dễ hiểu.

1. Cấu trúc chuẩn của Settings Page

<?php
// File: settings-page.php

add_action('admin_menu', 'myplugin_register_settings_page');
function myplugin_register_settings_page() {
    add_options_page(
        'Cài đặt Plugin',
        'Plugin Settings',
        'manage_options',
        'myplugin-settings',
        'myplugin_render_settings_page'
    );
}

add_action('admin_init', 'myplugin_register_settings');
function myplugin_register_settings() {
    register_setting('myplugin_settings_group', 'myplugin_settings');

    add_settings_section(
        'myplugin_main_section',
        'Cài đặt chính',
        null,
        'myplugin-settings'
    );

    add_settings_field(
        'myplugin_field_example',
        'Tên website',
        'myplugin_field_example_cb',
        'myplugin-settings',
        'myplugin_main_section'
    );
}

function myplugin_field_example_cb() {
    $options = get_option('myplugin_settings');
    $value = isset($options['site_name']) ? esc_attr($options['site_name']) : '';
    echo '<input type="text" name="myplugin_settings[site_name]" value="' . $value . '" class="regular-text">';
}

function myplugin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>Cài đặt Plugin</h1>
        <form method="post" action="options.php">
            <?php
                settings_fields('myplugin_settings_group');
                do_settings_sections('myplugin-settings');
                submit_button();
            ?>
        </form>
    </div>
    <?php
}

2. Mở rộng: Thêm nhiều tab trong cùng một page

Nếu plugin của bạn có nhiều chức năng, hãy chia các phần cấu hình thành tab để UX tốt hơn. Gợi ý sử dụng tab bằng HTML và kiểm tra $_GET['tab'] để xử lý logic.

// Thêm trong myplugin_render_settings_page()

$tab = isset($_GET['tab']) ? sanitize_text_field($_GET['tab']) : 'general';

echo '<h2 class="nav-tab-wrapper">';
echo '<a href="?page=myplugin-settings&tab=general" class="nav-tab ' . ($tab === 'general' ? 'nav-tab-active' : '') . '">Cài đặt chung</a>';
echo '<a href="?page=myplugin-settings&tab=advanced" class="nav-tab ' . ($tab === 'advanced' ? 'nav-tab-active' : '') . '">Nâng cao</a>';
echo '</h2>';

Sau đó trong phần render, bạn kiểm tra `$tab` để gọi `do_settings_sections()` và `settings_fields()` tương ứng.

3. Lưu ý bảo mật

• Luôn dùng esc_attr(), esc_html(), sanitize_text_field() hoặc các hàm tương ứng khi xuất dữ liệu.
• Dùng current_user_can() để giới hạn quyền truy cập settings page.
• Đặt tên option riêng biệt theo prefix plugin, ví dụ: myplugin_settings.

4. Template khuyên dùng

Để giảm boilerplate, bạn có thể dùng một file cấu hình PHP dạng mảng để khai báo các field và render tự động qua loop. Cách này giúp dễ thêm/sửa field chỉ trong 1 dòng.

// settings-config.php
return [
  'general' => [
    [
      'id' => 'site_name',
      'label' => 'Tên website',
      'type' => 'text',
    ],
    [
      'id' => 'enable_feature',
      'label' => 'Bật tính năng X',
      'type' => 'checkbox',
    ],
  ]
];

Sau đó trong code chính, bạn chỉ cần loop để render input, tiết kiệm rất nhiều thời gian cho plugin lớn.

5. Tải về plugin mẫu

Bạn có thể tải một plugin mẫu đã cài đặt sẵn Settings Page chuẩn WordPress tại đây:

Kết luận

Viết Settings Page đúng chuẩn WordPress không chỉ là để đẹp hay “chuẩn code”, mà còn là để mở rộng plugin dễ dàng, an toàn, và thân thiện với người dùng. Với phương pháp trong bài viết này, bạn có thể tạo hệ thống settings linh hoạt cho mọi dự án plugin của mình.