本篇文章介绍了如何通过创建一个WordPress插件，这将使得可以通过WEB界面运行特定的Linux指令。本示例中，我们将使用OpenRex开发板，然后读取板载的I2C温度传感器。同样的技术也可以用于任何运行Linux的开发板，并且本篇文章描述的方法可以用于运行任何Linux指令。

创建新的插件

在这一步，我们将创建一个简单的插件，可以通过WordPress插件菜单激活而且可以在WordPress Admin面板显示。

在开发板中安装WordPress，并上电。转到WordPress文件夹。给插件起个名字，然后创建文件夹。

1. cd /usr/local/apache2/htdocs/wp-content/plugins/
   
2. mkdir fa-tmp101-temperature-sensor
   
3. cd fa-tmp101-temperature-sensor/

复制代码

创建readme.txt文件。

1. nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/readme.txt

复制代码

在readme.txt文件中输入以下代码：

1. === TMP101 Temperature Sensor ===
   
2. Contributors: robertferanec
   
3. Tags: tmp101, temperature, sensor
   
4. Requires at least: 3.0.1
   
5. Tested up to: 4.4.2
   
6. Stable tag: 1.0
   
7. License: GPLv2 or later
   
8. License URI: http://www.gnu.org/licenses/gpl-2.0.html
   
9. 
   
10. Shows up temperature of OpenRex board by reading the on board TMP101 sensor.
    
11. 
    
12. == Description ==
    
13. 
    
14. This plugin will create a shortcode [fa-tmp101]. When you use this shortcode on a page, it will show up temperature of OpenRex. You can choose between Celsius (use [fa-tmp101]) or Fahrenheits (use [fa-tmp101 units='fahrenheit']). The complete step-by-step tutorial about how to create this plugin can be found at: http://www.imx6rex.com/open-rex/software/how-to-create-rexface-plugin/
    
15. 
    
16. == Installation ==
    
17. 
    
18. 1. Upload the plugin files to the WordPress plugin directory (e.g. '/usr/local/apache2/htdocs/wp-content/plugins/') or clone it from our github:
    
19. 
    
20.         cd /usr/local/apache2/htdocs/wp-content/plugins/
    
21.         git clone https://github.com/FEDEVEL/fa-tmp101-temperature-sensor.git
    
22. 
    
23. 2. Give the plugin permissions to use 'i2cget' and '/dev/i2c-1'. For example, run 'visudo' and add following lines at the end of the file:
    
24. 
    
25.         #enable RexFace to read temperature sensor
    
26.         daemon ALL=(ALL:ALL)  NOPASSWD: /usr/sbin/i2cget
    
27.         daemon ALL=(ALL:ALL)  NOPASSWD: /dev/i2c-1
    
28. 
    
29. 3. Activate the plugin through the 'Plugins' screen in WordPress
    
30. 4. Use the Admin->TMP101 to configure the plugin
    
31. 
    
32. == Frequently Asked Questions ==
    
33. 
    
34. = How do I use the plugin? =
    
35. 
    
36. Create a new page and use shortcode [fa-tmp101]
    
37. 
    
38. == Changelog ==
    
39. 
    
40. = 1.0 =
    
41. * Initial version

复制代码

创建插件的主PHP文件。

1. nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/fa-tmp101-temperature-sensor.php

复制代码

复制并粘贴一下文本到fa-tmp101-temperature-sensor.php文件中：

1. <?php
   
