自己动手写一个 WordPress 插件

老牛浏览 354评论 0发表于 6 年前

WordPress 插件允许你在不修改核心代码的情况下，向 WordPress 增加新的功能。

下面我们自己动手写一个简单的 WordPress 插件，此插件是根据官方提供的 Hello Dolly 改进而来。

1. 创建插件

首先，我们来为插件起一个名字，插件的名字应该是独一无二的。如果不确定这个名字是否被使用过，可以搜索下是否已被使用。为了方便，我们使用 Hello WordPress 作为插件的名字。

下一步就是根据插件的名字，去 wp-content/plugins/ 目录下创建与插件名对应的文件夹 hello-wordpress 以及主文件 hello-wordpress.php，目录结构如下：

-- wp-content/plugins/
    -- hello-wordpress/
        -- hello-wordpress.php

2. 插件信息

WordPress 通过插件信息头识别插件的存在，并把它加入到控制面板的插件管理页面，这样才能激活插件；如果没有信息头，插件将无法被激活以及使用。

向插件的主文件添加如下代码：

/**
 * Plugin Name: Hello WordPress
 * Plugin URI: http://domain.test
 * Description: Plugin description
 * Version: 1.0.1
 * Author: author
 * Author URI: http://www.domain.test
 */

插件信息头是以 PHP 的注释形式出现的。

3. 实现功能

首先，了解一下 WordPress 的「插件钩子」这个概念，简单来说，就是运行到 PHP 文件某个位置，然后触发这个钩子，运行相关的函数。

以 wp_head 为例，添加函数到 wp_head 这个钩子：

function foo() {
    //code...
}

function bar() {
    //code...
}

add_action('wp_head', 'foo');
add_action('wp_head', 'bar');

当 WordPress 运行到 wp_head 所定义的位置时，就会分别执行 foo() 和 bar()。

好了，下面来实现我们自己的功能。

首先在主文件里面创建一个函数，代码非常简单，就是随机输出一些问候语，如下：

function hello_worldpress_get_words()
{
    $greetings = array(
        'Hello World',
        'How’s it going?',
        'What’s up?',
        'How’s everything?',
        'Nice to see you',
        'Long time no see',
        'How do you do?',
        'Are you OK?',
        'Yo!',
        'Howdy!',
        'Hiya!',
        'G’day mate!',
    );

    return wptexturize($greetings[mt_rand(0, count($greetings) - 1)]);
}

然后创建一个函数，获取问候语并格式化输出内容。

function hello_world()
{
    $chosen = hello_world_get_words();
    echo "<p id='world'>" . get_bloginfo('name', 'display') . " 跟你说：{$chosen}</p>";
}

add_action('wp_footer', 'hello_world');

底下一行 add_action() 表示在页脚执行 hello_world 这个函数。

接下来加入一些样式。

function hello_world_css()
{
    echo "
    <style type='text/css'>
    #world {
        position: fixed;
        bottom: 0;
        right:0;
        background-color:#f8f8f8;
        padding:15px 20px;
        margin: 0;
        font-size: 15px;
        z-index:1000;
        border:1px solid #999;
        border-radius: 4px;
        color: #da4453;
    }
    </style>
    ";
}

add_action('wp_head', 'hello_world_css');

这样，一个简单的插件就实现了。

4. 启用插件

然后我们到后台管理页面，启用 Hello WordPress 这个插件，看下效果吧！

5. 更多用法

比如现在我们要收集用户用 AJAX 提交的表单数据，可以使用 wp_ajax_ 和 wp_ajax_nopriv_ 函数。

请求地址：/wp-admin/admin-ajax.php?action=subscribe，对应的操作是 subscribe。我们可以使用 add_action() 为其添加处理函数。

/*
@param string $tag 钩子名称
@param callable $function_to_add 要执行的函数名
@param int $priority 优先级，数值越小越先执行，默认为 10
@param int $accepted_args 接收参数的个数，默认为 1个
@return true 始终返回 true

add_action($tag, $function_to_add, $priority = 10, $accepted_args = 1);
*/

add_action('wp_ajax_subscribe', 'subscribe_handler');
add_action('wp_ajax_nopriv_subscribe', 'subscribe_handler')

按上述 URL 请求时，wp_ajax_ 将会被触发，从而调用 subscribe_handler 函数。

wp_ajax_ 和 wp_ajax_nopriv_ 的区别在于：

wp_ajax_ 仅会在用户处于登录状态时被触发，用户未登录则不会触发。
wp_ajax_nopriv_ 仅会在用户未登录时被触发。

5.1 AJAX 请求示例

自定义插件 Custom Subscribe，收集用户提交的昵称和邮箱（仅作演示）。

/**
 * Plugin Name: Custom Subscribe
 * Plugin URI: http://domain.test
 * Description: Plugin description
 * Version: 1.0.1
 * Author: author
 * Author URI: http://domain.test
 */

function subscribe_handler()
{
    $data['nickname'] = $_POST['nickname'];
    $data['email'] = $_POST['email'];

    header('Content-Type: application/json');
    exit(json_encode($data)); // exit 避免默认输出 0
}

add_action('wp_ajax_subscribe', 'subscribe_handler');
add_action('wp_ajax_nopriv_subscribe', 'subscribe_handler');

5.2 HOOK 数据

自定义插件 Hook Subscribe，将 Custom Subscribe 提交的用户名统一转成小写。

/**
 * Plugin Name: Hook Subscribe
 * Plugin URI: http://domain.test
 * Description: Hook Subscribe
 * Version: 1.0.1
 * Author: author
 * Author URI: https://domain.test
 */

function hook_subscribe_handler()
{
    // 将 nickname 转为小写
    $_POST['nickname'] = strtolower($_POST['nickname']);
}

add_action('wp_ajax_subscribe', 'hook_subscribe_handler', 9); // 此处优先级要比之前的高，优先执行
add_action('wp_ajax_nopriv_subscribe', 'hook_subscribe_handler', 9);