wordpress开发之插件开发初识(wordpress插件开发基础)
<p align="center" style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'><img title="wordpress开发之插件开发初识(wordpress插件开发基础)" alt="wordpress开发之插件开发初识(wordpress插件开发基础)" src="https://zhuji.jb51.net/uploads/img/202305/c1078dec9b7a46329ff70ac25c8dc97a.jpg" style="max-width:100%!important;height:auto!important;border: 1px solid rgb(204, 204, 204); vertical-align: middle; padding: 1px; overflow: hidden; max-width: 696px; width: 484px; height: 300px;"></p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
首先，你要在wp-content/plugins/下建立一个文件夹，文件夹的名字最好只由字母、数字、“-”和下滑组成。同时，还要在这个文件夹下建立一个同名的php文件。比如你的文件夹名字为my-plugin，则php的名字就是my-plugin.php，这个文件做为你plugin的主文件，像主题文件的sytle.css文件一样，它的头部包含了对这个插件的描述信息。下面是一个简单的例子：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span>
</div>
<p>
代码如下:</p>
</div>
<div id="phpcode7" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
< ?php<br>
/*<br>
Plugin Name: 插件名称<br>
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates<br>
Description: 插件的简单描述<br>
Version: 插件版本号, 例如: 1.0<br>
Author: 插件作者<br>
Author URI: http://URI_Of_The_Plugin_Author作者地址<br>
*/<br>
?> </div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
另外如果你想要把你的插件提交到wordpress.org上，你还要在文件夹中添加一个readme.txt文件。就像主题中的style.css文件一样。类似的，readme.txt的头部包含了对这个插件的基本描述信息。关于readme.txt的格式，可以参考WordPress的官方示例。因为这里只是简单的写一个可用的Plugin，就不介绍reaadme.txt了。<br>
WordPress的插件其实就是一堆php的方法。这些方法通过调用系统自带的钩子来为博客增加新的功能。下面我们就来看一下什么是系统的钩子。<br>
插件钩子</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
WordPress定义了很多不同用途的钩子，在Wordpress运行的不同阶段，它会检测当前阶段是否注册了钩子函数，如果有，则优先执行这些函数。添加filter的方法如下：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span>
</div>
<p>
代码如下:</p>
</div>
<div id="phpcode8" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
add_filter('filter_name', 'filter_callback_function_name', $priority=10, $accepted_args=1);</div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
add_fitler的四个参数分别是：要挂载的钩子的名称，钩子的回调函数，回调函数的优先级，回调函数的参数个数。一个例子如下：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span>
</div>
<p>
代码如下:</p>
</div>
<div id="phpcode9" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
add_fitler('the_title', 'my_title', 10, 2);<br>
function my_title($title, $id) {<br>
return News:$title;<br>
} </div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
这个例子中，我们在the_title钩子上挂载了一个my_title的函数，这个函数接受两个参数，每别是文章的标题和ID，当Wordpress要把文章post给浏览器之前，会首先调用到这个函数，在这里，我们在每个文章的标题前加了一个“News:”。<br>
关于Wordpress所提供的所有钩子，可以参考Wordpress的官网文档：Filter Reference。<br>
另外你可能会在某些文章中看到令一个添加钩子的函数add_action。我们来看一下wordpress的内核你或许就明白了：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span>
</div>
<p>
代码如下:</p>
</div>
<div id="phpcode10" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
function add_action($tag, $function_to_add, $priority = 10, $accept_args = 1) {<br>
return add_filter($tag, $function_to_add, $priority, $accept_args);<br>
} </div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
所以add_action和add_filter本质上没有任何区别。<br>
之前说过，Wordpress会在系统的不同阶段调用不同的钩子，其实，如果需要，你也可以在你的代码里手动调用这些钩子。方法如下：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span>
</div>
<p>
代码如下:</p>
</div>
<div id="phpcode11" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
$return_values = apply_filtere('filter_name', $args ... ); </div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
有了这些filter，你就可以在wordpress处理流程中的任意地方修改数据内容，实现插件所需要的功能。<br>
Option机制</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
仅仅有了filter还不够，很多插件还需要保存一些信息，比方插件的属性设置之类，这个时候你就要用到Wordpress的Option机制了。<br>
WordPress的Option机制通过add_option，get_option, update_option三个函数来实现，三个函数的定义如下：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span>
</div>
<p>
代码如下:</p>
</div>
<div id="phpcode12" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
add_option($name, $value, $deprecated, $autoload);<br>
get_option($name);<br>
update_option($option_name, $newvalue); </div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
add_option有4个参数，功能分别如下：<br>
$name：必选，变量名<br>
$value：可选，变量值，默认为空字符<br>
$deprecated：没用的参数，纯粹是历史遗留问题。留着它只是为了兼容以有的插件。当然如果你要调用到后面的$autoload，你需要为它传入一个空字符或null。<br>
$autoload: “yes” or “no”，默认是”yes”，当设为”yes”时，该属性会在wp_load_alloptions调用时获取到。<br>
get_option用来获取你添加的参数，同时系统中已经默认定义了一些参数，你可以参考Wordpress的官方列表：Option Refernce。<br>
而update_option则是用来更新option。<br>
三个方法都比较好理解，我也不多说了。通过这三个方法你可以把你需要长久保存的数据放在数据库中。<br>
设置页面</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
有了filter和option，我们已经完成了一个插件的核心工作。不过做为一个插件，它经常还需要为用户提供一个设置页面，也就是在Wordpress后台插件列表中所看到的settings链接，如下图：<br>
settings<br>
这里我们用一个最简单的例子还说明如何添加一个设置页面：</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>
<div style="margin: 0px; padding: 0px; outline: none; float: right; line-height: 25.2px; font-size: 14px;">
<span style="line-height: 25.2px; cursor: pointer;"><u>复制代码</u></span>
</div>
<p>
代码如下:</p>
</div>
<div id="phpcode13" style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
<br>
<?php class wctest{<br>
public function __construct(){<br>
if(is_admin()){<br>
add_action('admin_menu', array($this, 'add_plugin_page'));<br>
add_action('admin_init', array($this, 'page_init'));<br>
}<br>
}<br>
public function add_plugin_page(){<br>
// This page will be under "Settings"<br>
add_options_page('Settings Admin', 'Settings', 'manage_options', 'test-setting-admin', array($this, 'create_admin_page'));<br>
}<br>
public function create_admin_page(){<br>
?><br>
<div><br>
< ?php screen_icon(); ?><br>
<h2>Settings</h2><br>
<form method=”post” action=”options.php”><br>
< ?php<br>
// This prints out all hidden setting fields<br>
settings_fields(‘test_option_group’);<br>
do_settings_sections(‘test-setting-admin’);<br>
?><br>
< ?php submit_button(); ?><br>
</form><br>
</div><br>
< ?php<br>
}<br>
public function page_init(){<br>
register_setting(‘test_option_group’, ‘array_key’, array($this, ‘check_ID’));<br>
add_settings_section(<br>
‘setting_section_id’,<br>
‘Setting’,<br>
array($this, ‘print_section_info’),<br>
‘test-setting-admin’<br>
);<br>
add_settings_field(<br>
‘some_id’,<br>
‘Some ID(Title)’,<br>
array($this, ‘create_an_id_field’),<br>
‘test-setting-admin’,<br>
‘setting_section_id’<br>
);<br>
}<br>
public function check_ID($input){<br>
if(is_numeric($input['some_id'])){<br>
$mid = $input['some_id'];<br>
if(get_option(‘test_some_id’) === FALSE){<br>
add_option(‘test_some_id’, $mid);<br>
}else{<br>
update_option(‘test_some_id’, $mid);<br>
}<br>
}else{<br>
$mid = ”;<br>
}<br>
return $mid;<br>
}<br>
public function print_section_info(){<br>
print ‘Enter your setting below:’;<br>
}<br>
public function create_an_id_field(){<br>
?><input type=”text” id=”input_whatever_unique_id_I_want” name=”array_key” value=”<?=get_option(‘test_some_id’);?/>” />< ?php<br>
}<br>
}<br>
$wctest = new wctest();</div>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
上面创建的类会在你的Wordpress后台添加一个新页面，同时它允许用户保存一个id值。</p>
<p style='margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, "Microsoft YaHei";'>
到这里，我们一个简单的Wordpress插件就完成了。虽然这个插件本身没有什么用途。谢谢大家。</p>
頁:
[1]