WordPress 主題教程 #5b:日志內容

【轉載自我愛水煮魚

日志內容從零開始創建 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",那么idclass之間有什么區別呢?id 是唯一的而 class不是。如果從頭到尾瀏覽源代碼,你會發現只有一個 id="header" 和一個 id="container",但是有多個 class="entry"

那么 headercontainer 可以用 class 去取代 id 嗎?完全可以。

但是不能重復任何 id,比如,不能在同一頁面上有兩個 id="header" 。當你想一遍又一遍重新利用一些東西如日志的標題,那么請使用 class

第3步:給日志的標題和內容添加 class=”post” 的 DIV 標簽

用一個 DIV 標簽把日志的標題和內容一起圍住。并把這個 DIV 標簽命名為:class=”post”

<div class=”post”>

</div>

(class 和 ID 的名字不是一定要嚴格和上面一樣,可以把 class 和 ID 的名字設置任何你想要的名字,但是 postentry 更加簡潔明了,也更容易記。)

現在你的 index.php 文件為:

這個是經過縮進整理后的版本:

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

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

為什么你要添加另外一個 DIV 標簽去圍住日志標題和日志內容?

增加這個 DIV class=”entry” 去把日志標題日志內容區分開。而這個div class=”post”是把當前日志和其他內容區分開。


想在手機閱讀更多Wordpress資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems