对WordPress默认主题Twenty Ten修改记录

换来换去,还是WordPress自带的Twenty Ten主题强大,但是它对中文支持不是很友好,同时还有很多方面需求做适当的微调。由于该主题是官方自带的,所以怕到时升级WordPress自动把Twenty Ten文件履盖,于是有了本文。本文主要是记录本次对Twenty Ten修改的一次记录,方便以后升级WordPress后对Twenty Ten修改。主要修改内容:1、语言汉化;2、字体、间距、增加雅黑;3、菜单、背景、Logo的增加或修改;4、相应插件及广告代码的安装;5、特色图像的首页调用;6、其它的一些细节调整;等等内容,希望本次的修改记录对大家有所提示。

1、语言汉化
Twenty Ten主题默认是英文的,由于阅读习惯,所以我就翻译成中文了。关于语言包的汉化,这里有一个详细的教程:“WordPress 语言文件.po .pot和.mo简介及汉化教程”。而Twenty Ten的语言包pot文件放在:“wp-content/themes/twentyten/languages”位置,文件名为:“twentyten.pot”。我们需要做的就是把这个文件编译成po和mo格式的文件。然后把得到的po和mo格式的文件名修改为zh_CN.mo和zh_CN.po,把这两个文件上传到:“wp-content/themes/twentyten/languages”既可。如果你的博客后台是简体中文的,那你的前台也会是自动简体中文了。

2、字体、间距、增加雅黑
由于默认主题Twenty Ten 1.3用的是英文的字体大小,对于咱们中文就看着不爽,太大了,就来改改字体的大小。通过编辑style.css,找到在注释/*=Content*/下面的代码(部分)。
这是文章正文的字体设置
#content,
#content input,
#content textarea
{
color: #333; //字体的颜色,我看默认的看着不错,想改就该吧
font-size: 16px; //改成font-size: 14px,大多数网站字体都是14px
line-height: 24px; //文章行间距24太大了,自己看着改
}

这是日志标题字体,根据自己情况改
#content .entry-title
{
color: #000;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
margin-bottom: 0;
}

下面改改字体
找到注释/*=Fonts*/下的代码(部分),就像下面的以“font-family:”开头的就是设置字体类型了,第一个就是默认的,我把所有的都设置为微软雅黑了,
.pingback a.url {
font-family: 微软雅黑, "Times New Roman", serif;}
.wp-caption-text {
font-family: "微软雅黑",Helvetica Neue, Arial,Helvetica, "Nimbus Sans L", sans-serif;}
input[type=submit] {
font-family: "微软雅黑",Helvetica Neue, Arial,Helvetica, "Nimbus Sans L", sans-serif;}
pre {
font-family: "微软雅黑",Courier 10 Pitch, Courier,monospace;}
code {
font-family: "微软雅黑",Times New Roman,Monaco,Consolas, Andale Mono, "DejaVu Sans Mono", monospace;}

3、菜单、背景、Logo的增加或修改
启用“Twenty Ten”主题后,在后台的外观下拉选择中就会有“背景”和”顶部”两个选项。背景就是对博客背景的调试。你选一些好看的背景图片,然后在背影选项中上传既可,不过建议背景图片尽量小哟。而顶部就是对博客顶部的图像进行设置,可以固定某一些图片,也可以多张图片滚动显示。
而顶部菜单,还是老方法在“外观”–”菜单”里设置。

4、相应插件及广告代码的安装
插件和广告代码的安装就太个性化了,所以就不在这里公布。

5、首页特色图像调用
该主题支持首页特色图像调用,直接在loop.php文件相应的位置插入调用代码既可。本人博客没有安装代码显示插件,有谁可以推荐一个好的并且简单易用的。现在就暂时截图告诉大家方法吧。

CSS文件在最后加入以下代码:
.thumbnail {float:left; border-radius:3px; border:1px solid #ccc; background:#f9f9f9; box-shadow:1px 1px 2px #d3d3d3; padding:4px; margin-right: 12px;}--对于图片框框的一些限制
.thumbnail img {display:block;}--放鼠标到图片时的边框色
.thumbnail:hover {background:#333; border-color:#222;}

特色图像的显示效果就如本博客一样,呵呵,还漂亮吧。

6、其它的一些细节调整
1)左栏扩宽到250px,在CSS做适当修改:
#container 的margin: 0 -240px 0 0; 改为margin: 0 -250px 0 0;
#primary, #secondary 的width改为250px;
2)文章排版:两端对齐
.entry-content,
.entry-summary {
clear: both;
padding: 12px 0 0 0;
}

把CSS文件中的以上代码修改成
.entry-content,
.entry-summary {
text-align: justify;
clear: both;
padding: 12px 0 0 0;
}

本文只为修改记录存档,希望对你有所帮助,如果需要主题Twenty Ten的简体中文包,可以留下Email,我发给大家。


转载请注明转载自:佐仔志本文链接地址: http://www.jinbo123.com/2509.html
订阅本站:http://www.jinbo123.com/feed投稿联系:huangjb.gz[at]gmail.com

文章推荐:

About 佐仔

关注IT、创业、销售、摄影、时尚、政府、艺术、程序、文学、生活等内容。
This entry was posted in 学习笔记 and tagged , , . Bookmark the permalink.

8 Responses to 对WordPress默认主题Twenty Ten修改记录

  1. 小不点 says:

    我想要Twenty ten1.3的主题包,昨天升级了一下。

  2. 夜空 says:

    没有你以前的好看。。。

  3. mrchun says:

    改的很大气,麻烦博主发我一份

  4. ailailei says:

    这模板大方简约,和官方模板很相似,不过好看多了。

    • 佐仔 says:

      这也是官方自带的模板 ,只不过本人稍做修改及调整, 并且独立起来 ,不影响以后的升级而已.你也可以试试.呵呵 谢谢.

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>