2. /*
   
3. Plugin Name: TMP101 Temperature Sensor
   
4. Plugin URI: http://www.imx6rex.com/rexface/plugins/
   
5. Description: Reads and shows up the temperature of OpenRex
   
6. Version: 1.0
   
7. Author: Robert Feranec, FEDEVEL
   
8. Author URI: http://www.fedevel.com/about-robert
   
9. Text Domain: fa-tmp101-temperature-sensor
   
10. License: GPLv2 or later
    
11. License URI: http://www.gnu.org/licenses/gpl-2.0.html
    
12. 
    
13. Copyright 2016 by FEDEVEL
    
14. 
    
15. This program is free software; you can redistribute it and/or modify
    
16. it under the terms of the GNU General Public License as published by
    
17. the Free Software Foundation; either version 2 of the License, or
    
18. (at your option) any later version.
    
19. 
    
20. This program is distributed in the hope that it will be useful,
    
21. but WITHOUT ANY WARRANTY; without even the implied warranty of
    
22. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    
23. GNU General Public License for more details.
    
24. 
    
25. You should have received a copy of the GNU General Public License
    
26. along with this program; if not, see http://www.gnu.org/licenses/gpl-2.0.html
    
27. */
    
28. 
    
29. //the following line must be here, it's blocking direct access to your plugin PHP files
    
30. defined( 'ABSPATH' ) or die( 'No script kiddies please!' );

复制代码

让我们创建一个“TMP101 Setting page”，可以在Adminstrator面板下显示。稍后我们将用它来指定读取温度的默认时间间隔（例如每10s/1分钟/10分钟读取温度）。

添加以下代码到fa-tmp101-temperature-sensor.php文件的结尾处。

1. //This will tell WordPress to call "fa_tmp101_temperature_sensor_admin_menu" which will create a link to our TMP101 Setting page in Admin menu
   
2. add_action( 'admin_menu', 'fa_tmp101_temperature_sensor_admin_menu' );
   
3. 
   
4. //This will add "TMP101" link into Admin menu
   
5. function fa_tmp101_temperature_sensor_admin_menu() {
   
6.     //add_menu_page ( page_title, menu_title, capability, __FILE__, function_which_we_call_to_create_our_TMP101_setting_page )
   
7.     add_menu_page('TMP101 Temperature Sensor', 'TMP101', 'administrator', __FILE__, 'fa_tmp101_temperature_sensor_admin_sensor_page');
   
8. }
   
9. 
   
10. //Here is the "HTML" of our Admin TMP101 Temperature Sensor Setting Page
    
11. function fa_tmp101_temperature_sensor_admin_sensor_page() {
    
12.         if ( !current_user_can( 'manage_options' ) )  {
    
13.                 wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    
14.         }
    
15.         echo '<div class="wrap">';
    
16.         echo '<p>This is our Setting page of TMP101 Temperature Sensor plugin. We will put here some options later.</p>';
    
17.         echo '</div>';
    
18. }

复制代码

激活插件

现在，激活插件并检查是否能正确看到新插件。

1） 打开因特网浏览器，并转到OpenRex的管理页面 http://192.168.0.39/wp-admin/（使用你的开发板的IP地址）。

2） 单击Plugins，找到“TMP101 Temperature Sensor”，并点击“Activate”。然后你会看到：

3） 在管理菜单中，单击“TMP101”。你会看到TMP101设置页面。

创建一个简单的短代码（shortcode）

我们将要创建一个“短代码[shortcode]”。然后该短代码可以用于网页的任何地方，并被实际的温度值替代。

我们的短代码称为fa-tmp101。在fa-tmp101-temperature-sensor.php的结尾处添加以下代码：

1. //[fa-tmp101] shortcode. It will read and show the value of TMP101 OpenRex sensor (not yet, we will later add more stuff here)
   
2. add_shortcode("fa-tmp101", "fa_access_tmp101_sensor");
   
3. function fa_access_tmp101_sensor($atts, $content = null)
   
4. {
   
5.     //$new_content will replace the [fa-tmp101] shortcode, initially will use a simple text "Reading ..."
   
6.     $new_content = '<span id="fa_tmp101">Reading ...</span>';
   
7. 
   
8.     //$new_content string is processed and will be shown instead of the shortcode
   
9.     $html_output = do_shortcode($new_content);
   
10.     return $html_output;
    
11. }

复制代码

创建一个测试网页

在WordPress管理菜单，点击“Pages”，然后点击“Add New”。输入标题“TMP101 Temperature Sensor”，并使用以下文字“OpenRex temperature is: [fa-tmp101]”。然后点击“Publish”按钮。如下图所示：

