假设您已经阅读过上文，对于此问题背景的来龙去脉有所了解。此文将正式列出问题的解决方法。很简单。在此之前，继续啰嗦下。其实我很早就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定义部分：

   1: <style type="text/css">
   2: #akismetwrap #aka,#aka:link,#aka:hover,#aka:visited,#aka:active{color:#fff;text-decoration:none}
   3: #aka:hover{border:none;text-decoration:none}
   4: #aka:hover #akismet1{display:none}
   5: #aka:hover #akismet2,#akismet1{display:block}
   6: #akismet2{display:none;padding-top:2px}
   7: #akismeta{font-size:16px;font-weight:bold;line-height:18px;text-decoration:none}
   8: #akismetcount{display:block;font:15px Verdana,Arial,Sans-Serif;font-weight:bold;text-decoration:none}
   9: #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}
  10: </style>

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

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

源代码：

   1: <div id="akismetwrap">
   2:     <div id="akismetstats">
   3:         <a id="aka" href="http://akismet.com" title="">
   4:             <div id="akismet1">
   5:                 <span id="akismetcount">
   6:                 <?php echo $count; ?>
   7:                 </span> 
   8:                 <span id="akismetsc">
   9:                 <?php _e('spam comments') ?>
  10:                 </span>
  11:             </div>
  12:          <div id="akismet2">
  13:              <span id="akismetbb">
  14:              <?php _e('blocked by') ?>
  15:              </span><br />
  16:              <span id="akismeta">Akismet</span>
  17:          </div>
  18:          </a>
  19:      </div>
  20:  </div>

修改后： 

   1: <div id="akismetwrap">
   2:     <div id="akismetstats">
   3:         <div id="aka">
   4:             <div id="akismet1">
   5:                 <span id="akismetcount">
   6:                 <?php echo $count; ?>
   7:                 </span>
   8:                 <span id="akismetsc">
   9:                 <?php _e('spam comments') ?>
  10:                 </span>
  11:             </div>
  12:             <div id="akismet2">
  13:             <span id="akismetbb">
  14:             <?php _e('blocked by') ?>
  15:             </span>
  16:             <br />
  17:             <span id="akismeta">Akismet</span>
  18:             </div>
  19:         </div>
  20:     </div>
  21: </div>

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

修改后的akismet_counter()函数：

   1: function akismet_counter() {
   2: $count = number_format(get_option('akismet_spam_count'));
   3: ?>
   4: <div id="akismetwrap">
   5:     <div id="akismetstats">
   6:         <div id="aka">
   7:             <div id="akismet1">
   8:                 <span id="akismetcount">
   9:                 <?php echo $count; ?>
  10:                 </span>
  11:                 <span id="akismetsc">
  12:                 <?php _e('spam comments') ?>
  13:                 </span>
  14:             </div>
  15:             <div id="akismet2">
  16:             <span id="akismetbb">
  17:             <?php _e('blocked by') ?>
  18:             </span>
  19:             <br />
  20:             <span id="akismeta">Akismet</span>
  21:             </div>
  22:         </div>
  23:     </div>
  24: </div>
  25: <?php
  26: }

修改后的代码产生的效果是和源代码一模一样的。却可以正常通过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活用等着您去挖掘。

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

Feed Me


转载文章请注明转载自：ThinkAgain - Let's Blog!

引用地址：http://www.thinkagain.cn/archives/987.html