日誌內容是從零開端創立 WordPress 主題系列教程第五篇的第二局部，在這篇中，我們將展現假如顯現博客日誌的內容，並且運用一個 DIV 標籤把博客日誌的內容和日誌的標題辨別開。再次強調一次，上一篇關於 WordPress 主循環引見的課程十分重要，你需求徹底明白之後才幹繼續學習。

下面開端這篇課程。首先還是翻開 XAMPP，「tutorial」 主題文件夾，閲讀器並在閲讀器地址欄輸入：http://localhost/WordPress，最後翻開 index.php 。

第 1 步：運用 the_content() 函數顯現日誌內容
在日誌標題代碼下面輸入：<?php the_content(); ?>

保管並刷新閲讀器，如今在日誌標題下面看到了一些文本：

我們運用了 PHP 函數 the_content() 調用了 日誌的內容。如今，日誌的內容只是一長行的文本，不斷到窗口的右邊，由於我們還沒有款式化它。還記得最開端説到的 style.css 這個文件嗎？我們以後用它來控制一切頁面元素的顯現和規劃。

我們在 WordPress 後台輸入多篇多篇測試日誌，就能夠看到多篇日誌一同被顯現的樣子：

返回閲讀器，點擊」 查看」 選擇 「頁面源代碼」，就會彈出一個源代碼窗口，假如你運用的是 Internet Explorer，那麼彈出的是記事本。

我運用的是 Firefox 閲讀器，下面是在 FireFox 中顯現的樣子：

你留意到 index.php 文件和它的源代碼之間的區別了嗎？一切的文本，圖像和其他東西等一切上圖展現的東西都是經過 the_content() 這個函數調用來的。是不是很有用？留意這些代碼是不依賴詳細的 WordPress 主題，我們應該本人的這些文本和圖片停止編碼和款式化。

還有，有沒有留意到我圈出的開啓和關閉的 P 標籤。他們都沒有在 index.php 文件中呈現，但是他們在源代碼中呈現了。

P 標籤，為什麼和如何運用？

為什麼 – 當我們輸入日誌的時分，每次跳過一行就是一個段落，這個時分需求一個辦法去展現？我們能夠經過 P（段落，paragraph） 標籤，每個段落會在 P 標籤之間，這就是為什麼段落之間有行距的緣由，

如何運用 – 十分容易，WordPress 模板系統會自動幫我們產生 P 標籤。

第 2 步：DIV 標籤把博客日誌的內容和標題辨別開
給 the_content() 兩邊添加 DIV 標籤並給該 DIV 標籤附上 class=」entry」 屬性，如下：

<div class=」entry」>

</div>
你如今的 index.php 文件應該是：

保管並刷新閲讀器，我們再次去查看源代碼的話，就會發現每篇日誌內容在 class=」entry」 的 DIV 標籤中。

這樣我們就很容易曉得日誌標題在哪裏完畢和日誌內容在哪裏開端，這樣做也是以後運用 style.css 文件對它停止款式化做準備，經過 class 我們就能夠精確定位到日誌內容，款式化日誌的內容而不影響頁面上其他別的內容。

id 和 class 之間有什麼區別呢？

到目前為止，關於每個 DIV 標籤，我們能夠用 id 去命名它，如 id=」header」，那麼 id 和 class 之間有什麼區別呢？id 是獨一的而 class 不是。假如從頭到尾閲讀源代碼，你會發現只要一個 id=」header」 和一個 id=」container」，但是有多個 class=」entry」 。

那麼 header 和 container 能夠用 class 去取代 id 嗎？完整能夠。

但是不能反覆任何 id，比方，不能在同一頁面上有兩個 id=」header」 。當你想一遍又一遍重新應用一些東西如日誌的標題，那麼請運用 class 。

第 3 步：給日誌的標題和內容添加 class=」post」 的 DIV 標籤

用一個 DIV 標籤把日誌的標題和內容一同圍住。並把這個 DIV 標籤命名為：class=」post」 。

<div class=」post」>

</div>

（class 和 ID 的名字不是一定要嚴厲和上面一樣，能夠把 class 和 ID 的名字設置任何你想要的名字，但是 post 和 entry 愈加簡約明瞭，也更容易記。）

如今你的 index.php 文件為：

這個是經過縮進整理後的版本：

普通我們運用 tab 健而不是空格鍵產生縮進的。為什麼停止要對代碼停止縮進呢？實踐上的代碼不像我上面的屏幕截圖一樣有紅色或者綠色的高亮顯現，我們需求有個可以跟蹤代碼的辦法，經過縮進就能更容易曉得哪個 </div> 是結束哪個 <div> 。

保管並刷新閲讀器，然後查看源代碼中的代碼。

為什麼你要添加另外一個 DIV 標籤去圍住日誌標題和日誌內容？

增加這個 DIV class=」entry」 去把日誌標題和日誌內容辨別開。而這個 div class=」post」 是把當前日誌和其他內容辨別開。