Alan's World » Wordpress

WordPress Theme: Optimus+

Alan — Sun, 24 Jul 2011 08:19:29 +0000

上次更新 Blog 是 3/22，居然有 4 个月没新文章，有时要写点啥，但是想想又放下了。是现在 SNS 太流行？还是自己太懒？坚持写 Blog 太不容易了，有时也会想写 Blog 到底为了啥，甚至又动了想废掉的念头，但想回来，都存在几年了，就让他这么下去呗，偶尔还能冒下泡，也好吧。

前阵子已经把 aSide 换成 touch5 了，然后在 tumblr 使用 Jamie Bicknell 设计的 Optimus，感觉不错，于是抽空就弄到 WordPress 上来了。

Optimus+ 纯 CSS 简洁型主题，没有用到图片，在 tumblr Optimus 的基础上增加类 google bar；同时主题也没什么功能，仅仅是展示文章与评论，适用于轻博客类型的站点；或者用在 WordPress 上可能有点蛋疼，考虑是否弄个到 Typecho 上；也在考虑是否增加显示最新文章、最新评论等这几个 WordPress 博客常用的展示内容；Optimus+ 是不支持 IE6 的，呼吁使用 IE6 的童鞋升级一下你们的浏览器。Optimus+ 是在 wordpress 3.2 的基础上开发的，所以不知 3.2 以下版本能否使用。

最后，还是那句话，有问题或 Bug 欢迎反馈，Thx! 2011-7-26 更新：Changelog

Optimus+ 演示：Live Demo

Download Optimus+

WordPress 主题 aSide 出售

Alan — Sat, 25 Dec 2010 10:53:34 +0000

本来 aSide 是私用的，一些朋友表示要购买，于是抽空整理了一下，现在放出来出售，第一次公开出售主题，希望大家多支持。

aSide 支持 WordPress 3.0+，在各大浏览器上均能正常显示，且外观基本一致。现出售，仅限 15 份，每份 RMB 88 元，~~点此淘宝购买，或联系我购买也行~~。

主题简述：aSide 本来是私用主题，有几位朋友很想要购买，故拿出来出售了。凡购买使用者，请保留页脚作者信息；请勿与他人共享使用，谢谢合作！

主题说明

1. aSide 支持自定义菜单，只支持二级导航栏；支持 Widget，要注意的是，使用 Widget 后，显示效果不能达到某些效果，你可以自己体验下。

上图中就是 Logo 的样式以及二级菜单样式。

2. aSide 已经全面中文化，如不需中文化的，请把 language 文件夹删除即可。

3. 支持嵌套评论，建议最多选 5 层吧。

4. 内嵌回复邮件通知；内嵌文章分页；没有使用评论分页，而是使用 jQuery 判断，当评论超过 36 条时，自动隐藏旧评论，仅显示第 36 条以后的评论内容。

5. 内附 Links 模板，如需建立链接页面，则可使用此模板。

6. 自带“分享栏”。

7. jQuery 点击锚点滚动效果。

8. Lazyload 加载图片。

9. 自动隐藏留言访客资料框。

10. 点击回复自动添加 @someone。

11. 当鼠标指向被回复者 @someone 时，自动获取 someone 用户评论的内容。

12. 相关文章和面包屑导航。

更多细节请看 Live Demo。再次提醒，~~点此淘宝购买，或联系我购买也行~~。

更新：主题已经售完，谢谢！

给 WordPress 文章添加 odd/even 类

Alan — Sun, 07 Nov 2010 02:20:23 +0000

WordPress 文章的 class 调用一般是，其实里面已经有很多 class，给样式设计上带来很多方便；不过我们还可以通过添加函数，给文章再添加 odd 和 even 类，这样可以分别设计奇数和偶数文章的样式，丰富设计主题手段。

简单的在 function.php 文件中添加以下函数：

