wordpress 插件_如何为您的Web应用程序创建WordPress插件

wordpress 插件

by Feedier by Alkalab

由Feedier通过Alkalab

如何为您的Web应用程序创建WordPress插件 (How to create a WordPress plugin for your web app)

Today, we are going to see how to create a very simple WordPress plugin for any web app that needs to insert a piece of code to your site.

今天，我们将了解如何为需要在网站上插入一段代码的任何Web应用程序创建一个非常简单的WordPress插件。

To follow this tutorial, you need some knowledge of these basics:

要遵循本教程，您需要了解以下基础知识：

• PHP and OOP

  PHP和OOP

• JavaScript (we’ll use jQuery and Ajax)

  JavaScript (我们将使用jQuery和Ajax)

• WordPress development (as most functions are from the WordPress core).

  WordPress开发 (因为大多数功能都来自WordPress核心)。

You can find a working result of this tutorial on this Github repository.

您可以在Github存储库中找到本教程的工作结果。

These web apps could be anything, like CrazyEgg, Freshbook, Google Analytics, Facebook Pixel, or Feedier. Why? They all need to inject some HTML / JavaScript code to your site for various purposes.

这些网络应用可以是CrazyEgg ， Freshbook ， Google Analytics ， Facebook Pixel或Feedier之类的任何东西。 为什么？ 他们都需要为您的站点注入一些HTML / JavaScript代码以用于各种目的。

This “code” is always parametrized with variables, and is usually a pain for the site owner. This is because you need to edit the theme’s templates. So, how about we create a plugin to do that for us? Okay, let’s do it!

该“代码”总是带有变量的参数，对于站点所有者来说通常是一件痛苦的事情。 这是因为您需要编辑主题的模板。 那么，我们如何创建一个插件来为我们做到这一点呢？ 好吧，让我们开始吧！

第1步：找到您的Web应用 (Step 1: Find your web app)

The goal of this tutorial is to create a WordPress plugin that adds a WordPress admin page. Plus, we’ll also add some settings to configure the app’s in-site widget and inject the HTML / JS code in our web page automatically. Nothing fancy, just something that works fine.

本教程的目的是创建一个添加WordPress管理页面的WordPress插件。 另外，我们还将添加一些设置来配置应用程序的站点内小部件，并将HTML / JS代码自动注入到我们的网页中。 没什么花哨的，只是可以正常工作。

Please note: we do need a web application for this tutorial. We will use Feedier for this example. However, if you have another web application that you’d like to use in this tutorial, please do. Just rename anything named “feedier” with your app’s name and adapt the settings to what that app needs. Most of them will give you a snippet to add to your site in order to make it work.

请注意：本教程确实需要Web应用程序。 在此示例中，我们将使用Feedier 。 但是，如果您要在本教程中使用另一个Web应用程序，请这样做。 只需使用应用程序名称重命名为“ feedier”，然后根据应用程序的需要调整设置。 他们中的大多数人都会为您添加一个片段，以使其正常工作。

Here’s a quick briefing of Feedier if you’ve never heard of it:

如果您从未听说过，那么这里是Feedier的简要介绍：

• It’s a feedback collector tool, using surveys to understand your users
  这是一个反馈收集器工具，使用调查来了解您的用户
• It’s very flexible
  非常灵活

• It’s free!

  免费！

• Has a good API (very important here)

  拥有良好的API (在这里非常重要)

• Has an in-site widget (very important here)

  有一个内部窗口小部件 (在这里非常重要)

• Lets you reward your customers
  让您回报客户
• Lets you create conditional questions
  让您创建条件问题
• Has a complete analytic report dashboard
  拥有完整的分析报告仪表板
• Lets you manage feedback individually
  让您单独管理反馈

Here is the widget we want to add automatically:

这是我们要自动添加的小部件：

If you signed up for Feedier, then you can simply find the code in the Share tab of your survey:

如果您注册了Feedier，则只需在调查的“共享”标签中找到代码即可：

步骤2：设定我们的外挂程式及其架构 (Step 2: Setup our plugin and its architecture)

WordPress plugin are by design very simple. Our plugin will only need two files.

WordPress插件在设计上非常简单。 我们的插件仅需要两个文件。

• feedier.php: main plugin’s PHP file.

  feedier.php ：主插件PHP文件。

• assets/js/admin.js: JavaScript script to save the options using Ajax.

  asset / js / admin.js ：JavaScript脚本，用于使用Ajax保存选项。

You can create a new “feedier” directory (or name of your web app) in your wp-content/plugins/ folder.

您可以在wp-content / plugins /文件夹中创建一个新的“ feedier”目录(或您的Web应用程序名称)。

The most important file will be the plugin’s feedier.php class. Here is its structure:

最重要的文件将是插件的feedier.php类。 这是它的结构：

