一般說來我們網站的所有頁面的頭部和底部基本相似，所以我們可以將這些相似的程式碼放到一個檔案中，然後在每個模板檔案載入這個頭部和底部檔案即可，這樣我們就不需要給每個模板都把頭部和底部檔案都寫一遍，而且修改方便，改了頭部檔案，所有頁面都會生效。

接著上一篇教程，我們在做主題資料夾 content hemesAurelius 下面新建一個頭部檔案 header.php，然後將 index.php 中的頭部程式碼提取 (剪下) 出來，寫入這個檔案：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head profile="http://gmpg.org/xfn/11">  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Aurelius | Blog</title>  
  6. <!-- Stylesheets -->  
  7. <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />  
  8. </head>  
  9. <body>  
  10. <div id="wrapper" class="container_12 clearfix">  
  11.     <!-- Text Logo -->  
  12.     <h1 id="logo" class="grid_4">Aurelius</h1>  
  13.     <!-- Navigation Menu -->  
  14.     <ul id="navigation" class="grid_8">  
  15.         <li><a href="contact.html"><span class="meta">Get in touch</span><br />  
  16.             Contact Us</a></li>  
  17.         <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />  
  18.             Blog</a></li>  
  19.         <li><a href="index.html"><span class="meta">Homepage</span><br />  
  20.             Home</a></li>  
  21.     </ul>  
  22.     <div class="hr grid_12 clearfix">&nbsp;</div>  
  23.     <!-- Caption Line -->  
  24.     <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>  
  25.     <div class="hr grid_12 clearfix">&nbsp;</div>  

儲存好頭部檔案，在 index.php 的前面加上程式碼：

  1. <?php get_header();?>  

get_header() 函式會自動載入主題資料夾中的 header.php 檔案，所以頭部檔案的檔名命名為 header.php 然後使用 get_deader() 函式即可，同樣的編輯主題資料夾的其它檔案：archive.php 、 contact.php 、 full_width.php 、 page.php 和 single.php，刪掉以上類似程式碼，也改成

  1. <?php get_header();?>  

現在頭部檔案已經製作好了，接下來的工作就是編輯頭部檔案 header.php 將裡面的靜態 html 程式碼換成動態的 php 程式碼。
首先我們需要更改資訊，一般我們將 title 資訊改成這樣的： 文章頁面標題 | 網站名稱 當然你也可以根據自己的 seo 只是更改，比如有的人在標題中加入網站描述。將 header.php 中的<title>Aurelius | Blog</title> 改成下面的程式碼：

  1. <title><?php if ( is_home() ) {   
  2.         bloginfo('name'); echo " - "; bloginfo('description');   
  3.     } elseif ( is_category() ) {   
  4.         single_cat_title(); echo " - "; bloginfo('name');   
  5.     } elseif (is_single() || is_page() ) {   
  6.         single_post_title();   
  7.     } elseif (is_search() ) {   
  8.         echo "搜尋結果"; echo " - "; bloginfo('name');   
  9.     } elseif (is_404() ) {   
  10.         echo '頁面未找到!';   
  11.     } else {   
  12.         wp_title('',true);   
  13.     } ?></title>  

上面的程式碼透過判斷將首頁、文章頁、分類頁、 404 頁面的<title> 資訊設定成不一樣的形式，這樣是很有必要的。

幾個判斷函式的解釋如下：

  1. is_home() ：當前頁面為主頁時返回 true
  2. is_category()：當前頁面為分類頁時返回 true
  3. is_single()：當前頁面為單文章頁時返回 true
  4. is_page()：當前頁面為單頁面時返回 true
  5. 更詳細的內容參閱 WordPress 檔案：條件標籤

所以如果想根據自己的需要製作一個主題，不會 php 的話會很不方便，所以個人建議，如果打算製作主題，有必要去學習一下 php 。

第二步：修改 css 檔案的路徑。
在 header.php 檔案中找到下面程式碼

  1. <link rel="stylesheet" href="./style.css" type="text/css" media="screen" />  

也許你有會問，主題資料夾中不是有個 style.css 檔案嗎？為什麼訪問網站的時候沒有載入樣式表呢？

因為這個樣式表的路徑./style.css 其實是網站根目錄，在以後的教程中我們會講到，如果你不想讓別人輕易看出你的網站是使用 wordprss 程式，那麼你可以改變圖片、樣式表等檔案的路徑，比如本工作室，將圖片、樣式表都移到了網站根目錄，在網頁程式碼中就不會出現 wordprss 站才有的 wp-content/themes 之類的路徑。好了，將上面的程式碼改成：

  1. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />  

