1、对主题进行小的修正,把首页的 container 的背景的三个组成图像全部去掉,改为用 CSS3 的 border-radius 实现四个圆角。把导航栏的当前页面增加了 text-shadow 来实现文字阴影,遗憾的是所有的IE包括刚刚推出的 IE9 都不能支持 text-shadow 属性。没做独立博客之前一直以为各个浏览器之间的差别仅仅存在渲染效果的差别,自己真的开始研究 div+CSS 的时候才觉得那些 Web 设计师面对各种浏览器的兼容性问题的时候一定恨不得全世界只有一种浏览器。以现在页面的圆角背景为例,单单为了让圆角兼容各种浏览器,就要设置3个属性。

#container {
	background-color: #f9f9f9;
	color: #333333;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
}

-webkit-border-radius 给 Chrome, Maxthon3 看,moz-border-radius给 Firefox 看,border-radius 给 IE9 和 W3C 看。目前首页 IE8 将会看不到圆角,IE6 看边栏全部错位,IE5.5?直接脚本错误。

IE6 显示不完整的问题已经修正,原因是 CSS for ie6 中,sidebar 的宽度大于了 div 的宽度。还发现一个问题,WP-codebox 的代码高亮的框在 IE6,IE7 以下显示不完整,某些情况下,垂直滚动条会导致最后一行代码不能显示完整,如果只有一行代码,那么将会悲剧的只能在滚动条之间看到一条小缝。江湖大虾仁的文章给出了一个思路,利用 IE 的判断语句来给代码框的最后补上空行,某种意义上说解决了这个问题。修改 main.php。

$output .= $geshi->parse_code();//在此行之后加入下面代码
$output .="<!--[if lte IE 7]><br/><![endif]-->";//原文中的换行转义符是\n,不工作,换成HTML的换行转义<br/>即可。

另外主题中有两个很小的 PNG 图像的 repeat 来实现分割线效果,正好加载 lazyload 的时候会有一个 1X1 的 grey.gif 图像做 placeholder。在 CSS 中把两个 PNG 的路径替换为 grey.gif。效果一样,还减少了两次 HTTP 请求。

由于首页没有评论区,所以没有加载 wp-comment.js,而且由于我使用 WP-Minify,将所有载入的 JS 合并压缩为一个文件请求,导致有评论的页面和无评论的页面载入的实质是两个 JS,一个 38.1KB,一个 38.4KB,仅仅相差一个 wp-comment.js 的 0.3KB,却造成了将近 40KB 的不必要流量。赶紧设置 WP-Minify,把那个 JS 也写入到无评论的页面,这样整个网站只加载一个 JS 就够了。

2、网页在浏览器中的性能表现。在 Maxthon3 中不停滚动首页的时候,CPU 占用率基本都在 40% 左右,而同样更复杂的页面比如 wange,知更鸟等的首页,不停滚动 CPU 占用率也只停留在不到 30%。百思不得其解,搜索并结合自己的经验,有这么几条解释:

  1. 过多的p标签(或者某类特殊标签)容易导致页面滚动卡;我的博客首页不到 25 个p标签,而我的搜狐博客首页有40多个p标签,仍然是搜狐顺畅,不是这个原因。
  2. 渐变背景图的大小太小,导致显卡与 CPU 渲染负担加重。我将原先背景图的大小由 1X340 改为 10X340,仍然没有效果,也不是这个原因。结合上面 grey.gif 的情况,我把所有用到 grey.gif 的地方都用 border 属性来替代,结论就是…性能差距并不明显!所以还是利用 background 属性和 grey.gif 来实现分割线吧。
  3. 过多的 JS 代码,我首页加载了约 40KB(Gzip 后)的 JS,相比一些别的博客动则 70~80KB 的 JS 相比并不算多,也不是这个原因。
  4. 过多的使用 text-shadow,border-radius,box-shadow 等 CSS 属性会严重降低浏览器性能。
  5. 使用 CSS3 提供的高级选择器、子选择器,也会不同程度的降低性能,根据网上文章的介绍,最多会有 500~600ms 左右的渲染速度差距。

后来在某处看到,某些 jQuery 的代码的选择器选为 body 会对浏览器的性能造成很大影响,我印象里只有加载页面时的半透明遮罩效果的选择器是 body,果断去掉,再次反复滚动页面,CPU 占用率终于稳定到了 26% 左右。

