從零開(kāi)始制作 WordPress 主題其實(shí)不難，只要你從現(xiàn)在開(kāi)始認(rèn)真閱讀這個(gè)教程，一步一步認(rèn)真學(xué)習(xí)，你就會(huì)成為一個(gè) WordPress 主題制作高手。至少你會(huì)修改現(xiàn)有主題。

網(wǎng)絡(luò)上已經(jīng)有很多關(guān)于制作 WordPress 主題的教程，并且 WordPress 官方網(wǎng)站上也有指導(dǎo)文章。但是當(dāng)你不懂這方面的術(shù)語(yǔ)的話，這些教程可能不一定會(huì)幫助你，甚至還會(huì)誤導(dǎo)你，所以這個(gè)教程會(huì)真正從零開(kāi)始教你如何創(chuàng)建 WordPress 主題。

至少配備三種瀏覽器，Microsoft Internet Explorer、Mozilla Firefox、Google Chrome，版本暫時(shí)不限，用于測(cè)試網(wǎng)頁(yè)是否顯示正常

一個(gè)文本編輯器用于編寫(xiě)代碼，Dreamweaver、UltraEdit、NotePad++、Vim等，不推薦使用記事本

懂一點(diǎn)點(diǎn)的HTML、CSS

自己動(dòng)手編寫(xiě)過(guò)代碼 自己會(huì)設(shè)計(jì)網(wǎng)頁(yè)界面，想了解怎么制作WordPress主題 不打算動(dòng)手編寫(xiě)代碼，不想照著本教程一步一步地操作，只是想看看 沒(méi)有任何網(wǎng)頁(yè)設(shè)計(jì)知識(shí) 沒(méi)用過(guò)WordPress 非常熟悉WordPress主題制作過(guò)程 不喜歡我在此羅嗦 了解WordPress主題制作的過(guò)程 知道如何去修改一個(gè)WordPress主題，擴(kuò)展主題的功能 WordPress本地運(yùn)行環(huán)境（或者在線網(wǎng)站空間），并且已安裝好WordPress，作為測(cè)試博客 至少配備三種瀏覽器，Microsoft Internet Explorer、Mozilla Firefox、Google Chrome，版本暫時(shí)不限，用于測(cè)試網(wǎng)頁(yè)是否顯示正常 一個(gè)文本編輯器用于編寫(xiě)代碼，Dreamweaver、UltraEdit、NotePad++、Vim等，不推薦使用記事本

主題文件構(gòu)成

主題文件構(gòu)成

在開(kāi)始制作WordPress主題之前，首先得了解WordPress主題到底由哪些文件構(gòu)成，你得清楚WordPress程序是怎樣與主題文件連接的。以下是WordPress默認(rèn)主題default文件夾下的所有模板文件：看了上圖，可能你還摸不著頭腦，到底這些文件是干什么的。WordPress的主題是用PHP編寫(xiě)的，而不是純HTML + CSS，所以模板文件的后綴名是.php，如果你想精通WordPress的主題制作，完美控制你的博客，最好要熟悉PHP編程。要是不會(huì)PHP編程怎么辦？就做不了WordPress主題了嗎？那也不是，至少看完本系列教程，你也能夠掌握基本的WordPress主題制作方法。下面是WordPress主題文件層次結(jié)構(gòu)，它會(huì)告訴你：當(dāng)WordPress顯示特定的頁(yè)面類型時(shí)，會(huì)使用哪個(gè)模板文件呢？只有了解了以下主題層次結(jié)構(gòu)，你才能知道你的WordPress主題到底需要寫(xiě)哪些文件。

怎么看下面的文件層次結(jié)構(gòu)？
以主頁(yè)為例，下面有2個(gè)文件home.php和index.php，WordPress程序會(huì)從你的主題文件夾中依

主頁(yè):

1.home.php

2.index.php

文章頁(yè)：

1.single-{post_type}.php – 如果文章類型是videos（即視頻），WordPress就會(huì)去查找single-videos.php（WordPress 3.0及以上版本支持）

2.single.php

3.index.php

