自己动手写一个 WordPress 插件

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

下面是我们自己动手写一个简单的 WordPress 插件，此插件是根据官方提供的 Hello Dolly 改进而来。要想读懂本文中的内容，你需要对 WordPress 的基本功能和 PHP 编程有一定的了解。

开始

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

下一步就是根据插件的名字，去到 wp-content/plugins/ 目录下，创建插件的文件夹和一个 PHP 主文件。插件文件夹的名称通常和插件 PHP 文件的名称相同，例如我们的插件的名字叫做 “Hello World”，那么插件的文件夹叫做 “hello-world” 而 PHP 主文件的名字就可以是 “hello-world.php”，目录结构如下：

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

插件信息头

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

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

<?php
/**
 * Plugin Name: Hello World(我们定义的插件名)
 * Plugin URI: http://icodechef.com(插件的主页)
 * Description: 这里填入插件的描述
 * Version: 1.0.0
 * Author: icodechef
 * Author URI: http://icodechef.com
 */

我们可以看到，插件信息是以 PHP 的注释出现的。

开始编写插件

首先，了解一下 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()。

好了，我们回到编写插件中，首先定义创建一个叫做 hello_world_get_words 的函数，程序的代码非常简单，就是随机输出一些问候语，代码如下：

function hello_world_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 ) ] );
}

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

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( ‘wp_footer’, ‘hello_world’ ); 表示在页脚执行 hello_world 这个函数。

打印样式

我们还可以为输出定义样式(css)

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 soild #999;
        border-radius: 4px;
        color: #da4453;
    }
    </style>
    ";
}

add_action( 'wp_head', 'hello_world_css' );

这里不多作解释了。

完整代码：

<?php
/*
Plugin Name: Hello world
Plugin URI: https://github.com/icodechef/hello-world
Description: just a plugin
Author: iCodeChef
Version: 1.0
Author URI: http://icodechef.com
License: MIT
*/

function hello_world_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' );

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 soild #999;
        border-radius: 4px;
        color: #da4453;
    }
    </style>
    ";
}

add_action( 'wp_head', 'hello_world_css' );

然后我们到后台管理页面，启用 Hello World 这个插件，然后查看一下效果吧。

 

到此为止，我们已经完成一个简单的 WordPress 插件。但这才是开始，未完，待续。