不同的浏览器下 CPU 占用率也不同,Maxthon3 是最多的,在 webkit 引擎上,作为一个 MyIE2 时代的老用户,认为 Maxthon3 还有很长的路要走,重现 Maxthon2 的辉煌并不容易。

3、添加了一个 WordPress 评论表情的功能,表情剽窃于人人网,高度与默认字体大小非常匹配。方法来自于万戈和西门,具体用法不多说。自己对表情的调用和名称改动比较大,而且动了 WordPress 的核心文件和 TinyMCE Advanced 的文件,实现在可视化编辑器中的按钮调用表情。贴出来备忘。

smiley.php

<div id="smilelink">
<a href="javascript:grin(':smile:')"><img src="/wp-includes/images/smilies/icon_smile.gif" title="微笑" alt="微笑" /></a>
<a href="javascript:grin(':cry:')"><img src="/wp-includes/images/smilies/icon_cry.gif" title="哭" alt="哭" /></a>
<a href="javascript:grin(':speechless:')"><img src="/wp-includes/images/smilies/icon_speechless.gif" title="汗" alt="汗" /></a>
<a href="javascript:grin(':oops:')"><img src="/wp-includes/images/smilies/icon_surprised.gif" title="惊" alt="惊" /></a>
<a href="javascript:grin(':orz:')"><img src="/wp-includes/images/smilies/icon_orz.gif" title="囧" alt="囧" /></a>
<a href="javascript:grin(':laugh:')"><img src="/wp-includes/images/smilies/icon_laugh.gif" title="大笑" alt="大笑" /></a>
<a href="javascript:grin(':???:')"><img src="/wp-includes/images/smilies/icon_confused.gif" title="晕" alt="晕" /></a>
<a href="javascript:grin(':appall:')"><img src="/wp-includes/images/smilies/icon_appall.gif" title="尴尬" alt="尴尬" /></a>
<a href="javascript:grin(':love:')"><img src="/wp-includes/images/smilies/icon_love.gif" title="色" alt="色" /></a>
<a href="javascript:grin(':shy:')"><img src="/wp-includes/images/smilies/icon_redface.gif" title="脸红" alt="脸红" /></a>
<a href="javascript:grin(':sigh:')"><img src="/wp-includes/images/smilies/icon_sigh.gif" title="叹气" alt="叹气" /></a>
<a href="javascript:grin(':shutup:')"><img src="/wp-includes/images/smilies/icon_shutup.gif" title="闭嘴" alt="闭嘴" /></a>
<a href="javascript:grin(':vomit:')"><img src="/wp-includes/images/smilies/icon_vomit.gif" title="吐..." alt="吐..." /></a>
<a href="javascript:grin(':kiss:')"><img src="/wp-includes/images/smilies/icon_kiss.gif" title="飞吻" alt="飞吻" /></a>
<a href="javascript:grin(':mad:')"><img src="/wp-includes/images/smilies/icon_mad.gif" title="怒" alt="怒" /></a>
<a href="javascript:grin(':razz:')"><img src="/wp-includes/images/smilies/icon_razz.gif" title="偷笑" alt="偷笑" /></a>
<a href="javascript:grin(':wink:')"><img src="/wp-includes/images/smilies/icon_wink.gif" title="眨眼" alt="眨眼" /></a>
</div>

/wp-includes/functions.php

