Alan's World » Wordpress Theme http://www.alanoy.com Do what you want to do Mon, 06 Sep 2010 03:41:53 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 WordPress主题：DarkLight 3.0 http://www.alanoy.com/wordpress-theme-darklight-3/ http://www.alanoy.com/wordpress-theme-darklight-3/#comments Sat, 28 Aug 2010 11:04:12 +0000 Alan http://www.alanoy.com/?p=230 当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Ten 真是一个强大的主题，DarkLight 3.0 主题的功能基本与其保持一致。外观上基本保持 DarkLight 原有风格，换了些小图标，用了 Sprites 集成图片，技术一般，有点乱，不过不影响主题使用就是了。下面来个图文并茂的介绍。

首先 Header 部分：

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

Header Nav Menu

其次是内容部分：

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

Mini Pagenavi

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

Posts Navigation

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

Related Posts

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

About the Author

第三是评论部分：

首先是评论样式，重新设计了评论样式，奇数评论层跟偶数层样式不同，然后内嵌回复部分使用左右对话框样式，依然只支持嵌套 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 的也搞掉吧。

  1. 2010-9-4：增加回复邮件通知功能，使用 willin 的代码。
  2. 2010-9-3：修正在搜索不到内容时，正文中显示两个搜索框的问题。
  3. 2010-9-2：给正文增加 overflow: hidden 属性，避免溢出情况；修正“您的评论正在等待审核”评论的位置。
  4. 2010-08-29 早上更新：居然忘记测试 404 页面，稍微修改了下，并且增加一个说明文件。
  5. 2010-08-29 下午更新：修改 IE6、IE7 下鼠标滑过文章标题时，文章背景线显示不全的问题；修改 IE6 下，鼠标滑过文章内链接时，文章分割线下滑问题，IE 实在太囧了；修改在回复评论时，第二层回复者名字的显示位置；修改成功提交评论后，增加提示评论成功的句子的左边距，保持美感，汗。

演示：Live Demo
下载 WordPress 主题：DarkLight 3.0

Related Posts

© Alan for Alan's World, 2010. | Permalink | 61 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , ,

]]> http://www.alanoy.com/wordpress-theme-darklight-3/feed/ 61 DarkLight和G-White主题的图片透明效果和超链接背景 http://www.alanoy.com/opacity-and-links-background-of-images-of-darklight-and-g-white-theme/ http://www.alanoy.com/opacity-and-links-background-of-images-of-darklight-and-g-white-theme/#comments Thu, 19 Aug 2010 09:26:55 +0000 Alan http://www.alanoy.com/?p=199 DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如何去掉该效果，个人喜好不能加于公布的主题中，以后要注意，去掉的方法就是，在 style.css 中找到 .entrybody img，删除里面的

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

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

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

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

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

Related Posts

© Alan for Alan's World, 2010. | Permalink | 13 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/opacity-and-links-background-of-images-of-darklight-and-g-white-theme/feed/ 13 关于DarkLight主题新版本的开发 http://www.alanoy.com/about-new-darklight-theme/ http://www.alanoy.com/about-new-darklight-theme/#comments Sun, 15 Aug 2010 02:18:23 +0000 Alan http://www.alanoy.com/%e5%85%b3%e4%ba%8edarklight%e4%b8%bb%e9%a2%98%e6%96%b0%e7%89%88%e6%9c%ac%e7%9a%84%e5%bc%80%e5%8f%91/ 在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结构和 CSS 代码还有一些不合理和冗余的地方，结构方面已改好，正在重新写 CSS 代码。但受到 Jinwen 这篇文章的影响，我也有意尝试用 WordPress 官方主题进行开发，毕竟我的那些代码是从 WordPress 2.5 用到现在的，需要全面更新一下了，所以有了把 DarkLight 和 G-White 3.0 化的想法，即在 Twenty Ten 主题结构基础上的更新开发。

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

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

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

Related Posts

© Alan for Alan's World, 2010. | Permalink | 18 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/about-new-darklight-theme/feed/ 18 用图片替换文字Logo http://www.alanoy.com/use-photo-to-replace-the-text-logo/ http://www.alanoy.com/use-photo-to-replace-the-text-logo/#comments Thu, 22 Jul 2010 03:32:13 +0000 Alan http://www.alanoy.com/?p=122 用自制的图片来做博客的 Logo 相对文字 Logo 来说更美观、更多自定义性，鉴于 DarkLight 和 G-White 都没有这样设定，又有同学有需求，所以有此文。

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

