在這篇中，我們將展示如果顯示博客日誌的內容，並且使用一個 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」是把當前日誌和其他內容區分開。
