Header 模板 2是从零开始创建 WordPress 主题教程系列教程的第四篇第二部分。最后说一次,开始之前务必先读下前面的日志。这篇会完成 Herder 模板,并且开始介绍 DIV Box 模型。
第1步:开启 XAMPP 和打开 index.php
- 启动 Xampp
- 打开 Tutorial 的主题文件夹
- 打开浏览器,在地址栏输入 http://localhost/wordpress
- 返回主题文件夹,用记事本打开 index.php
第2步:给博客的标题添加 H1 的标签
现在,index.php 的代码是:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>
给它添加 <h1> 和 </h1> 标签。H1 标签意思是标题一。HTML 一共可以有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’); ?>
保存并刷新浏览器,可以看到在博客标题链接的下面出现博客的描述,我们可以到 WordPress 管理后下修改博客的描述。
<?php – 开始 PHP 代码
bloginfo(’description’) – 调用博客信息,这里的是描述
; – 停止调用
?> 结束 PHP 代码
第4步:DIV 标签
这步将介绍一个新的标签 — DIV。
给以上代码添加 <div> 和 </div>标签:
<div>
<h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>
</div>
保存,刷新浏览器,应该看到没有任何变化
可以把 DIV 想像成一个无形的盒子 (box)。在这里它把博客标题链接和博客描述从其他东西中区分开。如果没有对它进行样式化,它无非是单独的内容,以后我们可以会用 style.css 这个文件去样式化这个无形的盒子。我们可以给 DIV 附上 边框(borders),填充(paddings), 页边空白(margins),背景颜色(background color),背景图片(background images),以及其他一些东东。
第5步:添加 Header DIV 标签
添加 id=”header” 到 DIV 标签,如下:
<div id=”header”>
保存并刷新浏览器。
同样也没有改变,这里给 DIV 标签指定了 ID ,因为将会有更多的 DIV 标签或者无形的盒子,我们使用 ID 来区分!
原文:link

继续受教了!
博主你好~~正在学习你翻译的文章~~非常感谢~~另外有一个问题想请教一下~~文中如下
给它添加 和 标签。H1 标签意思是标题一。一共可以有7级标题:H1,H2,H3,H4,H5,H6。按照默认,H1是字体最大而H6是则最小。
文中说有7级标题,但例子只给出了6个,另外一个是什么~~谢谢~~
h只是Html的一个标签,Xhtml里的语义是标题,H的字体在每一个浏览器里的解释都不一样~所以需要在Css里定义其样式。另外在Seo下,H的数字越小,其优先级越高。
可能打错子字!这个关系不大!
在后台改了博客描述,但刷新后描述部分还是和博客标题一样的内容,请问该如何解决
4楼的是直接拷贝的吧,要在英语状态下写入才对!
我把网站上的直接拷贝上去,出现的是blog的标题。呵呵。
请问我照着教程修改后标题怎么变成这样了??>in the world
utf-8 格式保存
从这个系列的开头看到这里了,真的是一套不错的翻译教程,很清晰~谢谢~
很好很强大。谢谢你!
呵呵,写的太好了,我是刚刚才学wordpress的.才看到,太适合我们新人了.谢谢
我还有个问题,在后台改了博客描述,但刷新后描述部分还是和博客标题一样的内容,不知为什么?
注1.代码是我手写的
2.utf-8 格式保存