1
2
3
4
5
<div id="header">
    <h1>
        <a title="<?php bloginfo('name'); ?>" href="<?php bloginfo('siteurl'); ?>"><?php  bloginfo('name'); ?></a>
    </h1>
</div>

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

1
2
3
4
#header h1 {
    padding: 0;
    margin: 0;
}

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

1
2
3
4
5
6
7
8
#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 跟页面顶部的间距，看你自己需求而定，不用间开就直接删除吧*/
}

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

Related Posts

© Alan for Alan's World, 2010. | Permalink | 19 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: ,

]]> http://www.alanoy.com/use-photo-to-replace-the-text-logo/feed/ 19 WordPress主题G-White更新到Ver 2.4 http://www.alanoy.com/updated-g-whtie-wordpress-theme-to-verson-2-4/ http://www.alanoy.com/updated-g-whtie-wordpress-theme-to-verson-2-4/#comments Sat, 03 Jul 2010 03:59:28 +0000 Alan http://www.alanoy.com/?p=110 G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现这个主题最后一次更新是在 09 年 9 月份，原来已经过了这么久了，之前说过要更新的东西似乎有些忘掉了，(-_-); 这次修改的东西也不多：

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

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

演示：Demo

下载 G-White 2.4

Related Posts

© Alan for Alan's World, 2010. | Permalink | 89 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/updated-g-whtie-wordpress-theme-to-verson-2-4/feed/ 89 升级WordPress 3.0后随机文章显示不了 http://www.alanoy.com/fix-radmo-post-problem-fater-update-to-wordpress-3/ http://www.alanoy.com/fix-radmo-post-problem-fater-update-to-wordpress-3/#comments Sun, 27 Jun 2010 10:49:43 +0000 Alan http://www.alanoy.com/?p=108 消失了很久了，最近升级到 WordPress 3.0 后，发现 DarkLight 和 G-White 主题的侧边栏中 Radom Post 一项不显示了，使用 DarkLight 和 G-White 主题的同学可以做如下修改，打开 sidebar.php 找到 <h2 id="radom_posts">RADOM POSTS</h2>，把下面的 ul 标签中的内容替换为：

1
2
3
4
5
6
<?php
    query_posts(array('orderby' => 'rand', 'showposts' => 10)); //需要显示的文章数量
    if (have_posts()) :
    while (have_posts()) : the_post();?>
    <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endwhile;endif; ?>

搞定！

Related Posts

  • Wordpress主题：DarkLight 3.0 (61)
    当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Te...
  • 关于DarkLight主题新版本的开发 (18)
    在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结...
  • WordPress主题G-White更新到Ver 2.4 (89)
    G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现...
  • Wordpress Theme: G-White 2.0 (116)
    G-White 是自己做的一个比较久远的主题了，跟 DarkLight 一样，这次也直接跳到 Ver...
  • DarkLight 2.3 (107)
    这两天开始动手修改 G-White 主题，很多东西修改，还是比较麻烦的，费了不少时间，然后在各浏览器...
  • DarkLight 2.0 (128)
    DarkLight 2.0 终于如期发布，上个版本 1.04 直接跳到 2.0，改了挺多东西的，优化...

© Alan for Alan's World, 2010. | Permalink | 11 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , ,

]]> http://www.alanoy.com/fix-radmo-post-problem-fater-update-to-wordpress-3/feed/ 11 WordPress Theme: G-White 2.0 http://www.alanoy.com/wordpress-theme-g-white-2-2/ http://www.alanoy.com/wordpress-theme-g-white-2-2/#comments Sun, 01 Nov 2009 15:41:26 +0000 Alan http://www.alanoy.com/?p=40 G-White 是自己做的一个比较久远的主题了，跟 DarkLight 一样，这次也直接跳到 Verson 2.0，两者的代码也是大同小异，主要就是外观上和部分细节的不同而已，自己感觉是还有可以继续美化完善的地方，在 JS 技术方面在下不懂，所以不会有太多这方面的效果，这是我的主题没什么特别了亮点的地方吧。

