WP Theme 教程 #4b：Header 模板 2

June 5th, 2007 Denis

这是我的关于创建 WordPress 主题 系列教程的第四篇。最后说一次，请你务必能先读下前面的日志。否者你很难理解这篇日志。这篇会很快完成 herder 模板并介绍 DIV 盒子模型

第1步

- 启动 Xampp
- 打开 Tutorial 的主题文件夹
- 打开浏览器，在地址栏输入 http://localhost/wordpress
- 返回主题文件夹，用记事本打开 index.php

第2步

现在，index.php 包含：
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

给它添加 <h1> 和 </h1> 标签。H1 标签意思是标题一。一共可以有7级标题：H1，H2，H3，H4，H5，H6。按照默认，H1是字体最大而H6是则最小。

现在你的 index.php 文件是：
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>

保存，返回浏览器并刷新。

第3步

调用博客的描述，则在博客标题链接的下面输入 <?php bloginfo(’description’); ?>。现在变成了：

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>

<?php bloginfo(’description’); ?>

保存，刷新你的浏览器，可以看到在你博客标题链接的下面出现博客的描述，你可以到管理界面下改变你博客的描述。

<?php – 开始 PHP 代码
bloginfo(’description’) – 调用博客信息，具体的是描述
; – 停止调用
?> 结束 PHP 代码

第4步

这步将向你介绍一个新的标签 — DIV。

给以上代码添加 <div> 和 </div>标签：

<div>

<h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

</div>

保存，刷新浏览器，你看到没有任何变化

可以把 DIV 想像成一个无形的盒子。在这里它把博客标题链接和博客描述从其他东西中区分开。如果你没有对它进行样式化，它无非是单独的内容。以后你会用 style.css 这个文件去样式化这个无形的盒子。你可以给 DIV 附上 边框（borders），填充（paddings）, 页边空白（margins），背景颜色（background color），背景图片（background images），以及其他一些东东。

第5步

添加 id=”header” 到 DIV 标签，如下：
<div id=”header”>

保存，刷新浏览器。

同样也没有改变，到现在为止，我们指派了一个 ID 给 DIV 标签，因为将会有更多的 DIV 标签或者无形的盒子。我们使用 ID 来区分！

下一篇：WP Theme 教程 #5：主循环

请查看教程目录：WordPress 主题教程系列

翻译自：WP Theme Lesson #4b: Header Template Continues

创建 WordPress 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。

作者：Denis
原文链接：WP Theme 教程 #4b：Header 模板 2

标签：主题 教程

分享到 Twitter 收藏到 Delicious 分享到 Google Reader 分享到 FriendFeed