wordpress 主题一步步制作教程!第七课 日志内容（图解）

在这篇中，我们将解决真正的东西。如何展示你博客的内容？然后你将看到更多的 DIV 标签，用于把博客的内容和在上一篇中创建的日志标题区分开。

（注意：上一篇课程是非常，非常重要的。如果你不是完全明白我上篇所讲的，你需要去重新看一篇和问我问题直到搞明白为止。）

下面开始这篇课程。打开 Xampp ，打开 “tutorial”主题文件夹，打开浏览器，输入地址：http://localhost/wordpress，最后用文本编辑器打开 index.php。

第1步

在日志标题代码下面输入 <?php the_content(); ?>。

保存并刷新浏览器，你应该在日志标题下面看到了一些文本。

刚才发生什么了?
你使用了 PHP 函数 the_content() 调用了 日志的内容。现在，日志的内容只是一长行的文本，一直到窗口的右边，因为你还没有样式化它。还记得 style.css 这个文件吗？我们以后用它来控制所用元素显示的。

上一篇，我教你输入多篇测试的日志以便可以看到多篇日志的列出的样子。如果你还没有做，那现在就去输入吧，然后返回首页，应该看到多篇日志是这样子的：

继续……

返回你的浏览器，点击查看选择页面源代码。就会弹出一个源代码窗口，如果你使用的是 Internet Explorer，那么弹出的是记事本。

我使用的是 FireFox浏览器，下面是在 FireFox 中显示的样子：

注意到 index.php 文件和源代码之间的区别了吗？你所有的文本，图像和其他附加的东西，所有在那个窗口或者记事本中的东西都是被这个函数 the_content() 调用来的。是不是很有用？不依赖 blogging 软件和具体的 WordPress 模板系统，你应该自己对这些文本和图片进行编码。

还有，有没有注意到我圈出的开启和关闭的P标签。他们都没有在 index.php 文件中出现，但是他们在源代码中出现了。

P 标签，为什么和如何使用？
为什么 - 当你输入你的日志的时候，每次你跳过一行就是一个段落，你需要一个方法去展示？每个段落会在 P （段落，paragraph）标签之间。那就是你能够在你的段落之间有行距的原因。如何 - 非常容易，WordPress 模板系统会帮你产生 P 标签。

第2步

给 the_content() 两边添加 DIV 标签并给该 DIV 标签附上class=”entry”属性，如下：

<div class=”entry”>

</div>

你现在的 index.php 文件应该是：

保存并刷新你的浏览器，你再次去查看源代码，你会发现你的每篇日志内容都被 class=”entry” 的 DIV 标签给围住。

为什么？
第一个原因是，你现在知道日志题目哪里结束还有日志内容哪里开始。第一个原因是这是为了能让 style.css 文件能进行样式话准备的。如果你愿意，你可以样式你的日志的内容而不影响其他别的东西。

id 和 class之间有什么区别呢？
到目前为止，对于每个 DIV 标签，你可以用 id 去命名它。记得 id=”header”吗？那么有什么不同呢？id 是唯一的而class不是。如果你从头到尾浏览你的源代码，你会发现只有一个 id=”header” 和一个 id=”container”，但是有多个 class=”entry”。

那么 header 和 container 能用 class 去取代 id 吗？完全可以。

牢记这一点，你不能重复任何 id。比如，你不能在同一页面上有两个 id=”header”。当你想一遍又一遍重新利用一些东西如日志的题目，那么请使用 class。

第3步:
用一个 DIV 标签把日志的标题和内容一起围住。并把这个 DIV 标签命名为：class=”post”。

<div class=”post”>

</div>

（你可以按照你自己的想法把 class 和 ID 的名字命名成你想要的名字，比如你最喜欢的食物，但是 post 和 entry 更简洁，简单并更容易记，对吧？）

现在你的 index.php 文件为：

这个是经过缩进整理后的版本：

我使用 tab 健而不是空格键在 index.php 文件中产生缩进的。为什么进行组织呢？不像我的屏幕截图上一样，你的代码不会有红色或者绿色的高亮显示，你需要有个能够跟踪你的代码的方法，通过缩进，使你更容易知道哪个 </div> 是结束哪个 <div>。

保存并刷新浏览器，然后查看源代码中的代码。

为什么你要添加另外一个 DIV 标签去围住日志标题和日志内容？
增加这个 DIV class=”entry” 去把日志标题和日志内容区分开。而这个div class=”post”是吧你的日志和其他内容区分开。

这就是这篇教程的所有内容，可能需要更多时间去消化，所以有问题请务必给我留言，下一篇我们将对付日期（date），分类（categories）和评论（comments）。

如果你看到我教程中错误或者不一致的地方，请尽快告诉我以便我能立刻改掉，另外，到目前为止，你觉得我的课程怎么样？是否需要我讲的更具体些，或者它们太长了？

本文转自“我爱水煮鱼”

原文地址：http://fairyfish.net/2007/06/06/wp-theme-lesson-5b-the-content/