羽航的小屋

发布一个WordPress插件——日志保护（advanced authority)

星期四, 四月 7th, 2011

在上一稿日志中，我写了一点点WordPress插件开发的笔记，并且说想开发一个日志保护的插件。

经过两天的奋斗，一个简单的插件总算成型了~~哇哈哈~~

功能很弱弱，开启后在日志编辑页面会增加一个“日志保护”模块，里面可以设置该日志查看时需要回答的问题和答案。答案可以用“|”隔开，只要用户答对任意一个答案都可以。

同时，在“设置”主菜单下会有一个“日志保护”子菜单，进入设置页面后可以设置全局口令，这些口令可以用于回答所有问题的答案~~

功能很弱吧，不过有时还是有用的，比如写个日志，设个“我爱的美眉是谁？”，然后拿去忽悠美眉~~嘿嘿，不YY了~~

插件请到该项目的Git上下载，地址是https://github.com/YuhangGe/—–advanced-authority-

如果对这个项目有兴趣，有进一步的建议和想法，可以跟我联系：abraham1@163.com 或者 abeyuhang@gmail.com.也欢迎fork这个项目进行开发~~

Posted in WordPress | No Comments »

WordPress插件开发笔记（一）

星期二, 四月 5th, 2011

那天突然想写一个插件，用来保护文档。发布日志时可以设置密码，也可以设置需要回答的问题。WordPress本身有这个功能，但觉得不够灵活，比如不能设置多个一个问题的多个答案，不能设置全局通用密码（这个密码可用于回答所有问题）。

于是就想写一个插件。便花了一下午，着手研究了WordPress的插件开发。

总的来说还是很简单，WordPress良好的可扩展性架构，通过Actions、Filters等可以进行强大的扩展。

主要的核心文档是http://codex.wordpress.org/Writing_a_Plugin ,首先讲述了WordPress的插件原理，插件需要的基本信息（名称、作者、描述）。需要注意的是这些信息是必须的，否则WordPress不能识别插件。（这一点我也觉得神奇，这些信息是放文件头部的注释中的，WordPress估计是进行了自己的解析吧。）

然后讲述了插件的数据存储原理。以及在管理页面增加自定义菜单，以及菜单对应的插件自定义配置页面。

直接把我写的代码贴上来吧，方便快速理解和入门。
首先是插件主文件advanced-authority.php:

<?php
/**
 * @package Advanced Authority
 * @version 1.0
 */
/*
Plugin Name: 日志保护
Plugin URI: http://wordpress.org/extend/plugins/advance-authority/
Description: 高级日志权限管理，可以设置日志查看密码，查看回答问题等。
Author: Abraham
Version: 1.0
Author URI: http://www.yuhanghome.net
*/

//通过增加admin_menu这个action，在管理页面添加菜单
add_action('admin_menu', 'my_plugin_menu');

define("OPT_PRE","adv-auth-");

function my_plugin_menu() {
	if (!current_user_can('manage_options'))
    {
      wp_die( __('You do not have sufficient permissions to access this page.') );
    }

        //在“设置”主菜单下添加“日志保护”子菜单
	add_options_page('日志保护设置', '日志保护', 'manage_options', 'adv-auth-unique-identifier', 'adv_auth_options');

        //也可以在“插件”主菜单下增加子菜单，详情查看http://codex.wordpress.org/Adding_Administration_Menus
	//add_submenu_page("plugins.php","My Plugin Options","Abraham","manage_options",'submenu-unique-id','my_plugin_options');
}

function adv_auth_options() {
	if (!current_user_can('manage_options'))  {
		wp_die( __('You do not have sufficient permissions to access this page.') );
	}
        //具体的渲染页面
	include_once dirname( __FILE__ ) . "/adv-auth-options.php";

}
?>

以下是插件配置页面adv-auth-options.php：

<div class="wrap">
	<h2>这是个一测试页面</h2>