转到TMP101 Temperature Sensor页面。页面的URL链接类似于“http://192.168.0.39/index.php/tmp101-temperature-sensor/”，网页内容如下图（注意：短代码fa-tmp101替换为文本“Reading...”）：

很不错，短代码正常工作了，现在我们需要做的仅仅是更新内容。按照以下步骤继续操作。

准备读取温度

会变得更加复杂些，因为我们想具有一定的灵活性。我们使用JavaScript来读取温度（这将给我们单击读取温度带来一些灵活性，而且它会提供一些选项自动在一段时间间隔内读取温度）。然而，JavaScript本省不能在OpenRex上运行应用程序。相反，我们必须从JavaScript中调用PHP文件，并且在PHP文件中我们将调用一个能实际读取温度的应用程序。我们开始做吧。

首先，我们将更新短代码。使用新的短代码替换旧的短代码。新代码中我们创建了一些隐藏的变量来传输一些变量（IP地址和单位）到JavaScript，我们还创建了一个按钮，用来读取温度。

1. //[fa-tmp101] shortcode. It will read and show the value of TMP101 OpenRex sensor (still not yet :)
   
2. add_shortcode("fa-tmp101", "fa_access_tmp101_sensor");
   
3. function fa_access_tmp101_sensor($atts, $content = null)
   
4. {
   
5.     //$new_content will replace the [fa-tmp101] shortcode
   
6.     $new_content = '<span id="fa_tmp101">Reading ...</span>';
   
7.     $new_content .= '<div style="background-color:#cacaca;border: 1px solid #acacac; text-align:center; width:300px" onclick="fa_access_tmp101();" >Read Temperature Now</div>'; //button
   
8.     $new_content .= '<input type="hidden" id="fa_openrex_ip" value="'.$_SERVER['SERVER_ADDR'].'" />'; //transfer IP address to javascript
   
9.     $new_content .= '<input type="hidden" id="fa_tmp101_units" value="celsius" />'; //transfer unites to javascript
   
10.   
    
11.     //$new_content string is processed and will be shown instead of the shortcode
    
12.     $html_output = do_shortcode($new_content);
    
13.     return $html_output;
    
14. }

复制代码

当刷新“TMP101 Temperature Sensor”页面时，你会注意到，我们增加了一个“Read Temperature Now”按钮。如果看一下代码，你会发现，当点击该按钮时，它会调用“fa_access_tmp101()”函数。该函数位于JavaScript中，我们稍后会创建一些。所以不要点击该按钮，它还没有正常工作。

现在，创建该PHP文件，我们将会从JavaScript中调用，并且稍后会调用应用程序来读取传感器数据。现在，它只会返回一条信息“...accessing sensor ...”。

在插件目录创建一个名为“tmp101.php”的新文件。

1. nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php

复制代码

将以下代码放于/usr/local/apache2/htdocs/fa-functions/tmp101.php。

1. <?php
   
2. /*
   
3. Example of the URL address for this file is http://openrex_IP_address/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php?units=celsius
   
4. */
   
5. 
   
6. $temperature_units = empty($_GET['units'])?'celsius':$_GET['units']; //get temperature units from url, if empty, use celsius
   
7. 
   
8. //here we later add the code to read temperature sensor
   
9. 
   
10. //this is our response, this is the format how we will send information to javascript.
    
11. $result = array(
    
12.     'openrex' =>  array(
    
13.         'sensors' => array(
    
14.             'tmp101' => array(
    
15.                 'units' => $temperature_units,
    
16.                 'temperature' => '... accessing sensor ...'
    
17.             ),
    
18.         ),
    
19.     ),
    
20.     'valid' => 'true',
    
21.     'error_msg' => '',
    
22. );
    
23. 
    
24. $response = json_encode( $result); //this will translate our $result array into JSON format
    
25. echo $response; //this will send the $response back to our javascript
    
26. ?>

复制代码

