WordPress主题Manifest修改实录

by noz

Manifest主题是我目前正在用的博客主题,作为一款Minimalism类的主题,它简洁干净(Simple & Clean),非常适合随心所欲的书写文字,不愧是Jim Barraud的作品。

Roamlog翻译了它的1.0版本的介绍,我就引用一下:

主要特点有:

  • Valid XHTML
  • Microformat support
  • 404 页面, 内置“Recent Articles”
  • 存档页面,支持页, 分类, 标签
  • Links 页面
  • 支持 Google AD
  • 不支持 IE6

看上去很舒服的一款主题, 推荐一下, 另外, 搜索框是在最下面, 在 footer 部分还支持添加一些社会化网络(其它的也可)的链接, 可以自行添加.

实际上,作者已经发布了这个主题的1.1版本,可以在其主页看到。1.1的新特征有:

  • 层叠评论。
  • 支持Wordpress画廊。
  • 支持在页面内评论
  • 导航栏中一级子页面支持。

一般来说,基于以下两方面原因,我们通常需要对Wordpress主题进行一定的修改:

  1. 由于英文主题针对英文字母而优化,对中文的支持不好,往往字体偏小。而且会缺少中文字体集(font-family),我们必须进行添加。
  2. 主题中的某些功能不适合,需要修改。

修改的过程不是一蹴而就的,需要不断磨合,在使用的过程中发现问题,及时修改。所以我会在这里记录修改的过程:备份并且分享。

——–2011.11.01——–

由于原主题没有中文字体。试用各种字体后我决定使用仿宋作为主字体。这需要在css中添加:”仿宋”, “华文仿宋”, “宋体”。

1
2
3
4
5
body{
background: #fff;
font: 62.5% palatino, "times new roman", "仿宋", "华文仿宋", "宋体", serif;
color: #333;
}

原主题站点描述,即“非常悠逸”感觉有点儿小,遂修改:font-size: 1.2em→1.6em。

1
2
3
4
5
6
7
8
#siteDescription{
font-size: 1.6em;
margin: 10px auto 60px;
width: 400px;
padding: 11px 0 13px;
color: #999;
font-style: italic;
}

原主题正文字体略小,添加:font-size:1.1em:

1
2
3
4
5
.entry-content{
font-size:1.11em;
margin-top: 24px;
text-align: left;
}

——–2011.11.02——–

使用Lifestream插件后其页面自带样式与这个主题不太协调,于是添加:lifestream页面样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#lifestream li{
font-size:10px}
#lifestream p{
margin-bottom:0.1em}
#lifestream img{
vertical-align:text-bottom}
#lifestream h2{
border-bottom: 1px solid #CCCCCC;
color: #333333;
font-family: constantia,palatino,times new roman;
font-size: 1.6em;
font-weight: normal;
margin: 0 0 5px;
text-align: left;
text-transform: uppercase;
}

——–2011.11.11——–

将正文中的图片缩放至宽度500px,高度为auto。添加:

1
2
3
4
5
.entry-content img{
max-width:500px;
width: expression(this.width > 500 ? “500px: true);
height:auto;
}

——–2011.11.12——–

由于不明原因,Lifestream页面样式会自动改变,变得字体非常小。继续修改Lifestream样式。添加:

1
2
3
table.lifestream{
font-size: 14px;
}

由于不明原因,Lifestream页面样式改变后会在底部添加sidebar,将其屏蔽。添加:

1
2
3
#sidebar {
display:none !important;
}

——–2011.11.13——–

blockquote中字体太大。修改:font-size: 1.1em→0.9em

1
2
3
4
5
#coreContent .entry-content blockquote p{
font-size: 0.9em;
line-height: 1.3em;
color: #7D7D7D;
}

blockquote中列表字体太大。添加:

1
2
3
4
#coreContent .entry-content blockquote li{
font-size: 0.9em;
color: #7D7D7D;
}

lifestream的bug:页面加载时请求lifestream.js,由于它也没什么作用,将其屏蔽。删除lifestream插件中plugins/lifestream/inc/core.php中的

1
echo '<script type="text/javascript" src="'.$this->path.'/lifestream.js"></script>';

wp-code-highlight插件形成的pre标签太向下,不协调。修改代码高亮插件/wp-code-highlight/css/wp-code-highlight.css的margin值为:-20px 0 20px 0

1
2
3
4
5
6
7
8
9
pre.prettyprint{
border:1px solid #ccc;
font-size:12.3px;
line-height:16px;
margin:-20px 0 20px 0;
padding:2px 7px;
overflow:auto;
width:98%;
}

——–2011.11.15——–

应对lifestream的bug,继续修改/wp-lifestream2/themes/default/media/lifestream.css/wp-lifestream2/themes/boxy/media/lifestream.css