頁(yè)面:

1.自定義模板 – 在WordPress后臺(tái)創(chuàng)建頁(yè)面的地方，右側(cè)邊欄可以選擇頁(yè)面的自定義模板

2.page-{slug}.php – 如果頁(yè)面的縮略名是news，WordPress將會(huì)查找 page-news.php（WordPress 2.9及以上版本支持）

3.page-{id}.php – 如果頁(yè)面ID是6，WordPress將會(huì)查找page-6.php

4.page.php

5.index.php

分類：

1.category-{slug}.php – 如果分類的縮略名為news，WordPress將會(huì)查找category-news.php(WordPress 2.9及以上版本支持)

2.category-{id}.php -如果分類ID為6，WordPress將會(huì)查找category-6.php

3.category.php

4.archive.php

5.index.php

標(biāo)簽

1.tag-{slug}.php – 如果標(biāo)簽縮略名為sometag，WordPress將會(huì)查找tag-sometag.php

2.tag-{id}.php – 如果標(biāo)簽ID為6，WordPress將會(huì)查找tag-6.php（WordPress 2.9及以上版本支持）

3.tag.php

4.archive.php

5.index.php

作者：

1.author-{nicename}.php – 如果作者的昵稱為rami，WordPress將會(huì)查找author-rami.php（WordPress 3.0及以上版本支持）

2.author-{id}.php – 如果作者ID為6，WordPress將會(huì)查找author-6.php（WordPress 3.0及以上版本支持）

3.author.php

4.archive.php

5.index.php

日期頁(yè)面：

1.date.php

2.archive.php

3.index.php

搜索結(jié)果

1.search.php

2.index.php

(未找到)頁(yè)面

1.404.php

2.index.php

附件頁(yè)面

1.MIME_type.php – 可以是任何MIME類型 (image.php, video.php, audio.php, application.php 或者其他).

2.attachment.php

3.single.php

4.index.php

HTML靜態(tài)模板制作

制作WordPress需要了解PHP，但是不管怎樣，你的博客頁(yè)面都是一張網(wǎng)頁(yè)，網(wǎng)頁(yè)之所以能夠在瀏覽器中顯示出來(lái)，是因?yàn)樽罱K傳送給瀏覽器的是HTML、CSS和JS等終端代碼，最終由這些代碼控制瀏覽器的顯示結(jié)果。制作WordPress主題也不例外，它們都是網(wǎng)頁(yè)，網(wǎng)頁(yè)最基本的是HTML。要想制作WordPress主題，首先得設(shè)計(jì)主題界面，含蓄、簡(jiǎn)約、厚重、奔放……，風(fēng)格完全隨你，接著再將你的設(shè)計(jì)理念轉(zhuǎn)化為.html，并能在瀏覽器中正常顯示出來(lái)。

本系列教程不會(huì)教你如何去設(shè)計(jì)博客的界面，也不會(huì)教你HTML和CSS基礎(chǔ)知識(shí)，而是假定你已經(jīng)有HTML和CSS基礎(chǔ)了，如果你不會(huì)HTML，也不會(huì)CSS，后面的東西恐怕對(duì)你來(lái)說(shuō)就像天書(shū)了。

本系列教程將使用由tutsplus無(wú)償提供的html模板Aurelius為例，來(lái)講解WordPress主題的制作過(guò)程，其他模板的制作也類似。下面提供該HTML模板文件下載，我們將以此來(lái)練習(xí)如何將HTML靜態(tài)頁(yè)面與PHP代碼結(jié)合，制作WordPress主題。下載后，里面的html文件都是可以直接雙擊打開(kāi)的。

可能這個(gè)模板并不適合每個(gè)人的口味，但這個(gè)用于我們的主題制作練習(xí)已經(jīng)足夠了。另外你可能會(huì)詫異，怎么是英文版的？放心，到了后面你就會(huì)知道，是否英文版都沒(méi)多大關(guān)系。下面說(shuō)說(shuō)下載到的這些文件的用途：

首頁(yè)：index.html

存檔頁(yè)：archive.html

