Как создать собственное меню в админке WordPress: простое руководство для новичков Overcod.net

Как создать собственное меню в админке WordPress: простое руководство для новичков

В WordPress можно добавлять свои страницы настроек прямо в панель администратора. Это удобно, когда нужно создать собственный функционал: управление заявками, настройка плагина, отображение отчётов и многое другое.

В этой статье разберём, как создать собственное меню и подменю в админке WordPress. Будут примеры кода с комментариями, чтобы каждый мог использовать их в своём проекте.

Где писать код?

Лучше всего добавлять код в собственный плагин или в файл functions.php вашей темы (желательно дочерней, чтобы не потерять изменения при обновлении).

1. Создаём один пункт меню в админке WordPress

Этот код добавляет новый пункт в левом меню админки, например: «Заявка табелей».

// ================================
// Добавляем пункт меню в админку
// ================================
add_action('admin_menu', 'my_custom_menu');

function my_custom_menu() {

    // add_menu_page создаёт пункт меню верхнего уровня
    add_menu_page(
        'Заявка табелей',     // Заголовок страницы
        'Заявка табелей',     // Название в меню
        'manage_options',     // Права доступа (только админы)
        'tabel-request',      // Уникальный slug страницы
        'tabel_page_content', // Функция, выводящая содержимое
        'dashicons-clipboard',// Иконка в меню
        30                    // Позиция
    );
}

// ================================
// Содержимое страницы
// ================================
function tabel_page_content() {
    echo '<h1>Заявка табелей</h1>';
    echo '<p>Это пример собственной страницы в админке WordPress.</p>';
}

Что делает этот код?

Создаёт новый пункт в левом меню WordPress.
При клике открывает собственную страницу.
Можно разместить там таблицы, формы, настройки и т.д.

2. Создаём меню + четыре подменю

Теперь сделаем родительский пункт «Заявка табелей» и добавим к нему четыре подменю: 1, 2, 3, 4.

// ================================
// Создание меню с подменю
// ================================
add_action('admin_menu', 'tabel_menu_with_submenus');

function tabel_menu_with_submenus() {

    // Главное меню
    add_menu_page(
        'Заявка табелей',
        'Заявка табелей',
        'manage_options',
        'tabel-main',
        'tabel_main_page',
        'dashicons-clipboard',
        30
    );

    // Подменю 1
    add_submenu_page(
        'tabel-main',     // родительский slug
        'Раздел 1',       // Заголовок страницы
        '1',              // Название в меню
        'manage_options', // Права доступа
        'tabel-sub-1',    // slug
        'tabel_sub_1'     // callback
    );

    // Подменю 2
    add_submenu_page(
        'tabel-main',
        'Раздел 2',
        '2',
        'manage_options',
        'tabel-sub-2',
        'tabel_sub_2'
    );

    // Подменю 3
    add_submenu_page(
        'tabel-main',
        'Раздел 3',
        '3',
        'manage_options',
        'tabel-sub-3',
        'tabel_sub_3'
    );

    // Подменю 4
    add_submenu_page(
        'tabel-main',
        'Раздел 4',
        '4',
        'manage_options',
        'tabel-sub-4',
        'tabel_sub_4'
    );
}

// ========== Callback функции ==========

function tabel_main_page() {
    echo '<h1>Главная страница заявки табелей</h1>';
}

function tabel_sub_1() {
    echo '<h1>Раздел 1</h1>';
}

function tabel_sub_2() {
    echo '<h1>Раздел 2</h1>';
}

function tabel_sub_3() {
    echo '<h1>Раздел 3</h1>';
}

function tabel_sub_4() {
    echo '<h1>Раздел 4</h1>';
}

Как это будет выглядеть в админке