日誌內容是從零開端創立 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」 是把當前日誌和其他內容辨別開。