wordpress 插件

by Feedier by Alkalab

由Feedier通過Alkalab

如何為您的Web應(yīng)用程序創(chuàng)建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.

今天，我們將了解如何為需要在網(wǎng)站上插入一段代碼的任何Web應(yīng)用程序創(chuàng)建一個(gè)非常簡單的WordPress插件。

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

要遵循本教程，您需要了解以下基礎(chǔ)知識(shí)：

• 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開發(fā) (因?yàn)榇蠖鄶?shù)功能都來自WordPress核心)。

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

您可以在Github存儲(chǔ)庫中找到本教程的工作結(jié)果。

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.

這些網(wǎng)絡(luò)應(yīng)用可以是CrazyEgg ， Freshbook ， Google Analytics ， Facebook Pixel或Feedier之類的任何東西。 為什么？ 他們都需要為您的站點(diǎn)注入一些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!

該“代碼”總是帶有變量的參數(shù)，對(duì)于站點(diǎn)所有者來說通常是一件痛苦的事情。 這是因?yàn)槟枰庉嬛黝}的模板。 那么，我們?nèi)绾蝿?chuàng)建一個(gè)插件來為我們做到這一點(diǎn)呢？ 好吧，讓我們開始吧！

第1步：找到您的Web應(yīng)用 (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.

本教程的目的是創(chuàng)建一個(gè)添加WordPress管理頁面的WordPress插件。 另外，我們還將添加一些設(shè)置來配置應(yīng)用程序的站點(diǎn)內(nèi)小部件，并將HTML / JS代碼自動(dòng)注入到我們的網(wǎng)頁中。 沒什么花哨的，只是可以正常工作。

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.

請(qǐng)注意：本教程確實(shí)需要Web應(yīng)用程序。 在此示例中，我們將使用Feedier 。 但是，如果您要在本教程中使用另一個(gè)Web應(yīng)用程序，請(qǐng)這樣做。 只需使用應(yīng)用程序名稱重命名為“ feedier”，然后根據(jù)應(yīng)用程序的需要調(diào)整設(shè)置。 他們中的大多數(shù)人都會(huì)為您添加一個(gè)片段，以使其正常工作。

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
  這是一個(gè)反饋收集器工具，使用調(diào)查來了解您的用戶
• It’s very flexible
  非常靈活

• It’s free!

  免費(fèi)！

• Has a good API (very important here)

  擁有良好的API (在這里非常重要)

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

  有一個(gè)內(nèi)部窗口小部件 (在這里非常重要)

• Lets you reward your customers
  讓您回報(bào)客戶
• Lets you create conditional questions
  讓您創(chuàng)建條件問題
• Has a complete analytic report dashboard
  擁有完整的分析報(bào)告儀表板
• Lets you manage feedback individually
  讓您單獨(dú)管理反饋

Here is the widget we want to add automatically:

這是我們要自動(dòng)添加的小部件：

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

如果您注冊(cè)了Feedier，則只需在調(diào)查的“共享”標(biāo)簽中找到代碼即可：

步驟2：設(shè)定我們的外掛程式及其架構(gòu) (Step 2: Setup our plugin and its architecture)

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

WordPress插件在設(shè)計(jì)上非常簡單。 我們的插件僅需要兩個(gè)文件。

• 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保存選項(xiàng)。

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

您可以在wp-content / plugins /文件夾中創(chuàng)建一個(gè)新的“ feedier”目錄(或您的Web應(yīng)用程序名稱)。

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

最重要的文件將是插件的feedier.php類。 這是它的結(jié)構(gòu)：

We are doing a few things here:

我們?cè)谶@里做一些事情：

• Declaring our plugin using the header comments
  使用標(biāo)題注釋聲明我們的插件
• 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.
  聲明我們的插件類，其中將包含我們?cè)诖瞬寮兴璧乃袃?nèi)容。 現(xiàn)在我們只需要一個(gè)構(gòu)造方法。

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

即使尚未執(zhí)行任何操作，您也應(yīng)該已經(jīng)在插件頁面中看到了該插件：

步驟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.

對(duì)于這一部分，我們將在我們的WordPress網(wǎng)站中添加一個(gè)新的Feedier管理頁面，并從Feedier的API動(dòng)態(tài)獲取調(diào)查。

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

在我們的類的構(gòu)造函數(shù)中，讓我們注冊(cè)在WordPress上添加管理頁面所需的三個(gè)新操作：

• 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左側(cè)菜單中添加一個(gè)新頁面。 也將有一個(gè)回調(diào)到另一個(gè)包含頁面內(nèi)容的方法。

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

  每當(dāng)用戶單擊“保存設(shè)置”按鈕時(shí)，都會(huì)調(diào)用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管理員注冊(cè)一個(gè)新JavaScript文件，以保存表單的數(shù)據(jù)。 但是它也在PHP端和JavaScript端之間交換了一些變量。

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

第一步很容易。 我們只需要注冊(cè)頁面，就像這樣：

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

如您所見，我們對(duì)所有字符串都使用WordPress本地化功能 。 請(qǐng)注意

array($this, ‘a(chǎn)dminLayout’)

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

是我們調(diào)用另一個(gè)包含頁面內(nèi)容的方法的地方。 該表格需要適應(yīng)您的Web應(yīng)用程序。

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密鑰。 保存后，我們將使用私鑰動(dòng)態(tài)檢索調(diào)查。 每當(dāng)我們獲得調(diào)查而不是API錯(cuò)誤時(shí)，我們都會(huì)顯示一些新選項(xiàng)來配置小部件。

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

