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() . '/style.css'); ?>" type="text/css" media="screen, projection" />
保存代碼刷新前端頁面，頁面就恢復正常了，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="<?php echo home_url('/'); ?>"><?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>
我們保存代碼，去前端刷新頁面，看看它現在長什麼樣子
我們發現標題和介紹變成我們上一章節在後臺設置的Simple主題製作，這是因爲PHP函數動態獲取了後臺的數據，另外上方多了一行空白區域，原因是我們還沒有wp_footer（）函數，這是管理菜單的位置。 我們接下來會添加它
我們在footer的結束標籤下方添加wp_footer函數
</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>
現在到前端刷新頁面，看到我們前面修改過的頁面名稱出現在導航菜單了
我想在我們的functions文件中指定主題中的不同菜單位置，我們有兩個菜單。 我們創建一個functions.php文件，併爲Theme Support設置一個函數。代碼如下：
<?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、後臺增加頁面
接下來我們再創建兩個子頁面，首先爲關於頁面創建一個叫團隊的頁面，
之後按照上面同樣的操作，爲關於頁創建另一個子頁面FAQ。我們先不把這兩個頁面添加到導航菜單，稍後幾節課中我們會學習如何使用子菜單。
我們現在有了導航欄，標題，搜索框和我們所有的樣式。 在下一節中，我們將開始創建我們的主循環來查看博客文章。