海豚的WordPress Theme教程 part3

由 发表于 ┊2,685 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.koryi.net/#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我会很快跟上，这篇一开始因为调试显示代码浪费了很多时间。