在此方法的開頭，您可以看到我們首先使用以下方法獲取保存的數(shù)據(jù)：

$data = $this->getData();

And getting the surveys from the Feedier API:

并從Feedier API獲取調(diào)查：

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

So let’s declare the first one:

因此，讓我們聲明第一個(gè)：

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

這個(gè)函數(shù)只是讀取我們插件的選項(xiàng)，并給我們返回一個(gè)數(shù)組，因此我們可以在同一個(gè)選項(xiàng)中保存多個(gè)值。

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私鑰。 這取決于第一個(gè)訪問此選項(xiàng)中保存的密鑰的人：

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

Feedier API已在此處記錄 ，因此您可以看到響應(yīng)中將得到什么。

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.

目前，我們有一個(gè)完整的新“管理員”頁面。 但沒有任何React，當(dāng)我們點(diǎn)擊保存按鈕，因?yàn)闆]有保存機(jī)制- 但 。

Good enough, let’s save our data!

好了，讓我們保存我們的數(shù)據(jù)！

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保存數(shù)據(jù)。 因此，我們需要注冊(cè)一個(gè)新JavaScript文件并使用wp_localize_script()函數(shù)交換數(shù)據(jù)：

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.

我們還需要添加一個(gè)新文件/assets/js/admin.js 。 只需簡單地進(jìn)行Ajax調(diào)用，WordPress就會(huì)自動(dòng)將請(qǐng)求正確地路由到正確的方法(已在構(gòu)造函數(shù)中完成)。 您可以在此處閱讀有關(guān)WordPress如何智能處理AJAX請(qǐng)求的更多信息。

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):

這時(shí)，我們可以單擊保存按鈕，以上腳本將向WordPress發(fā)出HTTP POST請(qǐng)求。 我們還附加了一個(gè)動(dòng)作參數(shù)，其中包含： store_admin_data (我們?cè)跇?gòu)造函數(shù)中此部分的開頭聲明了該參數(shù))：

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請(qǐng)求，并將所需的值保存在WordPress選項(xiàng)中。

A few notes on the above method:

有關(guān)上述方法的一些注意事項(xiàng)：

• 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隨機(jī)數(shù)”來處理安全性，并確保此安全性來自網(wǎng)站，而不是黑客偽造的請(qǐng)求。
• 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_”前綴標(biāo)識(shí)需要保存的字段。 收到后，我們將遍歷所有$ _POST數(shù)據(jù)，僅保存這些字段。 在保存每個(gè)字段之前，我們還刪除了前綴。

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.

保存過程就是這樣。 當(dāng)單擊“保存”時(shí)，我們可以在wp_options表中看到一個(gè)POST請(qǐng)求和我們的數(shù)據(jù)被保存在數(shù)據(jù)庫中。

Perfect, we are done with the admin page.

完美，我們已經(jīng)完成了管理頁面。

步驟4：將動(dòng)態(tài)代碼自動(dòng)插入我們的頁面 (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.

現(xiàn)在我們已經(jīng)保存了選項(xiàng)，我們可以創(chuàng)建一個(gè)動(dòng)態(tài)小部件，該小部件將取決于用戶通過我們的管理頁面設(shè)置的選項(xiàng)。 我們已經(jīng)知道Web應(yīng)用程序?qū)ξ覀兊钠谕?

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:

因此，我們要做的第一件事是為插件創(chuàng)建一個(gè)新方法，該方法將根據(jù)用戶設(shè)置的變量打印此代碼。 因此，使用我們?cè)谏弦徊糠种幸呀?jīng)設(shè)置的體系結(jié)構(gòu)：

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:

現(xiàn)在，我們只需要在每次頁面加載時(shí)調(diào)用此函數(shù)，即可將其添加到頁面底部。 為此，我們將方法掛接到wp_footer動(dòng)作。 通過在我們的類的構(gòu)造函數(shù)中注冊(cè)一個(gè)新動(dòng)作：

That’s it!

而已！

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

有任何問題，反饋或想法嗎？ 在評(píng)論中讓我知道！

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

您可以在此Github存儲(chǔ)庫中找到本教程的工作版本。

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

2Fwebd / feedier-wordpress-plugin 通過在GitHub上創(chuàng)建一個(gè)帳戶來為feedier-wordpress-plugin開發(fā)做出貢獻(xiàn)。 pxlme.me

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

請(qǐng)注意，這是該插件的第一個(gè)版本，可以進(jìn)行很多改進(jìn)。 我愿意提出建議和改進(jìn)。 ？

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

我們正在建造Feedier 。 收集反饋并與客戶建立關(guān)系變得輕而易舉！

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

Feedier-下一代反饋 與Feedier互動(dòng)，下一代客戶反饋軟件可讓您收集有價(jià)值的反饋。 獎(jiǎng)勵(lì)，參與…… feedier.com

Convinced? Sign up for free at feedier.com ?

說服了嗎 在feedier.com 免費(fèi)注冊(cè)？

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.

本文最初發(fā)布在我們的博客上。

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

wordpress 插件

總結(jié)

以上是生活随笔為你收集整理的wordpress 插件_如何为您的Web应用程序创建WordPress插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。