1
2
3
4
table.lifestream td {
border-bottom: 1px dotted #333333;
padding: 15px 0;
}

——–2011.11.17——–

用CodeColorer替换wp-code-highlight。修CodeColorer的上下位移。找到/plugins/codecolorer/codecolorer.css

1
2
3
4
5
.codecolorer-container {
margin-top: 0;
margin-bottom: 20px;
text-align: left;
}

修改CodeColorer的Dawn主题边框和底色:

1
2
3
4
5
.codecolorer-container {
margin-top:-20px;
margin-bottom: 20px;
text-align: left;
}

边框样式:

1
2
3
.codecolorer-container {
border: 1px dashed #9F9F9F;
}

底色:

1
2
3
4
.dawn, .dawn .codecolorer {
color: #080808;
background-color: #FFFFFF;
}

参照此文,开启CodeColorer插件的TinyMCE,在/plugins/CodeColorer/中修改CodeColorer.php,取消以下语句的注释

1
2
3
4
5
6
// TinyMCE
// temporarily disabled
if (get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', array('CodeColorerLoader', 'AddTinyMCEPlugin'));
add_filter('mce_buttons', array('CodeColorerLoader', 'RegisterTinyMCEButton'));
}

禁止点击CodeColorer按钮时在代码两端插入<pre></pre>标签。修改/plugins/codecolorer/js/tinymce_dialog.js,将:

1
2
3
4
5
if (f.inline.checked) {
h = '<span>' + h + '</span>';
} else {
h = '<pre>' + h + '</pre>';
}

修改为:

1
2
3
4
5
if (f.inline.checked) {
h = '<span>' + h + '</span>';
} else {
h = h ;
}

在TinyMCE按钮中添加更多的默认语言。查看/plugins/codecolorer/js/dialog.html,可以看到如下代码:

1
2
3
4
5
6
7
8
9
<option value="">Default</option>
<option value="cs">C#</option>
<option value="cpp">C++</option>
<option value="js">JavaScript</option>
<option value="html">HTML</option>
<option value="php">PHP</option>
<option value="ruby">Ruby</option>
<option value="rails">Ruby on Rails</option>
<option value="xml">XML</option>

按照此格式添加即可。

——–2011.11.18——–

#siteDescription右侧加入RSS订阅图标。

先在header.php中修改<div id="siteDescription">加入<div id="dcptText"><div id="rss">两个div,分别代表描述文字和RSS图标。

1
2
3
4
5
6
7
8
9
10
<div id="siteDescription">
<div id="dcptText">
<?php bloginfo('description'); ?>
</div>
<div id="rss">
<a href="http://feed.veryue.com" >
<img src="http://blog.veryue.com/rss.png" alt="RSS">
</a>
</div>
</div>

接下来,修改CSS文件。现将RSS图片放在博客根目录下。在CSS文件底部添加:

1
2
3
4
5
6
#rss {
float: left;
opacity: 0.2;
margin-left: 6px;
margin-top: 5px;
}
1
2
3
#rss:hover {
opacity: 1;
}
1
2
3
4
5
#dcptText {
float: left;
margin-left: 200px;
padding-top: 3px;
}

由于改变了<div id="siteDescription">,周围的留白有了变化,需要重新调整。

修改宽度,400px→500px:

1
2
3
4
5
6
7
8
#siteDescription{
font-size: 1.6em;
margin: 10px auto 60px;
width: 500px;
padding: 11px 0 13px;
color: #999;
font-style: italic;
}

修改margin-top:-50px→-35px:

1
2
3
4
5
6
.single.hentry{
border-top: 1px solid #efefef;
margin-top: -35px;
border-bottom: none;
padding-bottom: 0;
}

修改margin-top:-50px→-35px:

1
2
3
#archives{
margin-top: -35px;
}

——–2011.11.18——–

去掉lifestream页面中小图标的边框,修改/wp-lifestream2/themes/default/media/lifestream.css

1
2
3
img.lifestream-icon {
border: medium none !important;
}

——–2011.11.19——–

使图片及其标题居中。添加:

1
2
3
4
.entry-content .wp-caption.aligncenter {
text-align: center;
width: 500px !important;
}

修改p.wp-caption-text

1
2
3
4
5
6
7
#coreContent .entry-content p.wp-caption-text{
font-size: 1.1em;
font-style: italic;
color: #666;
margin-bottom: 20px;
text-align: center;
}

——–2011.11.20——–

修改段后距离从1.7em到1em:

1
2
3
4
5
6
7
8
9
#coreContent p,
#coreContent li,
#coreContent dd{
margin-bottom: 1em;
font-size: 1.4em;
line-height: 1.5em;
color: #333;
text-align: justify;
}

以上修改未注明的为修改style.css文件。

另外,Linmumu提供了Manifest的Typecho移植版,可以参考。