WP Theme 教程 #14:底部和拆分 Index

【轉載自我愛水煮魚

這篇,我們完成樣式化和開始把 index.php 文件分成多個小文件。在這篇中,你可能先需要 style.css 文件,然后你將把 index.php 分成一些新的文件。

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

第1步

footer DIV 增加 10px 頂部填充。你還記得如何增加填充?我這次不給你代碼了.

第2步

給 footer 里的所有的 P 標簽 18px 行距。那是 #footer p{}.。(今天關于 CSS 的就這么多。)

第3步

  • 創建一個新文件,把它命名為 header.php。確認是 PHP 文件而不是文本文檔。
  • index.php 文件中,把 header DIV 上面所有東西都拷貝到 header.php 文件中。

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

第4步

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

<?php get_header(); ?>

這是個 WordPress 主題系統特別用來包含 header.php 文件的函數,而不用使用:<?php include (TEMPLATEPATH . ‘/header.php’); ?>.

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

第4步

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

第5步

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

教程回顧

  • 你創建了三個新文件:header.phpsidebar.phpfooter.php
  • 你學到了三個新的函數:get_header()get_sidebar()get_footer()
  • 下面是這節課結束之后的文件:indexstyleheadersidebarfooter。不要拷貝并使用它們取代你自己打。如果有錯誤或者你的主題沒有顯示正確,在和我的代碼對照檢查下。

下一篇:WP Theme 教程 #15:子模板文件

請查看教程目錄:WordPress 主題教程系列

翻譯自:WP Theme Lesson #14: Footer and Dividing Index

創建 WordPress 主題系列教程均為本站翻譯,如要轉載,請注明:轉載自我愛水煮魚和本文地址。


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