WordPress Hacks:解决晒SPAM数无法通过W3C验证…续

假设您已经阅读过上文，对于此问题背景的来龙去脉有所了解。此文将正式列出问题的解决方法。很简单。在此之前，继续啰嗦下。其实我很早就hack了akismet的部分代码使之生成的显示spam数的方框能通过W3C验证。一直觉得没有什么意义将如何如何写出来，因为大部分的网友都不会去重视这个问题的。

直到最近在googlefish的网站上看到，她对W3C验证以及akismet等的一些文章，难得一个女孩子(没弄错吧)能讨论这些技术话题，觉得还是将此问题挑出来吧。假设欲解决此问题的网友已经略懂php和html代码，否则头晕脑胀别怪我啊。

先来分析下，用文本编辑器打开akismet.php查看其源代码。Akismet的晒SPAM数方框是由akismet_counter()函数提供的，widget是由widget_akismet_style()函数提供。问题在于，这个函数被调用时，会自动生成css代码。而这是不允许的，因为xhtml规范规定css必须在header内被加载，所以首先要把这部分css移调。然后再适当修改下生成方框的html代码。以akismet_counter()为例，介绍下具体的代码修改。

1. 将akismet_counter()源代码中的css定义手动复制到模板的css中，然后将该部分代码删除。

源代码中的css定义部分：

<style type="text/css">
#akismetwrap #aka,#aka:link,#aka:hover,#aka:visited,#aka:active{color:#fff;text-decoration:none}
#aka:hover{border:none;text-decoration:none}
#aka:hover #akismet1{display:none}
#aka:hover #akismet2,#akismet1{display:block}
#akismet2{display:none;padding-top:2px}
#akismeta{font-size:16px;font-weight:bold;line-height:18px;text-decoration:none}
#akismetcount{display:block;font:15px Verdana,Arial,Sans-Serif;font-weight:bold;text-decoration:none}
#akismetwrap #akismetstats{background:url(<?php echo get_option('siteurl'); ?>/wp-content/plugins/akismet/akismet.gif) no-repeat top left;border:none;color:#fff;font:11px 'Trebuchet MS','Myriad Pro',sans-serif;height:40px;line-height:100%;overflow:hidden;padding:8px 0 0;text-align:center;width:120px}
</style>

注意，必须指定好背景图片的地址。文中background:url(<?php echo get_option(‘siteurl’); ?>/wp-content/plugins/akismet/akismet.gif)这句代码。

2. 修改生成方框的html代码。这里将源代码的方框html代码部分贴出来。

源代码：

<div id="akismetwrap">
    <div id="akismetstats">
        <a id="aka" href="http://akismet.com" title="">
            <div id="akismet1">
                <span id="akismetcount">
                <?php echo $count; ?>
                </span> 
                <span id="akismetsc">
                <?php _e('spam comments') ?>
                </span>
            </div>
         <div id="akismet2">
             <span id="akismetbb">
             <?php _e('blocked by') ?>
             </span><br />
             <span id="akismeta">Akismet</span>
         </div>
         </a>
     </div>
 </div>

修改后：

<div id="akismetwrap">
    <div id="akismetstats">
        <div id="aka">
            <div id="akismet1">
                <span id="akismetcount">
                <?php echo $count; ?>
                </span>
                <span id="akismetsc">
                <?php _e('spam comments') ?>
                </span>
            </div>
            <div id="akismet2">
            <span id="akismetbb">
            <?php _e('blocked by') ?>
            </span>
            <br />
            <span id="akismeta">Akismet</span>
            </div>
        </div>
    </div>
</div>

注意对照下，我用<div>替代了源代码的<a>。

修改后的akismet_counter()函数：

function akismet_counter() {
$count = number_format(get_option('akismet_spam_count'));
?>
<div id="akismetwrap">
    <div id="akismetstats">
        <div id="aka">
            <div id="akismet1">
                <span id="akismetcount">
                <?php echo $count; ?>
                </span>
                <span id="akismetsc">
                <?php _e('spam comments') ?>
                </span>
            </div>
            <div id="akismet2">
            <span id="akismetbb">
            <?php _e('blocked by') ?>
            </span>
            <br />
            <span id="akismeta">Akismet</span>
            </div>
        </div>
    </div>
</div>
<?php
}

修改后的代码产生的效果是和源代码一模一样的。却可以正常通过xhtml和css的w3c验证。akismet是由matt等WP原创人员开发的，除了wordpress外，还提供了其它平台的服务。但不知为什么他们写的插件也竟然不考虑w3c规范问题，因为这个问题其实很容易解决的。直接将该css写到header的hook里面去就可以了。wp的一些内置函数生成的代码也存在无法通过W3C验证的问题。如此文谈到的wp_get_archives函数生成的下拉框问题等。

Akismet的代码修改到此为止。有兴趣的可以自己手动修改看看。

我这里想要总结的却并不是akismet的问题了。从这个例子可以得知，活用css的属性使得网页不用加载js就可以生成很多效果。如上面的akismet的这个仅仅是利用了css的2个属性，hover和display。就可以实现显示内容切换了。单单利用css也可以做出很多非常炫的效果，如下拉或折叠菜单，图片切换等等。更多的css活用等着您去挖掘。

挖得越深，收获的就越多。

评论11:

11.2008.11.29.8:28.am. Jinwen: 最近把自己网站也弄上这个，确实累人，只换得页脚的两个链接 :neutral: