海豚的WordPress Theme教程 part2

由 發表于 ┊2,495 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而已。現在，我們已經得到了四塊積木了，所以今天就寫到這里吧。