Почему WP и Vue?
https://github.com/Atiqullah-Naemi/WPVue
Wordpress — это хорошо известная и самая популярная система управления контентом для веб-сайтов, поскольку в WordPress добавлен Rest API, который вы также можете использовать для мобильных приложений.
Vue JS — это прогрессивный веб-фреймворк, который вы можете использовать не только с WordPress, но и с любыми другими веб-фреймворками, и он супер удивительный, он может поддерживать практически любой размер и любой вид веб-приложений.
В этой статье я кратко описываю тему WP, которую я создал с помощью Rest API и Vue JS.
В основном, чтобы получить ответ JASON с сайта WP, вы можете посетить домашнюю страницу своего сайта, а затем добавить /wp-json/wp/v2/posts для получения объектов сообщений, но вы можете отображать что угодно, не только сообщения, если вы меняете сообщения к категориям, то вы наверняка получите категории.
Вот как выглядит конечный продукт
Хорошо, этого достаточно, сначала я установил WordPress, а затем в папке тем моего сайта я создал базовую тему WP только с заголовком, нижним колонтитулом, индексом, функциями и файлом стиля (я назвал его WPVue), теперь в WPVue я установил Vue JS с Vue CLI.
В functions.php
function wpvue_files() { wp_enqueue_script(‘main-wpvue-js’, ‘http://localhost:8080/dist/build.js', array(), false, true); wp_localize_script(‘main-wpvue-js’, ‘wpvue’, array( ‘root_url’ => home_url(), ‘site_name’ => get_bloginfo(‘name’) )); } add_action(‘wp_enqueue_scripts’, ‘wpvue_files’);
эта функция активирует скрипты Vue JS для WordPress, а в Vue JS — в App.vue.
<script> export default { data () { return { posts: [], posts_url: wpvue.root_url + '/wp-json/wp/v2/posts' } }, created() { this.getposts() }, methods: { getposts() { $.ajax({ url: this.posts_url, type: 'get', success: (result) => { this.posts = result console.log(result) } }) } } } </script>
этот скрипт делает сообщения WP доступными для Vue JS в файле темы index.php, который я только что добавил
<?php get_header(); ?> <div id="app"></div> <?php get_footer(); ?>
Конечный продукт имеет фильтр категорий, живой поиск, анимацию и переход, чтобы просмотреть полный код, посетите https://github.com/Atiqullah-Naemi/WPVue, если у вас есть какие-либо проблемы с темой, создайте проблему или вопрос в Репозиторий GitHub.
Наконец, если это интересно, не забудьте похлопать