function oddeven_post_class ( $classes ) {
global $current_class;
$classes[] = $current_class;
$current_class = ($current_class == 'odd') ? 'even' : 'odd';
return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';

那么可以看到 wordpress 文章的类分别多了 odd 和 even，类似：

我们可以在添加函数的时候，把 $current_class = 'odd'; 这一行去掉，那么第一篇文章不会被添加 odd 或 even 类，这样又可以设计区分第一篇文章与其他文章的样式，HTML 类似：

Enjoy!

Most Commented

WordPress Theme G-White 3.0

Alan — Thu, 21 Oct 2010 18:10:57 +0000

G-White 3.0 相对于 DarkLight 3.0 迟了许多，不过也终于弄好了，有 DarkLight 3.0 做基础，修改起来就相对没那么累人了，不过怕会有些 DarkLight 的残留元素，偷懒没办法，目前测试没看到，希望没有，嘿。

其实我做的主题，功能上从来都是差不多，加上这次是基于 Twenty Ten 的，那就更是了，主要还是对于外观、细节上的处理，这次外观还是做了部分改动，细节更加完善些了，也有一些无视 IE 的部分，但不影响其基本使用。下面是对于这次主要更新的地方的详述：

首先是 Header 部分

博客标题保持不变，导航栏改变了样式，增加背景框，变更字体颜色、增加 jQuery 下拉菜单，基本上导航栏就是重新设计及了！

其次是文章顶部样式及图标

文章发布时间的样式改为普通样式，并没有使用之前的独立出来的样式，之前有人反映说该样式看不出文章发布的年份，所以改掉，当偷懒也行吧。再者是图标更新了，不过依然是用 Gnome 的图标，对 Tango，Gnome 这类图片没有抵抗力。

第三是 Pagenavi 的样式

更改了内嵌的方式，跟 DarkLight 一样的，这里不重复。主要是样式重新设计了，之前是用了图片做背景的，这次直接 CSS 做了，更简洁！

第四是侧边栏 Widget 部分

旧版使用的是图片背景，这次全部删除，只用 CSS 实现，也是重新设计的样式，使用了 CSS3 的圆角和阴影效果，所以 IE6、7、8 不会有，不过并不影响其使用，看上去同样简洁；搜索框也是重新设计，方法同前面。

第五相关文章

相关文章应该很多人都有使用，不过我没有内嵌到主题里去，我自己用的是 WordPress Related Posts 插件，如果你也用该插件，那显示的样式如图所示，同样用了 jQuery 添加斑马纹效果；如果你使用的不是上面提到的插件，那也没关系，在调用相关文章函数的时候把标题的类设置为 class="related_post_title"，把列表 ul 或者 ol 的类设置为 class="related_post" 即可达到同样效果。

最后是评论部分

评论的样式总是很受重视的！旧版的样式被我完全抛弃了，新版 G-White 3.0 的评论样式跟 DarkLight 3.0 的如出一辙，又偷懒了，哈哈。这个样式本人真的很喜欢，不过依然只支持三层嵌套，以前说过了，搞太多很累人，代码也会很累赘。相比 DarkLight 3.0，这里多了个隐藏和展开评论内容的锚点，如图所示！

其他说明

404 页面保持跟旧版的一直；一些没列出来的功能，都是跟 DarkLight 3.0 一样的。主题支持 Opera 10，Firefox 3.0，Chrome，IE8，IE7，IE6，手头没 Safari，没测试；主题不能通过 CCS3 验证，因为圆角和阴影效果的缘故，也懒得用 js 输出了，不能通过 HTML 验证，因为用了 HTML5 的 role 属性，我也懒得去全部改掉，囧rz；测试时间并不长，所以可能还有一些细节上或者其他问题，请 G-white 3.0 使用者帮忙汇报 Bug，谢谢！

G-White 3.0 是在 WordPress 3.01 下开发的，所以只支持 WordPress 3.01+。

最后的最后，再次声明，G-White 3.0 主题是基于 Twenty Ten 主题，请遵循署名-非商业性使用-相同方式共享 3.0.0 共享协议，去掉 footer 版权信息的朋友请自重~~，不要连 WordPress 的也搞掉吧~~。

更新列表：

2010-11-11: 更新至 Verson 3.1.2，修正 IE6 下侧边栏评论内表情显示异常问题。非常感谢 Cmile 的几个反馈！
2010-11-07：更新至 Verson 3.1.1，修正底部 Widget 搜索框的样式；修改底部 Widget 日历的样式；去掉插入表情的背景和边框。
2010-10-25：更新置顶文章样式。
2010-10-22：下午自己 Demo 的时候发现了一些问题，做了挺多更新，直接升级版本为 3.1；修正 Widget 项的样式，添加 padding 属性，让内容文字不至于顶到右边框上去；修改 footer 的信息，把 DarkLight 改成 G-White，囧了；修改 sprite 图片，删除内容顶部和 footer 部分的背景图片，让他们独立出来了，保证在 Chrome 下的显示完好；更新 Trackback 的样式。

演示：Live Demo // Image Preview

点击下载 G-White 3.1

Mail to Commenter 邮件通知和发件人问题

Alan — Fri, 03 Sep 2010 07:46:48 +0000

一直使用 WordPress 插件 Mail To Commenter，但是 WordPress 2.8 的时候用了 WP 自带的嵌套回复后，一直没注意这个插件的问题，我也以为大家都能在收到回复通知邮件，直到前天，自己在测试的时候发现怎么没有回复通知邮件？原来设置启用后，要有 @name 或者 @name: 才会有邮件通知，囧，一直没注意，以为是自动会发送通知的。

然后开始折腾，又发现在邮件通知的时候，发件人显示是未知发件人，邮件地址是服务器的地址，开始以为是我自己博客设置问题，或者服务器设置问题，结果折腾好久发现不是，囧死了；在 google 找了好阵子解决方法，实在很少关于这个的，但还是找到了。解决办法是在 mailtocommenter_functions.php 文件找到

function mailtocommenter_send_email($to,$subject,$message)

把该函数的内容按如下修改：

function mailtocommenter_send_email($to,$subject,$message){
$blogname = "此处填你要显示的发件人名称";
$blognameO = $blogname;
$blogname .= " ;
$blogname .= ">";

$charset = get_option('blog_charset');
$headers = "From: $blognameO

\n"

;
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-Type: text/html;charset=\"$charset\"\n";
$to = strtolower($to);
return @wp_mail($to, $subject, $message, $headers);
}

这样就可以正常显示了。Think Again 已经说了此插件不再更新了，希望有人能接着开发此插件。

Most Commented

WordPress 主题 DarkLight 3.0

Alan — Sat, 28 Aug 2010 11:04:12 +0000

当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Ten 真是一个强大的主题，DarkLight 3.0 主题的功能基本与其保持一致。外观上基本保持 DarkLight 原有风格，换了些小图标，用了 Sprites 集成图片，技术一般，有点乱，不过不影响主题使用就是了。下面来个图文并茂的介绍。

首先 Header 部分：

相对之前的主题，导航栏这次用 jQuery 实现多级菜单，样式相对改进了，增加 box-shadow 效果（IE 不会有这个效果），包括侧边栏，如果有多级菜单的话，也加了这个效果，当然，你不要的话可以自己去掉；主题支持 WordPress 3.0 的菜单功能，Twenty Ten 自带有了。

其次是内容部分：

把之前使用内嵌的 wp-pagenavi 插件函数换成 willin 的 Mini Pagenavi，更加小巧，样式有轻微改动。

单篇文章中显示上一篇文章和下一篇文章的链接，在顶部和底部都有，这是 Twenty Ten 原来有的，我也保留了，不需要删除掉也比较简单。

相关文章本来想内嵌使用 willin 的方法，但还是放弃，不过样式还是保留在 style.css 文件里面，而且用 jQuery 实现类斑马纹样式，同样保留 js 代码，无论你用什么方法实现相关文章，只要给标题添加类 class="related_post_title"，给列表 ul 或者 ol 添加类 class="related_post"，那效果就类似下图：

作者信息栏，这个也是 Twenty Ten 自带，只要文章发布者有关于自己的描述说明，那么就会在文章底部显示作者信息，并可以点击链接查看该作者的全部文章。对于单人博客来说没啥用，如果多人参与的话，那相当有必要：

第三是评论部分：

首先是评论样式，重新设计了评论样式，奇数评论层跟偶数层样式不同，然后内嵌回复部分使用左右对话框样式，依然只支持嵌套 3 层，复杂的样式设计多层，挺累人的，代码也会复杂；同时还有评论楼层，只显示主评论楼层，具体看图：

然后是 Ajax comment，使用的是 willin 的版本，然后 jQuery 增加 @reply，即点击回复会自动添加 @somebody，还有 Ctrl+Enter 回复评论，隐藏回访用户资料框等常用功能。

最后是 sidebar 和 footer 部分：

这里似乎没什么好说的，因为用的 Twenty Ten 的结构，所以你完全可以使用主题的小工具来设置侧边栏，样式上不会存在问题，如果有那应该是我没有测试到吧。不仅侧边栏可以使用小工具，底部 footer 也可以：

至于返回顶部的 Go Top，像之前说的，我并没有打算给它加上 js 滚动效果，不过样式上做了下改动而已。

其他：

主题支持 Opera 10，Firefox 3.0，Chrome，IE8，IE7，IE6，手头没 Safari，没测试；Doctype 由 HTML5 改成 XHTML 1.0 Traditional；主题不能通过 CCS 3 验证，因为圆角和阴影效果的缘故，也不能通过 HTML 验证，因为 Twenty Ten 用了 HTML5 的 role 属性，我也懒得去全部改掉了；关于 CSS Sprites，把很多图片弄成一张，省去加载多张图片的时间；然后我又去掉了 Twenty Ten 原有支持的单栏样式；测试时间并不长，所以可能还有一些细节上或者其他问题，请 DarkLight 3.0 使用者帮忙汇报 Bug，谢谢！

最后的最后，再次声明，DarkLight 3.0 主题是基于 Twenty Ten 主题，请遵循署名-非商业性使用-相同方式共享 3.0.0 共享协议，去掉 footer 版权信息的朋友请自重~~，不要连 WordPress 的也搞掉吧~~。

更新列表：

2010-11-07：去掉表情图片的背景和边框。
2010-10-22：修正当 Widget 调用自定义菜单时样式问题。
2010-9-16：修复自定义导航栏下，多级菜单的样式。
2010-9-11：更新置顶文章的样式（注：只需更新 style.css 文件即可）。
2010-9-7：更新 attachment 图片的样式。
2010-9-4：增加回复邮件通知功能，使用 willin 的代码。
2010-9-3：修正在搜索不到内容时，正文中显示两个搜索框的问题。
2010-9-2：给正文增加 overflow: hidden 属性，避免溢出情况；修正“您的评论正在等待审核”评论的位置。
2010-08-29 早上更新：居然忘记测试 404 页面，稍微修改了下，并且增加一个说明文件。
2010-08-29 下午更新：修改 IE6、IE7 下鼠标滑过文章标题时，文章背景线显示不全的问题；修改 IE6 下，鼠标滑过文章内链接时，文章分割线下滑问题，IE 实在太囧了；修改在回复评论时，第二层回复者名字的显示位置；修改成功提交评论后，增加提示评论成功的句子的左边距，保持美感，汗。

演示：Live Demo

下载 WordPress 主题：DarkLight 3.0

DarkLight 和 G-White 主题的图片透明效果和超链接背景 (23)
关于 DarkLight 主题新版本的开发 (18)
DarkLight 2.3 (113)
DarkLight 2.0 (129)
Wordpress Theme: Optimus+ (53)
Wordpress 主题 aSide 出售 (140)

DarkLight 和 G-White 主题的图片透明效果和超链接背景

Alan — Thu, 19 Aug 2010 09:26:55 +0000

DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如何去掉该效果，个人喜好不能加于公布的主题中，以后要注意，去掉的方法就是，在 style.css 中找到 .entrybody img，删除里面的

filter: alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;

这三行，顺便把 .entrybody img:hover 整个删掉。

还有个问题是，这俩主题中，超链接图片在鼠标滑过时，图片底部会留下的红色背景，是我给超链接在鼠标滑过 a:hover 时设置了 padding 和 background 属性导致的，要去掉的话修改超链接的样式，去掉其内边距和背景属性。如果想保留超链接原来的样式，我写了个 jQuery，去掉超链接图片的背景和样式：

$(document).ready(function() {
$(".entrybody a img").parent("a").css({"background": "none", "padding": "0"});
});

代码放到 js 文件夹下的 all.js 里面。这两个主题已经调用了 jQuery 库，如果你已经删掉了，那不会有效果。

关于 DarkLight 主题新版本的开发

Alan — Sun, 15 Aug 2010 02:18:23 +0000

在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结构和 CSS 代码还有一些不合理和冗余的地方，结构方面已改好，正在重新写 CSS 代码。但受到 Jinwen 这篇文章的影响，我也有意尝试用 WordPress 官方主题进行开发，毕竟我的那些代码是从 WordPress 2.5 用到现在的，需要全面更新一下了，所以有了把 DarkLight 和 G-White 3.0 化的想法，即在 Twenty Ten 主题结构基础上的更新开发。

回到正题，首先是对 DarkLight 的更新，版本直接跳到 3.0 且不在对之前版本进行维护改进。说说几点特性，喜欢 DarkLight 主题的可以提提意见：

Ajax Comment，这次会使用 Willin 最新的改进版。
嵌套评论，样式会有所改变，敬请关注
内嵌文章分页，这次不用 wp-pagenavi，而使用还是来自 Willin 的 Mini Pagenavi，很小巧。
一些 JavaScript 效果：如点击 Reply 自动添加 @somebody，下拉菜单，Ctrl+Enter 回复评论，在考虑要不要加页面滚动效果，个人觉得没什么必要。

进度不会很快，现在失业中，正在学习，杯具。

WordPress 主题 DarkLight 3.0 (144)
DarkLight 和 G-White 主题的图片透明效果和超链接背景 (23)
DarkLight 2.3 (113)
DarkLight 2.0 (129)
Wordpress Theme: Optimus+ (53)
Wordpress 主题 aSide 出售 (140)

WordPress Gravatar 头像缓存

Alan — Mon, 26 Jul 2010 04:09:16 +0000

最近 Gravatar 头像老是显示不能，google 之得一好方法。来自 Willin 方法，将 Gravatar 头像缓存到服务器，不错、够速度，故分享之。

首先在你的网站 wp-content 的同级目录建立：/avatar，权限设置:755，这是 Gravatar 的缓存路径。
准备一张适合你模板尺寸的默认头像，名为 default.jpg。
将下列代码复制到模板的 functions.php 下：

/* Mini Gavatar Cache by Willin Kan. */
function my_avatar( $email, $size = '42', $default = '', $alt = false ) {
$alt = (false === $alt) ? '' : esc_attr( $alt );
$f = md5( strtolower( $email ) );
$w = get_bloginfo('wpurl');
$a = $w. '/avatar/'. $f. '.jpg';
$e = ABSPATH. 'avatar/'. $f. '.jpg';
$t = 1209600; //設定14天, 單位:秒
if ( empty($default) ) $default = $w. '/avatar/default.jpg';
if ( !is_file($e) || (time() - filemtime($e)) > $t ){ //當頭像不存在或文件超過14天才更新
$r = get_option('avatar_rating');
$g = sprintf( "http://%d.gravatar.com", ( hexdec( $f{0} ) % 2 ) ). '/avatar/'. $f. '?s='. $size. '&d='. $default. '&r='. $r;
copy($g, $e); $a = esc_attr($g); //新頭像 copy 時, 取 gravatar 顯示
}
if (filesize($e) < 500) copy($default, $e);
$avatar = "";
return apply_filters('my_avatar', $avatar, $email, $size, $default, $alt);
}
// -- END ----------------------------------------

上面第一行的 $size 可自定义头像大小，然后将所有 get_avatar() 改 my_avatar()，大概 functions.php，comments.php，sidebar.php，comments-ajax.php 会有头像的地方有 get_avatar() 函数，因主题而已，自行修改。

注意 my_avatar() 的方法和 get_avatar() 有一点差别：
get_avatar() 可用 id 或 email，可写成 get_avatar($comment, $size= ...
而 my_avatar() 只能用 email，要改成 my_avatar($comment->comment_author_email, $size= ...
使用参数如下： echo my_avatar( $email, $size, $default, $alt ); ?>

以上转自 Willin 的新版 Gravatar 缓存，其实后面还有第二个方法，不用修改模板的，但有点小缺陷，详见该文的后续部分。

Most Commented

用图片替换文字 Logo

Alan — Thu, 22 Jul 2010 03:32:13 +0000

用自制的图片来做博客的 Logo 相对文字 Logo 来说更美观、更多自定义性，鉴于 DarkLight 和 G-White 都没有这样设定，又有同学有需求，所以有此文。

通常主題的 Logo 在 header.php 里面的类似如下标签 h1 包含部分

我们先设定 h1 标签选择器的内边距和外边距：

#header h1 {
padding: 0;
margin: 0;
}

然后设定 a 标签选择器的样式：

#header h1 a {
text-indent: -9999em; /*文字缩进，在屏幕里面看不到*/
display: block; /*设定 a 为块级元素，必须的*/
background: url('images/logo.gif') no-repeat 0 0; /*你要作为 Logo 的图片，放在主题文件夹下的 images 文件夹里吧*/
height: 50px; /*图片高度，你的图片多高就写多少*/
width: 150px; /*图片宽度，你懂的*/
margin-top: 20px; /*Logo 跟页面顶部的间距，看你自己需求而定，不用间开就直接删除吧*/
}

这样就算替换完成，其他的文字替换成图片的方法其实都大同小异了。

Wordpress Theme: Optimus+ (53)
Wordpress 主题 aSide 出售 (140)
Wordpress Theme G-White 3.0 (156)
WordPress 主题 DarkLight 3.0 (144)
jQuery 隐藏老用户评论资料框 (20)
DarkLight 和 G-White 主题的图片透明效果和超链接背景 (23)