发布第一个Wordpress插件,在编辑器添加寻找替换功能按钮

2018-09-24 约 1424 字 预计阅读 3 分钟

这两天编辑帖子,有了一个新的需求。

Wordpress编辑器目前没有寻找替换功能。而这项功能对我来说很有用处,因为经常帖代码,用的是一个引文的按钮,但每次都必须回到TEXT方式下加上<pre>的标签,不然代码会被Wordpress编辑器自动转成中文字符。

故此需要一个批量寻找替换文字的功能。之前的老帖子是用Better search replace修改数据库解决,但这个工具是将全站的数据全部替换,不太安全也不太方便用于新帖。

打算再找一个Wordpress插件,遍寻不见。可能这个需求不高。

少时从倚天屠龙记里听到一首元曲:
世情推物理,人生贵适意

吾能即吾道,有问题暂时没有能力解决时不执着,有能力解决时当然要迅速解决,不然怎能是一个适意的人生。

有时间有相关经验,有google有教程,虽然没有做过Wordress Plugin,只需抓住本质问题,专一的解决一些小问题还是在“吾能”的范畴里。

经过半天的学习,我的第一个wordpress plugin出炉了,下面分步详解。

建立自己的插件目录放置于Plugins目录下,仅有在此目录下Wordpress才会自动读取
sudo mkdir /var/www/yourwebsite.com/wp-content/plugins/find-replace-text-mode

到该目录下建立一个文件开始编辑:
cd /var/www/yourwebsite.com/wp-content/plugins/find-replace-text-mode
sudo nano find-replace-text-mode.php

首先贴上版权信息等
/**
* Plugin Name: Find and Replace Text Mode
* Plugin URI: https://jesselau.com
* Version: 1.0
* Author: Jesse Lau
* Author URI: https://jesselau.com
* Description: Add find and replace function in WordPress editor text mode.
* License: GPL2
*/

这是固定格式,这样Wordpress能自动读取你的插件信息.



接下来建立类,启动插件时判断是不是管理员,若是则运行后续代码
class jesse_find_replace_button
{
/** * Constructor. Called when the plugin is initialised. */
function __construct()
{
if ( is_admin() )
{
add_action( 'admin_print_footer_scripts', array( &$this, 'admin_footer_scripts' ) );
}
}

然后需要在编辑器中增加一个按钮
// Check the Quicktags script is in use
if ( ! wp_script_is( 'quicktags' ) )
{ return; }
?>
<script type="text/javascript">
QTags.addButton( 'jesse_find_replace_button', 'Find & Replace', insert_button );

这几句就是为了实现下面这个标有Find & Replace的小按钮



好,按钮好了,我们需要用javascript将编辑器里的内容读出,寻找替换再写入编辑器。
//WP Editor always use "content" as ID //
var defaultid = "content";
var x = document.getElementById(defaultid);
if ((x==null)||(x.type!=="textarea"))
{
alert("You TEXT AREA ID is not default value. Please read help file.");
return;
}
var text = document.getElementById(defaultid).value;
var search = prompt('Find What:');
if( !search) return;
var pattern = new RegExp(search,"gi");
var findCount = (text.match(pattern) || []).length;
if(findCount == 0)
{
alert("Nothing found!"); return;
}
var replace = prompt('Replace With:');
if( !replace)
{replace="";}

if(confirm(findCount + " matches found, replace now?"))
{
document.getElementById(defaultid).value= text.replace(pattern, replace); }

最后将这个类启动
$jesse_find_replace_button = new jesse_find_replace_button;

 

激活测试一下。







确认的时候感觉再贴一下要求的寻找替换字符串再提醒一下比较好。故此修改如下:
var replace = prompt('Replace With:');

if( !replace)
replace="";

if(confirm("find '"+search+"', "+findCount + " matches found, replace with '"+replace+"' now?")){

document.getElementById(defaultid).value= text.replace(pattern, replace);

}

这样,确认时就是这样了,用户就不容易出错



 

好了,我的第一个plugin就出炉了。方便大家阅读,在此贴上gist的排版后代码



 

更新


没想到这么快就更新版本了,帖子编辑完才几个小时。 :-)

考虑了一下,放在tag按钮处有点不合适,而且visual和text两个编辑器都有这个功能不是更好。

只要在Add to Media按钮旁边放一个按钮,则两个编辑界面都有这个按钮了。

代码也很简单
function add_media_button() {
printf( '<a href="%s" class="button jesse_find_replace_button" id="jesse_find_replace_button">' . '<span class="wp-media-buttons-icon dashicons dashicons-search"></span> %s' . '</a>', '#', __( 'Find & Replace', 'textdomain' ) );
}
add_action( 'media_buttons', 'add_media_button',100 );

这个代码就装了一个Find & Replace的按钮在编辑器上,还奉上一个搜索图标。



这半天顺便学习了一下JQuery,因为发现google出来的参考代码基本都是JQuery写的,不知道啥意思。就去w3schools学习了一会。

好,果然简洁,那我就用jquery修改了1.0版,现在更新为2.0了。

还是传到gist上供大家参考。



今天我尝试提交插件到Wordpress.org。这是我第一次提交,也不知道需要多少天才能申请通过。

先将安装文件传到我自己的网站吧。

大家如果需要安装此插件,可以点击下面的按钮下载。

更新


经过几天的等待,wordpress通过了我的申请,下载插件请到其官方网站吧

下载插件

author

Jesse Lau

网名遁去的一,简称遁一。2012年定居新西兰至今,自由职业者。
本文采用知识共享署名 4.0 国际许可协议进行许可。简而言之,可随意转发转载,转载请注明出处。


留点评论吧:

本网站使用cookie技术以提高用户体验度。 了解我们的隐私政策 我已了解