網生@誌 | zEUS.'Blog

首页 » Wordpress研究 , 与我有关 » 2008-04-23 »

DIY WordPress Themes —— Style

字体大小:T | T

样式是一个主题模板最核心的内容,虽然不难,但想成就一款大成的主题模板则并非易事。以下我只介绍如何建立一个最最基本的模板样式,如果你想打造一款炫目的主题模板,需要满足两点——炫目的设计和扎实的 CSS/DIV 技能,如果你不能同时满足以上两点,请跟着我一步步的从最简单的模板开始。

在写样式之前,我们脑子里肯定得有个谱,明确主题的色系、结构等,细节方面可以稍侯再考虑。如果你有能力的话可以先 PS 一套方案出来。
这里我打算建一个健康的,充满绿色的超级简单的无图片 2栏 WordPress 主题模板。

本地 WordPress 环境搭建好之后打开主题文件夹目录(以我安装的 XAMPP 为例):
D:\xampp\htdocs\wp-content\themes
新建一个文件夹,命名为“Grass Root”或其它你喜欢的名称,将之前建好的 index.php 文件放进去,并在“Grass Root”目录下使用 Dreamweaver 新建一个 CSS 文件,并将其命名为 style ,将下面代码拷入刚建好的 style.css 文件中

/*
Theme Name: Grass Root
Theme URI: http://zeuscn.net/
Description: 这是一个2栏绿色健康的超级无敌简单的 WordPress 主题模板
Version: beta
Author: zEUS.
Author URI: http://zeuscn.net/
*/

以上申明部分很容易理解,就不多说了,根据自己需要进行修改。

现在我们根据之前的定义的模板结构来编写样式:
首先是部分全局的定义:

body {
background:#E7F8D0;
font-family:Verdana,trebuchet ms,helvetica;
font-size:14px;
color:#222;
line-height:1.7em;
word-wrap:break-word;
margin:0;
}
a {
color:#346807;
text-decoration:none;
}
a:hover {
color:#FF3300;
text-decoration:none;
}
p {
margin: 0px 0px 15px;
}

body 就是整个网页默认设置,里面定义了背景色,字体颜色、大小、字体类型等;a 其实就是连接;a:hover 是鼠标移动到链接上的效果;p 是段落。其中各种定义的意思我就不多解释了,看不懂的朋友请参考这本天书,对照着学习。

下面是页眉 header 部分,在这部分里,一般会定义博客的名称、博客描述和导航栏:

#header {
height:150px;
width:980px;
background: #67b602;
margin:0 auto;
}

/* 博客名称 */
h1 {
color:#FFF;
text-align:center;
font-weight:800;
margin:0 auto;
height:80px;
line-height:80px;
}
h1 a, h1 a:visited {
color: #FFF;
text-decoration: none;
}
h1 a:hover {
color:#FF3300;
text-decoration: none;
}

/* 描述 */
#description {
text-align:center;
color:#FFF;
height:40px;
line-height:10px;
}

/* 导航栏 */
#nav {
background:#E7F8D0;
float:right;
height:30px;
margin:0;
}
#nav ul {
float:left;
list-style:none;
margin:0;
padding:0;
display:block;
}
#nav ul li {
float:left;
font-size:14px;
height:30px;
line-height:30px;
text-align:center;
width:90px;
}
#nav ul li a {
}
#nav ul li a:hover {
background:#67B602;
display:block;
color:#fff;
}

h1 对应博客名称;description 对应描述;nav 对应导航栏,以及这里面的各个导航选项。

我把 content 内容栏,sidebar 侧栏和 footer 页脚都放到 wrapper 这个容器中,以方便整体居中

#wrapper {
width:980px;
margin:0 auto; /* 容器居中的写法 */
}
/* 内容栏 */
#content {
width:670px;
float:left;
}
.post {
padding:10px;
clear:both;
}
.post .title {
float:left;
margin-left:10px;
width:100%;
}
.postdata {
font-size:90%;
color:#999999;
float:right;
}
.postdata a, .postdata a:visited {
text-decoration:none;
}
.postdata a:hover {
text-decoration:none;
}
.postdata .category {
padding-left:18px;
float:left;
}
.entry {
padding:5px 0px 5px;
}

/* 侧边栏 */
#sidebar {
float:right;
width:300px;
color:#006600;
margin:0px;
}
#sidebar ul {
margin:10px 0 20px;
list-style:none;
}

/* 页脚 */
#footer {
width:980px;
background:#67b602;
text-align:center;
font-size:12px;
font-weight:bold;
height:30px;
line-height:30px;
float:left;
}
#footer a {
color:#fff;
}
#footer a:hover {
color:#FF3300;
}

将上述代码依次复制到 style.css 文件中并保存,这样,模板的首页就基本完成了,你可以在本地 WordPress 的后台外观选项里选择这款主题,然后就能在前台看到首页的效果了(截图预览) 😆

註:Grass Root —— 我一现实中的兄弟去西藏维稳,他说那里是绝对的 Grass Root!
另外,Grass Root 主题的色系和字体参考了 aw’s blog

zEUS.

« »

已经有11人发表了评论

  1. WP里单一的页面模板,如何绑定一个独立的CSS呢?

    • 为这个单一的页面模板另外做一个 header 文件,例如 page-header.php ,其中大部分内容都和原始的一样,只是 CSS 引用了另外一个文件,然后让这个页面模板使用这个 page-header.php 就行了。

  2. 非常不错的说 请教个问题 怎么我使用的时候没有效果呢?记得以前没出什么问题的 这次没出来float的效果 可能是什么原因呢

  3. Grass Root !非常Grass Root ,喜欢你这,这些好教程

  4. 最近对这个来了兴趣, 想自己尝试下,
    非常棒。。 期待一个完整的系列。

  5. @kok: :mrgreen:
    @GanGeGe:确实,我想做点成就出来….
    @PEST: 😕
    @我们在一起:有不清楚的地方请留言 🙂
    @willerce:在 intro 里,我就有介绍教程了 😎

  6. 很不错。
    但是如果对一个CSS一点也不懂的人。就有点难了。收集些CSS教程给他们吧。

  7. 非常简单明了。学习了。。 :mrgreen:

  8. 看来你是一心都在研究WP模版上了。

  9. 抢个沙发。慢慢看。 😆

发表您的看法

TOP COMMENTS BOTTOM