手札

WordPress创建后台编辑页面的完整指南

WordPress提供了多种方式来创建后台编辑页面，以下是几种主要方法的详细说明：

一、使用内置的add_menu_page函数

1. 基础菜单页面创建

add_action('admin_menu', 'create_custom_admin_page');

function create_custom_admin_page() {
    add_menu_page(
        '自定义仪表盘',          // 页面标题
        '我的插件',            // 菜单名称
        'manage_options',     // 所需权限
        'my-plugin-dashboard', // 菜单slug
        'render_dashboard_page', // 渲染函数
        'dashicons-admin-tools', // 图标
        20                     // 菜单位置
    );
}

function render_dashboard_page() {
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <div class="card">
            <h2 class="title">欢迎使用本插件</h2>
            <p>这里是您的自定义后台页面内容</p>
        </div>
    </div>
    <?php
}

2. 添加子菜单页面

add_action('admin_menu', 'add_settings_subpage');

function add_settings_subpage() {
    add_submenu_page(
        'my-plugin-dashboard',
        '插件设置',
        '设置',
        'manage_options',
        'my-plugin-settings',
        'render_settings_page'
    );
}

function render_settings_page() {
    ?>
    <div class="wrap">
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('my_plugin_options');
            do_settings_sections('my-plugin-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

二、设置API集成

1. 注册设置和字段

add_action('admin_init', 'register_plugin_settings');

function register_plugin_settings() {
    // 注册设置组
    register_setting(
        'my_plugin_options',  // 选项组
        'my_plugin_settings', // 选项名
        'sanitize_settings'   // 清理回调
    );

    // 添加设置区块
    add_settings_section(
        'main_section',       // ID
        '主要设置',           // 标题
        'render_section_desc', // 回调
        'my-plugin-settings'  // 页面
    );

    // 添加设置字段
    add_settings_field(
        'api_key',            // ID
        'API密钥',            // 标题
        'render_api_field',   // 回调
        'my-plugin-settings', // 页面
        'main_section'       // 区块
    );
}

function sanitize_settings($input) {
    $sanitized = array();
    if (isset($input['api_key'])) {
        $sanitized['api_key'] = sanitize_text_field($input['api_key']);
    }
    return $sanitized;
}

function render_section_desc() {
    echo '<p>配置插件的基本设置</p>';
}

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

三、高级页面开发

1. 创建数据表格页面

require_once ABSPATH . 'wp-admin/includes/class-wp-list-table.php';

class Custom_Items_Table extends WP_List_Table {
    function __construct() {
        parent::__construct([
            'singular' => 'item',
            'plural'   => 'items',
            'ajax'     => false
        ]);
    }

    function get_columns() {
        return [
            'cb'        => '<input type="checkbox" />',
            'title'     => '标题',
            'author'    => '作者',
            'date'      => '日期'
        ];
    }

    // 其他必要方法...
}

function render_items_page() {
    $table = new Custom_Items_Table();
    $table->prepare_items();
    ?>
    <div class="wrap">
        <h1>项目列表</h1>
        <form method="post">
            <?php $table->display(); ?>
        </form>
    </div>
    <?php
}

2. 创建多标签页面

function render_tabs_page() {
    $active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'general';
    ?>
    <div class="wrap">
        <h1>多标签页面</h1>
        
        <h2 class="nav-tab-wrapper">
            <a href="?page=my-plugin-tabs&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : ''; ?>">常规</a>
            <a href="?page=my-plugin-tabs&tab=advanced" class="nav-tab <?php echo $active_tab == 'advanced' ? 'nav-tab-active' : ''; ?>">高级</a>
        </h2>
        
        <div class="tab-content">
            <?php
            switch ($active_tab) {
                case 'advanced':
                    echo '<h3>高级设置</h3>';
                    break;
                default:
                    echo '<h3>常规设置</h3>';
            }
            ?>
        </div>
    </div>
    <?php
}