中文化Revolution2的Church主题

一直想架一个自己的站点，放些自己的图片、关于css xhtml方面的东西。选来选去选了wordpress 来架站。一来wordpress自主性高，二来wordpress的主题也多，在其中选一个适合自己的相对比较容易。

听说了Revolution2的主题开源了，于是就选了church主题来做网站的主题。但是应用的时候发现了些问题。church主题是英文的，有些地方不方便中文的显示。

首先就是字体：church使用的是11号自己，所以要先把最小字体改成12号。然后将标题的字体修改成中文环境下比较好看的微软雅黑和黑体。

^?View Code CSS

1	font-family:"微软雅黑", "黑体", "Trebuchet MS", Arial, Helvetica, sans-serif;

第二：帖子间距。在原主题中，帖子列表中每个帖子之间的界限不是很清晰，所以我在列表的模板中添加一个< div class="postcell" / >:

^?View Code PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

< ?php /* Template Name: blog list */ ?>   < ?php get_header(); ?> <div id="content"> <div id="contentleft"> <div class="postarea">   < ?php if (have_posts()) : while (have_posts()) : the_post(); ?> <div class="postcell"> <h1><a href="<?php the_permalink() ?>" rel="bookmark">< ?php the_title(); ?></a></h1> <div class="date"> <div class="dateleft">   <span class="time">< ?php the_time('F j, Y'); ?></span> by < ?php the_author_posts_link(); ?> &nbsp;< ?php edit_post_link('(Edit)', '', ''); ?> Filed under < ?php the_category(', ') ?> </div> <div class="dateright">   <span class="comment">< ?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?></span> </div> </div>   < ?php the_content(__('Read more'));?> <div style="clear:both;"></div> <div class="postmeta2">   <span class="tags">Tags: < ?php the_tags('') ?></span> </div> </div>   < ?php endwhile; else: ?>   < ?php _e('Sorry, no posts matched your criteria.'); ?>   < ?php endif; ?>   < ?php posts_nav_link(' &#8212; ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?> </div> </div>   < ?php include(TEMPLATEPATH."/sidebar.php");?> </div>   <!-- The main column ends -->   < ?php get_footer(); ?>

css中添加:

^?View Code CSS

1	.postcell{padding:5px 0; border-top:medium double #eaeaea; margin:0;}

这样就可以用双线来分隔每一篇文章.

第三：左侧主区域过窄。由于church主题默认是右侧siderbar 有两列，所以左侧区域就显得有些窄，尤其是在文章内容有过多代码和较宽图片的时候就更明显。所以我就将详细文章页面的模板的siderbar的宽度冲300px改成170px。并将多出的150px加到左侧区域中：首先修改详细内容模板：
打开index.php 找到< div id="content" > 将其修改为：< div id="content" class="content_blog" >添加了class=content_blog和其他页面做区分 。
相应css如下：

^?View Code CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.content_blog #contentleft { width:740px;} .content_blog .postarea, .content_blog .breadcrumb, .content_blog .postmeta, .content_blog .adsense-post, .content_blog .blogConnBody, .content_blog .comments, .content_blog .date, .content_blog .breadcrumb, .content_blog #commentblock{ width:720px; clear:both;} .content_blog #homepagetop, .content_blog #homepagebottom, .content_blog .postarea, .content_blog .adsense-post, .content_blog .comments{ background-image:url(images/homepagetop_blog.gif)} .content_blog #sidebar { width:190px; } .content_blog .widgetarea{ width:170px;} .content_blog .adsense{ width:170px;}

第三：因为我将导航条中的搜索改成了中文，所以按照原来的样式按钮和输入框就不一样高了，为了保持美观我把这块的css也顺手修改了

^?View Code CSS

1 2 3 4 5 6 7 8 9 10

#navbarright input{ margin-top:0px; _margin-top:6px;} .inp_search{ border-top: 1px solid #DDDDDD; border-right: 1px solid #666666; border-left: 1px solid #DDDDDD; border-bottom: 1px solid #666666; height:18px; padding:1px 0 0 1px; width:190px; color:#333;}

第四：首页上显示的最新三条文章的缩略有时候不一样高，不是很美观。我在这个地方添加了个div，定了下高度，这样所有文章的的缩略就一样高了

^?View Code CSS

1 2 3 4 5 6

.newArtsblock{ border-bottom:1px dotted #94B1DF; margin-bottom:10px; clear:both; height:74px; overflow:hidden; }

第五：在左侧siderbar添加最新文章列表 在sideber.php中添加如下代码：

1
2
3
4
5

<div class="newsPostList">
<h2>最新文章</h2>
<ul>< ?php get_archives('postbypost','10','custom','
<li>',''); ?></ul>
</div>

并在添加为列表添加样式，因为sidebar上的分类，归档已经有列表的样式了，所以不用再单独为最新列表写css，只需要将最新列表的css和分类、归档的css合并就好了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.content_blog .widgetarea,
.content_blog .adsense,
.content_blog .newsPostList{
width:170px;
}
/*这里是合并了上面的代码*/
#sidebar ul li li ,
#sidebar ul li ul li,
#sidebar .newsPostList li{
	background: #FFFFFF url(images/icon.gif) no-repeat top left;
	padding: 0px 0px 5px 20px;
	margin: 0px;
	}
 
.widgetarea {
	background: #FFFFFF url(images/sidebartop.gif) top no-repeat;
	float: left;
	width: 300px;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	border: 1px solid #DDDDDD;
	}

最后将模板中的英文替换成了中文。 到此，church的中文话就算介绍了。如果有朋友想要这个版本的话可以留言索取，我可以打个包发给大家。另外大家有什么css 上的问题也可以给我留言，我很乐意为WordPress在国内的推广作出自己的贡献：）

2008-08-27日更新：整合网站图片减少了小30的连接数……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

img.gicon,
img.rss,
#topnavbar,
#header,
#navbar,
#nav li a:hover,
#nav li a:active,
.time,
.comment,
.tags,
.category,
#sidebar ul li li ,
#sidebar ul li ul li,
#sidebar .newsPostList li,
#l_sidebar ul li li,
#l_sidebar ul li ul li,
#r_sidebar ul li li,
#r_sidebar ul li ul li,
#footer,
#searchbutton,
#subbutton,
#sidebar ul .widget_categories li,
a.external,
#sidebar .newsPostList li,
#content .blogConnBody .related_post li{ background-image: url(images/icon_bg.png);_background-image:url(images/icon_bg.gif); background-repeat:no-repeat;}

相关内容

• 修改wordpress侧边栏tagcloud样式