bloginfo() 函式很常用，函式引數和用法如下：

  1. <?php   
  2. bloginfo();   
  3. /*
  4. 該函式會根據引數直接輸出資訊，引數：  
  5.     name 部落格標題-預設  
  6.     description-描述資訊  
  7.     url-部落格 url  
  8.     rss2_url-部落格的 rss2.0feed 地址  
  9.     template_url 模板地址  
  10.     charset 編碼方式  
  11.    stylesheet_url 樣式表路徑
  12. home 網站首頁 url
  13. */  
  14. /*
  15. 如果不需要直接輸出而是獲取對應的參量，使用下面的 get_bloginfo，引數同上  
  16. */  
  17. get_bloginfo();   
  18. ?>  

bloginfo('stylesheet_url') 會自動輸出網站主題資料夾下 style.css 檔案的絕對網址，如 http://localhost/wp/wp-content/themes/Aurelius/style.css

不過，還有幾張圖片的路徑不對，還不能顯示出來，用文字編輯器開啟 index.php 、 archive.php 、 contact.php 、 full_width.php 、 page.php 和 single.php，給這些圖片加上正確的 URL，搜尋程式碼，將所有的：src="images/，批次替換成 src="<?php bloginfo('template_url'); ?>/images/。現在再重新整理你的主頁，看文章的縮圖 610×150 是否可以正常顯示。

第三步：更改部落格名稱和描述資訊，我們要將部落格名稱和描述，改成我們在後臺設定的資訊，將 header.php 中的如下程式碼：

  1. <h1 id="logo" class="grid_4">Aurelius</h1>   
  2. <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>  

修改成：

  1. <h1 id="logo" class="grid_4"><a href="<?php echo get_bologinfo('home'); ?>/"><?php bloginfo('name'); ?></a></h1>   
  2. <h2 class="grid_12 caption clearfix"><?php bloginfo('description'); ?></h2>  

可以看到這裡還是 bloginfo 和 get_bloginfo 函式，所以說這兩個函式經常用到。

第四步：新增 wp_head 。

wp_head 函式對於要使用外掛的主題來說比較重要，一般如果外掛需要載入 css 檔案和 js 檔案，都是透過 wp_head() 函式輸出的。在 header.php 檔案的</head> 前面新增：

  1. <?php wp_head(); ?>  

在去看你的網站，檢視網頁原始碼，會發現<head></head> 標籤中多瞭如下程式碼：

  1. <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ludou.co.tv/blog/xmlrpc.php?rsd" />   
  2. <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ludou.co.tv/blog/wp-includes/wlwmanifest.xml" />    
  3. <link rel='index' title='露兜實驗室' href='http://ludou.co.tv' />   
  4. <meta name="generator" content="WordPress 2.9.2" />  

當然這些程式碼是多餘的，比如程式版本？告訴別人程式版本，是不安全的。所以在以後的教程中我們會講到，如何去除這些多餘的頭部資訊。

第五步：顯示選單欄

當前選單有幾個選單項，但是都是靜態的，我們希望能在後臺控制，在頭部檔案 header.php 中找到下面程式碼：

  1. <ul id="navigation" class="grid_8">   
  2.     <li><a href="contact.html"><span class="meta">Get in touch</span><br />   
  3.         Contact Us</a></li>   
  4.     <li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />   
  5.         Blog</a></li>   
  6.     <li><a href="index.html"><span class="meta">Homepage</span><br />   
  7.         Home</a></li>   
  8. </ul>  

修改成載入選單的函式：

  1. <?php wp_nav_menu( array('sort_column' => 'menu_order', 'container_id'=>'menu','menu_id'=>'navigation') ); ?>  

不過新增了選單函式，還得後臺有個選單控制的哦，所以我們需要再後臺註冊一個選單。在 functions.php 中新增以下程式碼即可：

  1. //註冊選單   
  2. if( function_exists('register_nav_menus') ){   
  3.     register_nav_menus(   
  4.         array(   
  5.             'primary' => __( '主導航選單' ),   
  6.         )   
  7.     );   
  8. }  

之後進入後開即可看到後臺即可看到主題支援選單了。這個函式是最新的選單函式，跟原文不一樣。 wp_nav_menu 函式引數稍多，這裡就不加解釋了，可以到官網搜尋。。

到現在為止，你的主題雖然能夠從後臺控制頭部程式碼了，但是還是隻能看到一個頁面，因為只有頭部是動態的，其它位置都是靜態的。

但是頭部檔案還有一個重要的資訊沒有新增，那就是描述和關鍵字。這個在下一篇教程中專門講解。

最後提供露兜部落格經過修改後的檔案，以提供參考比較

下載該檔案