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.

本文最初發布在我們的博客上。