前几天在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。

我来吐槽

*

*

5位绅士参与评论

  1. 倚竹聽雨06-28 15:59 回复

    精华在最后一句,然鹅并没什么暖用。

  2. 北海06-17 16:26 回复

    不是typecho差评!

  3. 青山06-16 22:14 回复

    做好了吗

  4. 熊猫小A06-15 09:02 回复

    人生苦短,Typecho也是PHP
    o(////▽////)q
    还是用Hexo吧 😀

  5. mikusa06-14 23:56 回复

    今晚的月色真美啊