頁(yè)面：page.html

文章頁(yè)：single.html

聯(lián)系頁(yè)：contact.html

無(wú)邊欄頁(yè)：full_width.html

圖片：/images/

樣式表：style.css

縮略圖：screenshot.png

大多數(shù)博客所能看到的頁(yè)面類型也基本就這些。你可能已經(jīng)注意到，不管你用哪個(gè)WordPress主題，不同的文章頁(yè)面除了標(biāo)題和內(nèi)容不同以外，其他東西基本都是一樣，這就是所謂的模板。

小試牛刀

一個(gè)WordPress主題至少包含以下兩個(gè)文件：

style.css

index.php

好，現(xiàn)在就開(kāi)始我們的WordPress主題制作。在你的WordPress目錄 wp-contentthemes下新建一個(gè)文件夾，命名為Aurelius，將WordPress主題制作全過(guò)程（三）：HTML靜態(tài)模板制作下載到的style.css和index.html放到該目錄下，再將index.html重命名為index.php，這樣wp-contentthemesAurelius目錄下就有下面兩個(gè)文件：

登陸你的WordPress博客管理后臺(tái) – 外觀，里面是不是多了一個(gè)主題”Aurelius”呢？

啟用該主題，打開(kāi)你的博客主頁(yè)，OH，頁(yè)面一片混亂？怎么搞的？先繼續(xù)看下文。你可能會(huì)很好奇，這個(gè)主題的名稱可不以改成我要的名字呢、主題作者能不能改成我的名字呢、為什么主題沒(méi)有小圖片預(yù)覽，下面就教你怎樣更改這些”主題信息”。用文本編輯器打開(kāi)Aurelius目錄下的style.css，你可以按照下面的說(shuō)明嘗試在style.css文件最前面添加以下信息，再到WordPress管理后臺(tái)”外觀”欄目下，刷新一下看看有什么變化：

將WordPress主題制作全過(guò)程（三）：HTML靜態(tài)模板制作下載到的screenshot.png放到Aurelius目錄下，再到WordPress管理后臺(tái)”外觀”欄目下，看看有什么變化，是不是多了個(gè)預(yù)覽圖呢？主題制作完畢后，你可以給你的主題界面截個(gè)圖，命名為screenshot.png，大小300 * 225，放置到主題目錄下作為主題縮略圖

制作header.php

你可以嘗試用文本編輯器打開(kāi)從WordPress主題制作全過(guò)程（三）：HTML靜態(tài)模板制作下載到的 .html文件，不知道你有沒(méi)有發(fā)現(xiàn)他們頭部的代碼都非常的相似呢？其實(shí)我們可以提取這部分相似的代碼，放到一個(gè)單獨(dú)的文件header.php中，各個(gè)頁(yè)面想用這部分代碼的時(shí)候再用php的include包含進(jìn)去，省的每個(gè)頁(yè)面里面都要寫(xiě)這部分代碼，更改起來(lái)也可以達(dá)到一改全改的目的。

再次提醒：如果你不打算動(dòng)手編寫(xiě)代碼，這個(gè)系列教程就別看了，對(duì)你無(wú)益！

接著我們上次創(chuàng)建的主題目錄wp-contentthemesAurelius，在該目錄下新建一個(gè)php文件header.php，我們提取出index.php中的頭部代碼復(fù)制粘貼到header.php中，下面是的代碼就是目前header.php中的所有代碼了(當(dāng)然不同主題的頭部代碼都是不一樣，在你實(shí)際的項(xiàng)目中可以自定決定)：

再用文本編輯器打開(kāi)index.php、archive.php、contact.php、full_width.php、page.php和single.php，刪掉以上類似代碼，改成：

