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

下面就開始這篇課程。首先還是打開 XAMPP，“tutorial”主題文件夾，瀏覽器并在瀏覽器地址欄輸入：
http://localhost/wordpress，最后打開 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)容只是一長行的文本，一直到窗口的右邊，因?yàn)槲覀冞€沒有樣式化它。還記得最開始說到的style.css 這個文件嗎？我們以后用它來控制所有頁面元素的顯示和布局。

我們在 WordPress 后臺輸入多篇測試日志，就可以看到多篇日志一起被顯示的樣子：

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

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

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

還有，有沒有注意到我圈出的開啟和關(guān)閉的P標(biāo)簽。他們都沒有在 index.php 文件中出現(xiàn)，但是他們在源代碼中出現(xiàn)了。

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

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

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

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

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

<div class=”entry”>

</div>

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

保存并刷新瀏覽器，如果我們再次去查看源代碼的話，就會發(fā)現(xiàn)每篇日志內(nèi)容在 class=”entry” 的 DIV 標(biāo)簽中。

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

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

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

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

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

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

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

<div class=”post”>

</div>

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

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

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

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

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

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

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

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