Apr 23

DIY Wordpress Themes —— Style

分类：Wordpress研究, 与我有关 | 给我留言 | 点击量274次

样式是一个主题模板最核心的内容，虽然不难，但想成就一款大成的主题模板则并非易事。以下我只介绍如何建立一个最最基本的模板样式，如果你想打造一款炫目的主题模板，需要满足两点——炫目的设计和扎实的 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 的后台外观选项里选择这款主题，然后就能在前台看到首页的效果了（截图预览） :lol:

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

zEUS.

DIY Wordpress Themes —— Fix DIY Wordpress Themes —— Separated
  • 收藏到 : Google书签 新浪ViVi 365Key网摘 天极网摘 我摘 POCO网摘 博采网摘 YouNote网摘 和讯网摘 博拉网 igooi网摘 I2Key网摘 天下图摘 百特门网摘 Del.icio.us Yahoo书签 奇贴 QQ娱乐摘 添加到Digg! 添加到Facebook!
  • 标签 :  ,
  • 原文链接 : http://zeuscn.net/archives/2008/04/23/diy-wordpress-themes-style/
  • 转载原创文章请注明 : zEUS.’Blog 網生@誌
  • 本周最灌水的人 :  motoe2 (5)  ,  willerce (5)  ,  Charles (4)  ,  东哥 (4)  ,  大话 (3)  ,   头两名将免费获得下周的“阿里妈妈广告位”
  • 相关日志 : 
    • 

     “DIY Wordpress Themes —— Style”才7条评论

    1. gravatar
      公元2008年04月23日的4:09 pm，传说中的 kok 抢到了第1楼！ 

      抢个沙发。慢慢看。 :lol:

    2. gravatar
      公元2008年04月24日的8:17 am，传说中的 GanGeGe 抢到了第2楼！ 

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

    3. gravatar
      公元2008年04月24日的10:05 am，传说中的 PEST 抢到了第3楼！ 

      我什么也不抢， :mrgreen:

    4. gravatar
      公元2008年04月24日的11:27 am，传说中的 我们在一起 抢到了第4楼！ 

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

    5. gravatar
      公元2008年04月25日的6:20 pm，传说中的 willerce 抢到了第5楼！ 

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

    6. gravatar
      公元2008年04月25日的10:07 pm，传说中的 zEUS. 抢到了第6楼！ 

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

    7. gravatar
      公元2008年04月26日的12:34 pm，传说中的 z.Yleo77 抢到了第7楼！ 

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

    发表留言