We are doing a few things here:

我们在这里做一些事情：

• Declaring our plugin using the header comments
  使用标题注释声明我们的插件
• Defining a few handy constants to be able to find the plugin’s URL and PATH easily
  定义一些方便的常量，以便能够轻松找到插件的URL和PATH
• Declaring our plugin class that will contain everything we need in this plugin. We just need a constructor method for now.
  声明我们的插件类，其中将包含我们在此插件中所需的所有内容。 现在我们只需要一个构造方法。

You should already see the plugin in your Plugins page, even though it’s not doing anything yet:

即使尚未执行任何操作，您也应该已经在插件页面中看到了该插件：

步骤3：建立管理页面 (Step 3: Create our admin page)

For this part, we will add a new Feedier admin page to our WordPress site and dynamically fetch our surveys from Feedier’s API.

对于这一部分，我们将在我们的WordPress网站中添加一个新的Feedier管理页面，并从Feedier的API动态获取调查。

In our class’ constructor, let’s register three new actions which are required to add an admin page on WordPress:

在我们的类的构造函数中，让我们注册在WordPress上添加管理页面所需的三个新操作：

• addAdminMenu will add a new page in the WordPress left menu. There will be also a callback to another method containing the page’s content.

  addAdminMenu将在WordPress左侧菜单中添加一个新页面。 也将有一个回调到另一个包含页面内容的方法。

• storeAdminData will be called whenever the user clicks the “Save settings” button.

  每当用户单击“保存设置”按钮时，都会调用storeAdminData 。

• addAdminScripts will register a new JavaScript file to our WordPress admin in order to save the form’s data. But it also exchanges some variables between the PHP side and JavaScript side.

  addAdminScripts将向我们的WordPress管理员注册一个新JavaScript文件，以保存表单的数据。 但是它也在PHP端和JavaScript端之间交换了一些变量。

The first step is very easy. We just register the page, like this:

第一步很容易。 我们只需要注册页面，就像这样：

As you can see, we use WordPress localization functions for all strings. Note that the

如您所见，我们对所有字符串都使用WordPress本地化功能 。 请注意

array($this, ‘adminLayout’)

is where we call another method containing the page’s content. The form needs to be adapted to your web app.

是我们调用另一个包含页面内容的方法的地方。 该表格需要适应您的Web应用程序。

Here, we first need to get the public and private Feedier API keys. Once saved, we are going to use the private key to dynamically retrieve our surveys. Whenever we get the surveys and not an API error, we display some new options to configure the widget.

在这里，我们首先需要获取公共和私有Feedier API密钥。 保存后，我们将使用私钥动态检索调查。 每当我们获得调查而不是API错误时，我们都会显示一些新选项来配置小部件。

At the beginning of this method, you can see that we are first getting the saved data with:

在此方法的开头，您可以看到我们首先使用以下方法获取保存的数据：

$data = $this->getData();

And getting the surveys from the Feedier API:

并从Feedier API获取调查：

$surveys = $this->getSurveys($data[‘private_key’]);

So let’s declare the first one:

因此，让我们声明第一个：

This function just reads our plugin’s option and gives us an array back so we can save multiple values in the same option.

这个函数只是读取我们插件的选项，并给我们返回一个数组，因此我们可以在同一个选项中保存多个值。

To get the second method working, we need the Feedier private key. This depends on the first one to access this key saved in the option:

为了使第二种方法起作用，我们需要Feedier私钥。 这取决于第一个访问此选项中保存的密钥的人：

The Feedier API is documented here, so you can see what you will get in the response.

Feedier API已在此处记录 ，因此您可以看到响应中将得到什么。

At this moment, we have a complete new Admin page. But nothing happens when we click on the save button, because there is no saving mechanism — yet.

目前，我们有一个完整的新“管理员”页面。 但没有任何React，当我们点击保存按钮，因为没有保存机制- 但 。

Good enough, let’s save our data!

好了，让我们保存我们的数据！

As mentioned before, we will save our data using AJAX. Therefore, we need to register a new JavaScript file and exchange data using the wp_localize_script() function:

如前所述，我们将使用AJAX保存数据。 因此，我们需要注册一个新JavaScript文件并使用wp_localize_script()函数交换数据：

We also need to add a new file /assets/js/admin.js. That will simply make an Ajax call, and WordPress will automatically route the request correctly to the right method (already done in the constructor). You can read more about how WordPress smartly handles AJAX requests here.

我们还需要添加一个新文件/assets/js/admin.js 。 只需简单地进行Ajax调用，WordPress就会自动将请求正确地路由到正确的方法(已在构造函数中完成)。 您可以在此处阅读有关WordPress如何智能处理AJAX请求的更多信息。

