LiveSino 所采用的新版 WordPress 主题 Theme Codename H 已经发布，版本是 Rev.96 Beta，包括了完整版、移动版和 WordPress 表情包。访问 Theme Codename H 主题页面下载、并了解更多介绍、安装、自定义的内容。

注意，该 Theme Codename H 版本为 Beta 版，有任何问题、反馈或建议可通过 Twitter 和新浪微博联系我，或者发送邮件至 picturepan2 (at) hotmail.com。

更新：目前的 Theme Codename H 主题包已修复了 Web Slice 和 Microsoft Translator 的问题。
更新2：请 17 日前，请所有已经的安装过 Theme Codename H 主题的同学，重新下载主题包，替换 comments.php 和 footer.php。

©2011 LiveSino.net | 阅读原文 | 添加评论

更方便的是，搜索框也支持快捷键，任何情况下只要按下“Shift + `（1 左边的按键）”即可焦点至搜索框，以便输入。

目前支持的命令只有返回首页（~）和随机文章（~random 或 ~r），欢迎留言建议更多。

©2011 LiveSino.net | 阅读原文 | 添加评论

新的服务器

现在 LiveSino 所选择的正是 Media Temple 今年新推出的 (ve) Server 系列的最基础的那款（配置为 512MB 内存、20GB 硬盘、320GB 流量），年付 300 美元。

Theme Codename H

新版 WordPress 主题 Theme Codename H 代码已经完成，样式和功能与 LiveSino 几乎相同（除去 Microsoft Translator AJAX 翻译，因其需要申请 AppID）。但具体发布日期还没确定。

反馈、投稿和联系

邮件的话，可以发送到 Picturepan2@livesino.net。其他方式，还包括 Twitter、Facebook。

// 谢谢大家的支持。

©2011 LiveSino.net | 阅读原文 | 添加评论

Theme Codename H 移动版支持浏览最新文章、最新评论、单篇文章和其评论。若要修改日志、添加评论（考虑中）、博客管理，还请切换至完整版。目前已知的 Theme Codename H 移动版站点最佳范例仅有 m.livesino.net。

Windows Phone 6.5 + Opera 移动版截图

Theme Codename H 移动版在 Windows Phone 6.5、Zune HD、iPhone、Android 等平台上的显示效果一致，且通过增高行距增强了手机的触控体验。其他手机平台也能保证基本的浏览体验，但可惜部分简体中文无法在 Zune HD 上正常显示。

1）完整版链接。两种情况：

• 当访问移动版首页时，此处链接即为完整版首页的 URL
• 当访问移动版日志页面时，此处链接即指向完整版日志的 URL

2）移动版单篇日志正文部分，保持了完整版 Theme Codename H 的基本正文文本和图片的样式。

3）移动版评论默认支持显示 Gravatar 头像，并且评论列表也分两种情况：

• 移动版首页，显示最新评论 8 条，并且语句是截断的
• 移动版日志页面，显示所有该日志的评论，语句不截断

左图为 iPod Touch 截图，iPhone 效果同；中图为 Palm 截图；右图为 Android 截图

4）即 3）中提到的日志页面的评论列表。

移动版的代码将随新版 Theme Codename H 一同发布。或许在发布前我还会新增功能，但不管怎样，移动版的设计原则和 Web Slice 页面模版一样：简洁，并专注于最新内容。

©2011 LiveSino.net | 阅读原文 | 添加评论

微软在 IE8 中引入了新特性 Web Slices，中文名为网页快讯：允许用户订阅网页的局部，并由 IE 自动进行定时检查该部分网页的更新，而用户无需访问该网站即可在收藏栏查看。主要应用于网站资讯更新、新邮件等内容的提醒，或版本跟踪。

1）缩小版博客标志、兼博客首页访问按钮，我在其右侧添加了“外链”图标以暗示其可点击。

2）考虑到 Theme Codename H 多处使用到了搜索框，我将搜索表单代码独立写在了（第一版就已如此）。而 Web Slice 底部的搜索框，正是直接调用了搜索表单模块。

也因此，Web Slice 模版中的搜索框与 Theme Codename H 顶部右侧的一样，也支持显示提示信息。这里的“搜索 ”就是提示信息，点击输入框准备输入时，提示文字将自动消失；当输入框文本为空，且焦点离开输入框时，自动显示提示信息。

3）Web Slice 模版的最新文章已减少至 4 篇，可以说，原来的 10 篇最新文章不符合 Web Slices 强调精简的气质。

4）鼠标经过右边栏的最新文章即会显示 Web Slice 订阅按钮，在最新文章标题的右侧的 Web Slice 文字除了暗示此模块支持 Web Slice 外，点击其本身也可订阅。

我曾疏忽了 Web Slices 开发时需要注意的一点，特此记录：若 Web Slice 仅采用 Alternative Display 方式 [2] 调用外部网页，IE 并不缓存页面，因此无法与新页面对比，收藏栏也无法加粗文字提醒。解决方案是：同时使用基本的 Entry Content 方式缓存内容，用以对比是否有更新。

[1] 指 Theme Codename H 主题中的模版时采用单数 Web Slice；指 IE8 特性时用复数 Web Slices。

[2] Alternative Display 正是 Theme Codename H 所采用的调用方式，可支持搜索表单。

©2011 LiveSino.net | 阅读原文 | 添加评论

首先从 Theme Codename H 评论模版开始。

1）支持 WordPress 原生评论嵌套，支持 Gravatar 头像，其中访客和登录用户的头像边框将以灰色和绿色区别开。而对于不开放注册的博客来说，这一头像边框特性将标识出管理员、编辑等登录用户的评论。

2）在未登录的状态下，发表评论表单右侧将显示 Gravatar 头像：

• 若是首次尝试发表评论，将显示默认头像
• 若已成功发表过评论，并且 E-mail 输入框保存着上次的邮件地址，将显示该 E-mail 地址对应的 Gravatar 头像（就是图中所示的效果）

Gravatar 头像将链接至 Gravatar.com 站点，以便于访客设置头像，或者创建头像。

3）延续了 Theme Codename H 一贯的风格，“引用 Trackback”类型的评论将以精简的格式进行显示（无展开内容，仅标题和链接），且不可回复。

4）嵌套回复的原理可完全参考 Jinwen 老师的此文，实现的效果：所有评论的嵌套始终直属于主评论，二级评论将通过 @XXX 区别开回复对象。

另外，点击回复按钮，评论文本框会自动添加 @XXX 文字和链接；取消回复按钮也会同时出现，相比其左侧的提交按钮，取消回复采用了文本链接的形式。

5）我分别用不同颜色标注了表单输入框右侧的必填和选填提示，该样式也同样适用于主题中的其他部分，例如联系表单的输入框的。

若实在不想自行处理 WordPress 的评论模版，新版 Theme Codename H 主题中有现成的。

©2011 LiveSino.net | 阅读原文 | 添加评论

1. 图片加载图标

在 Theme Codename H Rev.75 中，我为正文图片以及评论 Gravatar 头像部分增加了正在加载的图标（效果见上图）。方法：

准备“正在加载”图片 loading.gif 一枚，并在主题的 CSS 样式中增加：

img{background:url(images/loading.gif) no-repeat center center;}

2. 页面标题中显示页码

在 Theme Codename H Rev.76 中，页面的标题部分已自动根据页码显示“- 第 n 页”字样（效果见上图）。方法：header.php 文件中 <title>…</title> 标签内的对应位置添加该句：

<?php if( $paged == "" ) $pagenum = "";else echo $pagenum = "- 第 ".$paged." 页"; ?>

3. 搜索框显示正在搜索的关键词

当进入搜索结果页面时，右上角的搜索框将保持显示该搜索关键词，而非默认的“搜索全部文章”提示。方法：在搜索框表单文件，例如 widget-search.php 文件的 HTML 代码开始前插入搜索页判断语句：

<?php
   if (!is_search()) {
      $search_text = "搜索所有文章";
   } else {
      $search_text = $s;
   }
?>

而之后的输入框使用如下 HTML 代码，：

<input type="text" size="24" name="s" value="<?php echo $search_text; ?>" onfocus="if (this.value == '搜索所有文章') {this.value = '';}" onblur="if (this.value == '') {this.value = '搜索所有文章';}" />

4. 搜索引擎来源访客提示

通过主流搜索引擎来到 LiveSino 的访客都将看到推荐订阅的提示，点击任意链接该提示即会消失。方法：在 functions.php 文件中插入如下判断代码：

<?php
   function se(){
      $ref = $_SERVER['HTTP_REFERER'];
      $SE = array('.google.', '.bing.', '.yahoo.', '.baidu.', '.soso.');
      foreach ($SE as $source) {
         if (strpos($ref,$source)!==false) return true;
      }
      return false;
   }
?>

在 index.php 或其他需要出现提示的模板中插入以下显示代码：

<?php
   if (function_exists('se')) {
      if (se()) {
      echo "<div class=\"fuss\"><a href=\"http://feed.livesino.net\">想说啥？</a></div>";
      }
   }
?>

5. 微软翻译 Microsoft Translator Widget

具体介绍请参考『LiveSino 已增加 Microsoft Translator Widget』一文，或点击此处申请 Microsoft Translator Widget 的邀请。感谢 Microsoft Translator Widget 在 LiveSino 文章国际化过程中所有的帮助。

6. 快速 RSS Feed 订阅模块

快速 RSS Feed 订阅模块换了个样子出现了，不知会不会保持到下个版本。不过目前已添加 Google Analytics 的事件追踪（Event Tracking）代码以分析该模块是否真的值得存在。

差不多了吧，若还有其他一些 Theme Codename H 的发现或疑问，欢迎留言提出。

©2011 LiveSino.net | 阅读原文 | 添加评论

在 Theme Codename H（下载）中，收藏与分享功能涉及两个文件：

• widget-fav.php – 收藏与分享功能主体代码
• single.php – 调用 widget-fav.php：<?php include (TEMPLATEPATH . ‘/widget-fav.php’); ?>

我在开发此功能之前，参考了目前网上主流的手动添加收藏与分享功能的方法，直接调用固定链接：<?php the_permalink() ?> 及标题：<?php the_title(); ?> 如：

<a href=”http://……/…title=<?php the_title(); ?>&bkmk=<?php the_permalink() ?>”>收藏至 Google</a>

然而这样的方法问题就在于：所有的非字母数字字符都没进行 URL-encoding 处理，至于为何要进行 URL-encoding 处理请参照此文。而更现实的问题就是，中文字符会出现无法正常显示的问题。

因此我在 widget-fav.php 的开头增加了对标题和固定链接的 URL-encoding 处理，并且标题中的空格（%20）用 + 代替，具体代码：

<?php
$permalink = urlencode(get_permalink($post->ID));
$title = urlencode($post->post_title);
$title = str_replace('+','%20',$title);
?>

调用标题和固定链接的代码：

<a href=”http://……/…title=<?php echo $title; ?>&bkmk=<?php echo $permalink; ?>”>收藏至 Google</a>

觉得自己编写麻烦，也可直接下载 Theme Codename H 主题，使用 widget-fav.php 文件（将该文件放入主题文件夹中，调用方法如上述的 Single.php）。

Theme Codename H 中文版主题是默认带有 17 个收藏、分享、SNS 类网站的，而添加站点的方式也并不难，可以搜索目标网站的开发、API、Bookmarklet 等相关栏目，比如：Windows Live SkyDrive 共享收藏添加链接介绍，更省事的则是下载 Sociable 插件进行研究。

若看到这里仍觉得迷茫，我推荐使用 17fav Bookmark & Share 这款由我爱水煮鱼和花儿开了开发的 WordPress 插件实现该功能。

©2011 LiveSino.net | 阅读原文 | 添加评论

Theme Codename H 中的 IE8 Web Slices 特性分为两个部分：Web Slices 页面（Page Template – webslice.php）和 评论 Web Slices（Comments.php）。

1. Web Slices 页面支持订阅博客 10 条最新文章和 10 条最新评论。若你正在使用 Internet Explorer 8 时，当鼠标分别经过 Web Slice 区域（下图中绿色框内部区域）时，左上方会显示绿色 Web Slices 按钮：

点击绿色 Web Slices 按钮之后，Internet Explorer 8 会提示是否添加 Web Slice，点击添加至收藏栏即可完成订阅。最终效果如下（最新评论 Web Slice 的订阅步骤和最新文章的相同）：

2. 评论 Web Slices，在每篇文章的评论部分，除 Trackback 和 Pingback 之外，留言已经增加了 IE8 Web Slices 支持（需安装 WordPress Thread Comment 才能发挥其作用），可以通过订阅了解是否有新回复（IE8 会定时检测是否有更新，若有更新 Web Slices 按钮标题会加粗提醒），效果如下：

启用 Theme Codename H 的 Web Slices 功能需要新建一页面，并在页面模板中选择 Web Slice，保存即可。

1. 如何定制 Theme Codename H Web Slices 页面的内容。

• wp_get_archives(‘type=postbypost&limit=10′);  – 该语句用于显示 10 篇最新文章，其中 limit=10 表明显示最新 10 篇；也可以将该语句修改为输出某一分类中的文章，代码和介绍可以参考 WordPress Codex。
• get_recent_comments(’10′,’<li>’,'</li>’,'#FA930D’); – 其中 10 表示显示 10 条最新评论，#FA930D 表示输出后的最新评论的链接颜色。

2. 评论 Web Slices 的制作方法可以参考这里。

你若对 IE8 Web Slices 开发感兴趣，可以查看 MSDN 的 IE8 Web Slices 开发文档，也包括范例的。

©2011 LiveSino.net | 阅读原文 | 添加评论

Theme Codename H – 移动版 安装方法

• 从这里选择下载移动版 zip 包（中文版）；
• 解压，并将 m 文件夹上传至 WordPress 安装根目录下；
• 修改 m-config.php 文件中的 第 4 行，将 http://m.livesino.net 改为自己的移动版域名，推荐采用二级域名，比如：http://m.livesino.net 。

注意，Theme Codename H – 移动版默认不启用 mod_rewrite 功能，文章的地址为 http://***/?p=post_id 。若想使用 mod_rewrite，找到以下几行，按照我给出的语句修改即可：

1. m-core.php 文件中的

?p=". $comment->comment_post_ID ."

替换为

". $comment->comment_post_ID .".html

2. index.php 文件中的

?p=<?php the_id(); ?>

替换为

<?php the_id(); ?>.html

Zip 包中已经包括 .htaccess 规则文件，无需自己编写规则，即使要修改也不难的。寻求更多帮助？或帮助完善？留言，Email 或者 Twitter。

下载：Theme Codename H Mobile 中文版 – 英文版。情人节快乐。

©2011 LiveSino.net | 阅读原文 | 添加评论