先来看看最终效果是什么样的： 演示(Demo)

一个导航菜单，最重要的是可访问性，其他的效果都是为了锦上添花的，所以首先我们要做一个纯 CSS 的纵向导航菜单，这样即使用户关闭了 JavaScript 也能无障碍的访问。

第一步： 一个语义化的 HTML 结构

<h2>Flag Navigation</h2>
<ul id="nav" class="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a>
        <ul>
            <li><a href="#">2.1 CSS 2</a></li>
            <li><a href="#">2.2 CSS 3</a></li>
        </ul>
    </li>
    <li><a href="#">3 JavaScript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

一般来说，我们都使用一个嵌套的无序列表来表示一个多级导航菜单。

第二步： 给这段 HTML 加上一些样式

body {font: 15px "Arial"}
h2 {font: 18px "Arial"; font-weight: bold; }
.nav, .nav ul{
    width:140px; /* 定义每级菜单的宽度 */
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative; /* 采用相对定位，为子菜单的绝对定位提供基准元素 */
    line-height:30px;  /* 定义每条菜单的行高 */
}
.nav a:link, .nav a:visited{ /* 定义链接的基本样式 */
    display:block;
    width:130px; /* 这里的宽度和下面的 padding 加起来是 140px */
    padding:0px 5px;
    color:#fff;
    text-decoration:none;
    background:url(bg.png) no-repeat -261px 0px; /* 背景图片定位，采用 CSS Sprites 技术 */
}
.nav a:hover,a:active{ /* 定义链接的悬停和点击时的样式 */
    background-position:-79px 0px;  /* 修改背景图片定位 */
    color:#333;
}
.nav li{  /* 每条菜单的定位方式为相对定位 */
    position:relative;
}
.nav ul {  /* 子菜单的样式 */
    position:absolute; /* 采用绝对定位 */
    top:0px; /* 子菜单和上一级菜单上部平齐 */
    left:140px; /* 子菜单显示在上一级菜单右侧 */
    display:none; /* 子菜单不显示 */
}
.nav li:hover>ul{
    display:block; /* 当 list 悬停时，显示它的下一级子菜单 */
}

在 “ul” 的样式中使用 line-height 是为了让菜单文字能纵向居中，同时这个值在我们后面的 jQuery flagNav 插件中有使用到。
这样我们就得到了一个纯 CSS 的纵向多级导航菜单，具体效果可以看看 Demo 页面的第一个菜单。
*这个菜单的效果在 IE6 及其之前的浏览器中是表现不出来的，因为 IE6 不支持 “a” 元素之外的其他元素的 hover 伪类，这个可以通过一些复杂的 CSS Hack 来进行兼容，不过我这里就不管它了，感兴趣的同学可以自行 Google 之。

第三步： 用 jQuery 来添加我们的旗帜动画效果

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="jquery.flagNav.min.js"></script>

我们将 jQuery 库和 jQuery Easing 插件载入，并载入自己的 jQuery flagNav 插件。

<script type="text/javascript">
    $(document).ready(function(){
        $("#nav1").flagNav({bgposout:"-261px 0px", bgposover:"-79px 0px"});
        $("#nav2").flagNav({bgposout:"-261px 0px", bgposover:"-79px 0px", rollback:true});
    });
</script>

再在页面载入后对我们的菜单进行初始化，其中 flagNav 函数的参数中 bgposout 和 bgposover 的值分别和前面 CSS 中 “a:link” 和 “a:hover” 的 background-position 值相对应，rollback 参数则表示在菜单消失时是否使用动画效果，默认值是不使用。

这样我们就完成了一个带旗帜动画效果的纵向多级导航菜单，是不是挺简单的？

这个菜单在所有我使用的浏览器上都测试通过了，如果你有任何问题或建议，欢迎给我留言。

*演示(Demo)
*下载(Download)

这个效果是基于 jQuery 编写的，也用到了 GSGD 的 Easing Plugin (如果选择使用 jQuery 自带的 “linear” 或者 “swing” 效果的话则不需要包含此插件)。

