底部和拆分 Index 是從零開端創立 WordPress 主題系列教程的第十四篇,這篇我們完成對主題的款式化和開端把 index.php 文件分紅多個小文件。在這篇中,首先要對 style.css 文件停止修正,然後把 index.php 分紅一些新的文件。

翻開 XAMPP,主題文件夾,Firefox,IE,index.php 和 style.css 。

第 1 步:款式化 footer
給 footer DIV 增加 10px 頂部填充。你還記得如何增加填充?這次我不提供代碼。

第 2 步:設置 footer P 的行距
給 footer 裏的一切的 P 標籤 18px 行距。那是 #footer p{}. 。 (今天關於 CSS 的就這麼多。)

第 3 步:header.php

  • 創建一個新文件,把它命名為 header.php
  • index.php 文件中,把 header DIV 及以上所有東西都拷貝到 header.php 文件中。

create-headerphp.gif

copy-header.gif

這是我的 header.php 文件。不要從我的這裏拷貝,從你自己的 index.php 文件拷貝。

第 4 步:在 index.php 中導入 header.php

為了使所有從 index.php 中拷出的內容依然在 index.php 文件中,輸入以下代碼:

<?php get_header(); ?>

get-header.gif

這是個 WordPress 主題系統特別用來導入 header.php 文件的函數,而不用使用 PHP 的函數:<?php include (TEMPLATEPATH . 『/header.php』); ?>.

保存並刷新瀏覽器,你應該看到沒有變化。如果你的改變破壞了主題,那麼肯定有錯誤。

第 4 步:sidebar.php

  • 和第 4 步一樣,更多相同的事情。這次,創建 sidebar.php 文件。
  • index.php 文件中的 Sidebar DIV 從開始到結尾都複製到 sidebar.php 文件中。
  • 那麼,在 index.php 文件,將其取代為:<?php get_sidebar(); ?>.
  • 保存並刷新瀏覽器,再一次,你應該看到沒有變化。
  • 這是我的 sidebar.php 文件。

get-sidebar.gif

第 5 步:footer.php

  • footer.php 重複上面的步驟。
  • 這是我的 footer.php 文件。

get-footer.gif

教程回憶
•創立了三個新文件:header.php,sidebar.php 和 footer.php 。
•運用了三個新的函數:get_header(),get_sidebar() 和 get_footer() 。
•下面是這節課完畢之後的文件:index,style,header,sidebar,footer 。