Создание пользовательских страниц в панели управления WordPress

Расширенные примеры создания страниц админки

Пример 1: Полноценный плагин с двумя страницами (настройки и список записей)

<?php
/*
Plugin Name: Demo Admin Pages
*/

class Demo_Admin_Pages {
    public function __construct() {
        add_action('admin_menu', [$this, 'register_pages']);
        add_action('admin_init', [$this, 'register_settings']);
    }

    public function register_pages() {
        // Основная страница
        add_menu_page(
            'Демо плагин',
            'Демо',
            'manage_options',
            'demo-main',
            [$this, 'render_main'],
            'dashicons-admin-generic',
            20
        );
        // Подстраница - настройки
        add_submenu_page(
            'demo-main',
            'Настройки',
            'Настройки',
            'manage_options',
            'demo-settings',
            [$this, 'render_settings']
        );
    }

    public function register_settings() {
        register_setting('demo_settings_group', 'demo_text_option');
        add_settings_section('demo_section', 'Основные настройки', null, 'demo-settings');
        add_settings_field('demo_field', 'Текст', [$this, 'field_callback'], 'demo-settings', 'demo_section');
    }

    public function field_callback() {
        $value = get_option('demo_text_option', '');
        echo "<input type='text' name='demo_text_option' value='" . esc_attr($value) . "' />";
    }

    public function render_main() {
        ?>
        <div class="wrap">
            <h1>Главная страница демо</h1>
            <p>Здесь можно вывести произвольную информацию.</p>
        </div>
        <?php
    }

    public function render_settings() {
        ?>
        <div class="wrap">
            <h1>Настройки демо</h1>
            <form action="options.php" method="post">
                <?php settings_fields('demo_settings_group'); ?>
                <?php do_settings_sections('demo-settings'); ?>
                <?php submit_button(); ?>
            </form>
        </div>
        <?php
    }
}
new Demo_Admin_Pages();

Результат: в меню появятся пункты «Демо» и подпункт «Настройки». На странице настроек отображается текстовое поле, значение сохраняется в wp_options.

После активации плагина в боковом меню WordPress появляется новая секция.

Пример 2: Страница с таблицей данных из кастомной таблицы БД

global $wpdb;
$table_name = $wpdb->prefix . 'custom_data';
// Создание таблицы (выполняется однократно при активации)
function create_custom_table() {
    global $wpdb;
    $charset_collate = $wpdb->get_charset_collate();
    $sql = "CREATE TABLE IF NOT EXISTS {$wpdb->prefix}custom_data (
        id int(11) NOT NULL AUTO_INCREMENT,
        name varchar(100) NOT NULL,
        email varchar(100) NOT NULL,
        PRIMARY KEY (id)
    ) $charset_collate;";
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
register_activation_hook(__FILE__, 'create_custom_table');

// Класс для отображения таблицы
if (!class_exists('WP_List_Table')) {
    require_once(ABSPATH . 'wp-admin/includes/class-wp-list-table.php');
}
class Custom_Data_Table extends WP_List_Table {
    function get_columns() {
        return ['cb' => '<input type="checkbox" />', 'name' => 'Имя', 'email' => 'Email'];
    }
    function prepare_items() {
        global $wpdb;
        $per_page = 10;
        $current_page = $this->get_pagenum();
        $total_items = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}custom_data");
        $this->set_pagination_args([
            'total_items' => $total_items,
            'per_page'    => $per_page
        ]);
        $offset = ($current_page - 1) * $per_page;
        $this->items = $wpdb->get_results(
            "SELECT name, email FROM {$wpdb->prefix}custom_data LIMIT $per_page OFFSET $offset",
            ARRAY_A
        );
    }
    function column_default($item, $column_name) {
        return esc_html($item[$column_name]);
    }
    function get_bulk_actions() {
        return ['delete' => 'Удалить'];
    }
}

// Страница админки
add_action('admin_menu', function() {
    add_menu_page('Данные', 'Данные', 'manage_options', 'custom-data', 'render_custom_data_page');
});
function render_custom_data_page() {
    $table = new Custom_Data_Table();
    $table->prepare_items();
    ?>
    <div class="wrap">
        <h1>Список данных</h1>
        <form method="post">
            <?php $table->display(); ?>
        </form>
    </div>
    <?php
}

Результат: страница «Данные» в админке содержит таблицу с записями из собственной таблицы БД, с пагинацией и чекбоксами.

При наличии записей в таблице wp_custom_data они отобразятся в виде таблицы с возможностью массового удаления.

Пример 3: Страница с обработкой AJAX-запросов

add_action('admin_menu', function() {
    add_menu_page('AJAX demo', 'AJAX demo', 'manage_options', 'ajax-demo', 'ajax_demo_page');
});
function ajax_demo_page() {
    ?>
    <div class="wrap">
        <h1>AJAX Demo</h1>
        <button id="ajax-button" class="button button-primary">Отправить AJAX запрос</button>
        <div id="ajax-response"></div>
    </div>
    <script>
        jQuery(document).ready(function($) {
            $('#ajax-button').click(function() {
                $.post(ajaxurl, {
                    action: 'my_ajax_action',
                    nonce: '<?php echo wp_create_nonce('my_ajax_nonce'); ?>'
                }, function(response) {
                    $('#ajax-response').html(response);
                });
            });
        });
    </script>
    <?php
}
add_action('wp_ajax_my_ajax_action', 'handle_my_ajax');
function handle_my_ajax() {
    check_ajax_referer('my_ajax_nonce', 'nonce');
    echo 'Сервер ответил: ' . date('H:i:s');
    wp_die();
}

Результат: на странице появляется кнопка, по нажатию выполняется AJAX-запрос к WordPress, ответ выводится в блок.

После клика на кнопку в контейнере появляется текущее время сервера.