wordpress 主题一步步制作教程!第20课 宽度和布局(图解)
这篇将涉及如何设置每个 DIV 的宽度和布局排版。同样也会向你展示如何让你的主题显示正确,并同时在 Firefox 和 IE 显示相同。
在我们开始之前,打开下面这些东东:Xampp Control,主题文件夹,Firefox 浏览器,IE 浏览器,index.php和style.css这两个文件。
这篇将涉及如何设置每个 DIV 的宽度和布局排版。同样也会向你展示如何让你的主题显示正确,并同时在 Firefox 和 IE 显示相同。
在我们开始之前,打开下面这些东东:Xampp Control,主题文件夹,Firefox 浏览器,IE 浏览器,index.php和style.css这两个文件。
继续昨天介绍 CSS 的课程,我们今天将介绍如何着色和十六进制颜色代码。
颜色属性,跟着的是一个十六进制代码,是用于给文本上色。如 body { color: #000000;} 意思是你页面的 body 的所有文本将是黑色的。
背景颜色属性,跟着的是一个十六进制代码,是给除背景上色。如 body{ background: #ffffff; } 意思是为 body 上白色背景。
学习 CSS 最好的方法就是去用它,不像 XHTML 和 PHP,你不需要接触模板的核心文件,你同样不要需要理解任何基本概念,只要去用它。试用和错误是你前进的方法。
在我们开始之前,你应该已经有些内容在你的 style.css 文件了。让我们现在找出这部分信息是干什么的?
在进入学习 CSS 和 修改 style.css 文件之前,你需要学习如何验证你的代码。简单说,验证(Validate/Validating/Validation)就是确认代码没有错误。在开始这个系列教程之前,我给了你两个链接,XHTML Validator 和 CSS Validator。在这篇,你将学到 XHTML 验证器。
关于 尾部(footer)的这篇教程将会很简单。只要在侧边栏下增加个 DIV 标签,然后输入一些版权信息。其实你完全可以不用我说明就能自己做,去试下吧。然后返回这里再仔细检查下。
一个适合 Widget 的侧边栏或者说是窗体化(widgetized)的侧边栏几乎是 WordPress 2.0 以后的主题标准。但是首先,什么是窗体化(widgetizing)呢?简单的说,窗体化就是让侧边栏适合 Widget 这个插件(译者注:WordPress 2.2 已经内置了 Wodgets),这个插件让你非常容易就能够重新整理侧边栏的模块。
举个例子说,不用去修改侧边栏的代码去更改分类和存档的位置,你只需要简单把分类和存档列表拖到它们的位置即可。
尽管这篇的题目是 搜索框(Search Form) 和 日历(Calendar),我同样也会介绍 元数据(Meta) 。让我们在这一篇结束常规的侧边栏,然后将在下一篇指出如何窗体化(widgetize)化侧边栏,怎么样?好吧,让我们开始…
这篇课程将比较轻松。你将学到如何调用存档链接列表和 blogroll 链接列表,下一篇将是日历和搜索框。
在开始之前,我想解释下为什么我把我的课程分成比较小的节。你所学的一切都需要几个月时间来消化!所以当我第一次向你展示的时候,你能够理解所有的东西是非常重要的,这样你就不用会去重新学习。
现在你已经熟悉了侧边栏的结构,接下来我们将继续修改侧边栏,完成页面链接(Page-link)列表。当完成常规的侧边栏之后,我将向你展示如何窗体化(widgetize)你的侧边栏。
在分类链接上面添加以下代码:
是否你已经很期待学习侧边栏(Sidebar)了呢?可能第一眼,感觉侧边栏很难,其实它根本不难,一旦你掌握了它的结构,就能很快编码和样式化它。
在开始侧边栏之前,这是现在 index.php 文件的样子。
不要忘记打开 Xampp……
在绝大多数的 WordPress blog 的底部中,都会有 Next Page 或者 Previous Page 这些导航链接。你可以通过 WordPress 的模板系统中的 posts_nav_link() 这个函数调用这些链接。在这篇中,只有一个步骤!
真的需要我再次告诉你一次去打开 Xampp,主题文件夹,浏览器和 index.php 文件吗?
这篇课程将讨论其他3个可以增加到日志中的元素。Else,post ID, 和 链接的 title 值。尽管它们是可选的,但是你几乎可以在我每一个免费的主题中都能找到。
开始之前,不要忘记启动 Xampp。