wordpress 主题一步步制作教程!第五课Header 模板2(图解)

这是我的关于创建 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”>

保存,刷新浏览器。

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

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/05/wp-theme-lesson-4b-header-template-continues/

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

相关推荐

wordpress 主题一步步制作教程!第八课 日志元数据(图解)

这一篇我们开始解决日志的元数据(Postmetadata):日期(date),分类(categories),作者(author),评论数(number of comments),以及其他隶属于日志的杂项信息。

我们现在在教程 5C,你可能已经注意到我将会把教程归纳成更大块(更少的步骤)。在开始之前,请打开 Xampp,主题文件夹,浏览器以及 index.php 文件。

wordpress 主题一步步制作教程!第13课 存档和链接列表(图解)

这篇课程将比较轻松。你将学到如何调用存档链接列表和 blogroll 链接列表,下一篇将是日历和搜索框。

在开始之前,我想解释下为什么我把我的课程分成比较小的节。你所学的一切都需要几个月时间来消化!所以当我第一次向你展示的时候,你能够理解所有的东西是非常重要的,这样你就不用会去重新学习。

wordpress 主题一步步制作教程!第18课 Style.css和CSS介绍(图解)

学习 CSS 最好的方法就是去用它,不像 XHTML 和 PHP,你不需要接触模板的核心文件,你同样不要需要理解任何基本概念,只要去用它。试用和错误是你前进的方法。

在我们开始之前,你应该已经有些内容在你的 style.css 文件了。让我们现在找出这部分信息是干什么的?

微信扫一扫,分享到朋友圈

wordpress 主题一步步制作教程!第五课Header 模板2(图解)