Theme-mod work history~

Perview

前言

  建站以来,我更换了好几款主题。每次更换我都会花一些时间改写主题,以符合自己的需要。我想挑选主题的过程是最“艰辛”的吧,也是最考验耐心的。好不容易找到一款,穿上之后又嫌这嫌那的,真觉得自己的要求很高。几个月过去了,想着换一种清爽又大气的主题。于是这款Oulipo主题就映入了眼帘。

  主题基调为白色,其他为天蓝及灰色相衬,给人的感觉就是非常清新。起初通过我简单的修改发现这款主题比较容易mod,所以我就准备对它进行大手术,并长期使用。下面就讲讲我的手术过程。

1.增加主题nosidebar模版

  就像每个人都喜欢舒适宽大的房间一样,我喜欢文章页显示得大一点,方便一些图片及flash的展示,所以一般我都喜欢选择两栏的主题框架。期间我看到有些人的网站首页显示有侧边栏,但是文章页没有,这种方式很值得借鉴。所以我更改了主题默认的single.php模版。

  去除了<? php get_sidebar(); ?>,这样在浏览单篇日志时,不会出现侧边栏,文章的宽度大大增加了。为了应用于page模版,于是就新建一个page-noside.php文件,并做同样的修改。当然别忘了删除了侧边,原文的宽度也要随之改变。

2.顶栏使之浮动

  这里我们要用到CSS里面的float属性和position属性。首先找到顶栏ID对应的CSS样式,加入position: fixed;使顶栏的这个div层相对于浏览器窗口进行定位。然后再对顶栏内的元素进行浮动处理。就如你看到的,我把twitter浮动在了左边,把搜索框浮动在了右边。
经过修改后,你也许会在上下滚动时发现,文章内容会把顶栏盖在下面。这时我们可以更改顶栏层与其他内容层的上下关系。加入z-index: 1;属性,就相当于上了一个台阶,其他层就可以在他底下任意穿梭啦 :evil:

3.定制导航栏

  大家都知道,wordpress升级到3.0后,新增了一个导航配置功能,使得站长能够更加方便的管理网站的导航栏。我对这个功能函数并不是十分熟悉,幸运的是原主题已经将其集成了,所以我只要更改一下样式就可以了。修改导航栏样式的工作并不是十分的顺利,由于结构比较复杂,而且当时的我对CSS的编写也不十分在行,所以一开始被我搞的一团糟。于是我就上网搜索相关的模版,最后找到一款纯CSS编写的导航栏,支持多级菜单。我就在Dreamweaver的帮助下,看清了其本质 :evil: ,从此以后我也学会了怎么运用类选择器来编写CSS。多级菜单CSS编写要点主要在于position参数和display参数两点,前者决定了菜单是横向展开还是垂直展开,后者则控制了菜单的动态效果。

4.增加分页插件wp-pagenavi和页脚回到顶部功能

  wp-pagenavi是公认的必装的插件,回到顶部也是增强来客体验的一个功能。插件主要是修改一下样式,符合自己主题的色调,回到顶部我是copy他人主题内的code完成,这两个修改还是挺简单的。

5.首页文章摘要输出

  很多人会想到用<!--more-->标签,或者在模版里用<?php the_excerpt(); ?>函数输出excerpt里的东西。但这些都缺乏灵活性,前者得到的摘要跟文章内容一样,在我这种主页与文章页模版格式不一样的情况下并不适用,例如摘要中的一张图片在主页中的宽度最大不能超过500px,而在文章页却可以达到735px;后者的功能单一,无法输出诸如图片、flash等带格式标签的内容。于是经过搜寻,有一款插件正是满足了我一苛刻的要求。
  “wp-utf8-excerpt”,这款插件可以兼容<!--more-->标签,支持多字节语言(如中文),不会产生乱码,摘要可保留文章中的格式标签,如字体、颜色、链接、图片等(需保留的标签可在后台设置),摘要输出的字数也可以设置,功能可谓非常强大。喜欢的朋友不妨一试。

  其他的一些改动都是通过wordpress常用的函数自己稍微运用了一下,然后在CSS上面美化美化,只要自己有一份耐心和好的idea,我想你都会创造出属于自己的成果的。 :oops:

Comment
  1. 1.
    Chancemasays:
    Sep 3rd, 2010 at 11:50

    nice site! 只是有些地方字太小了 最好统一一下 :)

  2. 2.
    mrniuniusays:
    Sep 3rd, 2010 at 15:22

    谢谢。正文的字体大小我觉得是可以了。至于其他地方因为都是英文,稍微小一点,看起来会比较精致些。但我发现有时候首页侧边栏中文字体会显示过小,显得有些扭曲,但当你用鼠标选择一下这些字时,他们又变得正常了。不知道是为什么。。。 :?:

  3. 3.
    LOO2Ksays:
    Sep 4th, 2010 at 12:49

    还是觉得在内容页保留 sidebar 好看一点哈。
    可能之前的主题是英文的,所以中文的字体可能显得有点点小。
    不过确实来说是一款很简洁很赞的主题。

  4. 4.
    mrniuniusays:
    Sep 4th, 2010 at 19:12

    @LOO2K 像我这样三栏的版式,如果内容页也保留sidebar会显得很拥挤,也不能展示大一点的图片了。关于文字的大小,我认真接受了你们的意见,我把中文字体改大了,然后稍微统一了一下~~ :smile:

  5. 5.
    zwroomsays:
    Oct 31st, 2010 at 17:08

    我想问一下如何才能把这个主题移到左面、、、不喜欢他居中 谢谢了!

  6. 6.
    mrniuniusays:
    Nov 4th, 2010 at 16:45

    @zwroom
    请您说得具体点,比如你心中的布局是如何。是不是想把左面的导航去掉,将主体内容靠左对齐呢?

  7. 7.
    Waysays:
    Nov 8th, 2010 at 13:54

    我也是非常喜欢玩主题的一人,三天两头的换主题!
    始终没有找到自己喜欢的!

    你的主题不错!

  8. 8.
    susays:
    Nov 15th, 2010 at 09:20

    这个主体看着还不错啊

  9. 9.
    mrniuniusays:
    Nov 19th, 2010 at 22:39

    @su
    你好呀~~新朋友~~欢迎光临小站

  10. 10.
    Jan 2nd, 2011 at 23:08

    这个主题我喜欢啊 不错啊新年快乐

  11. 11.
    mrniuniusays:
    Jan 3rd, 2011 at 14:26

    @Code之行人
    ;-) 新年快乐哦!

  12. 12.
    happysays:
    Mar 11th, 2011 at 14:52

    不错的模板_表示很喜欢
    呵呵、

Leave a Reply