WP Theme 教程 #5b：日志内容
June 6th, 2007 at 10:54pm 雪山飞猪 浏览: 5,712
在这篇中，我们将解决真正的东西。如何展示你博客的内容？然后你将看到更多的 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）。
如果你看到我教程中错误或者不一致的地方，请尽快告诉我以便我能立刻改掉，另外，到目前为止，你觉得我的课程怎么样？是否需要我讲的更具体些，或者它们太长了？
请查看教程目录：WordPress 主题教程系列
翻译自：WP Theme Lesson #5b: The Content
创建 WordPress 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。
作者：雪山飞猪
原文链接：WP Theme 教程 #5b：日志内容
我爱水煮鱼版权所有，转载时必须以链接形式注明作者和原始出处及本声明。
1. keke | June 15th, 2007 at 8:15 pm
今天学到这里了！
[回复该留言]
2. Jaunt | September 10th, 2007 at 4:20 pm
不错，继续
[回复该留言]
3. Jaunt | September 10th, 2007 at 4:24 pm
不错，继续
有个错误的地方，字打错了，
“上一篇：WP Theme 教程 #5c：日志元数据”
应该是“下一篇”，钻哈字眼
[回复该留言]
4. brrw | October 6th, 2007 at 7:28 pm
class="post" 的作用应该是区分不同日志的吧！
“div class="post"是吧你的日志和其他内容区分开”的说法会产生费解！
[回复该留言]
5. KID | October 13th, 2007 at 12:20 pm
你好！我正在修改一个模板，也不知道当时改了点什么，现在日记都不会自己分段了，直冲出格了！～我本来是想修改日记的宽度的！～麻烦帮我看看～谢谢啦
[回复该留言]
6. zhongqiujie | November 5th, 2007 at 1:04 pm
the_content();
没有任何显示.
还有上页教程里,我这样写.
if(have_posts()) { $i=have_posts(); while($i>0) { print(""); the_title(); print(""); the_content(); $i-=1; } }[回复该留言]
7. 颦儿 | March 19th, 2008 at 5:04 pm
这篇也懂了，让我学到了很多代码知识，谢谢了哈
[回复该留言]
8. hhoo00 | April 13th, 2008 at 4:34 pm
最后打错了吧，怎么成了“上一篇”了，都是“下一篇”的
[回复该留言]
9. Lean | June 10th, 2008 at 9:48 am
长度非常合适，教导地方法也非常清晰易懂。按照教程一步一步做下来，自己的感觉也很不错。
十分感谢！
[回复该留言]
10. 杰克花园 | June 24th, 2008 at 5:30 pm
非常好， 谢谢了， 继续努力下去
[回复该留言]