这次页面导航加入下拉菜单样式了（简陋的）；继续忽略子分类在侧边栏的样式问题；如果说还有什么特别需要说明的地方的话，就是嵌套评论在 IE6 下的继续与众不同和不那么完美了（老生常谈，非常厌恶）；然后是跟 DarkLight 基本一样的说明了（For English Usage, please read the “Read Before Use” file in the g-white_2 folder）：

  • 只支持 WordPress 2.8 以上版本，相比 G-White 1.0，仅仅自带了一个 Links 模板，删去了 Guestbook 和 Archives 模板；G-White 2.0 已在 Firefox 3.5，Opera 10，Chrome 3，IE6，IE7，IE8 下测试，可正常使用（IE6 下评论样式与其他浏览器样式有些不一样，老生常谈了，如果您喜欢用 IE，建议用 IE8）
  • 支持嵌套回复和评论分页，这两个都需要在后台的评论设置开启，嵌套回复目前只支持 3 层，目前未考虑增加更多层次的样式。
  • 评论楼层显示楼层序号，支持 Ajax 评论，自动隐藏老用户资料框，支持 Ctrl+Enter 发表留言
  • 本主题不使用任何插件也可以正常显示，并且已经内嵌 WP-Pagenavi 插件，所以如果您启用了该插件，请在后台将改插件禁用。
  • 主题支持 Widget，但还是那句话，强烈建议使用 Sidebar.php，自定义性更强。
  • 增加导航页面下拉菜单样式
  • 主题可能存在本人未发现的 Bug，如果您使用了本主题并发现 Bug，欢迎联系我，谢谢！

- 11/7 更新 G-White 2.2：修正 Search.php 的一个小错误；修正提交第一个回复评论后的样式错误。
-11/30 更新 G-White 2.3：修正搜索结果页面和分类页面下 Pagenavi 不能显示的问题。
-12/14 更新：把文章标题显示 Article-link(Permalink) 换成显示原标题

预览：Preview 1 | Preview 2
演示：Live Demo

下载 G-White 2.4

Related Posts

© Alan for Alan's World, 2009. | Permalink | 116 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , ,

]]> http://www.alanoy.com/wordpress-theme-g-white-2-2/feed/ 116 DarkLight 2.3 http://www.alanoy.com/darklight-2-3/ http://www.alanoy.com/darklight-2-3/#comments Sun, 25 Oct 2009 19:32:52 +0000 Alan http://www.alanoy.com/?p=30 这两天开始动手修改 G-White 主题，很多东西修改，还是比较麻烦的，费了不少时间，然后在各浏览器下调试的时候，发现 IE7 下有挺多细节问题要修正的，于是有了这篇 DarkLight 更新的文章，其实部分 DarkLight 2.0 的部分 Bug (根据用户的反馈)，已于 10/18 修正并更新，今天主要就是处理了 IE7 下的问题，当然应该还有一些其他的细节问题我没发现，还是需要大家继续反馈。Change Log 如下：

- 9/20 更新：修改在无评论时 sidebar 和 footer 字体变大的 Bug。
- 10/18 更新：修改侧边栏样式，修正使用 Widget 工具时“标签云”样式，当添加工具时，侧边栏各个工具样式保持一致；修改嵌套评论“链接”的颜色；增加下拉菜单导航样式，当主页面包含子页面时，鼠标经过会出现下拉菜单(IE6 无视)。
- 10/26 更新：修正 IE7 下 Comment Author 居左问题；修正 IE7 下嵌套评论间距过大和嵌套评论内容高度过高问题；修正导航栏下拉菜单在 IE7 下异位问题。修正留言后 Leave a comment 这个链接变成 <a href=”#commentform”>Leave a comment</a> 的 Bug，我把这个链接转移位置了。
- 12/14 更新：把文章标题显示 Article-link(Permalink) 换成显示原标题

预览：Preview 1 | Preview 2
演示：Live Demo

下载 DarkLight 2.3

Related Posts