好，現(xiàn)在打開(kāi)你的測(cè)試博客主頁(yè)，看看我們制作的主題是否還可以正常工作，答案是可以的,跟原來(lái)幾乎沒(méi)什么兩樣，但還是一片混亂。get_header()就相當(dāng)于將header.php中的代碼拷貝到當(dāng)前的php文件。接下來(lái)，我們將仔細(xì)探討header.php中的動(dòng)態(tài)內(nèi)容。header.php將會(huì)被所有的模板頁(yè)面（主頁(yè)、分類頁(yè)、頁(yè)面、標(biāo)簽頁(yè)等）所包含，所以header.php中代碼應(yīng)該是動(dòng)態(tài)，適合不同頁(yè)面的，所以這里面需要用到PHP代碼，而不是單純的HTML。

下面讓我們一起來(lái)修改header.php

我們都知道不同頁(yè)面的title都是不一樣，而且title的設(shè)置還會(huì)直接影響到SEO的效果，所以這里應(yīng)該謹(jǐn)慎設(shè)置。下面提供一種SEO優(yōu)化的title寫(xiě)法，將<title>Aurelius | Blog</title>改成：

以上添加的php代碼運(yùn)用了條件判斷，針對(duì)不同的頁(yè)面采用不同title，這里解釋一下這幾個(gè)條件標(biāo)簽。

is_home() ：當(dāng)前頁(yè)面為主頁(yè)時(shí)返回true

is_category()：當(dāng)前頁(yè)面為分類頁(yè)時(shí)返回true

is_single()：當(dāng)前頁(yè)面為單文章頁(yè)時(shí)返回true

is_page()：當(dāng)前頁(yè)面為單頁(yè)面時(shí)返回true

更詳細(xì)的內(nèi)容參閱WordPress文檔：條件標(biāo)簽

到目前為止，可能你對(duì)這些條件判斷標(biāo)簽還沒(méi)有深入的認(rèn)識(shí)，也搞不懂到底是用了這些標(biāo)簽會(huì)對(duì)主題造成怎樣的影響的，隨著我們教程的進(jìn)一步深入，你會(huì)慢慢理解的。

在此之前你看到的首頁(yè)都是混亂的，原因是還沒(méi)加載css樣式?，F(xiàn)在我們一起把樣式加上。你可以在header.php中找到這一段代碼：

聰明的你可能問(wèn)：wp-contentthemesAurelius目錄下不是已經(jīng)有一個(gè) style.css嗎？那為什么 header.php沒(méi)有加載css呢？結(jié)果你是可以看到的，頁(yè)面一篇混亂，可以確定確實(shí)沒(méi)有加載到css。因?yàn)檫@是WordPress的主題，是要被WordPress的主程序調(diào)用，經(jīng)過(guò)層層解析才能把你的博客顯示出來(lái)，而不是簡(jiǎn)簡(jiǎn)單單的html靜態(tài)網(wǎng)頁(yè)文件。正確的改法：

bloginfo('stylesheet_url')輸出的是你的主題css文件絕對(duì)網(wǎng)址，如http://localhost/wp/wp-content/themes/Aurelius/style.css，WordPress程序會(huì)自動(dòng)識(shí)別你的WordPress安裝地址，當(dāng)前啟用的主題，自動(dòng)輸出這個(gè)style.css鏈接。現(xiàn)在你可以試著更改一下，然后刷新一下你的博客首頁(yè)，查看網(wǎng)頁(yè)源代碼，style.css的鏈接是不是變成你的了？頁(yè)面是否可以正常顯示了呢？

不過(guò)，還有幾張圖片的路徑不對(duì)，還不能顯示出來(lái)，現(xiàn)在我們一起用文本編輯器打開(kāi)index.php、archive.php、contact.php、full_width.php、page.php和single.php，給這些圖片加上正確的URL，搜索代碼，將所有的：src="images/，批量替換成src="<?php bloginfo('template_url'); ?>/images/。現(xiàn)在再刷新你的主頁(yè)，看文章的縮略圖610×150是否可以正常顯示。<?php bloginfo('template_url'); ?>用于輸出主題目錄的URL。

至于什么是pingback，你可以在搜索引擎中輸入關(guān)鍵字WordPresspingback，就可以得到你想要的答案了。如果你需要這個(gè)功能，可以將在<head>里面添加代碼：

在header.php，下面兩行代碼用于顯示博客名稱和描述：