<?php
	$opt_name=OPT_PRE."key";
	$opt_val=get_option($opt_name);
	if(isset($_POST[$opt_name])){
		$opt_val=$_POST[$opt_name];
		if(empty($opt_val)){
			echo "<div style='color:red;'>不能为空</div>";
		}else{
			update_option($opt_name,$opt_val);
			echo "<div style='color:green;'>设置更新成功</div>";
		}
	}
?>

	<p>测试Wordpress插件开发的options保存和读取</p>
	<div>
		<form action="" method="post">
			<div>
				<label>Key:</label>
				<input autocomplete="off" type="text" name="<?php echo $opt_name;?>" value="<?php echo $opt_val;?>"/>
			</div>
			<div>
				<input type="submit" name="submit" value="提交"/>
			</div>
		</form>
	</div>
</div>

最后有个问题，插件配置页面只能配置全局的信息，如果对于某个日志的配置，如这个例子中对某篇日志设置密码，需要在日志编辑的页面增加模块。也就是说要修改post-new这张页面的内容，在里面增加自定义的模块。

这个在文档里没有明确写出，在API 中没有把所有actions列出，而在一个第三方网站http://adambrown.info/p/wp_hooks/hook中列出了全部的，但却没有详细介绍。（最神奇的是这个网站说所有信息自动从wordpress网站获取的，我就不知道wordpress把所有api的信息放在了哪里）。

在经历了各种搜索，各种查看api后，无赖只能回到原点，试图从WordPress的源代码中找寻灵感。还好功夫没有白费，无意中在edit-form-advanced.php中看到add_meta_box函数，果断的去API查，我勒个去，就是我要的。。。

http://codex.wordpress.org/Function_Reference/add_meta_box

最神奇的是，这个函数的介绍里给了个例子，完全就是相当详细的文档~~郁闷的就是WordPress就不能在插件开发的主文档里这个如此重要的函数给介绍一下，给个链接也行啊！！！！

代码不就给了，其实我也还没开始写呢~~~

Posted in WordPress | 1 Comment »

WordPress第一次改造——用户评论Ajax体验

星期四, 四月 29th, 2010

今天突然觉得WP用户评论的功能不好，不够人性化。于是估摸着Google了一下，果然找到了一篇博文，讲怎样通过隐藏已发表过评论的用户信息框来提高用户体验的。看了这后，发现他讲的是简单的用style.display=’none’的方法来隐藏信息框，但实际上是用了很好的Ajax动画特效的。因为之前自己曾写过一个封装常见动画的Javascript类库，对实现方法非常了解，于是花了点时间，把自己的博客的评论也改成了有丰富用户体验的。可以先试试效果。到底部评论，评论后你可以发现原来的信息框隐藏了，点击Change，信息框会动画展开，效果很不错~~
改造说明和过程在http://www.neoease.com/wordpress-guest-post>已经有详细介绍，建议先看看这篇博文。
这篇博文说到了他的方法有个小缺陷: ”这是因为靠 JavaScript 将一些控件隐藏起来而引起. 也就是说, 控件必须在那段简短的 JavaScript 加载完成之后才能被隐藏起来, 而控件的定义却是在那段 JavaScript 之前. 如果你的文章够短, 眼睛够快, 或许你会看到资料输入框转眼即逝的一幕.“ 其实要改进这个非常简单的。
现在说说我的改造过程吧~~
我用的是Arjuna X 主题，如果你用的不是这个，可能相应的地方要到对应主题的文件夹下改相应的文件。
首先要改动的是ArjunaX 主题下的comments.php，位于wp-content/themes/arjuna-x/comments.php下，找到这样几行：

