wordpress简单插件开发

2019年03月21日Web后端0

这几天弄了微信的个人公众号，想着在每篇文章的最后加上个关注公众号的提示，可是有这么多文章，每篇改来改去也是要费很大的劲的，于是想通过自己弄个插件的方式去解决。

一、插件系统

作为最受欢迎的博客系统，有相当一部分的功劳是归功于wp的插件的，小到评论插件，大到seo、安全防御插件，几乎每方面都有wp插件的身影。举几个我正在使用的插件：

  • Akismet Anti-Spam，抵御垃圾评论的插件。
  • Autoptimize，优化网站性能，压缩css，js，html的插件。
  • Slimstat Analytics，访问统计的插件。
  • 等等。

那么，我们来看看如何开发一个（简单）插件。

二、插件原理

插件位置

手动安装过或者细看过wp目录结构的都应该知道，插件都是安装在/wp-content/plugins 目录或子目录下的。

插件名

起插件名的时候最好可以在插件商店里搜下，避免重名，并加入些能体现功能的词。我这功能是用来文章末尾做提示的，所以起个名叫bottom-prompt（。。。不会起）。

hooks

至少作为前端的我，这个词应该是不陌生的吧。

简单来说hooks（钩子）其实就是预埋在代码中的一系列方法，当wp执行到此处时，就会去查看该钩子下有无事件。而插件主要就是向这些钩子中加入处理函数，以达到功能性的改变。

而hooks又分为Action Hook与Filter Hook，这两种钩子实现原理基本一样，最主要的区别在于filter有返回值，而action没有。wp提供的hooks是相当多的，具体的可以查看官方文档。

三、开始写插件

终于开始写代码了，新建bottom-prompt文件夹，新建bottom-prompt-plugin.php。

增加以下格式：

<?php
/*
 * Plugin Name: Bottom-Prompt plugin
 * Plugin URI: http://www.zhuyuntao.cn
 * Description: 底部消息提示插件
 * Version: 1.0.0
 * Author: 2fps
 * Author URI: http://www.zhuyuntao.cn
 * License: GPL
 */
?>

这段注释是干嘛用的呢？我们直接到已安装插件页面，发现多了个未启动的bottom-prompt插件，

注释上的内容都显示出来了吧。

增加注册函数

增加两个注册函数，一个是当插件被注册激活，另一个是当插件被停用时触发的。

/* 注册激活插件时调用的函数 */
register_activation_hook( __FILE__, 'display_prompt_install');
/* 注册停用插件时调用的函数 */
register_deactivation_hook( __FILE__, 'display_prompt_remove');

function display_prompt_install() {
    /* 在数据库的 wp_options 表中添加一条记录，第二个参数为默认值 */
    add_option("display_prompt_text", "<p>欢迎关注微信公众号[ 我不会前端 ]或扫描右侧悬浮二维码。</p>", '', 'yes');
}
function display_prompt_remove() {
    /* 删除 wp_options 表中的对应记录 */
    delete_option('display_prompt_text');
}

当插件被启用时，便向wp_options表中插入一条数据，当停用时，就会删除该条数据。因为我这数据简单，所以直接使用了wp_options表了，若有必要，可以新建一个表独自使用。

增加钩子

这儿用的是the_content过滤钩子，他可以在文章内容显示出来之前对其做些修改。

add_filter('the_content', 'display_prompt');

function display_prompt($content) {
    if (is_single()) {  // 文章页面
        $content = $content.get_option('display_prompt_text');
    }
    return $content;
}

当用户查看的是文章页面时，就会去wp_options表获取对应需要显示的值。 触发点和显示的地方都有处理了，那如果我们要改这个内容，总不能直接改源码吧，那也太不方便了。

增加侧边栏显示

将menu显示在左侧侧边栏，供管理员修改提示内容。

if(is_admin()) {
    /*  利用 admin_menu 钩子，添加菜单 */
    add_action('admin_menu', 'ddisplay_prompt_menu');
}
function ddisplay_prompt_menu() {
    /* add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);  */
    /* 页名称，菜单名称，访问级别，菜单别名，点击该菜单时的回调函数（用以显示设置页面） */
    add_options_page('set Prompt', 'Menu', 'administrator','display_prompt', 'display_prompt_html_page');
}

利用admin_menu钩子，添加左侧栏，并设置侧边菜单的名称。而具体页面的显示内容则在display_prompt_html_page()方法中。看下侧边栏的效果。

增加联动显示页面

随便找个后台的界面，复用他的html结构和css样式。

function display_prompt_html_page() {
    ?>
    <divclass="wrap">
        <h1>Set Prompt</h1>
        <form method="post" action="options.php">
            <?php/* 下面这行代码用来保存表单中内容到数据库 */?>
            <?php wp_nonce_field('update-options'); ?>
            <table class="form-table">
                <tr>
                    <th>提示</th>
                    <td>
                        <p>
                            <label>在此输入文章尾部的提示信息（支持html解析）。</label>
                        </p>
                        <p>
                            <textarea
                                name="display_prompt_text"
                                id="display_prompt_text"
                                cols="50"
                                class="large-text code"
                                rows="10"><?phpechoget_option('display_prompt_text'); ?></textarea>
                        </p>
                    </td>
                </tr>
            </table>
            <p>
                <input type="hidden" name="action" value="update"/>
                <input type="hidden" name="page_options" value="display_prompt_text"/>
                <input type="submit" value="保存更改" class="button button-primary" class="button-primary"/>
            </p>
        </form>
    </div>
<?php
}

这样界面就ok了，去试下效果吧。

demo地址：wordpress简单插件开发。

wordpress

目录