上面是靜態(tài)代碼，現(xiàn)在做如下修改：

現(xiàn)在你的博客首頁(yè)看到的就是你博客名稱和描述了，并且logo也是一個(gè)鏈接指向你的博客首頁(yè)。我們這里說(shuō)說(shuō)這些php代碼的作用。

<?php echo get_option('home'); ?>輸出你的博客首頁(yè)網(wǎng)址

<?php bloginfo('name'); ?>輸出你的博客名稱

<?php bloginfo('description'); ?>輸出博客描述

博客名稱和描述可以在WordPress管理后臺(tái) – 設(shè)置 – 常規(guī)那里更改。以后制作你自己的WordPress主題的時(shí)候，你可參照上面的說(shuō)明對(duì)你的主題進(jìn)行修改。

相信每個(gè)已發(fā)布的WordPress博客主題都會(huì)提供feed訂閱，當(dāng)然我們的主題也應(yīng)該提供這樣的功能。在</head>之前添加以下代碼：

有些插件需要在網(wǎng)頁(yè)頭部添加一些js或css，要讓這些插件能夠正常的工作，也讓你的主題有更好的兼容性，你應(yīng)該添加wp_head()函數(shù)。打開(kāi)header.php，在</head>前面添加以下代碼即可：

現(xiàn)在打開(kāi)你的博客主頁(yè)，查看源代碼，</head>前面是不是多了以下類似代碼（這些都是wp_head()的功勞）：

關(guān)于添加網(wǎng)頁(yè)描述和關(guān)鍵字，可以查看我之前寫(xiě)過(guò)的文章：WordPress使用經(jīng)驗(yàn)（一）獨(dú)立的Description 和 Keywords

目前菜單欄有Home、Blog和Contact Us幾個(gè)菜單，不過(guò)這些都是靜態(tài)的內(nèi)容，并不是你博客上的頁(yè)面?，F(xiàn)在我們將菜單欄換成你的菜單，這里只在菜單欄中列出頁(yè)面page，當(dāng)然你也可以再放置分類，根據(jù)你的喜好來(lái)吧，將header.php中：

改成：

具體如何在菜單欄顯示分類，你可以看這篇文章，有什么問(wèn)題再給我留言：WordPress 分類做導(dǎo)航欄，并高亮顯示

另外，可以參考這兩個(gè)函數(shù)的說(shuō)明(英文):

Template Tags/wp list pages

Template Tags/wp list categories

在<body>前面，</head>后面添加PHP代碼，用于提高程序運(yùn)行效率：<?php flush(); ?>

好了，本次練習(xí)到此結(jié)束！現(xiàn)在總結(jié)一些今天講到的比較重要的知識(shí)點(diǎn)：

<?php get_header(); ?>從當(dāng)前主題文件夾中包含header.php文件

is_home()，is_single()，is_category()等幾個(gè)條件判斷標(biāo)簽

<?php bloginfo('stylesheet_url'); ?>輸出主題文件夾中style.css文件的路徑

<?php bloginfo('pingback_url'); ?>輸出博客pingback網(wǎng)址

<?php bloginfo('template_url'); ?>輸出博客主題目錄URL

<?php echo get_option('home'); ?>輸出你的博客首頁(yè)網(wǎng)址

<?php bloginfo('name'); ?>輸出你的博客名稱

<?php bloginfo('description'); ?>輸出博客描述

<?php wp_head(); ?>用于包含WordPress程序輸出頭部信息

<?php wp_list_categories(); ?>用于列出博客分類頁(yè)

<?php wp_list_pages(); ?>用于列出博客頁(yè)面

到目前為止你的博客還只能看到主頁(yè)，不要灰心，凡事一步一個(gè)腳印，以后教程會(huì)慢慢深入的。最后提供經(jīng)過(guò)本次修改后的Aurelius主題文件，你可以用文本編輯器打開(kāi)看看，跟你修改的文件比較比較（尤其是header.php），看看你改得怎么樣？

愛(ài)華網(wǎng)本文地址 » http://www.klfzs.com/a/25101010/2218.html