Як створити власне меню в адмінці 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',
        'Розділ 1',
        '1',
        'manage_options',
        'tabel-sub-1',
        'tabel_sub_1'
    );

    // Підменю 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>';
}

Як це виглядатиме?