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

Создание плагина для 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, который регистрирует шорткод.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Во-первых, вам нужно добавить в WordPress элемент DOM (например, через шорткод), в котором вы можете смонтировать приложение Vue.

Затем вам нужно поставить в очередь скрипт библиотеки Vue.

Наконец, вам нужно создать приложение Vue в отдельном файле JavaScript и поставить его в очередь.

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

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

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

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Автор: Ahmed Bouchefra

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree