Для понимания процесса разработки плагина на популярном движке WordPress совместно с JS фреймворком Vue 3 (composition api синтаксис script setup) рассмотрим простой пример, где реализуем серверный вывод данных из базы данных MySQL на клиент в таблицу Ant Design (популярной библиотеки разработки пользовательских интерфейсов).
Так же предусмотрим асинхронный серверный функционал для поиска, сортировки и пагинации данных таблицы.
Подробно рассмотрим по шагам весь процесс решения данной задачи:.
Шаг 1: Установка необходимых инструментов
Перед тем как начать, убедимся, что у нас установлены следующие инструменты:
- Node.js и npm: Если у нас их еще нет, скачаем и установим по официальной ссылке. npm устанавливается вместе с Node.js.
- Vite: Это инструмент сборки, который позволяет быстро разрабатывать и компилировать Vue приложения. Мы установим его через npm.
Шаг 2: Создание структуры папок плагина
Создадим структуру папок для нашего плагина:
cd wp-content/plugins
mkdir my-custom-table-plugin
cd my-custom-table-plugin
Шаг 3: Создание основного PHP файла плагина
Создадим файл my-custom-table-plugin.php в этой папке:
<?php
/**
* Plugin Name: My Custom Table Plugin
* Description: Плагин для отображения таблицы из БД с использованием Vue 3 и Ant Design.
* Version: 1.0
* Author: Your Name
*/
// Защита от прямого доступа
if (!defined('ABSPATH')) {
exit;
}
// Подключение скриптов и стилей
function my_custom_table_plugin_enqueue_scripts() {
wp_enqueue_script('my-vue-app', plugins_url('/dist/main.js', __FILE__), ['wp-element'], '1.0', true);
wp_enqueue_style('ant-design', 'https://cdnjs.cloudflare.com/ajax/libs/antd/4.18.5/antd.min.css');
}
add_action('wp_enqueue_scripts', 'my_custom_table_plugin_enqueue_scripts');
// Рендерим компонент
function my_custom_table_plugin_render() {
return '<div id="my-vue-app"></div>';
}
add_shortcode('my_custom_table', 'my_custom_table_plugin_render');
Шаг 4: Инициализация проекта с Vite и Vue
В папке плагина (где мы создали my-custom-table-plugin), инициализируем проект с помощью Vite:
npm init vite@latest client --template vue
Это создаст новую папку client с шаблоном Vue.
Перейдиём в папку client:
cd client
Установим зависимости:
npm install
Установим Ant Design Vue:
npm install ant-design-vue
Шаг 5: Настройка Vite
Теперь нам нужно настроить Vite для правильной сборки.
Откроем файл vite.config.js в папке client и изменим его следующим образом:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
export default defineConfig({
plugins: [vue()],
build: {
outDir: resolve(__dirname, '../dist'), // Компилируем в ../dist
emptyOutDir: true,
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
},
},
},
});
Шаг 6: Создание Vue компонента
Теперь мы создадим компонент, который будет отображать таблицу.
В папке client/src/components/ создадим файл TableComponent.vue и добавим следующий код:
<template>
<a-table
:data-source="data"
:pagination="pagination"
:loading="loading"
:columns="columns"
@change="handleChange"
/>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { Table } from 'ant-design-vue';
const data = ref([]);
const loading = ref(true);
const pagination = ref({
current: 1,
pageSize: 10,
total: 0,
});
const columns = [
{
title: 'Имя',
dataIndex: 'name',
sorter: true,
},
{
title: 'Возраст',
dataIndex: 'age',
sorter: true,
},
{
title: 'Город',
dataIndex: 'city',
},
];
const fetchData = async () => {
loading.value = true;
const response = await fetch(`/wp-json/myplugin/v1/data?page=${pagination.value.current}&pageSize=${pagination.value.pageSize}`);
const result = await response.json();
data.value = result.data;
pagination.value.total = result.total;
loading.value = false;
};
const handleChange = (pagination) => {
pagination.value.current = pagination.current;
fetchData();
};
onMounted(() => {
fetchData();
});
</script>
Шаг 7: Инициализация нашего Vue приложения
Откроем файл main.js в папке client/src/ и импортируем новый компонент и библиотеки:
import { createApp } from 'vue';
import App from './App.vue';
import TableComponent from './components/TableComponent.vue';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.component('TableComponent', TableComponent);
app.mount('#my-vue-app');
Шаг 8: Настройка REST API
В my-custom-table-plugin.php добавим код для обработки API запросов (по такому принципу создаются все API на стороне WordPress):
add_action('rest_api_init', function () {
register_rest_route('myplugin/v1', '/data', [
'methods' => 'GET',
'callback' => 'my_custom_table_api',
]);
});
function my_custom_table_api(WP_REST_Request $request) {
global $wpdb;
$page = $request->get_param('page') ?: 1;
$page_size = $request->get_param('pageSize') ?: 10;
$offset = ($page - 1) * $page_size;
$results = $wpdb->get_results("SELECT name, age, city FROM your_table_name LIMIT $offset, $page_size");
$total = $wpdb->get_var("SELECT COUNT(*) FROM your_table_name");
return [
'data' => $results,
'total' => $total,
];
}
Не забудем заменить your_table_name на реальное название нашей таблицы в базе данных.
Шаг 9: Компиляция проекта
Теперь, когда все настроено, мы можем скомпилировать проект:
Перейдём в папку client и выполним команду для сборки проекта:
npm run build
Это создаст папку dist, которая будет содержать скомпилированные файлы нашего Vue приложения.
Шаг 10: Проверка в режиме разработки
Для работы в режиме разработки выполним команду в папке client:
npm run dev
Это стартует сервер Vite, и наше Vue приложение будет доступно по адресу http://localhost:3000 (порт может быть и другим).
Шаг 11: Проверка работы плагина
- Активируем плагин через меню "Плагины" в админке WordPress.
- Вставем шорткод
[my_custom_table]в любой пост или страницу. - Обновим страницу и проверим таблицу.
Теперь при каждом обращении к /wp-json/myplugin/v1/data мы получаем данные из нашей базы данных, и данные будут отображаться в таблице Ant Design.
Наблюдение за изменениями в режиме разработки и в продакшене
Режим разработки:
При запуске npm run dev, мы работаем с локальным сервером Vite. Изменения в наших компонентах будут отображаться автоматически на странице, если мы сохраним (обновим) её.
Режим продакшена:
При компиляции проекта с помощью npm run build, все наши изменения будут собраны в папке dist. После этого обновим наш плагин в WordPress, чтобы использовать новые версии JS и CSS. Можно просто обновить страницу сайта, где используется шорткод [my_custom_table], чтобы увидеть новые изменения.
Теперь наш плагин готов к использованию и отражению данных из нашей базы данных с помощью Vue и Ant Design!
Вот по такому принципу можно создавать полноценные многофункциональные SPA-приложения на базе Vue с использованием WordPress.
