Создание плагина для WordPress с помощью Vue

От автора: в этом руководстве мы рассмотрим создание плагина для WordPress и его интеграцию с Vue.js, чтобы обеспечить вашим пользователям современный пользовательский интерфейс.

Vue.js — очень популярная прогрессивная библиотека JavaScript для создания современных и мощных пользовательских интерфейсов, она подобна Angular и React с точки зрения популярности, производительности и архитектуры на основе компонентов. Мы рассмотрим весь процесс создания очень простого плагина WordPress с интерфейсом Vue, который взаимодействует с API-интерфейсом WordPress REST через API-интерфейс JavaScript Fetch.

Мы создадим шорткод, который позволит добавить виджет последних опубликованных записей на нашем сайте на WordPress. Пользовательский интерфейс виджета — это приложение Vue, которое извлекает последние опубликованные записи через фильтр /wp-json/wp/v2/posts?filter[orderby]=date конечной точки WP-API.

Это руководство предполагает некоторое знакомство с Vue.js. Мы увидим, как создать экземпляр Vue, использовать хуки жизненного цикла, такие как mount(), а также API-интерфейс JavaScript Fetch для взаимодействия с API-интерфейсом WordPress REST.

Создание плагина WordPress

В этом разделе мы рассмотрим, как создать плагин WordPress, который регистрирует шорткод.

Создайте каталог в wp-content/plugins

Начнем с создания back-end нашего плагина. Плагины размещаются внутри каталога wp-content/plugins. Перейдите в этот каталог и создайте подкаталог для своего плагина. Назовем это vueplugin:

cd /var/www/html/wp-content/plugins
mkdir vueplugin

Внутри каталога плагина создайте файл vueplugin.php и добавьте исходный контент:

<?php
/*
Plugin Name: Latest Posts
Description: Latest posts shortcode
Version: 1.0
*/

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

Создание шорткода

Шорткоды используются с плагинами WordPress, чтобы пользователи могли добавлять контент к записям и страницам. Чтобы зарегистрировать шорткод, вам нужно добавить в файл плагина следующий код:

function handle_shortcode() { return 'My Latest Posts Widget';
}
add_shortcode('latestPosts', 'handle_shortcode');

Мы регистрируем шорткод с именем latestPosts.

WordPress предоставляет встроенную функцию add_shortcode() для создания шорткода в плагине WordPress. Функция принимает в качестве первого параметра имя и в качестве второго параметра — функцию обработчика, которая обрабатывает логику шорткода и возвращает результат.

На данный момент мы возвращаем из нашего шорткода статическую строку, но шорткоды более полезны для вставки динамического контента.

Теперь давайте активируем плагин из панели администрирования, кликнув ссылку «Активировать» под именем плагина:

Вы можете использовать шорткод, заключая его в квадратные скобки, то есть [SHORTCODE_NAME]. Текст внутри скобок — это имя, которое мы передали в качестве первого параметра функции add_shortcode(). Он заменяется выводом, возвращаемым функцией PHP, переданной в качестве второго параметра.

Чтобы проверить, успешно ли зарегистрирован наш шорткод, мы можем создать новую запись и добавить [lastPosts] в содержимое записи:

Вы должны увидеть вывод My Latest Posts Widget:

Теперь вместо отображения статической строки My Latest Posts Widget давайте выведем последние записи, используя Vue.js.

Интеграция Vue.js с плагином WordPress

В документации Vue перечислены различные методы использования Vue.js. Самый простой — использовать тег script, чтобы включить скрипт библиотеки, это также и самый простой способ для интеграции Vue.js с WordPress. Вы можете интегрировать приложение Vue с WordPress в несколько простых шагов:

В отличие от традиционного подхода к использованию WordPress, использование Vue.js позволит вам улучшить эффективность взаимодействия и опыт пользователей. Вместо необходимости постоянной перезагрузки текущей страницы пользователи могут взаимодействовать со страницей и динамически обновлять интерфейс. Приложения, созданные с помощью Vue.js, называются SPA или одностраничными приложениями. Но в нашем случае вместо создания полного SPA мы будем использовать Vue.js только для создания простого виджета, который может использоваться для визуализации информации на небольшой части вашей страницы (например, в боковой панели). Вы можете представить себе виджеты, созданные с помощью Vue.js, как небольшие SPA.

Начнем с помещения в очередь загрузки WordPress библиотеки Vue. Нам нужно добавить в наш плагин еще одну функцию, которая обрабатывает регистрацию библиотеки Vue:

