海豚的WordPress Theme教程 part3

由 發表于 ┊2,732 PV

上回我們已經獲得了header.php, index.php, sidebar.php, footer.php這四個文件，接下來我們要做的就是搭積木了。

header.php

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> ?Blog Archive <?php } ?> <?php wp_title(); ?></title>
<!-- Meta Tags -->
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- CSS -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!-- RSS -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo ('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- WordPress Tags -->
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>
<body>
<div id="header">
<div class="bloginfo">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</div>
<div class="admin">
<?php wp_loginout(); ?>
<a href="http://www.jssanhong.com/#sub-menu">Sub-Menu</a>
</div>
</div>
<!-- header -->
<div id="page">

line1-5：用來描述頁面的基本信息，諸如使用那一種標準，字符編碼，還有頁面標題。
line7-13：一些meta標簽信息和站點ico設定。
line15-20：對css文件和rss訂閱地址的設定，方便自動發掘程序。
line22-24：我也不知道干嗎的，反正個個模版都有-_-;。
line29-35：標題部分。
真正在頁面上看到的效果其實只有line29-35這一段，一開始只有Blog標題（左）和
login鏈接（右），后來為了方便跳轉到頁底的Sub-Menu部分又增加了一個鏈接。標題圖片
KD02是直接在body里設定的。相應的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
html, body {
margin: 0;
padding: 0;
}

body {
background: #fff url(images/bg.jpg) no-repeat center top;
font-size: 1em;
font-family:"Trebuchet MS", "Lucida Grande", Arial, Helvetica, sans-serif;
word-spacing: 0.15em;
letter-spacing: 0em;
line-height:1.3em;
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#header {
float:left;
overflow:hidden;
display:inline-block;
font-size:0.8em;
background:#797979;
color:#fff;
height:20px;
width:100%;
}

.bloginfo a {
float:left;
color:#fff;
text-align:left;
padding:0 0 0 5px;
}

.admin a {
float:right;
color:#fff;
text-align:right;
padding:0 5px 0 0;
}

part4我會很快跟上，這篇一開始因為調試顯示代碼浪費了很多時間。