在這篇中，我們將展示如果顯示部落格日誌的內容，並且使用一個 DIV 標籤把部落格日誌的內容和日誌的標題區分開。
下面開始這篇課程。首先還是開啟 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"，但是有多個 。
那麼 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」是把當前日誌和其他內容區分開。