function enqueue_scripts(){ global $post; if(has_shortcode($post->post_content, "latestPosts")){ wp_enqueue_script('vue', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js', [], '2.5.17'); } }

Сначала мы проверяем, содержит ли отображаемая запись наш шорткод latestPosts, затем мы вставляем в очередь скрипт Vue с помощью функции wp_enqueue_script(). Вы можете проверить, включен ли скрипт, просмотрев исходный код страницы:

Затем вернитесь к функции handle_shortcode() и измените ее, включив div, в котором мы можем отобразить приложение Vue:

<div id="mount"></div>

Затем внутри папки плагина создайте файл lastposts.js и добавьте следующий код для создания экземпляра Vue:

( function() { var vm = new Vue({ el: document.querySelector('#mount'), mounted: function(){ console.log("Hello Vue!"); }
});
})();

Мы создаем новый экземпляр Vue с помощью функции Vue(), которая является первым этапом запуска приложения Vue. При создании экземпляра Vue вам также необходимо предоставить объект options, который позволяет указать различные параметры для создания вашего приложения Vue.

В нашем примере мы используем свойство el, чтобы предоставить экземпляру Vue существующий элемент DOM для монтирования. Это может быть либо селектор CSS, либо фактический HTMLElement. В нашем случае мы используем document.querySelector(‘#mount’), чтобы получить HTML-элемент из div с идентификатором #mount.

Мы также используем свойство mount для предоставления функции, которая будет вызвана после монтирования экземпляра. На этом этапе мы только регистрируем в консоли строку Hello Vue!.

Затем, как и библиотеку Vue, вам нужно вставить этот файл в очередь. Внутри функции enqueue_scripts() добавьте следующий код:

wp_enqueue_script('latest-posts', plugin_dir_url( __FILE__ ) . 'latest-posts.js', [], '1.0', true);

Встроенная функция plugin_dir_url() используется для получения абсолютного URL-адреса файла. __FILE__ — это константа, которая дает путь файловой системы к текущему файлу PHP. Это позволит нам получить абсолютный путь к файлу latest-posts.js без использования каких-либо жестко настроенных URL-адресов, которые могут быть изменены в другой системе.

На этом этапе вы должны увидеть в консоли браузера строку Hello Vue!:

И вы также должны увидеть скрипт latest-posts.js, включенный в исходный код записи, содержащей шорткод.

Затем давайте изменим плагин, чтобы отобразить строку My Latest Posts Widget, но на этот раз из Vue. В вашем экземпляре Vue укажите свойство шаблона с любым HTML-кодом, который вы хотите отобразить:

var vm = new Vue({ el: document.querySelector('#mount'), template: "<h1>My Latest Posts Widget</h1>", mounted: function(){ console.log("Hello Vue!"); }
});

Теперь давайте загрузим и опубликуем последние записи, используя API-интерфейс fetch. В экземпляре Vue добавьте свойство data с массивом записей, в котором будут храниться извлеченные записи:

var vm = new Vue({ el: document.querySelector('#mount'), data: { posts: [] },

Затем мы добавим код для получения последних записей в установленном событии жизненного цикла, которое запускается, когда компонент монтируется в DOM:

var url = '/wp-json/wp/v2/posts?filter[orderby]=date'; fetch(url).then((response)=>{} return response.json() ).then((data)=>{ this.posts = data; })

Мы вызываем метод JavaScript fetch(), который возвращает Promise. После успешного разрешения Promise мы присваиваем данные массиву posts. Наконец, добавьте свойство шаблона:

template: '<div><h1>My Latest Posts</h1>\ <div>\ <p v-for="post in posts">\ <a v-bind:href="post.link">{{post.title.rendered}}</span></a>\ </p>\ </div></div>',

Мы используем директиву Vue v-for для обработки записей через цикл и отображения свойств title.rendered и link для каждой записи. Это скриншот того, что получилось у меня.

В вашем случае это может выглядеть по-другому в зависимости от вашей активной темы и записей, которые у вас есть.
Если вы нажмете на заголовок записи, вы должны быть перенаправлены на страницу записи.

Мы можем добавить в виджет дополнительные функции, такие как извлечение данных в режиме реального времени, чтобы пользователю не нужно было перезагружать страницу, чтобы увидеть последние опубликованные записи. Мы можем добиться этого с помощью постоянного поллинга конечной точки WP-API через метод JavaScript setInterval().

Сначала переместите код, который извлекает записи в отдельный метод:

var vm = new Vue({ /*...*/ methods:{ fetchPosts: function(){ var url = '/wp-json/wp/v2/posts?filter[orderby]=date'; fetch(url).then((response)=>{ return response.json() }).then((data)=>{ this.posts = data; console.log(this.posts); }); } },

Мы используем свойство methods экземпляра Vue для добавления пользовательских методов в наш экземпляр Vue. Затем вы можете получить доступ к этим методам непосредственно в экземпляре через this. После этого в функции mount() добавьте следующий код для извлечения записей каждые пять секунд:

var vm = new Vue({ /*...*/ mounted: function() { console.log("Component is mounted"); this.fetchPosts(); setInterval(function () { this.fetchPosts(); }.bind(this), 5000); }

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

Заключение

В этом руководстве мы рассмотрели, как создать плагин WordPress, который использует библиотеку Vue.js. Мы создали шорткод, который можно использовать для отображения в записях и на страницах компонента Vue, которые извлекают и отображают последние записи каждые пять секунд. Это было сделано с помощью поллинга WordPress REST API через метод setInterval().

Автор: Ahmed Bouchefra

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.