Почему 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.

Наконец, если это интересно, не забудьте похлопать