At this very moment, we can click the save button and the above script will make an HTTP POST request to WordPress. We also append an action parameter containing: store_admin_data (which we declared at the beginning at this part in the constructor):

这时，我们可以单击保存按钮，以上脚本将向WordPress发出HTTP POST请求。 我们还附加了一个动作参数，其中包含： store_admin_data (我们在构造函数中此部分的开头声明了该参数)：

add_action( ‘wp_ajax_store_admin_data’, array( $this, ‘storeAdminData’ ) );

The method storeAdminData will receive the POST request and save the values we need in our WordPress option.

方法storeAdminData将接收POST请求，并将所需的值保存在WordPress选项中。

A few notes on the above method:

有关上述方法的一些注意事项：

• We use a “WordPress nonce” to handle the security and make sure this is coming from the website and not a hacker faking the request.
  我们使用“ WordPress随机数”来处理安全性，并确保此安全性来自网站，而不是黑客伪造的请求。
• We identify the fields we need to save using a “feedier_” prefix. Once received, we loop through all the $_POST data and only save those fields. We also remove the prefix before saving every field.
  我们使用“ feedier_”前缀标识需要保存的字段。 收到后，我们将遍历所有$ _POST数据，仅保存这些字段。 在保存每个字段之前，我们还删除了前缀。

That’s it for the saving process. When we click save, we can see a POST request and our data being saved on the database within the wp_options table.

保存过程就是这样。 当单击“保存”时，我们可以在wp_options表中看到一个POST请求和我们的数据被保存在数据库中。

Perfect, we are done with the admin page.

完美，我们已经完成了管理页面。

步骤4：将动态代码自动插入我们的页面 (Step 4: Insert the dynamic code automatically into our pages)

Now that we have our options saved, we can create a dynamic widget that will depend on the options set by the user though our admin page. We already know what the web app expects from us.

现在我们已经保存了选项，我们可以创建一个动态小部件，该小部件将取决于用户通过我们的管理页面设置的选项。 我们已经知道Web应用程序对我们的期望。

Something like:

就像是：

<div class=”feedier-widget” data-type=”engager” data-position=”right” data-carrier-id=”x” data-key=”xxxxxxxxxxxxxxxxx”></div>

<! — Include this line only one time, also if you have multiple widgets on the current page →

<script src=”https://feedier.com/js/widgets/widgets.min.js" type=”text/javascript” async></script>

Thus, the first thing we want to do is to create a new method to our plugin that will print this code depending on the variables set by the user. So, using the architecture we already set up in the last part:

因此，我们要做的第一件事是为插件创建一个新方法，该方法将根据用户设置的变量打印此代码。 因此，使用我们在上一部分中已经设置的体系结构：

Now, we just need to call this function on every page load to add it at the bottom of the page. To do this, we’ll hook our method to the wp_footer action. By registering a new action into our class’ constructor:

现在，我们只需要在每次页面加载时调用此函数，即可将其添加到页面底部。 为此，我们将方法挂接到wp_footer动作。 通过在我们的类的构造函数中注册一个新动作：

That’s it!

而已！

Any questions, feedback, or ideas? Let me know in the comments!

有任何问题，反馈或想法吗？ 在评论中让我知道！

You can find a working version of this tutorial on this Github repository.

您可以在此Github存储库中找到本教程的工作版本。

2Fwebd/feedier-wordpress-pluginContribute to feedier-wordpress-plugin development by creating an account on GitHub.pxlme.me

2Fwebd / feedier-wordpress-plugin 通过在GitHub上创建一个帐户来为feedier-wordpress-plugin开发做出贡献。 pxlme.me

Note that this is first version of the plugin, and many things can be improved. I’m open to suggestions and improvements. ?

请注意，这是该插件的第一个版本，可以进行很多改进。 我愿意提出建议和改进。 ？

We are building Feedier. It becomes a no-brainer to collect feedback and build relationships with your customers!

我们正在建造Feedier 。 收集反馈并与客户建立关系变得轻而易举！

Feedier - Next generation feedbackMeet Feedier, the next generation customer feedback software that lets you collect valuable feedback. Reward, engage…feedier.com

Feedier-下一代反馈 与Feedier互动，下一代客户反馈软件可让您收集有价值的反馈。 奖励，参与…… feedier.com

Convinced? Sign up for free at feedier.com ?

说服了吗 在feedier.com 免费注册？

Don’t forget to clap our article and subscribe to get more amazing articles if you liked it?. You can also find us on Twitter.

别忘了拍拍我们的文章，如果喜欢的话， 订阅获得更多精彩文章？ 您也可以在T witter上找到我们。

This article was initially published on our blog here.

本文最初发布在我们的博客上。

翻译自: https://www.freecodecamp.org/news/how-to-create-a-wordpress-plugin-for-your-web-app-5c31733f3a9d/

wordpress 插件