if ( !isset( $wpsmiliestrans ) ) {
	$wpsmiliestrans = array(
			':vomit:' => 'icon_vomit.gif',
			':appall:' => 'icon_appall.gif',
			':???:' => 'icon_confused.gif',
			':love:' => 'icon_love.gif',
			':hantai:' => 'icon_hantai.gif',
			':smile:' => 'icon_smile.gif',
			':cool:' => 'icon_cool.gif',
			':eat:' => 'icon_eat.gif',
			':orz:' => 'icon_orz.gif',
			':shout:' => 'icon_shout.gif',
			':sigh:' => 'icon_sigh.gif',
			':razz:' => 'icon_razz.gif',
			':speechless:' => 'icon_speechless.gif',
			':wink:' => 'icon_wink.gif',
			':cry:' => 'icon_cry.gif',
			':lick:' => 'icon_lick.gif',
			':lovely:' => 'icon_lovely.gif',
			':lol:' => 'icon_lol.gif',
			':mad:' => 'icon_mad.gif',
			':sad:' => 'icon_sad.gif',
			':kiss:' => 'icon_kiss.gif',
			':laugh:' => 'icon_laugh.gif',
			':shy:' => 'icon_redface.gif',
			':shutup:' => 'icon_shutup.gif',
			':oops:' => 'icon_surprised.gif',
			'8-)' => 'icon_cool.gif',
			':-(' => 'icon_sad.gif',
			':-)' => 'icon_smile.gif',
			':-?' => 'icon_confused.gif',
			':-P' => 'icon_razz.gif',
			':-o' => 'icon_surprised.gif',
			':-x' => 'icon_mad.gif',
			';-)' => 'icon_wink.gif',
			'8)' => 'icon_cool.gif',
			':(' => 'icon_sad.gif',
			':)' => 'icon_smile.gif',
			':?' => 'icon_confused.gif',
			':P' => 'icon_razz.gif',
			':o' => 'icon_surprised.gif',
			':x' => 'icon_mad.gif',
			';)' => 'icon_wink.gif',
		);
	}

4、为了显示管理员留言的与众不同,或者避免管理员被冒名顶替,可以根据输入者的 ID 与 email 和昵称,管理员 ID 与 email 和昵称判断。由于我这博客基本没人来,所以只要并不需要对仿冒与否进行判断,主要是能凸显管理员的与众不同即可...由原来的判断后输出图像和文字的方式改为,单独为管理员的留言设置了一个层来实现效果。感谢管理员判断方式的原作者。

comment.php 合适位置添加判断

$admin_comment = false;   //设置一个布尔类型的变量用于判断该留言的 ID 是否为管理员的留言
	if($comment->user_id == 1){
	$admin_comment = true;}?>
 
//如果 admin_comment 有值,就输出一个 ID 为 admin-comment-ID 的 div。
	<?php if($admin_comment) {echo '<div id="comment-'?><?php comment_ID()?><?php echo '" class="admin-comment">';} else {?>
//为空,则输出一个 ID 为 comment-ID 的 Div。
	<?php echo '<div id="comment-'?><?php comment_ID()?><?php echo '">';};?>

CSS 中表现样式

.admin-comment {
	background: #EBF2FF;
	position: relative;
	border: 1px solid #DDD;
	padding: 5px 5px 5px 6px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

5、把 Nextgen Gallery 插件做了点修改,否则在相册中如果该图片没有 EXIF 信息,也会显示EXIF的表格,空白一大片很不好看。针对已经修改过的 imgbrowser.php。具体就是判断 EXIF 数组中对应的值是否为空,为空则跳过tr标签与td标签的输出,不为空则按原样输出。对比第一行表格就很好理解。

<table class="exif-data">
	<tbody>
		<tr>
			<td><?php _e('Filename', 'nggallery') ?></td>
			<td><?php echo $image->filename ?></td>
		</tr>
		<?php if($exif['camera']){echo '<tr>'?>
			<?php echo '<td>'?><?php _e('Camera / Type', 'nggallery') ?><?php echo '</td>' ?>
			<?php echo '<td>'?><?php echo $exif['camera'] ?><?php echo '</td>' ?>
		<?php echo '</tr>' ;}?>
		<?php if($exif['aperture']){echo '<tr>'?>
			<?php echo '<td>'?><?php _e('Aperture', 'nggallery') ?><?php echo '</td>' ?>
			<?php echo '<td>'?><?php echo $exif['aperture'] ?><?php echo '</td>' ?>
		<?php echo '</tr>' ;}?>
		<?php if($exif['focal_length']){echo '<tr>'?>
			<?php echo '<td>'?><?php _e('Focal Length', 'nggallery') ?><?php echo '</td>' ?>
			<?php echo '<td>'?><?php echo $exif['focal_length'] ?><?php echo '</td>' ?>
		<?php echo '</tr>' ;}?>
		<?php if($exif['shutter_speed']){echo '<tr>'?>
			<?php echo '<td>'?><?php _e('Shutter speed', 'nggallery') ?><?php echo '</td>' ?>
			<?php echo '<td>'?><?php echo $exif['shutter_speed'] ?><?php echo '</td>' ?>
		<?php echo '</tr>' ;}?>
		<?php if($exif['created_timestamp']){echo '<tr>'?>
			<?php echo '<td>'?><?php _e('Date / Time', 'nggallery') ?><?php echo '</td>' ?>
			<?php echo '<td>'?><?php echo $exif['created_timestamp'] ?><?php echo '</td>' ?>
		<?php echo '</tr>' ;}?>
	</tbody>
</table>

6、对N天内最新文章和置顶文章添加一个小图标。感谢最新文章时间判断方式的原作者。

N天内最新

<?php $t1=$post->post_date; //获取文章时间
$t2=date("Y-m-d H:i:s"); //获取当前时间
$diff=(strtotime($t2)-strtotime($t1))/3600; //小时差
if($diff<168){echo '<img src="'.get_bloginfo('template_directory').'/img/icon/icon-new.png" alt="NEW" title="七天内更新"/>';}
?>

置顶文章

<?php if(is_sticky()) {echo '<img src="'.get_bloginfo('template_directory').'/img/icon/icon-top.png" alt="TOP" title="该文章已置顶"/>';}?>

7、J S文件的解密/解包/反混淆,有些 JS 文件为了保护版权或者是处于压缩的考虑,采取了加密的方式。这对于需要研究 JS 代码的人造成了麻烦。不过这种 package 解密也很简单。直接按如下形式保存为 HTML 运行即可,许多网站也提供在线运行代码的功能。

<script  type="text/javascript">
var str=放入以(function(p,a,c,k,e,d)开始,以;))类似形式结束的代码
document.write("<textarea cols=80 rows=60>"+str+"</textarea>")
</script>

