Alan's World » Wordpress Theme

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 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

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)

jQuery 隐藏老用户评论资料框

Alan — Fri, 20 Aug 2010 14:35:06 +0000

之前一直用的是 xiaorsz 的方法来隐藏老用户评论资料框，包括我发布的 DarkLight 和 G-White 主题也是用这方法。该方法在 jQuery 1.2 和 1.3 下能正常工作，但在 1.4 下却有问题，我也说不清，如果你在用的是 jQuery 1.4+ 的话，把 if($('input#author[value]').length>0) 换成 if ($("#author").val()) （判断用户名输入框的值是否有值）即可。现在我把他的代码改进一下，并增加淡入淡出效果：

$(document).ready(function() {

//判断用户名输入框是否有值
if ($("#author").val()) {

//隐藏资料框
$("#author_info").hide();

//建立一个编辑锚点，并赋值给edit
var edit = "Edit your profile.";

//在welcome back后面插入“编辑锚点”edit
$(".form_row").append(edit);
$("#eidt_info").click(function() {

//第一次点击 edit 显示用户资料框，第二次点击则隐藏，依次循环
$("#author_info").animate({opacity: "toggle", height: "toggle"}, "slow");

//点击edit，用户资料框显示后，Edit your profile.变为Close.
if ($(this).text() == "Edit your profile.") {
$("#eidt_info").text("Close.");
} else {

//点击edit, 用户资料框隐藏后，Close.变为 Edit your profile.
$("#eidt_info").text("Edit your profile.");
}
});
};
});

现在撇开以上方法。如果你的主题的 comments.php 里面用户资料框类似这样：

<input type="text" name="author" id="author" value="" size="22" tabindex="1" />
<label for="author">Name:($req) echo " (required)"; ?></label>
<input class="text" type="text" name="email" id="email" value="" size="22" tabindex="2" />
<label for="email">Email:($req) echo " (required)"; ?></label>
<input class="text" type="text" name="url" id="url" value="" size="22" tabindex="3" />
<label for="url">Website:</label>

如果这个资料框没有被某个

标签包着的话，那么我们手动加一个，如果已有

标签包着，给他加个 id="author_info"。这里不手动增加 Welcome Back 部分，在浏览器不支持 javascript 的情况下，似乎意义不大，直接用 jQuery 增加这一部分就可以了（个人观点）：

$(document).ready(function() {

//判断用户名输入框的值是否有值
if ($("#author").val()) {

//把用户资料框赋值给info
var info = $("#author_info");

//把用户名赋值给author
var author = $("#author").val();

//隐藏用户资料框
info.hide();

//用户名样式为粗体，可要可不要
$("#author").css("fontWeight", "bold");

//在用户资料框

下的最开始插入"Welcome back. Edit your info."
info.before("

Welcome Back "+author+". Edit your info.

");

//把"edit your info."这个“编辑锚点”赋值给editInfo
var editInfo = $("#edit_info");

//点击“编辑锚点”editInfo
editInfo.click(function() {

//资料框弹出效果和关闭效果
info.animate({opacity: "toggle", height: "toggle"}, "slow");

//资料框弹出时锚点显示为Close.
if (editInfo.text() == "Edit your info.") {
$(this).text("Close.");
} else {

//隐藏后锚点显示为Edit your info.
$(this).text("Edit your info.");
}
});
}
});

其实就是比第一个方法在 comments.php 里面少见一个 Welcome back 的 php 语句。新手，欢迎探讨指教。
PS. 实现以上方法的前提是你在 header 或者 footer 加载了 jQuery 库。这里推荐用 jQuery 1.3.2，直接加载 google 的：

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)

用图片替换文字 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)

G-White 主题显示文章摘要

Alan — Mon, 19 Jul 2010 04:27:52 +0000

WordPress 显示文章摘要，其实在文章编辑器有个 more 标签，很多人都知道啦，昨天有位同学提到要像我那样的摘要，然后把 Read More 在文章右下角显示。

首先修改 index.php 让文章显示摘要，把 index.php 中的：

the_content('Read the rest of this entry »'); ?>

替换成如下（其中 600 为摘要文字符数）：

echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 600,"......"); ?>

这样就可以不用在写文章的时候手动添加 more 标签了，不过这样的方法，图片会被直接无视，链接也只会显示成不能点击的文字。

接下来增加在文章右下角增加 Read More 链接。
找到：

在其下面加入：

接下来修改样式表，打开 style.css，在下面增加：

.read_more {
background: url(images/read_more.png) no-repeat 0 3px;
float: right;
padding: 0 0 0 20px;
}

这里提供个 read_more.png，当然你可以自己找个图片代替（请放到 G-White 下的 images 文件夹）。

PS. 看会之前的一些评论才知道（感谢 shuxin 同学），一直有两个错误没修改过来，comments.php 这个文件有两个错误：
1、行 77，Webseite (Optional)，其中，webseite 应该改成 website。
2、行 101

里面的 value 的值要加一个空格即改成 value=" "，否则在 IE 中，显示“提交查询”，就与按钮背景图有冲突了。

Wordpress Theme G-White 3.0 (156)
DarkLight 和 G-White 主题的图片透明效果和超链接背景 (23)
WordPress 主题 G-White 更新到 Ver 2.4 (105)
WordPress Theme: G-White 2.0 (123)
Wordpress Theme: Optimus+ (53)
Wordpress 主题 aSide 出售 (140)

WordPress 主题 G-White 更新到 Ver 2.4

Alan — Sat, 03 Jul 2010 03:59:28 +0000

G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现这个主题最后一次更新是在 09 年 9 月份，原来已经过了这么久了，之前说过要更新的东西似乎有些忘掉了，(-_-); 这次修改的东西也不多：

Categories 增加子菜单样式，如果分类含有子分类的话，现在可以正常显示，鼠标滑过显示。
Header 的页面 Navigation 稍作修改，原来当 Navigation 有点多的时候，会下滑，样式改变了，稍作修正，下滑后不影响外观。
有童鞋反应需要显示文章的年份，于是在单篇文章中加入年份显示
上篇文章提到的随机文章问题，当然也修改了
其他一些样式小修小改，不提也罢

修改不多，也混了一个 Verson，呵呵。

演示：Demo

下载 G-White 2.4

Wordpress Theme G-White 3.0 (156)
DarkLight 和 G-White 主题的图片透明效果和超链接背景 (23)
G-White 主题显示文章摘要 (25)
WordPress Theme: G-White 2.0 (123)
Wordpress Theme: Optimus+ (53)
Wordpress 主题 aSide 出售 (140)