基础的WordPress插件制作教程

天涯之外 發表於 2023-7-14 00:00:00

<p>
<strong>插件制作准备工作</strong></p>
<p>
首先我们在\wp-content\plugins目录下添加一个文件夹叫做”My-Mood”,在文件夹中添加一个叫做index.php的主文件，这个是插件的主文件，文件的开始需要一些命名的格式：如下面的代码</p>
<div>
<div>
<div id="highlighter_954071">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
</td>
<td>
<div>
<div>
<code> </code><code>/*</code>
</div>
<div>
<code>Plugin Name: My Mood</code>
</div>
<div>
<code>Plugin URI: </code><code>http://www.aips.me</code>
</div>
<div>
<code>Description: 一个心情发布插件</code>
</div>
<div>
<code>Version: 1.0</code>
</div>
<div>
<code>Author: 周良博客</code>
</div>
<div>
<code>Author URI: </code><code>http://www.aips.me</code>
</div>
<div>
<code>License: GPL</code>
</div>
<div>
<code>*/</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<ul>
<li>
Plugin Name 代表了插件的名字。</li>
<li>
Plugin URI 代表的是插件的发布地址。</li>
<li>
Description 代表的是关于这个插件的描述。</li>
<li>
Version 代表了版本好，第一个版本使用1.0，如果你的插件有更新，就依次更改这个版本参数。</li>
<li>
Author 代表插件作者的名字。</li>
<li>
Author URI 代表作者的主页。。</li>
<li>
License 代表了插件的License，如果你是开源的就使用GPL，关于License的参数可以百度或者Google查询，这里不再过多的篇幅叙述。</li>
</ul>
<p>
<strong>插件的初始化安装</strong></p>
<p>
插件不仅仅是样式的改变，通常我们会加入新的表，那么新加的表我就是通过插件的安装函数来完成的，我们继续在index.php中加入如下的代码：</p>
<div>
<div>
<div id="highlighter_251302">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
</td>
<td>
<div>
<div>
<code> </code><code>//激活动作</code>
</div>
<div>
<code>register_activation_hook( </code><code>__FILE__</code><code>, </code><code>'my_mood_install'</code><code>);</code>
</div>
<div>
</div>
<div>
<code>function</code> <code>my_mood_install() {</code>
</div>
<div>
</div>
<div>
<code>// 启用时要做的事情</code>
</div>
<div>
<code>global</code> <code>$wpdb</code><code>;</code>
</div>
<div>
</div>
<div>
<code>$table_name</code> <code>= </code><code>$wpdb</code><code>->prefix . </code><code>"mood"</code><code>;</code>
</div>
<div>
</div>
<div>
<code>$charset_collate</code> <code>= </code><code>$wpdb</code><code>->get_charset_collate();</code>
</div>
<div>
</div>
<div>
<code>$sql</code> <code>= "CREATE TABLE </code><code>$table_name</code> <code>(</code>
</div>
<div>
<code>id mediumint(9) NOT NULL AUTO_INCREMENT,</code>
</div>
<div>
<code>createdon datetime DEFAULT </code><code>'0000-00-00 00:00:00'</code> <code>NOT NULL,</code>
</div>
<div>
<code>publishedon datetime DEFAULT </code><code>'0000-00-00 00:00:00'</code> <code>NOT NULL,</code>
</div>
<div>
<code>status int NOT NULL,</code>
</div>
<div>
<code>mood int NOT NULL,</code>
</div>
<div>
<code>text text NOT NULL,</code>
</div>
<div>
<code>address varchar(55) DEFAULT </code><code>''</code> <code>NOT NULL,</code>
</div>
<div>
<code>UNIQUE KEY id (id)</code>
</div>
<div>
<code>) </code><code>$charset_collate</code><code>;";</code>
</div>
<div>
</div>
<div>
<code>require_once</code><code>( ABSPATH . </code><code>'wp-admin/includes/upgrade.php'</code> <code>);</code>
</div>
<div>
<code>dbDelta( </code><code>$sql</code> <code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
如上面代码的注释，我们通过register_activation_hook激活动作来完成插件的安装，激活动作通过参数my_mood_install，找到名为my_mood_install的函数执行，这个动作会在插件激活的时候执行。</p>
<p>
我们通过my_mood_install函数创建了一张名为”mood”的表，数据库表的创建是通过Wordpress的dbDelta函数来执行sql语句完成的，要想使用此函数需要先引入wp-admin/includes/upgrade.php文件。</p>
<p>
通过上面的代码我们就运用Wordpress内置的方法创建了一张给mood插件存储数据的表。</p>
<p>
<strong>插件卸载</strong></p>
<p>
既然Wordpress有安装也一定会有卸载。Wordpress插件的卸载方法是通过一个叫做uninstall.php的固定命名文件来执行的，在插件根目录下建一个名叫uninstall.php的文件，代码内容如下所示：</p>
<div>
<div>
<div id="highlighter_469597">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
</td>
<td>
<div>
<div>
<code> </code><code>//卸载动作</code>
</div>
<div>
<code>my_mood_uninstall();</code>
</div>
<div>
</div>
<div>
<code>function</code> <code>my_mood_uninstall() {</code>
</div>
<div>
</div>
<div>
<code>// 执行内容</code>
</div>
<div>
<code>global</code> <code>$wpdb</code><code>;</code>
</div>
<div>
<code>$table_name</code> <code>= </code><code>$wpdb</code><code>->prefix . </code><code>"mood"</code><code>;</code>
</div>
<div>
<code>$wpdb</code><code>->query(</code><code>"DROP TABLE IF EXISTS "</code> <code>. </code><code>$table_name</code><code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
通过Wordpress的$wpdb->query来执行sql，删除我们安装时的创建的表，这样就删除一切与该插件相关的内容了。</p>
<p>
<strong>给插件添加后台管理菜单</strong></p>
<p>
如下面的代码：</p>
<div>
<div>
<div id="highlighter_160401">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
</td>
<td>
<div>
<div>
<code> </code><code>//添加菜单</code>
</div>
<div>
<code>add_action( </code><code>'admin_menu'</code><code>, </code><code>'my_mood_create_menu'</code> <code>);</code>
</div>
<div>
<code>function</code> <code>my_mood_create_menu() {</code>
</div>
<div>
<code>global</code> <code>$my_settings</code><code>;</code>
</div>
<div>
<code>$my_mood_settings</code><code>=add_menu_page(</code>
</div>
<div>
<code>"My Mood"</code><code>,</code>
</div>
<div>
<code>"My Mood"</code><code>,</code>
</div>
<div>
<code>"manage_options"</code><code>,</code>
</div>
<div>
<code>"my-mood"</code><code>,</code>
</div>
<div>
<code>"test"</code>
</div>
<div>
<code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
通过上面的代码我们就可以为插件添加一个菜单。方法通过add_action( ‘admin_menu', ‘my_mood_create_menu' )添加一个菜单而菜单具体的页面则是通过参数来绑定的，如上面的方法是传入了叫做”test”的参数，因此当点击这个”My Mood”的菜单的时候就会去寻找叫做”test”的方法进行样式的输出，我们给出test方法</p>
<div>
<div>
<div id="highlighter_414318">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
<div>
31</div>
<div>
32</div>
<div>
33</div>
<div>
34</div>
<div>
35</div>
<div>
36</div>
<div>
37</div>
<div>
38</div>
<div>
39</div>
<div>
40</div>
<div>
41</div>
<div>
42</div>
<div>
43</div>
<div>
44</div>
<div>
45</div>
<div>
46</div>
<div>
47</div>
<div>
48</div>
<div>
49</div>
<div>
50</div>
<div>
51</div>
<div>
52</div>
<div>
53</div>
<div>
54</div>
<div>
55</div>
<div>
56</div>
<div>
57</div>
<div>
58</div>
<div>
59</div>
<div>
60</div>
<div>
61</div>
<div>
62</div>
<div>
63</div>
<div>
64</div>
</td>
<td>
<div>
<div>
<code> </code><code>function</code> <code>test(){</code>
</div>
<div>
<code>global</code> <code>$wpdb</code><code>;</code>
</div>
<div>
<code>$table_name</code> <code>= </code><code>$wpdb</code><code>->prefix . </code><code>"mood"</code><code>;</code>
</div>
<div>
</div>
<div>
<code>$fivesdrafts</code> <code>= </code><code>$wpdb</code><code>->get_results(</code>
</div>
<div>
<code>"</code>
</div>
<div>
<code>SELECT id, createdon, publishedon,status,mood,text,address</code>
</div>
<div>
<code>FROM </code><code>$table_name</code>
</div>
<div>
<code>ORDER BY createdon DESC</code>
</div>
<div>
<code>"</code>
</div>
<div>
<code>);</code>
</div>
<div>
<code>?></code>
</div>
<div>
<code><div id=</code><code>"my-mood"</code><code>></code><code>foreach</code> <code>( </code><code>$fivesdrafts</code> <code>as</code> <code>$fivesdraft</code> <code>)</code>
</div>
<div>
<code>{</code>
</div>
<div>
<code>?> }</code>
</div>
<div>
<code>?></code>
</div>
<div>
<code><table </code><code>class</code><code>=</code><code>"widefat"</code><code>></code>
</div>
<div>
<code><thead></code>
</div>
<div>
<code><tr></code>
</div>
<div>
<code><th>发布内容</th></code>
</div>
<div>
<code><th>现在所在的</th></code>
</div>
<div>
<code><th>心情</th></code>
</div>
<div>
<code><th>创建日期</th></code>
</div>
<div>
<code><th>操作</th></code>
</div>
<div>
<code></tr></code>
</div>
<div>
<code></thead></code>
</div>
<div>
<code><tfoot></code>
</div>
<div>
<code><tr></code>
</div>
<div>
<code><th>发布内容</th></code>
</div>
<div>
<code><th>现在所在的</th></code>
</div>
<div>
<code><th>心情</th></code>
</div>
<div>
<code><th>创建日期</th></code>
</div>
<div>
<code><th>操作</th></code>
</div>
<div>
<code></tr></code>
</div>
<div>
<code></tfoot></code>
</div>
<div>
<code><tbody></code>
</div>
<div>
<code><tr></code>
</div>
<div>
<code><td><input name=</code><code>"text"</code> <code>type=</code><code>"text"</code> <code>value=</code><code>""</code> <code>placeholder=</code><code>"输入你的心情"</code> <code>/></td></code>
</div>
<div>
<code><td><input name=</code><code>"address"</code> <code>type=</code><code>"text"</code> <code>value=</code><code>""</code> <code>placeholder=</code><code>"输入现在所在地"</code> <code>/></td></code>
</div>
<div>
<code><td><label>高兴：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>checked=</code><code>"checked"</code> <code>name=</code><code>"mood"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"0"</code> <code>/></label></code>
</div>
<div>
<code><label>一般：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"1"</code> <code>/></label></code>
</div>
<div>
<code><label>悲伤：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"2"</code> <code>/></label></code>
</div>
<div>
<code><label>忧虑：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"3"</code> <code>/></label></code>
</div>
<div>
<code><label>其他：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood"</code> <code>type=</code><code>"radio"</code> <code>value=</code><code>"4"</code> <code>/></label></td></code>
</div>
<div>
<code><td></td></code>
</div>
<div>
<code><td><a </code><code>class</code><code>=</code><code>"add"</code><code>>添加</a></td></code>
</div>
<div>
<code></tr></code>
</div>
<div>
<code></code>
</div>
<div>
<code><tr></code>
</div>
<div>
<code><td><input name=</code><code>"text"</code> <code>type=</code><code>"text"</code> <code>value=</code><code>"'<?php"</code> <code>/>text; ?>'/></td></code>
</div>
<div>
<code><td><input name=</code><code>"address"</code> <code>type=</code><code>"text"</code> <code>value=</code><code>"'<?php"</code> <code>/>address; ?>'/></td></code>
</div>
<div>
<code><td><label>高兴：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood<?php echo $fivesdraft->id; ?>"</code> <code>type=</code><code>"radio"</code> <code>/>mood==0?</code><code>'checked=checked'</code><code>:</code><code>''</code><code>; ?> value=</code><code>"0"</code><code>></label></code>
</div>
<div>
<code><label>一般：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood<?php echo $fivesdraft->id; ?>"</code> <code>type=</code><code>"radio"</code> <code>/>mood==</code><code>'1'</code><code>?</code><code>'checked=checked'</code><code>:</code><code>''</code><code>; ?> value=</code><code>"1"</code><code>></label></code>
</div>
<div>
<code><label>悲伤：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood<?php echo $fivesdraft->id; ?>"</code> <code>type=</code><code>"radio"</code> <code>/>mood==2?</code><code>'checked=checked'</code><code>:</code><code>''</code><code>; ?> value=</code><code>"2"</code><code>></label></code>
</div>
<div>
<code><label>忧虑：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood<?php echo $fivesdraft->id; ?>"</code> <code>type=</code><code>"radio"</code> <code>/>mood==3?</code><code>'checked=checked'</code><code>:</code><code>''</code><code>; ?> value=</code><code>"3"</code><code>></label></code>
</div>
<div>
<code><label>其他：<input </code><code>class</code><code>=</code><code>"mood"</code> <code>name=</code><code>"mood<?php echo $fivesdraft->id; ?>"</code> <code>type=</code><code>"radio"</code> <code>/>mood==4?</code><code>'checked=checked'</code><code>:</code><code>''</code><code>; ?> value=</code><code>"4"</code><code>></label></td></code>
</div>
<div>
<code><td></td></code>
</div>
<div>
<code><td><a </code><code>class</code><code>=</code><code>"edit"</code><code>>保存</a><a </code><code>class</code><code>=</code><code>"delete"</code><code>>删除</a></td></code>
</div>
<div>
<code></tr></code>
</div>
<div>
<code></tbody></code>
</div>
<div>
<code></table></code>
</div>
<div>
<code></div></code>
</div>
<div>
<code> }</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
test方法是php与html代码混编的样式，其中HTMl部分主要负责样式的输出，而PHP的代码则是负责执行取数据的逻辑。主要从数据库读取数据的部分，通过Wordpress的$wpdb->get_results方法就可以从数据库中取出我们第一步中创建的表中的数据，返回的是一个数据集合，包含了多条数据。最后通过foreach循环将数据输出。</p>
<p>
我们把数据的界面显示出来了，那么怎样才能将数据保存呢？同样根据上一篇心情插件的例子，先看下面的代码</p>
<div>
<div>
<div id="highlighter_258860">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
</td>
<td>
<div>
<div>
<code> </code><code>function</code> <code>aad_load_scripts(</code><code>$hook</code><code>) {</code>
</div>
<div>
<code>global</code> <code>$my_settings</code><code>;</code>
</div>
<div>
<code>if</code><code>( </code><code>$hook</code> <code>!= </code><code>$my_settings</code> <code>)</code>
</div>
<div>
<code>return</code><code>;</code>
</div>
<div>
<code>/*载入ajax的js文件,也可以载入其他的javascript和/或css等*/</code>
</div>
<div>
<code>wp_enqueue_script(</code><code>'my-ajax'</code><code>, plugins_url( </code><code>'my-mood/js/index.js'</code><code>, __FILE ), </code><code>array</code><code>(</code><code>'jquery'</code><code>));</code>
</div>
<div>
</div>
<div>
<code>wp_register_style( </code><code>'my-style'</code><code>, plugins_url( </code><code>'my-mood/css/style.css'</code><code>, __FILE ), </code><code>array</code><code>(), </code><code>''</code><code>, </code><code>'all'</code> <code>);</code>
</div>
<div>
<code>wp_enqueue_style( </code><code>'my-style'</code> <code>);</code>
</div>
<div>
</div>
<div>
<code>/*</code>
</div>
<div>
<code>创建验证nonce</code>
</div>
<div>
<code>它会输出类似于：</code>
</div>
<div>
<code><![CDATA[</code>
</div>
<div>
<code>var aad_vars = {"aad_nonce":"5c18514d34"};</code>
</div>
<div>
<code>]]></code>
</div>
<div>
<code>之类的被注释掉的js到HTML。</code>
</div>
<div>
<code>*/</code>
</div>
<div>
<code>wp_localize_script(</code><code>'my-js'</code><code>, </code><code>'my_vars'</code><code>, </code><code>array</code><code>(</code>
</div>
<div>
<code>'my_nonce'</code> <code>=> wp_create_nonce(</code><code>'aad-nonce'</code><code>)</code>
</div>
<div>
<code>)</code>
</div>
<div>
<code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action(</code><code>'admin_enqueue_scripts'</code><code>, </code><code>'aad_load_scripts'</code><code>);</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
其中index.js的代码如下</p>
<div>
<div>
<div id="highlighter_583677">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
<div>
31</div>
<div>
32</div>
<div>
33</div>
<div>
34</div>
<div>
35</div>
<div>
36</div>
<div>
37</div>
<div>
38</div>
<div>
39</div>
<div>
40</div>
<div>
41</div>
<div>
42</div>
<div>
43</div>
<div>
44</div>
<div>
45</div>
<div>
46</div>
<div>
47</div>
<div>
48</div>
<div>
49</div>
<div>
50</div>
<div>
51</div>
<div>
52</div>
<div>
53</div>
<div>
54</div>
<div>
55</div>
<div>
56</div>
<div>
57</div>
<div>
58</div>
<div>
59</div>
<div>
60</div>
<div>
61</div>
<div>
62</div>
<div>
63</div>
<div>
64</div>
</td>
<td>
<div>
<div>
<code>jQuery(document).ready(</code><code>function</code><code>(){</code>
</div>
<div>
<code>jQuery(</code><code>"input"</code><code>).blur(</code><code>function</code><code>(){</code>
</div>
<div>
<code>var</code> <code>value=jQuery(</code><code>this</code><code>).val();</code>
</div>
<div>
<code>jQuery.ajax({</code>
</div>
<div>
<code>type:</code><code>"POST"</code><code>,</code>
</div>
<div>
<code>url:</code><code>"/wp-admin/admin-ajax.php"</code><code>,</code>
</div>
<div>
<code>dataType: </code><code>'json'</code><code>,</code>
</div>
<div>
<code>data:{action:</code><code>"say"</code><code>,value:value},</code>
</div>
<div>
<code>success:</code><code>function</code><code>(data){</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>});</code>
</div>
<div>
<code>})</code>
</div>
<div>
</div>
<div>
<code>jQuery(</code><code>".add"</code><code>).click(</code><code>function</code><code>(){</code>
</div>
<div>
<code>var</code> <code>parent=jQuery(</code><code>this</code><code>).closest(</code><code>"tr"</code><code>);</code>
</div>
<div>
</div>
<div>
<code>var</code> <code>text=jQuery(parent).find(</code><code>"input"</code><code>).val();</code>
</div>
<div>
<code>var</code> <code>address=jQuery(parent).find(</code><code>"input"</code><code>).val();</code>
</div>
<div>
<code>var</code> <code>mood=jQuery(parent).find(</code><code>"input:checked"</code><code>).val();</code>
</div>
<div>
<code>jQuery.ajax({</code>
</div>
<div>
<code>type:</code><code>"POST"</code><code>,</code>
</div>
<div>
<code>url:</code><code>"/wp-admin/admin-ajax.php"</code><code>,</code>
</div>
<div>
<code>dataType: </code><code>'json'</code><code>,</code>
</div>
<div>
<code>data:{action:</code><code>"add_mood"</code><code>,text:text,address:address,mood:mood},</code>
</div>
<div>
<code>success:</code><code>function</code><code>(data){</code>
</div>
<div>
<code>window.location.href=window.location;</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>});</code>
</div>
<div>
<code>})</code>
</div>
<div>
</div>
<div>
<code>jQuery(</code><code>".delete"</code><code>).click(</code><code>function</code><code>(){</code>
</div>
<div>
<code>var</code> <code>parent=jQuery(</code><code>this</code><code>).closest(</code><code>"tr"</code><code>);</code>
</div>
<div>
</div>
<div>
<code>var</code> <code>id=jQuery(parent).attr(</code><code>'data'</code><code>);</code>
</div>
<div>
<code>jQuery.ajax({</code>
</div>
<div>
<code>type:</code><code>"POST"</code><code>,</code>
</div>
<div>
<code>url:</code><code>"/wp-admin/admin-ajax.php"</code><code>,</code>
</div>
<div>
<code>dataType: </code><code>'json'</code><code>,</code>
</div>
<div>
<code>data:{action:</code><code>"delete_mood"</code><code>,id:id},</code>
</div>
<div>
<code>success:</code><code>function</code><code>(data){</code>
</div>
<div>
<code>window.location.href=window.location;</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>});</code>
</div>
<div>
<code>})</code>
</div>
<div>
</div>
<div>
<code>jQuery(</code><code>".edit"</code><code>).click(</code><code>function</code><code>(){</code>
</div>
<div>
<code>var</code> <code>parent=jQuery(</code><code>this</code><code>).closest(</code><code>"tr"</code><code>);</code>
</div>
<div>
</div>
<div>
<code>var</code> <code>id=jQuery(parent).attr(</code><code>'data'</code><code>);</code>
</div>
<div>
<code>var</code> <code>text=jQuery(parent).find(</code><code>"input"</code><code>).val();</code>
</div>
<div>
<code>var</code> <code>address=jQuery(parent).find(</code><code>"input"</code><code>).val();</code>
</div>
<div>
<code>var</code> <code>mood=jQuery(parent).find(</code><code>"input:checked"</code><code>).val();</code>
</div>
<div>
<code>jQuery.ajax({</code>
</div>
<div>
<code>type:</code><code>"POST"</code><code>,</code>
</div>
<div>
<code>url:</code><code>"/wp-admin/admin-ajax.php"</code><code>,</code>
</div>
<div>
<code>dataType: </code><code>'json'</code><code>,</code>
</div>
<div>
<code>data:{action:</code><code>"edit_mood"</code><code>,id:id,text:text,address:address,mood:mood},</code>
</div>
<div>
<code>success:</code><code>function</code><code>(data){</code>
</div>
<div>
<code>window.location.href=window.location;</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>});</code>
</div>
<div>
<code>})</code>
</div>
<div>
</div>
<div>
<code>});</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
在上面的代码中我们通过Hook插入我们需要js代码和css代码，这样我们插件的js和css就会因为插件的启用而插入到页面代码中。<br>
我们实现异步加载数据，要根据下面的代码：</p>
<div>
<div>
<div id="highlighter_271718">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
</td>
<td>
<div>
<div>
<code> </code><code>function</code> <code>say(){</code>
</div>
<div>
<code>$return</code><code>=</code><code>array</code><code>();</code>
</div>
<div>
<code>$return</code><code>[</code><code>'success'</code><code>] = </code><code>'1'</code><code>;</code>
</div>
<div>
<code>$return</code><code>[</code><code>'msg'</code><code>]=</code><code>$_POST</code><code>[</code><code>'value'</code><code>].</code><code>"test-ajax"</code><code>;</code>
</div>
<div>
<code>echo</code> <code>json_encode(</code><code>$return</code><code>);</code>
</div>
<div>
<code>die</code><code>();</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action(</code><code>'wp_ajax_say'</code><code>, </code><code>'say'</code><code>);</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
这段代码的意思是要使用ajax提交数据，add_action(‘wp_ajax_函数名'，函数名)的格式就是注册一个say路由，它对应的js代码是</p>
<div>
<div>
<div id="highlighter_380293">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
</td>
<td>
<div>
<div>
<code>jQuery(</code><code>"input"</code><code>).blur(</code><code>function</code><code>(){</code>
</div>
<div>
<code>var</code> <code>value=jQuery(</code><code>this</code><code>).val();</code>
</div>
<div>
<code>jQuery.ajax({</code>
</div>
<div>
<code>type:</code><code>"POST"</code><code>,</code>
</div>
<div>
<code>url:</code><code>"/wp-admin/admin-ajax.php"</code><code>,</code>
</div>
<div>
<code>dataType: </code><code>'json'</code><code>,</code>
</div>
<div>
<code>data:{action:</code><code>"say"</code><code>,value:value},</code>
</div>
<div>
<code>success:</code><code>function</code><code>(data){</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>});</code>
</div>
<div>
<code>})</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
因此可以看到js代码的action为say</p>
<p>
同样的道理数据要进行添加，注册一个add_mood的路由</p>
<div>
<div>
<div id="highlighter_641481">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
</td>
<td>
<div>
<div>
<code> </code><code>function</code> <code>add_mood(){</code>
</div>
<div>
</div>
<div>
<code>$text</code><code>=</code><code>$_POST</code><code>[</code><code>'text'</code><code>];</code>
</div>
<div>
<code>$address</code><code>=</code><code>$_POST</code><code>[</code><code>'address'</code><code>];</code>
</div>
<div>
<code>$mood</code><code>=</code><code>$_POST</code><code>[</code><code>'mood'</code><code>];</code>
</div>
<div>
<code>add(</code><code>$text</code><code>,</code><code>$address</code><code>,</code><code>$mood</code><code>);</code>
</div>
<div>
</div>
<div>
<code>$return</code><code>=</code><code>array</code><code>();</code>
</div>
<div>
<code>$return</code><code>[</code><code>'success'</code><code>] = </code><code>'1'</code><code>;</code>
</div>
<div>
<code>echo</code> <code>json_encode(</code><code>$return</code><code>);</code>
</div>
<div>
<code>die</code><code>();</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action(</code><code>'wp_ajax_add_mood'</code><code>, </code><code>'add_mood'</code><code>);</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
数据要进行删除，注册一个delete_mood的路由</p>
<div>
<div>
<div id="highlighter_400568">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
</td>
<td>
<div>
<div>
<code> </code><code>function</code> <code>delete_mood(){</code>
</div>
<div>
</div>
<div>
<code>$id</code><code>=</code><code>$_POST</code><code>[</code><code>'id'</code><code>];</code>
</div>
<div>
<code>delete</code><code>(</code><code>$id</code><code>);</code>
</div>
<div>
</div>
<div>
<code>$return</code><code>=</code><code>array</code><code>();</code>
</div>
<div>
<code>$return</code><code>[</code><code>'success'</code><code>] = </code><code>'1'</code><code>;</code>
</div>
<div>
<code>echo</code> <code>json_encode(</code><code>$return</code><code>);</code>
</div>
<div>
<code>die</code><code>();</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action(</code><code>'wp_ajax_delete_mood'</code><code>, </code><code>'delete_mood'</code><code>);</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
数据要进行编辑，注册一个edit_mood的路由</p>
<div>
<div>
<div id="highlighter_295150">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
</td>
<td>
<div>
<div>
<code> </code><code>function</code> <code>edit_mood(){</code>
</div>
<div>
</div>
<div>
<code>$id</code><code>=</code><code>$_POST</code><code>[</code><code>'id'</code><code>];</code>
</div>
<div>
<code>$text</code><code>=</code><code>$_POST</code><code>[</code><code>'text'</code><code>];</code>
</div>
<div>
<code>$address</code><code>=</code><code>$_POST</code><code>[</code><code>'address'</code><code>];</code>
</div>
<div>
<code>$mood</code><code>=</code><code>$_POST</code><code>[</code><code>'mood'</code><code>];</code>
</div>
<div>
<code>edit(</code><code>$id</code><code>,</code><code>$text</code><code>,</code><code>$address</code><code>,</code><code>$mood</code><code>);</code>
</div>
<div>
</div>
<div>
<code>$return</code><code>=</code><code>array</code><code>();</code>
</div>
<div>
<code>$return</code><code>[</code><code>'success'</code><code>] = </code><code>'1'</code><code>;</code>
</div>
<div>
<code>echo</code> <code>json_encode(</code><code>$return</code><code>);</code>
</div>
<div>
<code>die</code><code>();</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action(</code><code>'wp_ajax_edit_mood'</code><code>, </code><code>'edit_mood'</code><code>);</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
对应上面增删改的php函数如下所示</p>
<div>
<div>
<div id="highlighter_748896">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
<div>
31</div>
<div>
32</div>
<div>
33</div>
<div>
34</div>
<div>
35</div>
<div>
36</div>
<div>
37</div>
<div>
38</div>
<div>
39</div>
<div>
40</div>
<div>
41</div>
<div>
42</div>
<div>
43</div>
<div>
44</div>
<div>
45</div>
<div>
46</div>
<div>
47</div>
<div>
48</div>
</td>
<td>
<div>
<div>
<code> </code><code>function</code> <code>add(</code><code>$text</code><code>,</code><code>$address</code><code>,</code><code>$mood</code><code>){</code>
</div>
<div>
<code>global</code> <code>$wpdb</code><code>;</code>
</div>
<div>
</div>
<div>
<code>$table_name</code> <code>= </code><code>$wpdb</code><code>->prefix . </code><code>"mood"</code><code>;</code>
</div>
<div>
<code>$wpdb</code><code>->insert(</code>
</div>
<div>
<code>$table_name</code><code>,</code>
</div>
<div>
<code>array</code><code>(</code>
</div>
<div>
<code>'createdon'</code> <code>=> current_time( </code><code>'mysql'</code> <code>),</code>
</div>
<div>
<code>'publishedon'</code> <code>=> current_time( </code><code>'mysql'</code> <code>),</code>
</div>
<div>
<code>'status'</code> <code>=> 1,</code>
</div>
<div>
<code>'mood'</code> <code>=> </code><code>$mood</code><code>,</code>
</div>
<div>
<code>'text'</code><code>=></code><code>$text</code><code>,</code>
</div>
<div>
<code>'address'</code><code>=></code><code>$address</code><code>,</code>
</div>
<div>
<code>)</code>
</div>
<div>
<code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>?></code>
</div>
<div>
</div>
<div>
<code> </code><code>function</code> <code>delete</code><code>(</code><code>$id</code><code>){</code>
</div>
<div>
<code>global</code> <code>$wpdb</code><code>;</code>
</div>
<div>
</div>
<div>
<code>$table_name</code> <code>= </code><code>$wpdb</code><code>->prefix . </code><code>"mood"</code><code>;</code>
</div>
<div>
<code>$wpdb</code><code>-></code><code>delete</code><code>(</code>
</div>
<div>
<code>$table_name</code><code>,</code>
</div>
<div>
<code>array</code><code>(</code>
</div>
<div>
<code>'id'</code><code>=></code><code>$id</code>
</div>
<div>
<code>)</code>
</div>
<div>
<code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>?></code>
</div>
<div>
</div>
<div>
<code> </code><code>function</code> <code>edit(</code><code>$id</code><code>,</code><code>$text</code><code>,</code><code>$address</code><code>,</code><code>$mood</code><code>){</code>
</div>
<div>
<code>global</code> <code>$wpdb</code><code>;</code>
</div>
<div>
</div>
<div>
<code>$table_name</code> <code>= </code><code>$wpdb</code><code>->prefix . </code><code>"mood"</code><code>;</code>
</div>
<div>
<code>$wpdb</code><code>->update(</code>
</div>
<div>
<code>$table_name</code><code>,</code>
</div>
<div>
<code>array</code><code>(</code>
</div>
<div>
<code>'mood'</code> <code>=> </code><code>$mood</code><code>,</code>
</div>
<div>
<code>'text'</code><code>=></code><code>$text</code><code>,</code>
</div>
<div>
<code>'address'</code><code>=></code><code>$address</code><code>,</code>
</div>
<div>
<code>),</code>
</div>
<div>
<code>array</code><code>(</code>
</div>
<div>
<code>'id'</code> <code>=> </code><code>$id</code>
</div>
<div>
<code>)</code>
</div>
<div>
<code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
现在插件的后台数据和界面都已经处理完了，那么怎样把我们的心情插件在前台引用呢？我们需要添加下面的代码</p>
<div>
<div>
<div id="highlighter_178544">
<div>
</div>
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
</tr></tbody></table>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
</td>
<td>
<div>
<div>
<code> </code><code>function</code> <code>mood_dispaly(){</code>
</div>
<div>
<code>global</code> <code>$wpdb</code><code>;</code>
</div>
<div>
<code>$table_name</code> <code>= </code><code>$wpdb</code><code>->prefix . </code><code>"mood"</code><code>;</code>
</div>
<div>
</div>
<div>
<code>$fivesdrafts</code> <code>= </code><code>$wpdb</code><code>->get_results(</code>
</div>
<div>
<code>"</code>
</div>
<div>
<code>SELECT text</code>
</div>
<div>
<code>FROM </code><code>$table_name</code>
</div>
<div>
<code>ORDER BY createdon DESC</code>
</div>
<div>
<code>LIMIT 10</code>
</div>
<div>
<code>"</code>
</div>
<div>
<code>);</code>
</div>
<div>
</div>
<div>
<code>?></code>
</div>
<div>
</div>
<div>
<code> }</code>
</div>
<div>
<code>?></code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
这段代码就把数据库中存储的心情数据通过HTML显示在前台，那么样子哪里控制的呢？还记得第一步我们添加的js和css吗，是的，样式就是通过第一步插入的样式来控制的。</p>
<p>
到此一个完整的心情插件就完成了，照着例子你就可以制作一个属于自己的心情插件了。</p>

頁: [1]

琼殿技术论坛's Archiver

基础的WordPress插件制作教程