[php]
<div class="replyRow">
<input type="text" class="inputText<?php if(empty($comment_author)): ?> inputIA<?php endif; ?>" id="replyName" name="author" value="<?php if(!empty($comment_author)) { echo $comment_author; } else { _e(‘Your name’, ‘Arjuna’); } ?>" />
</div>
<div class="replyRow">
<input type="text" class="inputText<?php if(empty($comment_author_email)): ?> inputIA<?php endif; ?>" id="replyEmail" name="email" value="<?php if(!empty($comment_author)) { echo comment_author_email; } else { _e(‘Your email’, ‘Arjuna’); } ?>" />
</div>
<div class="replyRow">
<input type="text" class="inputText<?php if(empty($comment_author_url)): ?> inputIA<?php endif; ?>" id="replyURL" name="url" value="<?php if(!empty($comment_author_url)) { echo $comment_author_url; } else { _e(‘Your website’, ‘Arjuna’); } ?>" />
</div>
[/php]

替换成以下代码（代码后会有相关解释）：

[php collapse="true"]
<?php if(!empty($comment_author)):?>
<div style=’margin-bottom:3px;’>Welcom back <span style=’font-weight:bolder;’><?php echo $comment_author;?>.</span>
<span id=’SHAuthor’><a id=’change_info’ href=’javascript:showHideInfo();’>Change »</a></span></div>
<script type="text/javascript">
author_info_show=false;
function showHideInfo(){
if(author_info_show===true){
new AbeAnimate(document.getElementById(‘author_info’)).slideUp(5,2);//.style.display=’none’;
author_info_show=false;
document.getElementById(‘change_info’).innerHTML=’Change »’;

}else{
new AbeAnimate(document.getElementById(‘author_info’)).slideDown(5,2);
//document.getElementById(‘author_info’).style.display=’block’;
author_info_show=true;
document.getElementById(‘change_info’).innerHTML=’Close »’;
}
}
/**
* @author Abraham
* 动画相关的JS类库，由Abe编写
* Email:abraham1@163.com
* qq:380850433
*/
/**
* Helper Function
*/
if (typeof window.createDelegate === ‘undefined’) {
window.createDelegate = function(instance, method){
return function(){
method.apply(instance, arguments);
}
}
}

