海豚的WordPress Theme教程 part2

由 发表于 ┊2,431 PV

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

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
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<!-- header -->
<div id="page">
<div id="content">
<h1>content</h1>
</div>
<!-- content -->
<div id="menu">
<h1>menu</h1>
</div>
<!-- menu -->
<div id="sub-menu">
<h1>sub-menu</h1>
</div>
<!-- sub-menu -->
<div id="footer">
<h1>footer</h1>
</div>
<!-- footer -->
</div>
<!-- page -->
</body>
</html>

content, menu, sub-menu, footer这四个div都从属于page这个div，这样只需要对page作定义就能控制整个blog内容、侧栏、页脚的位置了。header部分一开始是决定放一个100%宽度的图片，所以独立在page之外。

接下来创建style.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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%;
}

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

header.php

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<!-- header -->
<div id="page">

index.php

1
2
3
4
5
6
7
<?php get_header(); ?>
<div id="content">
<h1>content</h1>
</div>
<!-- content -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

sidebar.php

1
2
3
4
5
6
7
8
<div id="menu">
<h1>menu</h1>
</div>
<!-- menu -->
<div id="sub-menu">
<h1>sub-menu</h1>
</div>
<!-- sub-menu -->

footer.php

1
2
3
4
5
6
7
8
<div id="footer">
<h1>footer</h1>
</div>
<!-- footer -->
</div>
<!-- page -->
</body>
</html>

很简单吧，只是在index.php开头和结尾增加两句来调用其他文件，其他只是copy & paste而已。现在，我们已经得到了四块积木了，所以今天就写到这里吧。