当有了计划,马上就想去完成它,但我也没想到这么快,大概主题结构的折腾少了的缘故吧。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








日志中 含 长代码 会 拉长 超出 正常日志宽度哦~!
@kelvin: 谢谢反馈,马上去改进一下
这个主题很不错。我有个疑问,我觉得正文的行距和段距太大了,怎么调小些呢?
@realtjb: 正文段距可以在 style.css 找到
#content p, #content ul, #content ol, #content dd, #content pre, #content hr,把margin-bottom设置小点,看你自己喜好;行距的话,找到#content, #content input, #content textarea {},在它下面新写一个#content {line-height: xxx%},其中 xxx% 就是控制行距的,也是按你自己的喜好来吧,注意比上面的 180% 要小我一致用你的主题。无论哪一款,都十分漂亮。我希望你把现在这款主题给我一份。谢谢。
@untitled: 汗,还跟这个主题的名字一样了,主题以后会分享的,现在还不够完善,而且里面有太多个人因素的东西了。不好意思!
不错的主题,回头用上试试。
作者作息栏怎么去掉?看着别扭。。谢谢了。。
就是文章下面的作者信息。
@伊索工作室: 最简单不用删除代码的方法就是,在后台把你的个人描述去掉。说明里面已经说了。
貌似侧边栏里面增加小工具后,默认的侧边栏就没了,还要重新设置。JQuery的那个分类目录效果也没了。
@nova:
呃,不好意思啊,我又研究了一下,发现没问题,嘿嘿
文章插入图片.边距超出
@a crow:
是在win7 +Maxthon.chrome.IE8 下回出現 圖片超出背景邊框.
winxp+ie6 正常
http://www.covst.com/readme
@a crow: 更新了。
PS,请保留 footer 作者信息,不用一拿到主题就修改作者信息吧?尊重下别人的劳动,谢谢!
@a crow:
OK 好 主题更新包在那?
@a crow: 主题最新下载到主题页面下就好了。
就是博主现在用的主题吗?颜色好像不一样。。
你好!一直从1.0开始就用你的这款主题,非常的喜欢,我的博客是记录儿子成长的,所以里面有一些相片尺寸比较大,我想将这个版本改为单栏的,侧边栏的内容就放在FOOT区域,可对CSS不太精通,改来改去也无法改好,你能给我一些帮助吗?谢谢了!我的邮箱:284419912@qq.com
个人感觉置顶文章的样式不太好看。希望下次更新能改进。。
@伊索工作室: 谢谢你的建议,但是每个人的使用习惯不同,很难去怎样改进,只能靠用户自己修改了。
可以提供相關文章的代碼嗎?
我不會寫。謝謝
@ㄚ原: 我用插件的,文中提到的,只是关于样式的。
请问侧边栏的小工具我如何控制呢?直接修改边栏模板么?
@jor: 你可以自行修改 sidebar.php,也可以在后台设置小工具。
还有个小小的要求,就是对404页面进行适当的SEO处理.返回主页,相关文章之类
@a crow: 我不懂 SEO,sorry
个人还是比较喜欢老版的字体,请问下如何修改标题字体呢
@alisa: 在 style.css 文件中找到
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6,把里面的 font-family 后面的字体第一个改成你想要的字体即可。我试过几个代码解决首页 分类列表页等 文章摘要问题.
请博主明示.有的文章太长,看着惹眼.
@a crow: 建议使用 more 标签
已经弄好了,非常感谢!我自己又将整个宽度改窄了一点,呵呵~~
3.0自定义导航,下拉菜单怎么怪怪的,在谷歌浏览器和opera都是一样的
@阿鼎: 一样?能说明白点吗?
@Alan: 就是顶部导航二级目录,甚至三级目录,下拉菜单样子有点怪,你可以看看!
@阿鼎: 没看出哪里怪哦?
你把邮箱给我 我把截图给你看
@阿鼎: alanoy11[at]gmail.com 谢了!
主题好赞啊。支持一个
无法实现二级菜单,是怎么回事呢?
@yoyoo: 你怎么设置的
@Alan:
我看主题介绍里说支持多级菜单,于是在“菜单”里增加了一个导航菜单,并把二级菜单向右拉变为一级菜单的二级菜单,但是在页面上显示不出来二级菜单。还需要增加其它设置么?我不是太懂技术的。
@yoyoo: 不用设置,就是拉,二级菜单拉到一级菜单的下面就行,我本地测试是没问题的哦,而且,这个代码是 wordpress 官方主题的代码,所以应该是没问题的
@Alan:
那真是是好怪,我也是这样做的,但是奇了怪了,不论是官方主题还是这个主题,都显示不出来二级菜单来,真是郁闷死我了。
我觉得你在用的这个主题,主楼层用黄绿色会不会好些,因为像25楼那样的reply,大片的深色挤在一起感觉怪怪的……
ps我是外行,我瞎说的……
@有点蓝: 谢谢你的建议,其实都是尽量浅色系的了,可能绿色稍微深了点,个人喜好吧。呵呵
不喜欢黑色和红色,极不适合阅读。
想修改下 日志输出 但是看了 loop.php 文件 是否可以 精简啊 看的 头大 不知道 改哪 好 ~! 大致看了下 难倒 后台可以选项吗? 貌似 没主题设置的地方呢。
@kelvin: 要改首页的日志输出还是哪方面的?后台选项有Widget设置选项和菜单设置选项。
@Alan: 嗯 ,我的日志都是全篇的 没有用 more 标签 ,所以想自己修改 缩略图 + 日志截断。 那个 loop.php 看的 头大了,位置是找到了 不过还几段没看明白
<?php if ( post_password_required() ) : ?>
<?php the_content(); ?>
<?php else : ?>
<?php
$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
if ( $images ) :
$total_images = count( $images );
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
?>
<div class="gallery-thumb">
<a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>
</div><!-- .gallery-thumb -->
<p><em><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ),
'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
$total_images
); ?></em></p>
<?php endif; ?>
<?php the_excerpt(); ?>
<?php endif; ?>
</div><!-- .entry-content -->
这段 是什么意思、?
@kelvin: 显示附件图片的
打开网站 日志的 插图 都 小小 一个方格 重新刷新下 有 正常显示了。其他人有这问题吗?
@kelvin: 那是网速问题吧
请问这个主题侧边栏如果添加自定义菜单的话css会消失~请问是什么问题呀
@太阁: 请重新下载,然后直接替换里面的 style.css 文件即可。已经修正该问题了,谢谢反馈!