首页 » WordPress 主题 » WP Theme 教程 #4b:Header 模板 2

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

June 5th, 2007 at 06:14pm 雪山飞猪 浏览: 6,254

这是我的关于创建 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 来区分!

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

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

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

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

作者:雪山飞猪
原文链接:WP Theme 教程 #4b:Header 模板 2
我爱水煮鱼版权所有,转载时必须以链接形式注明作者和原始出处及本声明。

17fav 收藏本文

del.ici.ous: 0 -- Technorati: 4

9 条评论 添加你的评论

  • 1. keke  |  June 14th, 2007 at 7:59 pm

    继续受教了!

    [回复该留言]

  • 2. 流浪五天  |  October 9th, 2007 at 5:46 pm

    博主你好~~正在学习你翻译的文章~~非常感谢~~另外有一个问题想请教一下~~文中如下

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

    文中说有7级标题,但例子只给出了6个,另外一个是什么~~谢谢~~

    [回复该留言]

    anla reply on February 11, 2008:

    h只是Html的一个标签,Xhtml里的语义是标题,H的字体在每一个浏览器里的解释都不一样~所以需要在Css里定义其样式。另外在Seo下,H的数字越小,其优先级越高。

    [回复该留言]

  • 3. 雪山飞猪  |  October 9th, 2007 at 6:01 pm

    可能打错子字!这个关系不大!

    [回复该留言]

  • 4. mini_at  |  October 15th, 2007 at 8:02 pm

    在后台改了博客描述,但刷新后描述部分还是和博客标题一样的内容,请问该如何解决

    [回复该留言]

  • 5. uaen  |  November 8th, 2007 at 5:22 pm

    4楼的是直接拷贝的吧,要在英语状态下写入才对!

    我把网站上的直接拷贝上去,出现的是blog的标题。呵呵。

    [回复该留言]

  • 6. hehe  |  January 2nd, 2008 at 4:34 am

    请问我照着教程修改后标题怎么变成这样了??>in the world

    [回复该留言]

  • 7. Mojo  |  January 13th, 2008 at 5:42 pm

    从这个系列的开头看到这里了,真的是一套不错的翻译教程,很清晰~谢谢~

    [回复该留言]

  • 8. remaed  |  January 18th, 2008 at 6:26 pm

    很好很强大。谢谢你!

    [回复该留言]

发表评论

必须

必填,打死不公开

:mrgreen: :neutral: :twisted: :arrow: :shock: :smile: :???: :cool: :evil: :grin: :idea: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: :!: :?:

WP Theme 教程 #4:Header 模板 WP Theme 教程 #5:主循环


订阅

本站推荐

正在更新

分类

Clicki

抓虾