Skip to main content

Какие frameworks поставляются в коробочной версии wordpress, чтобы их можно было использовать для построения интерфейсов admin-панели?

В «коробочной» версии WordPress нет полноценного JS-фреймворка как Laravel + Vue из коробки,
но есть встроенные инструменты, которые можно использовать.

🥇 1️⃣ Gutenberg (React) — главный встроенный framework

Внутри админки WordPress используется React.

WP поставляется с:

  • React

  • ReactDOM

  • wp.element

  • wp.components

  • wp.data

  • wp.apiFetch

  • wp.i18n

  • wp.hooks

Это называется WordPress JavaScript Packages.

Пример подключения:
wp_enqueue_script(
    'my-admin-script',
    plugins_url('admin.js', __FILE__),
    ['wp-element', 'wp-components', 'wp-api-fetch'],
    '1.0',
    true
);

И в JS:

const { Button, TextControl } = wp.components;
const { useState } = wp.element;

Это официальный способ.

✔ современный
✔ нативный
✔ безопасный
✔ используется в Gutenberg

Если делать сложный интерфейс — это лучший путь.

🥈 2️⃣ jQuery (встроен по умолчанию)

WordPress до сих пор включает jQuery.

wp_enqueue_script('jquery');

Подходит для:

  • простых форм

  • динамических элементов

  • AJAX

Но:

❌ это уже устаревший подход
❌ не подходит для сложного SPA-интерфейса

🥉 3️⃣ jQuery UI (частично встроен)

В комплекте есть:

  • Tabs

  • Accordion

  • Dialog

  • Datepicker

Подключается так:

wp_enqueue_script('jquery-ui-tabs');

Но выглядит немного устаревшим визуально.

🧩 4️⃣ Dashicons

Встроенная иконная библиотека.

wp_enqueue_style('dashicons');

🎨 5️⃣ Стандартные стили админки

Можно использовать встроенные CSS-классы:

  • .wrap

  • .form-table

  • .button

  • .notice

  • .widefat

  • .nav-tab-wrapper

  • .postbox

Пример:

<div class="wrap">
    <h1>SEO Settings</h1>
</div>

Это самый простой путь.

🚀 6️⃣ @wordpress/components (UI-библиотека)

Очень мощная вещь.

Компоненты:

  • Button

  • TextControl

  • SelectControl

  • ToggleControl

  • Panel

  • TabPanel

  • Notice

  • Modal

Пример:

wp.element.render(
    wp.element.createElement(
        wp.components.Button,
        { isPrimary: true },
        'Save'
    ),
    document.getElementById('app')
);

Это нативный WP-UI на React.

❗ Чего нет в коробке

  • Vue

  • Angular

  • Bootstrap

  • Tailwind

  • Material UI

Их можно подключить вручную, но это уже не «из коробки».

Варианты:

🔹 Простой интерфейс

→ стандартные WP формы + PHP
(самый быстрый способ)

🔹 Средний уровень

→ jQuery + AJAX

🔹 Профессиональный

→ React + wp.components

🧠 Дополнительные API WordPress

Ты можешь использовать:

  • REST API (register_rest_route)

  • Settings API

  • Options API

  • AJAX (admin-ajax.php)

  • Nonce security

Back to top