8、今儿又看到万戈那里有个自动获取 Meta keyword的小代码,我对于 SEO 并不在意,不过这个代码实现起来很简单,就顺手写上了去了。原文代码,把文章开头的220个字做了截断输出为 description,把文章标签输出为 keyword。我不想对页面的描述进行改变,所以把输出 description 的地方删除了,另外照猫画虎,把文章分类也作为一个 keyword 输出了。

<?if (is_home()){
	$keywords = "生活记录, WordPress, ";
} elseif (is_single()){
	$keywords = "";
	$tags = wp_get_post_tags($post->ID);
	foreach ($tags as $tag ) {
		$keywords = $keywords . $tag->name . ", ";
	foreach((get_the_category()) as $category) {
	$categories = $categories . $category->name . ", ";
	}
}
?>
<meta name="keywords" content="<?=$keywords?><?=$categories?>小虾, neverweep" />
<meta name="description" content="自言自语的地方,记录热爱的事物,记录所见、所听、所想" />

9、本篇文章篇幅太大,回到页首、登陆后台什么的非常麻烦,于是我又把删除了的悬浮框找了回来,除了主题自带的回到页首回到页尾,又加入了回到首页(用 is_home() 判断,在首页就不显示),后退,和进入后台的链接。方便了不少。

10、(更新于 2011-06-16)WordPress 后台不能回复评论的问题,具体表现:在后台回复评论提交后,图标一直转动,不能提示回复成功,但实际上回复已经成功提交。经过 Firebug 查看,在后台回复评论之后,XHR 一切正常。反复测试主题文件、核心文件,插件之后,确定问题出现在 Akismet 上,只要在 Akismet 设置中,将“在评论作者旁边显示通过次数”这一功能去掉,就可以使后台回复正常。

现在虚拟机里面就装了 Apache,MySQL,PH P来测试主题样式和 PHP 代码,用 Chrome11,Firefox4,IETester 来测试各个浏览器的兼容情况,用 Firebug 来调整 CSS 样式。

继续折腾 WordPress。 :orz:

  1. [...] 以 http://xia.im/z-turn-with-wordpress/ 这篇文章为例,其 HTML 原始数据大小为 98.4KB,Gzip 传输大小为 18.1KB;开启 HTML Minification 后数据反而变为 100.4KB,Gzip 传输大小为 18.5KB。页面生成时间大约增加了 0.08 秒左右。[...]

  2. [...] 以 http://xia.im/z-turn-with-wordpress/ 这篇文章为例,其 HTML 原始数据大小为 98.4KB,Gzip 传输大小为 18.1KB;开启 HTML Minification 后数据反而变为 100.4KB,Gzip 传输大小为 18.5KB。页面生成时间大约增加了 0.08 秒左右。[...]

  3. 很不错, 很干净的主题

  4. 恩,折腾万岁,好样的,加油啊