Quantcast
Channel: Think Again » CSS
Viewing all articles
Browse latest Browse all 5

继续修改模板

0
0

继将CSS修改符合W3C规范后,今天花了点时间,也将模板代码修改完毕,通过W3C XHTML 1.0 Transitional验证。若不是好友风暴轻狂的提醒,我自己以前还从未注意过这些验证问题。不过狂兄最近似乎比较忙,很久没看到他的狂言了。

一直对自己现有的模板不太满意,无论是布局还是配色。且因为编写该模板时,自己刚接触Wordpress,不说php,当时连对html和css等基本不懂,几乎是边写模板,边查资料这样编过来的,所以很多地方都不符合规范。用W3C的在线XHTML检查,会查出多达几百个错误。本想花点时间重新写一个模板,计划回归2栏布局,昨天和Oxygen聊天,他告诉我,这是“审美疲劳”现象。回过头,想想也是,当初”首个3 columns WordPress模板制作完毕!“时,也曾是无比兴奋。

今天是周六,研究室人比较少,难得清静。于是就挂上耳麦,边听”辛晓琪的爱的回答”,开始修改现有模板代码。一动手,马上就发现不少问题,禁不住开始要骂TMD了。看来不仅仅是我的代码,很多插件生成的代码等通不过W3C验证,随便列举几个:

插件生成的代码无法通过验证:

Akismet提供的Spam数查看代码;

WS Download Manager生成的下载框代码;

Pagenavi提供的下拉页面显示框代码;

 

WordPress提供的下拉存档显示框代码无法通过验证,wp_get_archives函数,WP官方提供的dropdown Box代码:

<select name=“archive-dropdown” onChange

=‘document.location.href=this.options

[this.selectedIndex].value;’>

<option value=“”>

<?php echo attribute_escape(__(‘Select Month‘)); ?>

</option>

<?php wp_get_archives(‘type=monthly&format=option&show_post_count=1

‘); ?> </select>

其中onChange是大写,但Xhtml中所有元素必须是以小写形式出现,所以务必将onChange改为onchange

 

 

Windows Live Writer编写的代码无法通过验证:

WLW自带的表格编制功能编制的表格中,会自动生成unSelectable=”on”,务必将该代码删掉。

WLW的图片编辑功能,有的会自动生成atomicselection=”true”,必须删除该代码。

WLW插入图片,均为<img src=”**”>,此种写法,虽可以正常显示图片,但规范的写法是<img src=”**”/>,即每个img必须要有闭合符号/。

 

还有,Google Adsense Search代码无法通过验证,只好暂替换为WP自带的站内搜索了。Youtube提供的视频内嵌html代码也无法通过验证。这个不完全是Youtube的问题,因为Youtube的flv视频属于flash,而Xhtml对flash的支持较差。除了以上的一些问题外,其实只要在编制模板的时候,小心注意下,都能通过W3C的验证。总结了些,希望能够有所帮助,如:

1.页首,一般在header.php内,一定要有文档类型声明,如下面代码将文档声明为XHTML 1.0 Transitional。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=http://www.w3.org/1999/xhtml

 <?php language_attributes(); ?>>

<head profile=“http://gmpg.org/xfn/11″>

<meta http-equiv=”Content-Type” content=”

<?php bloginfo(‘html_type’); ?>;

 charset=<?php bloginfo(‘charset’); ?>” />

 

2.代码中的每个元素的前后标签必须都有,且前后标签内必须包含内容,即不能存在空元素。如<ul></ul>是非法的,且<p><p>****</p></p>之类的重复嵌套也是非法。

3.诸如<br><hr>等标签必须包括闭合符/,如<br>是非法,而正确的是<br/>。

4.img元素必须包括alt属性,否则将视为错误。

5.所有元素都应该以小写形式出现。

6.&符号,必须以&amp;形式出现等。

晚上将目前首页内含的8个文章的html代码都修改了,除了含有ws download下载框和youtube视频外,其它的几篇都可以通过W3C验证。拟将几个页面代码修改下,其余文章就算了,任其自然吧。重要的是从现在开始要注意所发文章的代码了,因为习惯用WLW写文章,而WLW竟然存在这么多兼容性问题,所以以后每篇文章发布前都要检查下其html。看来用WLW等编辑软件离线发布文章时,最好要养成检查html代码的习惯。

修改模板的同时,顺手将最新留言的函数Hack了,原来留言只部分留言内容,现在改为显示留言者名字和留言内容。稍微调整了下侧边栏和页脚的显示内容,挂上了W3C XHTML和CSS验证标志,嘿嘿,以及CreativeCommon的版权说明logo。接下来打算安排点时间,将站内搜索改为Google Ajax Search,以及继续修改模板的CSS。今天只修改了菜单栏的字体显示效果,改天要来个大动作,将颜色搭配等修改下。


评论4:

4.2007.09.24.9:31.am山之岚: 狂兄说得对。我也开始糊涂,模板到底该怎么弄了。

3.2007.09.23.8:44.pmyuanzhu: 模板真的不错,尤其是上面的标题画

2.2007.09.23.1:40.pmddkk3000: 模板越简单越不易疲劳,字体越大越方便阅读。边栏越少越好,否则游客不会看,而且不容易集中阅读,影响视觉啊。

1.2007.09.18.12:29.pmShaoqing: 还是别改成两栏了。我采用的是两栏,SIDEBAR太多东西,拉得很长,感觉不是很好。 最新留言栏,改得不错啊,比之前的好。 另外,自带的日历样子实在太看,不会修改,我还是没用它。


推荐阅读

2008.09.09.8:58.pmWordpress Hacks:WP2.2版后中文邮件标题乱码解决方法 (22)

2008.07.27.10:44.amWordpress Hacks:如何关闭WP2.6的主题预览 (19)

2007.12.08.10:50.pm如何使用Wordpress内置的分页(Nextpage)功能? (60)

2007.10.31.12:42.pmWordpress Hacks:升级2.3.1可能出现邮件提醒失效的解决方法 (21)

2007.10.22.11:05.pmWordpress Hacks: 在新窗口中打开评论者链接和no follow属性 (16)

2007.09.11.8:43.pmCSS通过W3C验证 (5)

2007.08.21.8:44.am图文介绍如何在本地服务器安装Movable Type 4.0 (15)

2007.06.11.3:55.pmWordPress解决Flickr图片显示方法 (3)


Copyright © 2015 | Think Again | 原文链接


Viewing all articles
Browse latest Browse all 5

Latest Images

Trending Articles





Latest Images