wp主题教程-4b:header模板续(Header Template Continues)

好了,这是WordPress主题教程序列的第四个。我本不应该再重复的,但是还是要说最后一遍:请确保你已经读过之前的所有的教程,否则本节有一个内容你将无法理解。今天的教程是一个用于完成header模板同时介绍一下框模型(box model)的快速教程。

第一步:

— 打开Xampp控制台

— 打开主题所在的文件夹,Tutorial文件夹

— 打开一个浏览器窗口,转到http://localhost/wordpress

— 回到主题文件夹,用Notepad打开index.php文件

第二步:

当前,index.php文件中有代码:

<a href=””></a>

在这段代码的两边加上<h1></h1>,H1标签的意思是标题1.总共有六个标题:H1,H2,H3,H4,H5,H6.默认情况下,H1字体最大而H6字体最小。

现在,index.php中的代码变成:

<h1><a href=””></a></h1>

保存文件,转到浏览器窗口,刷新页面。

第三步:

调用博客的描述,在标题链接的右边输入代码:,此时,完整代码变成:

<h1><a href=””></a></h1>

保存文件,刷新页面就会看到在标题链接的下面出现了你博客的描述。稍后你可以在后台管理页面修改你的博客描述。

<?php — 开始PHP代码

bloginfo(‘description’) — 调用博客的描述信息

; — 调用描述信息结束

?> — 结束PHP代码

第四步:这一步将给你介绍一个新的标签:DIV标签。

在完整的代码两边加上<div></div>:

**<div>

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

</div></strong></p>

保存文件,刷新页面,你将发现页面并未发生什么变化。

可以把DIV看成是一个看不见的框,它把你博客的标题链接描述和博客的其他部分区分开来了。如果你不给它加样式,那么它除了把博客的内容区分开来就没有其他的作用了。稍后,你将用style.css文件来给这个看不见的框加上样式。你可以给DIV加上边框(borders)、内边距(paddings)、外边距(margins)、背景色(background color)、背景图片(background images)等样式。

第五步:

给DIV标签加上id=”header”,就像:<div id=”header”>.保存文件,然后刷新页面。

这个改变至此也不会给页面带来什么变化。我们给DIV指定了一个ID是因为一个页面中会有很多DIV或者很多不可见的框,我们需要一个方法将它们区分开来,是吧?

返回WordPress主题系列教程的开始