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

接着上一篇教程，我們在做主題文件夾 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 函數參數稍多，這裏就不加解釋了，可以到官網搜索。。

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

但是頭部文件還有一個重要的信息沒有添加，那就是描述和關鍵字。這個在下一篇教程中專門講解。

最後提供露兜博客經過修改後的文件，以提供參考比較

下載該文件