首先需要一个适当的 html 结构：

<h2>Circle Tag Cloud</h2>
<div id="tag_cloud">
    <a id="tag1" href="#1" style="font-size: 20pt; color:blueviolet">UED</a>
    <a id="tag2" href="#2" style="font-size: 10pt; color:maroon">JavaScript</a>
    <a id="tag3" href="#3" style="font-size: 15pt; color:dodgerblue">Jquery</a>
    <a id="tag4" href="#4" style="font-size: 8pt; color:violet">paopao</a>
    <a id="tag5" href="#5" style="font-size: 12pt; color:lightseagreen">demo</a>
</div>

然后给这段 html 加上一些必须的样式：

h2 {font: 13pt/15pt "Arial"; font-weight: bold; }
#tag_cloud{position:relative;width:300px;height:300px;background-color:#eee;overflow:hidden;}
#tag_cloud a{position:absolute;text-decoration:none;white-space:nowrap;}
#tag_cloud a:hover{border:1px solid #000}

当然还要载入一些必需的 js 文件：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.circletag.min.js"></script>

最后，在页面里加入如下的初始化 js 代码就 ok 了：

<script type="text/javascript">
    $(document).ready(function(){
        $("#tag_cloud").circleTag({ speed: 300 });
    });
</script>

下载地址在此

需求：
* jQuery 1.3 or higher
* jQuery Easing Plugin 1.3

大赛主旨：阿里妈妈（www.alimama.com）是国内一个崭新的广告自助交易平台，自发布以来，已经在业内引起极大的反响，发展速度超快。在阿里妈妈平台上，网站可以对自己的广告位自由定价，广告主可以根据自己的意愿自由选择广告投放网站，网络广告交易做到全自动化和公开化。
通过此次大赛，我们希望您能够按照自己对于阿里妈妈平台的理解，设计基于 WordPress 的阿里妈妈插件，WordPress 用户启用该插件后，可以在 WordPress 中更加方便的并发布和管理广告位，甚至注册会员。
此次大赛中，我们会提供标准的阿里妈妈API接口，您可以根据API接口编写 WordPress 插件，体裁不限。

活动时间：2007年11月05日至2007年12月25日
活动主办：WordPress 中文论坛
活动协办：WordPress 中文团队
赞助商：阿里妈妈

参与方式：
比赛截止日期前将参赛作品通过发帖形式上传至 WordPress 中文论坛专门板块。
您也可以通过在您的博客上宣传来参与此次活动。对您的支持，我们表示诚挚的谢意！

参赛作品要求：

1. 要求插件和阿里妈妈相关，使得能够在 WordPress 中更加方便的并发布和管理阿里妈妈广告位。
   
2. 要求作品至少兼容 WordPress 2.3 版本。
3. 要求原创作品，不接受对其他插件的简单修改版本，包括对其进行汉化、更改代码等处理后重新发布的版本。
4. 要求在插件大赛开幕之前未发布产品。
5. 参赛作品必须遵循 GNU General Public License 版权规则或其的兼容版本。
6. 不能包含插件无关的内容与链接。

奖项设置：
一等奖 1 名: iPhone 4G 版一个
二等奖 2 名: iPod 8G 2007年新版一个
三等奖 4 名: iPod Shuffle 二代一个

注意事项：

1. 每位参赛者可以上传多个作品，但是只能获得一个其能获得的最高奖项。解释：如果参赛者A发布了A1和A2作品，参赛者B发布了B1作品，参赛者C发布了C1作品，假设A1得到最高分100分，A2得到99分，B1得到98，C1得到97分，那么参赛者A只会因为A1获得第一名的奖项，作品A2的获奖资格自动被取消，B1将得到第二名，C1将得到第三名。
2. 每个作品都要求打包成压缩文件。压缩包中包含对插件的介绍。

评选办法：
由 WordPress 中文论坛和阿里妈妈共同评定。

时间安排：