© Alan for Alan's World, 2009. | Permalink | 107 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , ,

]]> http://www.alanoy.com/darklight-2-3/feed/ 107 DarkLight 2.0 http://www.alanoy.com/darklight-2/ http://www.alanoy.com/darklight-2/#comments Sun, 20 Sep 2009 03:22:55 +0000 Alan http://www.alanoy.com/?p=11 DarkLight 2.0 终于如期发布，上个版本 1.04 直接跳到 2.0，改了挺多东西的，优化了代码，外观上变化不大。DarkLight 2.0 只支持 WordPress 2.8+，这次没有必装的插件也可以正常运行了，支持嵌套回复，支持 Ajax 评论，支持评论分页，显示楼层序号，内嵌 WP-Pagenavi，支持 Widget……在 Firefox 3.5，Opera 10，Chrome 3 及 IE6 下测试正常，IE6 下的嵌套评论模式跟其他浏览器有点不一样，在此建议大家去弄个 IE6 必死吧，哈哈。

PS，发布出来的 DarkLight 2.0 会有部分样式跟我自己使用的主题不一样的，比如 Header 导航和 Sidebar 上的标题字体，因为每个人的使用习惯和博客内容跟我的一样，所以我这种太过自定义的样式不会放在发布版本里面。不多说，看具体说明（For English Usage, please read the “Read Before Use” file in the darklight_2 folder）：

  • 只支持 WordPress 2.8 以上版本，相比 DarkLight 1.0，仅仅自带了一个 Links 模板，删去了 Guestbook 和 Archives 模板；DarkLight 2.0 已在 Firefox 3.5，Opera 10，Chrome 3，IE6 下测试，可正常使用（不知道会不会有些问题没发现，如果您使用过程中发现问题，欢迎联系本人，谢谢！）
  • 支持嵌套回复和评论分页，这两个都需要在后台的评论设置开启，嵌套回复目前只支持 3 层，目前未考虑增加更多层次的样式。
  • 评论楼层显示楼层序号，支持 Ajax 评论，自动隐藏老用户资料框，支持 Ctrl+Enter 发表留言
  • 本主题不使用任何插件也可以正常显示，并且已经内嵌 WP-Pagenavi 插件，所以如果您启用了该插件，请在后台将改插件禁用。
  • 主题支持 Widget，但还是那句话，强烈建议使用 Sidebar.php，自定义性更强。
  • 主题可能存在本人未发现的 Bug，如果您使用了本主题并发现 Bug，欢迎联系我，谢谢！

- 9/20 更新：修改在无评论时 sidebar 和 footer 字体变大的 Bug。
- 10/18 更新：修改侧边栏样式，修正使用 Widget 工具时“标签云”样式；修改嵌套评论“链接”的颜色；增加下拉菜单导航样式，当主页面包含子页面时，鼠标经过会出现下拉菜单(IE6 无视)。

预览：Preview 1 | Preview 2
演示：Live Demo

下载 DarkLight 2.0

Related Posts

© Alan for Alan's World, 2009. | Permalink | 128 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , ,

]]> http://www.alanoy.com/darklight-2/feed/ 128 New Born http://www.alanoy.com/new-born/ http://www.alanoy.com/new-born/#comments Fri, 18 Sep 2009 14:41:29 +0000 Alan http://www.alanoy.com/?p=3 A new start for Alan’s World，以前的文章全部删了，这在从 PJ Blog 转到 WordPress 的时候也发生过，这个诞生三年多的 Blog 如今又像新生的一样，Orz。或许是一时兴起做了这个有点”变态”的决定，不过想想 Blog 里的大部分文章都是分享系统美化的，真正自己写的相对来说，太少了，虽然收集分享也花了功夫，但在现在看来已无多大意义，这样的 Post 方式自己都觉得很讨厌了，所以才有了这样的想法，而且有了挺久了，只是一直没时间去做这一步，最近抽空把 DarkLight 做了改进，同时把 Blog 给 Wipe 了。之后呢？还是要多点原创，多点亲手写的东西。希望对得起订阅的朋友，哈哈。

说到 DarkLight 主题，以前的版本问题多多（这里还是要感谢使用 DarkLight 主题并做出反馈的朋友，才能发现这么多问题），尤其是 php 文件的问题，新版本已经做出许多改进，主题样式上也有部分改变，DarkLight 2.0 不久后应该能发布，我现在这个样式基本上就是 2.0 的样子了，不过还会有点改变的。

PS. 新开始的第一篇文竟是用 WordPress App for Blackberry 写的，这个软件很不错，希望功能能越来越强大。

Related Posts

© Alan for Alan's World, 2009. | Permalink | 26 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/new-born/feed/ 26