В сегодняшней цифровой среде создание динамичных и интерактивных веб-приложений стало главным приоритетом для разработчиков. С появлением фреймворков JavaScript, таких как Vue.js, и широким распространением систем управления контентом (CMS), таких как WordPress, объединение этих технологий стало мощным решением для создания многофункциональных веб-сайтов.
В этом руководстве мы рассмотрим, как использовать возможности Vue.js в экосистеме WordPress. Мы рассмотрим процесс настройки Vue.js с WordPress, охватывая все, от установки до передовых методов плавной интеграции. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это руководство предоставит вам знания и инструменты, необходимые для эффективного использования Vue.js с WordPress и создания интересных веб-интерфейсов.
Что такое VueJs?
Vue.js — это прогрессивная среда JavaScript, используемая для создания пользовательских интерфейсов. Он известен своей простотой и гибкостью, что делает его популярным выбором среди разработчиков для создания динамических и интерактивных веб-приложений.
Vue.js использует компонентную архитектуру, позволяющую разработчикам разбивать свои приложения на повторно используемые и модульные компоненты, которыми можно легко управлять и обслуживать. Благодаря легкому обучению и обширной документации Vue.js позволяет разработчикам с легкостью эффективно создавать современные веб-приложения.
Создавайте потрясающие сайты
С лучшим бесплатным конструктором страниц Elementor
Начать сейчасЗачем использовать Vue в WordPress?
Есть несколько веских причин использовать Vue.js в сочетании с WordPress.
Во-первых, Vue.js известен своей простотой, что делает его идеальным выбором для разработчиков, желающих быстро изучить и внедрить современную среду JavaScript.
Кроме того, интеграция Vue.js с WordPress дает практические преимущества.
Например, традиционные библиотеки, такие как jQuery, могут быть менее масштабируемыми и в определенных сценариях могут приводить к конфликтам. Используя Vue.js вместе с WordPress в качестве API, разработчики могут значительно повысить скорость и производительность своих веб-сайтов.
Vue.js также легко компонуется, что позволяет упростить реализацию пользовательских интерфейсов в плагинах, панелях администратора и других областях сайта WordPress. Его компонентно-ориентированная архитектура делает его универсальным и эффективным инструментом для создания современных веб-приложений в экосистеме WordPress.
Более того, WordPress поддерживает более 25% известной сети, а это означает, что он, вероятно, уже является частью вашего стека разработки или стека ваших клиентов. Широкое распространение WordPress делает интеграцию Vue.js естественным выбором для фронтенд-разработки.
Способы использования WordPress и Vue?
Здесь мы обсудим два способа использования Vue и WP в целом. Давайте посмотрим, как заставить их работать вместе!
1. Создайте SPA в качестве дополнительного веб-сайта/приложения.
Vue можно использовать для разработки «дополнительного веб-сайта» в панели администратора WordPress. Этот подход полезен для создания сложных плагинов или пользовательских страниц администрирования, требующих системы вкладок или многостраничных систем.
В отличие от обычных методов WordPress, использование Vue обеспечивает более плавные переходы между страницами без полной перезагрузки страницы, что повышает удобство работы пользователя.
Кроме того, Vue позволяет создавать более элегантные и настраиваемые элементы пользовательского интерфейса по сравнению со стандартными элементами пользовательского интерфейса WordPress. Ниже приведен пример пользовательской страницы администратора, созданной с помощью Vue.
Показанный здесь пользовательский интерфейс (UI) принадлежит плагину WP Rocket в панели администратора WordPress. Этот пользовательский интерфейс полностью настраивается и имеет собственные подстраницы, представленные в виде вкладок. Каждая вкладка соответствует отдельному дополнительному URL-адресу, что упрощает обмен информацией с другими. По сути, он напоминает миниатюрный веб-сайт в панели администратора WP.
Достичь такой настройки легко с помощью Vue и Vue-router. Однако есть один аспект, требующий пристального внимания: обработка URL-адресов. Учитывая сосуществование двух «веб-сайтов» — панели администратора WordPress и интерфейса на базе Vue — могут возникнуть потенциальные конфликты URL-адресов.
Чтобы решить эту проблему, достаточно простой настройки экземпляра Vue Router. В частности, вам необходимо изменить два параметра:
- Базовый вариант: он должен быть установлен для вашего пользовательского маршрута страницы WP.
- Параметр режима: должно быть установлено значение «хеш».
Использование режима «хеширования» гарантирует, что вместо изменения всего URL-адреса будут использоваться хеши, что снижает потенциальные конфликты.
Более того, стоит отметить, что вы также можете заменить другие страницы WordPress, такие как страница редактора контента, используя аналогичные методы, как показано на примере редактора Elementor .
Обычный редактор WordPress превращается в структурированный интерфейс, в котором для обозначения вложенных URL используются хеш-символы.
По сути, можно создать дополнительный веб-сайт в различных разделах панели администратора WordPress, таких как страницы плагинов, редакторы, информационные панели или интерфейсы среднего офиса.
Для этого процесс включает использование Vue CLI или альтернативного инструмента для создания автономного одностраничного приложения Vue (SPA). Впоследствии соответствующим образом настройте параметры базы и режима маршрутизатора, экспортируйте приложение и интегрируйте его в WordPress с помощью соответствующих перехватчиков в экосистеме WordPress.
2. Создайте повторно используемые компоненты во внешнем интерфейсе или администраторе.
Веб-сайты включают в себя различные микровзаимодействия, такие как переключатели меню, раскрывающиеся списки, аккордеоны и карусели. В совокупности эти элементы образуют так называемый набор пользовательского интерфейса. Кроме того, некоторые компоненты могут взаимодействовать с данными асинхронно, например кнопки «Мне нравится» или «голосовать», формы и пользовательские медиаплееры.
Важно отметить, что при интеграции компонентов Vue.js в WordPress или любой другой серверный шаблон может потребоваться выбор версии Vue для Runtime + Compiler . Это обеспечивает бесперебойную функциональность и совместимость с серверной средой.
Некоторые компоненты будут взаимодействовать с отображаемыми данными, а другие — нет. На основании этого различия необходимо будет создавать различные типы компонентов. Некоторые компоненты будут иметь свой шаблон.
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
В то время как другие будут использовать сгенерированную разметку.
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
Vue также можно использовать для создания собственных веб-компонентов , предлагая преимущество повторного использования в различных проектах, подобных ionicons (созданным с помощью Stencil JS).
Эти компоненты можно интегрировать в PHP-шаблоны WordPress или функции, генерирующие HTML. Данные можно передавать экземплярам или компонентам Vue из WordPress, преобразуя их в глобальную переменную или напрямую присваивая их свойству компонента. Концепция включает в себя загрузку Vue и связывание экземпляров Vue с идентификаторами HTML для плавной интеграции.
<?php
function themeslug_enqueue_style() {
wp_enqueue_style( 'my-theme', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style', 10 );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script', 10 );
?>
Вот верхняя и нижняя часть шаблона WP.
<html>
<div id="app">
{{ message }}
</div>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
3. Создайте отдельный веб-сайт внешнего интерфейса.
Наконец, важно выделить особенность, которая может быть очевидна некоторым, но не всем.
Начиная с версии 4.7, WordPress включает REST API, позволяющий разработчикам получать доступ к различным конечным точкам и получать данные, такие как записи, страницы и настраиваемые поля, с помощью плагинов. Эта функциональность соответствует концепции Headless CMS.
Фактически, возможности применения этой возможности выходят далеко за рамки того, что может прийти на ум. Ваш отдельный интерфейс, использующий REST API WordPress, может принимать различные формы:
- Приложение или веб-сайт SPA (одностраничное приложение)
- Приложение или веб-сайт SSR (рендеринг на стороне сервера)
- Статически созданный веб-сайт, основанный на архитектуре JAMStack.
- Прогрессивное веб-приложение (PWA)
- Мобильное приложение
- Еще один монолитный бэкэнд, использующий более простой и быстрый механизм шаблонов.
По сути, жизнеспособен любой клиент, который может использовать API и в котором вы сохраняете полный контроль над интерфейсом. WordPress по сути служит источником данных, похожим на серверный API. Примечательно, что такие плагины, как ACF (Advanced Custom Fields) или Pods, также могут предоставлять настраиваемые поля через API.
Кроме того, у вас есть возможность добавлять собственные конечные точки в API WordPress и использовать систему аутентификации, включая создание одноразовых номеров и других необходимых компонентов.
Подведение итогов
В заключение, интеграция Vue.js с WordPress предлагает разработчикам надежное решение для создания динамических и интерактивных веб-интерфейсов в экосистеме WordPress. Vue.js, известный своей простотой и гибкостью, позволяет разработчикам легко и эффективно создавать современные веб-приложения благодаря своей компонентной архитектуре.
