海豚的WordPress Theme教程 part2

  一直在考虑part2乃至后面的内容应该怎么写才能真的如我所说的“和搭积木一样简单”,于是决定直接拿出实例来写,也就是说接下来的内容就是KD02这个模版的制作过程。
  首先先决定模版的整体样式,KD02被决定为两栏模版、固定宽度、居中,所不同的是在内容和页脚中间我决定增加一个区块。由此先做一个简单的html文档,用色块把大致的样子表现出来,内容如下:
[html]

content


[/html]
  content, menu, sub-menu, footer这四个div都从属于page这个div,这样只需要对page作定义就能控制整个blog内容、侧栏、页脚的位置了。header部分一开始是决定放一个100%宽度的图片,所以独立在page之外。
  接下来创建style.css来定义页面的具体表现:
[css]html, body {
margin: 0;
padding: 0;
}

#header {
float:left;
overflow:hidden;
display:inline-block;
background:#fcc;
height:140px;
width:100%;
}

#page {
width:784px;
margin:0 auto 0 auto;
padding:0 0 0 0;
}

#content {
float:left;
overflow:hidden;
display:inline-block;
background:#9cf;
width:520px;
height:340px;
padding: 0 0 0 0;
}

#menu {
float:right;
overflow:hidden;
display:inline-block;
background:#ffc;
width:213px;
height:340px;
}

#sub-menu {
float:left;
overflow:hidden;
display:inline-block;
background:#cfc;
width:100%;
height:140px;
}

#footer {
float:left;
overflow:hidden;
display:inline-block;
background:#ccf;
width:100%;
}[/css]
  这个html文件的实际效果如下
ss1

  接下来就是把这个index.html文件拆成WordPress模版文件中的header.php, index.php, sidebar.php, footer.php,如下:
header.php
[php]

[/php]
index.php
[php]< ?php get_header(); ?>

content

< ?php get_sidebar(); ?>

< ?php get_footer(); ?>[/php]
sidebar.php
[php]

[/php]
footer.php
[php]


[/php]
  很简单吧,只是在index.php开头和结尾增加两句来调用其他文件,其他只是copy & paste而已。现在,我们已经得到了四块积木了,所以今天就写到这里吧。顺便说一句,我喜欢在每一个</div>后面写注释,就是因为拆开后经常会忘记某个</div>它的另一半是哪里的。

Technorati Tags: ,

7 Responses to “海豚的WordPress Theme教程 part2”

Leave a Reply to freefeb

Note: Commenter is allowed to use '@User+blank' to automatically notify your reply to other commenter. e.g, if ABC is one of commenter of this post, then write '@ABC '(exclude ') will automatically send your comment to ABC. Using '@all ' to notify all previous commenters. Be sure that the value of User should exactly match with commenter's name (case sensitive).