function AbeAnimate(element1, element2, element3){
this._elems = new Array();
this._size = 0;
for (var i = 0; i < arguments.length; i++)
this._elems.push(arguments[i]);
if (this._checkArgs() === false)
throw ‘bad argument’;

this._ele = this._elems[0];
this._aniID;
this._slideHeight = null;
this._funcBack = null;
this._aniStep = 1;
this._curHeight;
}
AbeAnimate.prototype = {
/**
* public functions
*/
/***
*
* @param {Number} speed
* @param {Number} step
* @param {Function} callBack
*/
slideDown: function(speed, step, callBack){
var spd = ((speed == null || typeof speed != ‘number’ || speed < 1) ? 50 : speed);
this._aniStep = ((step == null || typeof step != ‘number’ || step < 1) ? 1 : step);
this._slideHeight = this._ele.getAttribute(‘this._slideHeight’);
if (this._slideHeight == null) {
this._slideHeight = this._ele.offsetHeight;
if (this._slideHeight < 10)
this._slideHeight = 25;
this._ele.setAttribute(‘this._slideHeight’, this._slideHeight);
}
this._ele.style.height = "0px";
this._ele.style.display = "block";
this._curHeight = 0;
this._funcBack = callBack;
this._aniID = setInterval(createDelegate(this, this._doSlideDown), spd);
},

/**
*
* @param {Number} speed
* @param {Number} step
* @param {Function} callBack
*/
slideUp: function(speed, step, callBack){
var spd = ((speed == null || typeof speed != ‘number’ || speed < 1) ? 50 : speed);
this._aniStep = ((step == null || typeof step != ‘number’ || step < 1) ? 1 : step);
this._slideHeight = this._ele.getAttribute(‘slideHeight’);
if (this._slideHeight == null) {
this._slideHeight = this._ele.offsetHeight;
this._ele.setAttribute(‘slideHeight’, this._slideHeight);
}
this._ele.style.height = this._slideHeight + "px";
this._ele.style.display = "block";
this._curHeight = this._slideHeight;
this._funcBack = callBack;
this._aniID = setInterval(createDelegate(this, this._doSlideUp), spd);
},
_checkArgs: function(){
this._size = this._elems.length;
if (this._size < 1)
return false;
for (var i = 0; i < this._size; i++)
if (typeof this._elems[i] === ‘undefined’ || this._elems[i] === null)
return false;
return true;
},
_doSlideUp: function(){
this._curHeight -= this._aniStep;
if (this._curHeight <= 0) {
this._ele.style.height = "0px"
this._ele.style.display = ‘none’;
this._aniID = clearInterval(this._aniID);
if (this._funcBack != null && typeof this._funcBack != ‘undefined’)
this._funcBack();
}
else {
this._ele.style.height = this._curHeight + "px";
}
},
/**
* @private
*/
_doSlideDown: function(){
this._curHeight += this._aniStep;
if (this._curHeight >= this._slideHeight) {
this._ele.style.height = this._slideHeight + "px"
this._aniID = clearInterval(this._aniID);
if (this._funcBack !== null && typeof this._funcBack !== ‘undefined’)
this._funcBack();
}
else {
this._ele.style.height = this._curHeight + "px";
}
}
}
</script>
<?php endif;?>
<div id=’author_info’ slideHeight=’80′ style=’display:<?php
if(empty($comment_author))
echo ‘block’;
else
echo ‘none’;
?>’>
<div class="replyRow"><input type="text"
class="inputText<?php if(empty($comment_author)): ?> inputIA<?php endif; ?>"
id="replyName" name="author"
value="<?php if(!empty($comment_author)) { echo $comment_author; } else { _e(‘Your name’, ‘Arjuna’); } ?>" />
Name(required)</div>
<div class="replyRow"><input type="text"
class="inputText<?php if(empty($comment_author_email)): ?> inputIA<?php endif; ?>"
id="replyEmail" name="email"
value="<?php if(!empty($comment_author)) { echo $comment_author_email; } else { _e(‘Your email’, ‘Arjuna’); } ?>" />
E-Mail (will not be published) (required)</div>
<div class="replyRow"><input type="text"
class="inputText<?php if(empty($comment_author_url)): ?> inputIA<?php endif; ?>"
id="replyURL" name="url"
value="<?php if(!empty($comment_author_url)) { echo $comment_author_url; } else { _e(‘Your website’, ‘Arjuna’); } ?>" />
Website or Blog</div>
</div>
[/php]

可以看到，通过用一个id为author_info的div将信息输入框包裹，进而实现对信息框的整体控制。最关键的一行代码是:

[php]<div id=’author_info’ slideHeight=’80′ style=’display:<?php
if(empty($comment_author))
echo ‘block’;
else
echo ‘none’;
?>’>
[/php]

通过在php端判断，从而用display控制信息框的显示，解决了开首提到的博文中说的小缺陷。slideHeight属性是用来控制下拉高度的，表明需要下拉80px。而script中的大量代码，正是用来实现动画效果的。AbeAnimate类是我之前写的一个JS动画类库，这个是简化版本，只有SlideDown和SlideUp动画。你可能不需要知道具体的实现，只要知道

[js]new AbeAnimate(document.getElementById(‘author_info’)).slideUp(5,2)[/js]

和

[js]new AbeAnimate(document.getElementById(‘author_info’)).slideDown(5,2)[/js]

分别实现了信息框的下拉和收起。
差不多就这些了，如果你觉得困惑，或与可以先看看篇首提到的那篇博文，很多他讲了的我就没再重复了，我主要讲的是我的改进。
给个下载连接吧：
改进后Arjuna X 的comments.php文件:http://download.yuhanghome.net/comments.zip

Posted in WordPress | 3 Comments »