你可以简单的检查一下"tmp101.php"将会向JavaScript返回什么。进入因特网浏览器，输入网址，如"http://192.168.0.39/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php"，你会看到：

现在，创建JavaScript文件:

1. mkdir /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/js/
   
2. nano /usr/local/apache2/htdocs/wp-content/plugins/fa-tmp101-temperature-sensor/js/tmp101.js

复制代码

在JavaScript文件中，我们调用tmp101.php PHP文件。在tmp101.js插入以下代码：

1. //This function will read temperature of OpenRex board by accessing to tmp101.php file and reading TMP101 sensor value
   
2. function fa_access_tmp101()
   
3. {
   
4.         //read IP address and units from our hidden elements created in [shortcode] section of the fa-tmp101-temperature-sensor.php file
   
5.         var openrex_ip_address  = document.getElementById("fa_openrex_ip").value; //this will take the value from our hidden input element which has id=fa_openrex_ip (we created it in fa-tmp101-temperature-sensor.php)
   
6.         var temperature_units  = document.getElementById("fa_tmp101_units").value; //this will take the value from our hidden input element which has id=fa_tmp101_units (we created it in fa-tmp101-temperature-sensor.php)
   
7.   
   
8.         //prepare variables
   
9.         var temperature_value = document.getElementById("fa_tmp101"); //this will create a "pointer" to our <span id="fa_tmp101"></span>, so we can replace its content
   
10.         var url = 'http://'+openrex_ip_address+'/wp-content/plugins/fa-tmp101-temperature-sensor/tmp101.php?units='+temperature_units; //url of our tmp101.php file
    
11.   
    
12.         //this will call tmp101.php file to read the sensor
    
13.         request = jQuery.ajax({
    
14.                 dataType: "json",
    
15.                 url: url,
    
16.         });
    
17.   
    
18.         //here we will proceed the answer from tmp101.php file
    
19.         request.done (function( data ) { //this will be executed when we get an answer from tmp101.php
    
20.                 console.log("Done"); //debug output, you can see this in console output (e.g. in Chrome use Right Click -> Inspect element -> Console)
    
21.                 console.log(data); //debug output
    
22.   
    
23.                 if (data['valid']==='true')
    
24.                 {
    
25.                         //replace <span id="fa_tmp101"></span> content with the temperature and units
    
26.                         temperature_value.innerHTML =  data['openrex']['sensors']['tmp101']['temperature']+' '+data['openrex']['sensors']['tmp101']['units'];
    
27.                         return true;
    
28.                 }
    
29.                 else
    
30.                 {
    
31.                         //replace <span id="fa_tmp101"></span> content with the error message
    
32.                         temperature_value.innerHTML = data['error_msg'];
    
33.                         return false;
    
34.                 }
    
35.         });
    
36.   
    
37.         request.fail (function( data ) { //this will be executed if we will not get answer from tmp101.php
    
38.                 console.log("Failed"); //debug output
    
39.                 //replace <span id="fa_tmp101"></span> content with "Connection failed" message
    
40.                 temperature_value.innerHTML = 'Connection failed';
    
41.                 return false;
    
42.         });
    
43. }

复制代码

我们需要回到主插件文件，并告诉其加载该JavaScript。在fa-tmp101-temperature-sensor.php结尾添加以下代码：

1. //we will be using javascript, so load the javascript file
   
2. add_action( 'wp_enqueue_scripts', 'fa_tmp101_scripts' );
   
3. function fa_tmp101_scripts() {
   
4.     wp_enqueue_script("jquery-fa-tmp101", plugins_url("/js/tmp101.js", __FILE__ ),array('jquery', 'jquery-ui-core'));
   
5. }

复制代码

转到TMP101 Temperature Sensor页面。刷新。我们将会看到JavaScript是否工作正常。在页面右击，并选择“Inspect elements”。单击“Console”，并点击“Read Temperature Now”按钮。注意，现在显示的不是“Reading...”，而是“... accessing sensor ... ”。在“Console”窗口检查回应。你会看到tmp101.php的返回：Object -> openrex -> sensors -> tmp101。如下：