对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,我发给大家。

对WordPress默认主题Twenty Ten修改记录》有19个想法

  1. 小雨

    能向你请教一下如何把wordpress的主题Twenty Ten你首页把全部文章调用变成摘要调用?如果可以给我回邮件带上你q号可以么谢谢你

    回复
  2. 豆丫

    第一次用wordpress,挑选半天后还是觉得这个主题最好;

    之前唯独对字体、间距不满意;参考博主的文章,一次性修改好了,非常感谢!

    回复
    1. 佐仔 文章作者

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

      回复
        1. 佐仔 文章作者

          < ?php the_content(__(’(more…)’)); ?>或者< ?php the_content(); ?>

          2、将它修改为:

          < ?php if(!is_single()) { the_excerpt(); } else { the_content(__(’(more…)’));//或者
          } ?>

          回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注