在這篇中，我們將展示如果顯示博客日志的內(nèi)容，并且使用一個(gè) DIV 標(biāo)簽把博客日志的內(nèi)容和日志的標(biāo)題區(qū)分開(kāi)。

下面就開(kāi)始這篇課程。首先還是打開(kāi) XAMPP，“tutorial”主題文件夾，瀏覽器并在瀏覽器地址欄輸入：
http://localhost/wordpress，最后打開(kāi) index.php。

第1步：使用 the_content() 函數(shù)顯示日志內(nèi)容

在日志標(biāo)題代碼下面輸入：<?php the_content(); ?>。

保存并刷新瀏覽器，現(xiàn)在在日志標(biāo)題下面看到了一些文本：

剛才發(fā)生什么了?

我們使用了 PHP 函數(shù) the_content() 調(diào)用了 日志的內(nèi)容?，F(xiàn)在，日志的內(nèi)容只是一長(zhǎng)行的文本，一直到窗口的右邊，因?yàn)槲覀冞€沒(méi)有樣式化它。還記得最開(kāi)始說(shuō)到的style.css 這個(gè)文件嗎？我們以后用它來(lái)控制所有頁(yè)面元素的顯示和布局。

我們?cè)?WordPress 后臺(tái)輸入多篇測(cè)試日志，就可以看到多篇日志一起被顯示的樣子：

返回瀏覽器，點(diǎn)擊”查看”選擇“頁(yè)面源代碼”，就會(huì)彈出一個(gè)源代碼窗口，如果你使用的是 Internet Explorer，那么彈出的是記事本。

我使用的是 Firefox瀏覽器，下面是在 FireFox 中間顯示的樣子：

你注意到 index.php 文件和它的源代碼之間的區(qū)別了嗎？所有的文本，圖像和其他東西等所有上圖展示的東西都是通過(guò) the_content() 這個(gè)函數(shù)是調(diào)用來(lái)的。是不是很有用？注意這些代碼是不依賴具體的 WordPress 主題是，我們應(yīng)該自己的這些文本和圖片進(jìn)行編碼和樣式化。

還有，有沒(méi)有注意到我圈出的開(kāi)啟和關(guān)閉的P標(biāo)簽。他們都沒(méi)有在 index.php 文件中出現(xiàn)，但是他們?cè)谠创a中出現(xiàn)了。

P 標(biāo)簽，為什么和如何使用？

為什么 – 當(dāng)我們輸入日志的時(shí)候，每次跳過(guò)一行就是一個(gè)段落，這個(gè)時(shí)候需要一個(gè)方法去展示？我們可以通過(guò) P （段落，paragraph）標(biāo)簽，每個(gè)段落會(huì)在 P 標(biāo)簽之間，這就是為什么段落之間有行距的原因，

如何使用 – 非常容易，WordPress 模板系統(tǒng)會(huì)自動(dòng)幫我們產(chǎn)生 P 標(biāo)簽。

第2步：DIV 標(biāo)簽把博客日志的內(nèi)容和標(biāo)題區(qū)分開(kāi)

給 the_content() 兩邊添加 DIV 標(biāo)簽并給該 DIV 標(biāo)簽附上class=”entry”屬性，如下：

<div class=”entry”>

</div>

你現(xiàn)在的 index.php 文件應(yīng)該是：

保存并刷新瀏覽器，如果我們?cè)俅稳ゲ榭?/span>源代碼的話，就會(huì)發(fā)現(xiàn)每篇日志內(nèi)容在 class=”entry” 的 DIV 標(biāo)簽中。

這樣我們就很容易知道日志標(biāo)題在哪里結(jié)束和日志內(nèi)容在哪里開(kāi)始，這樣做也是以后使用style.css 文件對(duì)它進(jìn)行樣式化做準(zhǔn)備，通過(guò) class 我們就可以準(zhǔn)確定位到日志內(nèi)容，樣式化日志的內(nèi)容而不影響頁(yè)面上其他別的內(nèi)容。

id 和 class之間有什么區(qū)別呢？

到目前為止，對(duì)于每個(gè)人 DIV 標(biāo)簽，我們可以用 id 去命名它，如 id=”header”，那么id和 class之間有什么區(qū)別呢？id 是唯一的而 class不是。如果從頭到尾瀏覽源代碼，你會(huì)發(fā)現(xiàn)只有一個(gè) id=”header” 和一個(gè) id=”container”，但是有多個(gè)class=”entry”。

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

但是不能重復(fù)任何事情 id，比如，不能在同一頁(yè)面上有兩個(gè) id=”header” 。當(dāng)你想一遍又一遍重新利用一些東西如日志的標(biāo)題，那么請(qǐng)使用 class。

第3步：給日志的標(biāo)題和內(nèi)容添加 class=”post” 的 DIV 標(biāo)簽

用一個(gè) DIV 標(biāo)簽把日志的標(biāo)題和內(nèi)容一起圍住。并把這個(gè) DIV 標(biāo)簽命名為：class=”post”。

<div class=”post”>

</div>

（class 和 ID 的名字不是一定要嚴(yán)格和上面一樣，可以把 class 和 ID 的名字設(shè)置任何你想要的名字，但是 post 和 entry 更加簡(jiǎn)潔明了，也更容易記住。）

現(xiàn)在你的 index.php 文件為：

這個(gè)是經(jīng)過(guò)縮進(jìn)整理后的版本：

一般我們使用 tab 健而不是空格鍵產(chǎn)生縮進(jìn)的。為什么要對(duì)代碼進(jìn)行縮進(jìn)呢？實(shí)際上的代碼不像我上面的屏幕截圖一樣有紅色或者綠色的高亮顯示，我們需要有個(gè)能夠跟蹤代碼的方法，通過(guò)縮進(jìn)就能更容易知道哪個(gè) </div> 是結(jié)束哪個(gè) <div>。

保存并刷新瀏覽器，然后查看源代碼中的代碼。

為什么你要添加另外一個(gè) DIV 標(biāo)簽去圍住日志標(biāo)題和日志內(nèi)容？

增加這個(gè) DIV class=”entry” 去把日志標(biāo)題和日志內(nèi)容區(qū)分開(kāi)。而這個(gè)div class=”post”是把當(dāng)前日志和其他內(nèi)容區(qū)分開(kāi)。

未經(jīng)允許不得轉(zhuǎn)載：445IT之家 » WordPress主題開(kāi)發(fā)教程七：循環(huán)輸出日志內(nèi)容