wp主题教程-5b:正文(The Content)

在本节,我们将学习那些真正重要的东西。如何获得你博客的正文来显示呢?然后,你需要加更多的不可见框或者DIVs来将正文与昨天我们调用的文章标题分开。

(注意:昨天的教程非常非常的重要,如果你没有完全明白我昨天教的,请重新读一遍然后问我问题,直到你完全清楚为止。)

继续今天的教程,打开Xampp控制台,打开“tutorial”主题文件夹,打开一个新的浏览器窗口并转到http://localhost/wordpress地址,然后用Notepad打开index.php文件。

第一步:

在文章标题代码的后面加上:

保存notepad里的内容并刷新页面,你会看到你的博客标题下面出现了一些文本。

刚才发生了什么?为什么会这样呢?

你通过PHP方法the_content()调用了文章的正文。现在,你的正文仅仅只是一长行的文本,并且总是靠在窗口的右边显示,因为你并没有给它添加样式。还记得style.css文件吗?稍后,我们就会用这个文件来控制每个元素的显示。

昨天,我要求你新建了一些测试用的文章来看多个文章列表的样子,如果你还没有做,马上完成它,然后转到首页。多篇文章应该是这样的:

接着往下看…

回到你的浏览器,点击“查看”然后选择“页面源代码”,此时会弹出一个写有代码的窗口。如果你使用的是Internet Explorer,将会弹出一个notepad窗口。

我使用的是FireFox浏览器,下面就是弹出的代码在FireFox中的样子:

注意到你的index.php文件和源代码文件的区别了吗?源代码文件中的所有的文本、图片等都是通过the_content()调用的。多有用啊!本节不需要博客系统或特殊的WordPress模板系统,你都可以自己编写这些文本和图片。

你也注意到我圈出来的xhtml中的开始和结束的P标签了吧。它们没有在你的index.php文件中出现,却在你打开的源代码文件中出现了。

P标签,为什么会这样?怎么出现这种情况的?

为什么会这样 — 当你写文章时,你每空出一行就是一个段落,你需要一种方式来显示它吧。每个段落都放在一对P标签里,这才会在两个段落之间出现空行。怎么出现这种情况? — 很简单,WordPress模板系统自动帮你生成了P标签。

第二步:

the_content()的两边放置一个不可见框(DIV),并且给它的class赋值“entry”,如下所示:

<div class=”entry”>

</div>

你应该有如下内容:

保存文件并刷新页面,如果你再去查看页面源代码,你将会发现在你的文章正文被一个class等于“entry”的DIV包裹着。

为什么会这样做?

首先,这样可以告诉我们文章标题从哪儿结束,文章正文从哪儿开始。其次,这可以帮助我们在style.css文件中给它添加样式。如果你想给它添加样式,你可以给你的文章正文添加样式并且不会影响其他部分。

**idclass有什么区别?**

至今为止,对于每个不可见框或者DIV,你都是用id来给它命名。还记得id=”header”吧?那么,这有什么不同呢?id是唯一的,而class不是。如果你通篇看一下你的源代码,你会发现仅仅有一个id=”header”和一个id=”container”,但是会有很多个class=”entry”

**headercontainer能变成class而不是id吗?当然可以。**

请牢牢记住:相同的id不能同时出现两次。例如,在同一个页面,你不能有两个id=”header”。如果你想像用文章正文那样重复用一些名字,那就用class

第三步:

把你的博客标题和正文用一个DIV裹住,并且给它一个class=”post”

<div class=”post”>

</div>

(class和id的名字可以任意取,你可以给它们命名为after或者你喜欢的食物,但是post和entry简洁又容易记忆,对吧?)

此时,你有如下的内容了:

下面是缩进后的版本:

index.php文件中,我用tab键来增加缩进而不是使用空格键。为什么要缩进呢?不像我的屏幕截图那样,你的代码并没有绿色和红色的高亮(highlight)。你需要一种方式来组织你的代码,通过缩进,你可以很容易区分每个结束的</div>与哪个开始的<div>匹配。

保存文件后刷新页面,然后再去看一下源代码的变化。

为什么要再加一个DIV来把文章标题和正文包裹起来呢?

你加的class=”entry”的DIV是用来将文章正文文章标题分开,class=”post”的DIV则是用来区分开每篇文章的。

这就是今天的全部内容了,内容有点多,可能难以消化吸收,所以当你有不懂的地方请主动问问题。明天我们将学习文章的日期分类评论的相关内容。

如果你在我的文章中发现错误或者一些矛盾的地方,请尽快告诉我,这样我就能马上修改它们了。还有,你觉得至今为止我的教程怎样?需要我讲的更具体点吗?或者你觉得这些教程太冗长了?

返回WordPress主题系列教程的开始