海豚的WordPress Theme教程 part2

由 發(fā)表于 ┊2,546 PV

一直在考慮part2乃至后面的內(nèi)容應(yīng)該怎么寫(xiě)才能真的如我所說(shuō)的“和搭積木一樣簡(jiǎn)單”，于是決定直接拿出實(shí)例來(lái)寫(xiě)，也就是說(shuō)接下來(lái)的內(nèi)容就是KD02這個(gè)模版的制作過(guò)程。
首先先決定模版的整體樣式，KD02被決定為兩欄模版、固定寬度、居中，所不同的是在內(nèi)容和頁(yè)腳中間我決定增加一個(gè)區(qū)塊。由此先做一個(gè)簡(jiǎn)單的html文檔，用色塊把大致的樣子表現(xiàn)出來(lái)，內(nèi)容如下：

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這四個(gè)div都從屬于page這個(gè)div，這樣只需要對(duì)page作定義就能控制整個(gè)blog內(nèi)容、側(cè)欄、頁(yè)腳的位置了。header部分一開(kāi)始是決定放一個(gè)100%寬度的圖片，所以獨(dú)立在page之外。

接下來(lái)創(chuàng)建style.css來(lái)定義頁(yè)面的具體表現(xiàn)：

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%;
}

接下來(lái)就是把這個(gè)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>

很簡(jiǎn)單吧，只是在index.php開(kāi)頭和結(jié)尾增加兩句來(lái)調(diào)用其他文件，其他只是copy & paste而已。現(xiàn)在，我們已經(jīng)得到了四塊積木了，所以今天就寫(xiě)到這里吧。