WordPress主題製作進階#3建立一個WordPress主題
1、修改修改style.css
現在我們將HTML模板轉換為WordPress主題。 我剛剛安裝了WordPress，只有預設的幾款主題。 我們將轉到WordPress資料夾，wp-content，然後在themes資料夾中，找到我們新建的advanced-wptheme資料夾。然後開啟其中的style.css檔案，在頂部新增以下程式碼：
/* Theme Name: Advanced WP Theme URI: 這裡填主題介紹的網址，沒有就填你的部落格網址吧 Description: 一個高階的WordPress主題 Version: 1.0 Author: 埼玉 Author URI: 你的個人網址 Tags: theme */
然後將index.html檔案字尾改成.php，再在資料夾內新增一張預覽圖screenshot.png，最後啟動wamp伺服器登入到WordPress後臺，就可以在外觀->主題中看到我們的Advanced WP主題了。
2、引用樣式表
我們啟用這個主題，然後到前端檢視站點，發現它沒有載入樣式：
我們開啟剛剛重新命名的index.php檔案，用以下PHP標籤替換樣式表的引用連結，
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory 儲存程式碼重新整理前端頁面，頁面就恢復正常了，css樣式被載入了。
3、修改index.php檔案
現在我們看到的頁面都是index.php檔案中的靜態內容，並不是由WordPress提供的動態態內容。接下來我們來做一些小改動。 我們從index.php檔案的頂部開始，向下逐行修改程式碼：
修改標頭檔案
- 進入html標籤，我們將放入language_attributes（）函式
- 使用php bloginfo更新title標籤，並插入name引數
- 新增元字符集來放置字符集meta標籤，使用bloginfo（）函式並傳入charset
- 使用名為viewport的meta標籤新增視口函式，讓主題適應響應式。
- 輸入wp_head（）函式
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
<?php wp_head(); ?>
</head>
修改標題欄
現在在body標籤中，我們需要body_class（）函式。 對於logo或標題，我們將刪除靜態文字並新增帶有name引數的php bloginfo。 接下來，我們使用bloginfo新增標題以使其動態化，然後我們還可以傳入’description’。 這個搜尋表單過於簡單。 我們需要在form標籤並新增一些內容。 我們將使用method =“get”更新它，然後使用action，這是它提交的地方，為此，我們將使用esc_url（）函式輸入php。 然後我們將傳入home _url然後/。 然後，在輸入中，我們將新增一個name屬性，並將其設定為s。程式碼如下：
<body <?php body_class(); ?>>
<header>
<div class="container">
<h1>
<a href="index.html"><?php bloginfo('name'); ?> </a>
<small><?php bloginfo('description'); ?></small>
</h1>
<div class="h_right">
<form method="get" action="<?php esc_url(home_url('/')); ?>">
<input type="text" name="s" placeholder="Search...">
</form>
</div>
</div>
</header>
我們儲存程式碼，去前端重新整理頁面，看看它現在長什麼樣子
</footer>
<?php wp_footer(); ?>
</body>
</html>
回到前端重新整理頁面會看到管理選單出現了，我們現在到後臺修改一下網站資訊，讓它顯示我們想要的結果，
修改導航選單nav
接下來我們修改導航部分的程式碼，刪除整個ul標籤和其內部所有li標籤：
- 首先建立一個名為args的變數，然後將一個數組array賦值給args變數，陣列只有一個引數，代表選單的位置
- 將變數args作為引數傳遞給 wp_nav_menu（）函式
程式碼如下：
<nav class="nav main-nav">
<div class="container">
<?php $args = array('theme_location' => 'primary');?>
<?php wp_nav_menu($args); ?>
</div>
</nav>
現在到前端重新整理頁面，看到我們前面修改過的頁面名稱出現在導航選單了
<?php
// Theme Support
function adv_theme_support(){
// Nav Menus
register_nav_menus(array(
'primary' => __('Primary Menu'),
'footer' => __('Footer Menu')
));
}
add_action('after_setup_theme', 'adv_theme_support');
儲存程式碼後，我們回到站點後臺重新整理頁面，看到外觀項下面多了一個選單子選項，右側也出現了Primary menu和Footer menu兩個顯示位置，我們勾選Primary menu複選框
4、後臺增加頁面
接下來我們再建立兩個子頁面，首先為關於頁面建立一個叫團隊的頁面，
我們現在有了導航欄，標題，搜尋框和我們所有的樣式。 在下一節中，我們將開始建立我們的主迴圈來檢視部落格文章。