1. 准备期：在大赛宣布开始之日起（2007年11月05号），选手阅读说明，制作作品，然后将参赛作品发布到 WordPress 中文论坛专门板块，并注明作品名称和简单介绍。
2. 提交作品截止日期为北京时间2007年12月15号24点整。
3. 整理作品和评比： 2007年12月16号至2007年12月24号
4. 结果揭晓：2007年12月25号，阿里妈妈公布获奖名单，颁发奖品。
5. 大赛落幕。

其它：

1. 比赛介绍与规则以 WordPress 中文论坛的比赛帖子(地址: http://wordpress.org.cn/forums/thread-6560-1-1.html)为准
2. 我们有权利在不通知的情况下根据情况对规则进行一些微调。
3. WordPress 中文论坛和阿里妈妈保留比赛的最终解释权。

相关API文档请去 WordPress 中文论坛 下载

各位想参加的朋友抓紧时间哦~
P.S. 我也准备参加这个比赛，希望能拿奖吧 ^_^

现在本地测试了一下，没什么问题，顺便修改了一下默认的显示设置。但是传到本站却显示不了任何条目。在站点里找到一个error_log文件，里面有如下警告：

PHP Warning: file_get_contents() [<a href='function.file-get-contents'>function.file-get-contents</a>]: URL file-access is disabled in the server configuration in /.../wp-content/plugins/googlereader.php on line 56

原来我的服务器的php.ini里的设置导致 file_get_contents 函数不能以 URL 作为参数，但是我又无法更改这个设置。好在 WordPress 给我们提供了一个 Snoopy 类来完成这件事，我在 Fanfou Daily 这个插件里也用到了这个类。修改 googlereader.php 的第56行从

$stories = file_get_contents($uri);

修改为

require_once ABSPATH.WPINC.'/class-snoopy.php';
$client = new Snoopy();
$headers = "";
if ( is_array($headers) ) $client->rawheaders = $headers;
@$client->fetch($uri);
if ( !($client->status >= 200 && $client->status < 300) ) return false;
$stories = $client->results;

这样就可以正常使用了，具体效果见本站侧边栏 ^_^

另外在这个插件页面的留言里有一个使用cURL的解决方案

Fanfou-Daily

下载 v0.2

Fanfou-Daily v0.2

更新

1. 修改插入分类的方式，使得插件同时支持WordPress 2.3及WordPress 2.1；
2. 修复v0.1的一个重复发表日志的bug；
3. 添加对语言包的支持，并制作了简体中文语言包；
4. 解决了0.1版发布时最后的问题，现在本插件的所有文件可以放在一个子文件夹下；
5. 在WordPress 2.3版本上使用本插件会有支持tags的选项，可以给发表的日志加上tags，在WordPress 2.1版本上使用则无此选项；

安装*

解压后得到Fanfou-Daily这个文件夹，上传到/wp-content/plugins/，上传后的路径应该是/wp-content/plugins/Fanfou-Daily，然后在Plugins菜单里激活即可。

功能介绍、使用方法及注意事项在这里

在使用中有什么问题可以给我留言或者发信给我。

PS:  Denis 今天早上喜得千金，恭喜他当爸爸了，普国同庆啊 ^_^

也祝他的女儿永远健健康康，快快乐乐！

我的解决办法是把popularity-contest.php里面所有的mysql_xxx类函数都用功能相同的WodrPress提供的wpdb类中的函数来替代。以下是修改好的Popularity Contest插件:

与Google Sitemaps Generator 3.0兼容的Popularity Contest插件

这个问题在Google Sitemaps Generator 2.7.1版本里不会出现，因为2.7.1版本里没有使用mysql_xxx类函数，不知道为什么3.0版本里会使用，而不是使用wpdb类。我个人是认为在插件涉及到WordPress的数据库时最好使用wpdb类，这样一来比较安全，二来也减少了因为WordPress升级而可能带来的不兼容性。

当然，有什么问题还是可以给我留言或者发信给我^_^

但是它的老版本在最新发布的WordPress 2.3里会产生错误，作者的blog里也指出了这个情况，由于作者有较多的插件需要更新，所以不能马上解决这个问题。刚好有人留言说想在WordPress 2.3下使用这个插件，我就尝试着修改了一下。老版本的错误主要出现在它使用了post2cat和categories这两个已经在2.3中无效的数据表，我修改了一下它的sql语句，使它能在2.3下正常工作。

下载地址：popularity-contest for WordPress 2.3
更新：下载地址已经更新至兼容Google Sitemap Generator 3.0的版本

注意，该版本仅在WordPress 2.3下能正常工作。由于我并没有使用这个插件的所有功能，所以如果在使用中发现其他的问题，请给我留言或发信给我。

目前该插件的版本是2.1.3，可以在最新发布的WordPress 2.3版本下工作。

我根据2.1.3版的po文件翻译了简体中文的语言包，以下是下载地址：

WordPress Database Backup插件简体中文语言包

这是加入 WordPress 中文团队以来的第一个作品，希望大家喜欢^_^

如果有什么问题可以留言或者发信与我联系。

更新记录：

@2007-11-19 更新至 2.1.5 版

WordPress 2.3 Related Tags

下载 v0.1

WordPress 2.3 Related Tags

介绍

主要是对整个blog的tag做了一个统计，列出了两个tag之间的相关性。我是以两个tag同时出现的次数比上其中一个tag出现的次数来衡量相关性的。比如”tag1 tag2 100%”就说明所有出现了tag1的文章里也都出现了tag2，这样就要考虑是不是可以把tag1并入到tag2里面，以减少无意义的tag。

安装

解压后得到wp32_related_tags.php，上传到/wp-content/plugins/，然后在Plugins菜单里激活即可。

使用

在 Plugins->Related tags页面可以看到统计的相关性结果。

开始我是准备利用饭否的API，从他的RSS来获取消息的。不过等到我写完抓取消息的那段程序才发现，饭否RSS的item数最大是40，它API的那个count参数只能小于40，而且RSS有不少延迟，这样对于那些每天发言超过40条的“话痨”来说就不够了。只能改用抓取网页然后分析的办法了 ，这样的一个弊端就是一旦饭否改变网页输出的格式我就得改我的插件了，不过饭否的网页内容与样式分离做得挺好的，估计内容不太会有改变。

Fanfou-Daily

下载 v0.2

Fanfou-Daily v0.2

介绍

1.  可以把你每天在饭否上发的消息作为一篇日志定时post到你的WordPress平台的blog上；
2. 可以自定义日志的标题；
3. 可以自定义post的时间；
4. 可以自定义日志的分类；
5. 可以自定义是否过滤”@”开头的消息。

安装

解压后得到Fanfou-Daily.php和一个Fanfou-Daily文件夹，上传到/wp-content/plugins/，上传后的路径应该是/wp-content/plugins/Fanfou-Daily.php和/wp-content/plugins/Fanfou-Daily，然后在Plugins菜单里激活即可。

使用

在 Plugins->Fanfou-Daily option页面可以设置你的饭否id、post的时间、日志的分类、是否过滤”@”消息以及日志的标题，然后点击update即可

注意事项

1.  饭否id并非你在发言时候的nickname，而是你在饭否的“我的空间”的URL地址中最后那串字符；
2. 由于使用的是WordPress的wp-cron功能，这个并非真正的类似linux下cron的精确定时任务，所以每天的post日志的任务会在你设定的post时间后第一次浏览你的blog时发生，想要了解更多请自行google wp-cron；
3. Fanfou-Daily插件抓取的每日消息是以你设定的post时间作为分隔的，例如你设定的是23点，则会抓取昨天23点到今天23点之间你在饭否发的消息；
4. 目前日志的分类只支持一个，虽然WordPress支持多分类，不过我嫌麻烦就没有写了。

PS:有一个问题我一直没有解决，我本来是想把Fanfou-Daily.php放到Fanfou-Daily这个文件夹下面的，但是如果那样在保存Fanfou-Daily option页面设置的时候就会出错，不得以我只好把它拿到文件夹外面来了，不知道有没有人能帮我解决这个问题？