Subscribe to 无限摄影News FeedSubscribe to 无限摄影Comments

修改wordpress侧边栏tagcloud样式

十一月 12, 2008 by zhanbin  
分类：wordpress

4 评论

wordpress的侧边栏中可以添加的widget中包行一个标签云的功能。这里可以把你正在使用的tag以百分比的多少分别以多种字体大小显示出来，可以让浏览者从tag的大小上看出该tag的使用频率。

但是wordpress并没有指定行高，所有有时候很大的字和很小的字在一起是很小的字就很难点击到，给用户使用造成不便。其实这个问题可以通过简单的css来搞定。

?View Code CSS
1
2
3
4
5
6
7
8
9
10

#sidebar  .widget_tag_cloud a:link,
#sidebar  .widget_tag_cloud a:visited{ 
color:#A91B33;
text-decoration:none;
line-height:26px;
}
#sidebar  .widget_tag_cloud a:hover{
color:#fff;
background-color:#A91B33;
text-decoration:none;}/*tag链接样式*/

这样就设置了tag云图的行高。

另外，因为wordpress 是老外开发的，很多文字字体大小不符合中文显示，所以我们还要改下tag显示的文字字号，包括最小字号和最大字号：

打开wp-includes\category-template.php 找到如下代码（应该有2处）：

?View Code PHP
1

'smallest' => 8, 'largest' => 22, 'unit' => 'pt', 'number' => 45

将内容改成如下所示：

?View Code PHP
1

'smallest' => 12, 'largest' => 24, 'unit' => 'px', 'number' => 45

这样就搞定了。再看看标签云的样子，是不是顺眼了很多。

标签：, , ,

中文化Revolution2的Church主题

十一月 10, 2008 by zhanbin  
分类：wordpress

53 评论

一直想架一个自己的站点，放些自己的图片、关于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中添加如下代码：

?View Code 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合并就好了：

?View Code 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的连接数……

?View Code CSS
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;}

标签：, , ,