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

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

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

 

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

第1步

日志标题代码下面输入 <?php the_content(); ?>
adding-the-content.gif

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

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

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

继续……

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

viewsource.gif

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

paragraph-tags.gif

注意到 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.gif

保存并刷新你的浏览器,你再次去查看源代码,你会发现你的每篇日志内容都被 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

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

<div class=”post”>

</div>

(你可以按照你自己的想法把 class 和 ID 的名字命名成你想要的名字,比如你最喜欢的食物,但是 postentry 更简洁,简单并更容易记,对吧?)

现在你的 index.php 文件为:

class-post.gif

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

indent.gif

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

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

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

post-1-and-2.gif

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

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

本文转自“我爱水煮鱼”

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

About sosel

Comments

  1. 100

  2. 100

发表评论

电子邮件地址不会被公开。 必填项已用*标注