从零开始写一款WordPress插件-以改造原生相册为例

前几天在tone work的《初恋1/1》官网看到了一个非常漂亮的js弹出图片插件，果断保存下来，准备与WordPress相册功能结合下。经过前后共五个多小时的努力，我完成了一个WordPress原生相册改造插件。你可以点击下方的相册缩略图查看效果，或访问 这个链接下载插件。

此文记录了我(PHP小白)完成该插件的过程，它包括WP插件入门与相册改造两部分。

WP插件入门知识

插件可以为Wordpress添加可选功能，并能够实现代码复用。因此不论你换成哪个主题，只要启用插件，就可以体验相同的功能。

插件的声明

WordPress插件的声明非常简单，只要在php文件中写下如下格式的注释，并将其放置于插件文件夹中，wp就会自动搜索并加载该文件。
首先建立一个文件夹，文件夹内创建一个空白的php文件。用编辑器打开php文件，并在<?后写下该插件的声明，如下所示：

<?php
/**
 * Plugin Name: WP Gallery LightBox Plus
 * Plugin URI: https://www.azimiao.com/3861.html
 * Description: 一个对WP自带相册增加❤LightBox特效❤的小插件
 * Version: 1.0.2
 * Author: 野兔❤梓喵出没
 * Author URI: https://www.azimiao.com
 */
?>

保存后，将这个文件夹放置于WordPress的插件目录，访问后台看看效果吧。如果不出意外，你将会看到一个未启用的插件，其内容如下所示。

你可以试着启用它，虽然它并没有任何实际功能。

第一行PHP代码

一个包含插件声明的php文件就是插件代码的执行入口，当wp初始化时会执行该文件内的代码(关于wp的初始化执行顺序请参考相关资料)。用编辑器打开之前创建的PHP文件，并在?>前输入如下代码

echo "Hello WordPress !";

保存并启用这个插件，你会发现每个页面都会输出一句“Hello WordPress”，是不是非常炫酷呢？由这个例子我们进一步了解了插件代码执行入口的含义。

原生相册改造

需求分析

需求分析的目的是为了明确开发需求，避免盲目开发造成的时间浪费与功能冗余。经过我的分析，目前最急迫的需求分为如下两点:

1. 改造后的相册前台样式实现tone work’s 官网的图片弹出效果。
2. 改造后的相册在后台添加的方法应兼容原生相册。

目前优先度不高的需求有如下几点：

1. 提供后台设置页面，包含自定义样式、可选引入库等功能。
2. 前台js插件更换为新版本插件，抛弃基于Prototype的旧版本。
3. 对新版本Js插件进行改造，以实现旧版本插件的打开效果。

开发过程

下面记录了我的开发过程，并包含对这个小插件的代码原理说明。

1.替换原生相册回调方法

wp的相册功能是通过短代码实现的，经查阅资料，发现在media.php的1595行(wordpress4.7.8)注册了相册短代码的回调函数，回调函数名为gallery_shortcode。

add_shortcode('gallery', 'gallery_shortcode');

查看该函数的函数体可以很快的了解该函数的功能，在此不过多解释。
在我们建立的插件php文件中写如下两行代码，它们的目的是移除原函数回调，并绑定我们自己的函数回调。

remove_shortcode('gallery', 'gallery_shortcode');
add_shortcode('gallery', 'zm_gallery_shortcode');

后面的工作就非常简单了，定义一个zm_gallery_shortcode函数，复制一份media.php的gallery_shortcode函数体,按需修改即可。修改完毕后，保存并启用该插件，此时相册在前台输出的页面就全由你的zm_gallery_shortcode函数来决定啦。

2.加入后台管理页面

我定义了一个类(见本插件wp-gallery-light-admin.php)，在类的构造函数中通过如下代码挂载函数钩子admin_menu，其将会回调本对象($this)的init方法。admin_menu钩子会在wp初始化时执行，其可以理解为一种委托。

add_action("admin_menu",array($this,"init"));

init方法中注册菜单项,该函数的参数请参阅wp官网。倒数第二个参数代表了本插件管理页面的链接地址，在最后的参数中，我规定了访问这个链接时的处理对象($this)与处理函数(optionPage)。

add_options_page("WP-Gallery-LightBox","WP-Gallery-LightBox","manage_options","wp_gallerylightbox_setting",array($this,"optionPage"));

optionPage方法中输出了后台管理页面，并利用wp的get_option与update_option方法获取与更新插件设置参数。

3.zm_gallery_shortcode修改为根据参数输出

在zm_gallery_shortcode方法中，通过get_option方法获取插件设置参数，根据参数值来拼接输出语句。

4.保存与测试

上传测试后，发现前台输出的字符串符合预期，但是js插件报错。经查，原因是prototype插件$符号与博客引入的JQuery插件$符号冲突，准备替换js插件为基于JQuery最新版。

5.修改新js插件

新版本的Lightbox插件外观不如老插件漂亮，且其动画效果不如老插件好看。我主要修改了新插件js代码中的缩放、出现、隐藏动画效果，并修改了前台部分样式，以便接近老插件的独特效果。

6.修改原输出方法

新版本Lightbox插件所需的输出字符串与老插件略有区别，按需修改zm_gallery_shortcode即可。

7.保存与测试

上传测试后，其功能正常，且修改后的新js插件效果接近老插件的效果，需求基本满足。

总结

人生苦短，我用typecho。