wordpress vue_使用Vue构建WordPress插件

wordpress vue

In this tutorial, we’ll learn how to integrate Vue.js with a WordPress plugin to provide a modern UI experience to our WordPress users.

在本教程中，我们将学习如何将Vue.js与WordPress插件集成在一起 ，从而为WordPress用户提供现代的UI体验。

Vue.js is a very popular progressive JavaScript library for building modern and rich user interfaces similar to Angular and React in terms of popularity, performance and component-based architecture. We’ll dive into the entire process of building a very simple WordPress plugin with a Vue interface that interacts with the WordPress REST API through the JavaScript Fetch API.

Vue.js是一个非常流行的渐进式JavaScript库，用于在流行度，性能和基于组件的体系结构方面构建类似于Angular和React的现代且丰富的用户界面。 我们将深入研究构建具有Vue界面的非常简单的WordPress插件的整个过程，该插件通过JavaScript Fetch API与WordPress REST API交互。

We’ll create a shortcode that will allow us to add a latest published posts widget in our WordPress website. The UI of the widget is a Vue app which fetches the latest published posts via the /wp-json/wp/v2/posts?filter[orderby]=date WP-API endpoint.

我们将创建一个简码，以允许我们在WordPress网站中添加最新发布的帖子小部件。 窗口小部件的UI是一个Vue应用程序，可通过/wp-json/wp/v2/posts?filter[orderby]=date WP-API端点获取最新发布的帖子。

This tutorial assumes some familiarity with Vue.js. We’ll see how to create a Vue instance, use life-cycle hooks like mounted(), and also the JavaScript Fetch API to interact with the WordPress REST API.

本教程假定您对Vue.js有所了解。 我们将看到如何创建Vue实例，如何使用生命周期挂钩(例如mounted()以及JavaScript Fetch API与WordPress REST API进行交互。

创建一个WordPress插件 (Creating a WordPress Plugin)

In this section, we’ll see how to create a WordPress plugin that registers a shortcode in a few steps.

在本节中，我们将了解如何创建一个WordPress插件，该插件只需几个步骤即可注册一个简码。

在wp-content/plugins创建一个文件夹 (Create a Folder in wp-content/plugins)

Let’s start by creating the back-end part of our plugin. Plugins live inside the wp-content/plugins folder. Navigate to this folder inside your WordPress installation folder and create a sub-folder for your plugin. Let’s call it vueplugin:

让我们从创建插件的后端部分开始。 插件位于wp-content/plugins文件夹中。 导航到WordPress安装文件夹中的该文件夹，然后为您的插件创建一个子文件夹。 我们称之为vueplugin ：

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

Inside your plugin folder, create a vueplugin.php file and add the initial content:

在您的plugin文件夹中，创建一个vueplugin.php文件并添加初始内容：

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

These comments are used as meta information for the plugin. In our case, we simply provide a plugin name, description and version.

这些注释用作插件的元信息。 在我们的案例中，我们仅提供插件名称，描述和版本。

If you visit the plugins page in the admin interface you should be able to see your plugin listed:

如果您在管理界面中访问插件页面，则应该可以看到列出的插件：

创建一个简码 (Creating a Shortcode)

Shortcodes are used via WordPress plugins to enable users to add content to posts and pages. To register a shortcode yo