WordPress 主題教程 #5:主循環

【轉載自我愛水煮魚

調用博客日志的主循環(The Loop)是 WordPress 中最重要的 PHP 代碼集,几乎所有的頁面都會用到它。這也是從零開始創建 WordPress 主題系列教程的第五篇。

在開始繼續學習之前,我們先復習下到目前為止學到了什么?

到目前為止,我們已經學到::

現在讓我們開始第五篇:主循環(The Loop)

打開 Xampp,“tutorial”主題文件夾,瀏覽器,并且在瀏覽器中轉到 http://localhost/wordpress,最后打開 index.php 文件。

下面應該是這時候 index.php 文件中的內容:

記住,為了學習這些代碼,請盡量手工輸入而不是拷貝和粘貼。

第1步:創建 container Div

在 header DIV 標簽下添加一個 DIV 標簽,并給它的 ID 賦值為 “container”,如下:

<div id=”container”>

</div>

“container” 這個 DIV 標簽是用把博客的主要內容和其他東西都區分開,比如 sidebar 和 footer 等。

第2步:輸入主循環代碼

在 Container 的 DIV 標簽中添加如下代碼:

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

這段代碼就是 WordPress 中的主循環(The Loop)。在詳細解釋這些代碼作用之前,我們來看下現在 index.php 所包含的代碼:

你可能已經注意到Container DIV 中的每一行都被縮進了,這是為了更好的組織代碼,更加利于閱讀(使用 tab 健而不是空格鍵進行代碼縮進,)。

剛才發生了什么?

  • if(have_posts()) - 檢查博客是否有日志
  • while(have_posts()) - 如果有日志,那么博客有日志的時候,執行下面 the_post() 這個函數。
  • the_post() - 調用具體的日志來顯示。
  • endwhile; - 遵照規則 #1,這里用于關閉 while()
  • endif; - 關閉 if()
  • 注釋:并不是所有的代碼都需要兩部分用來打開和關閉。有些代碼能夠自我關閉,這就解釋了 have_posts()the_post(); 這兩個函數。因為 the_post();if()while() 的外面,只需要分號去結束或者關閉。

第3步:調用日志標題

在前面的課程中,我們學習了使用 bloginfo('name') 去調用博客的標題。現在我們將學習在主循環(The Loop)中如何調用日志標題

the_post(); ?> 的后面和 <?php endwhile; ?> 的前面輸入 <?php the_title(); ?>

保存 index.php 文件并刷新瀏覽器,這時候應該看到在博客描述的下方出現 Hello World ,默認安裝 WordPress 之后,博客只有一篇日志。而我的測試的博客有多篇日志,所以這里有多個日志標題,而且因為我所用的日志標題是一樣的,我也沒有進行組織整理他們,所以它們看起來像很長的一行 Hello World。

第4步:給日志標題加上鏈接

日志標題轉變成日志標題鏈接。還記得怎樣吧博客的標題轉變成一個鏈接的?

<?php the_title(); ?> 兩邊增加 <a href=”#”></a>

保存并刷新你的瀏覽器。現在日志的標題都變成了鏈接了,但是它們并沒有指向哪里。為了使得每個標題都能指向正確的日志,我們需要把 # 替換為 the_permalink()

<a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a>

the_permalink() 是用來調用每篇日志地址的 PHP 函數。保存并刷新瀏覽器。

如果只有一個 Hello World 標題,把鼠標移到鏈接上面,觀察你的瀏覽器底部的狀態欄,他不再是 http://localhost/wordpress/#

如果有不止一個的標題鏈接,我們將看到每個鏈接會鏈到不同的日志或者網頁。但是我們的日志標題依然在同一行上面。為了分開它們,在日志標題鏈接代碼的兩邊添加 <h2></h2> 標簽。

<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>

記住 H1 用作你的博客的標題,那是網頁的標題。H2 被用作子標題。現在你的日志標題鏈接是子標題了,每一個都是一行。保存 index.php 文件并刷新瀏覽器,結果如下:

post-title-heading.gif

WordPress 主循環就介紹到這里,現在 index.php 文件內容應該是:


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