大牛們是如何開發 WordPress 主題的?

01-05

我自己嘗試過開發WordPress，最早是對著網上的教程，對著上面把所有的代碼都寫一遍，指的是各個頁面的模板（.php那些文件）。但是發現很多WordPress本身有的功能都沒有體現出來。
後來嘗試修改原本有的主題，比如TwentyTen，通過一次比較徹底的修改，來製作出自己的主題。
不知道那些大牛們是如何開發主題的，是基於已有的主題進行修改（二次開發），還是主題中用到的所有代碼都是自己寫或者摘錄的？

自己算是寫過一個主題，目前也在用( 這裡 -&> http://udonmai.com/ )，所以多少想說兩句。

當初走上web開發的路之後最想乾的事情就是寫個自己的WP主題。。。所以網上搜羅了很多資料，但是說實在的鮮有那種一下把人點通的教程出現。不是說沒有教程就寫不了，但是如果能有一個說得清楚的講解，比起自己摸索實在是省事太多。

當初一開始看的是我愛水煮魚博客上發布的一個教程 -&> WordPress 主題教程：從零開始製作 WordPress 主題，我下了PDF，很容易找。這個教程很老了，但是對於什麼都不清楚的人而言至少能給我們以全局的理解，到底開發WP主題是什麼意思，是個什麼樣的過程。這裡還有一個國外的教程可供擦考 -&> The ThemeShaper WordPress Theme Tutorial: 2nd Edition。

看完這個之後心裡就算是有個框架和大概了，知道其實就是在主題目錄里建一些PHP文件和HTML、CSS以及可能有的JS文件。PHP文件一般而言都是一個文件對應一個頁面，比如首頁，存檔頁，日誌頁等。然後最關鍵的來了，那就是這些PHP文件內允許我們調用WP提供的函數。函數的文檔就如@吳釗說的在這裡 -&> Template Hierarchy ? WordPress Codex。裡面有五花八門的函數可供使用，比如一篇博客其內容的輸出，謀篇博客它的標籤的輸出等等。其實也就是數據來源。

我們通過PHP來獲取數據，然後整合進HTML，配以一定的CSS和JS修飾，一個主題其實就完成了。但是這樣的主題其實並不優美，比如一個文件竟然就是一個頁面。通常來講，寫WP主題我們並不追求代碼的質量，能用就行（這一定是我的誤解）。

似乎一切都很簡單？其實並不是這樣的，因為每個頁面需要調用些什麼函數以及函數怎麼搭配使用，並不是那麼容易理清楚的，畢竟很多功能對應的函數又不唯一，我們無法在短時間內合理地做出選擇。

那麼這個時候，我個人更傾向於主題開發框架，也可以叫作模板。我也更推薦大家直接用它們來開發。那麼先來看看模板啊框架啊都是些什麼東西吧 -&> 最佳WordPress主題框架。

其實這裡面還分很多種，我大致把他們分成框架、工具套件以及沙盒。

1.框架

比如這個，Hybrid WordPress Theme，它就是一個全息的開發框架，它的理念在於其自身就是一個主題，而我們所要建的主題是它提供主題的子主題，我們通過PHP的對象繼承等特性來從父主題的功能上繼承很多基礎的東西，然後再在我們自己的文件上做修改以自定義。這種方法顯然比較「高級」，也是目前比較流行的一種。

2.工具套件

然後是工具類框架，它們不提供必須的繼承，而是給我們封裝自己的一套API，把很多功能更直接地暴露給我們使用。這一類我曾經搜到過，不過暫時沒有很典型的代表。

3.二次開發，沙盒

最後是沙盒，其實這是我自己起的名字，弄玄乎了。通俗說就是在原有的空白的精簡的主題的基礎上迭代開發自己的特性，也就是就是修改一個空白主題。我就是用的這種方式，而選擇的空白主題也是非常有名的sandbox -&> http://www.plaintxt.org/wordpress.html#sandbox, WordPress ? Sandbox ? Free WordPress Themes。該有的頁面它基本都有，該要的數據基本都會有必要的函數負責輸出，我們要做的，只是去調整負責每個頁面的那個PHP文件，數據多了，那就去掉，少了，去查文檔加進來。而且因為有了很多範例頁面，我們自定義一個頁面也是易如反掌。就像我自己的博客的首頁，我就是用原來的一個頁面改的。

- - -

再仔細看問題，我發現樓主似乎就框架類沒有自己實踐過，然後二次開發所基於的簡單主題也體驗過一些。所以我個人認為你或許可以試試看類似Hybrid的那個框架，它有免費部分以及一定的免費教程（類似的開發框架應該還有不少）。我自己理解的題主的本意就是想了解更多元更全面的開發主體的形式，進而找到最理想的哪一種。那麼多嘗試總是好的。

但是WP近來功能狂增，代碼量和API也增加不少，雖然codex上梳理得比較清楚，但是如果想完全搞清楚所有的細節，我覺得就學習性價比來說是很差的。而且WP的代碼眾所周知的不是優秀PHP程序的典範。如果是為了學習，我更建議看其他的項目，類似Welcome! - Laravel PHP Framework。而如果是為了開發WP主題來做推廣和運營等，那麼其實不用太在意過分的細節，看的幾個適合迭代開發的空白模板源碼即可。

瀉藥，這幾年工作忙，已經很少貢獻代碼了，不過可以給幾點建議：

樓主提到的 TwentyTen、TwentyEleven、… 這類默認主題實際上做了過多的封裝和特殊化處理，不太適合作為學習和入門的範本。而 2.x 年代的 default 主題除了 header 部分都是最基礎的模塊使用示例，建議找一個類似的，簡單基礎的主題作為學習參考。
首先要了解 WordPress 的頁面繼承關係和提供的鉤子有哪一些，這可以對各個 PHP 文件的作用瞭然於心。Template Hierarchy ? WordPress Codex
建議去了解一下 WordPress 官網提交主題的要求，不是要求一定要符合標準，因為那標準實在過於嚴謹了，有太多限制（ WordPress 主題審核）; 但是我們可以通過他們的要求清楚知道官方的開發建議和發展趨勢。Theme Review ? WordPress Codex
多用 Google，你遇到的問題很可能其他人也遇到過，而且解決了。使用代碼前要搞搞清楚原理，那些大段大段貼代碼或者標題為【N 個實現 XXX 功能的 WordPress 代碼】的文章基本可以忽略。
遇到看不懂的代碼和函數請務必查閱 WordPress Codex。Main Page ? WordPress Codex
多看看 WordPress 開發論壇，老外這方面很有熱情，可以看到一些精彩的討論和解決方案。

以上，祝君雙十一可以少些代碼，有甜美妹子陪伴歡度。

改出來的，二次開發，站在巨人的肩膀上

根據需要找一個差不多的模版主體（starter theme），21 Best WordPress Starter Themes for Developers in 2016，其實這種模版很多，總有一款適合你，然後開始摸。

本地機器裝上像MAMP這樣的東西，因為一鍵WordPress，測試方便。主題文件夾當然用git版控一下。

多年前手動櫓過，現在想起來沒什麼必要。純PHP，Function Reference 放手邊，邊查邊做。一點也不高端，但是挺愜意的。

1、PSD2HTML

PSD2HTML的基本要求是將設計圖轉換為靜態網頁（HTML/CSS/JS）。設計圖通常是PSD文件，由設計師（美工）根據客戶的要求製作。

轉換要標準。比如，現在的HTML都是&開頭。盡量不用CSS hacks。

轉換要精確。最好能精確到像素（pixel-perfect）。建議使用「馬克鰻」測量設計圖和比較設計圖與轉換的網頁。

如果不考慮響應式網頁設計（Responsive Web Design），那麼PSD2HTML針對的就是桌面瀏覽器。關於桌面瀏覽器，國外的網站，一般需要兼容IE8/9/10（不久的將來是IE9/10/11）和Firefox、Chrome、Safari（有時還需要兼容Opera）。國內的網站，一般還需要兼容IE6和IE7。瀏覽器兼容性問題令人頭疼。同一個網站，在不同的Windows版本的瀏覽器裡面可能會有所不同，在Windows和Mac的瀏覽器裡面也可能有所不同。有時候，客戶還會要求考慮Apple的視網膜屏幕。

如果考慮響應式網頁設計（Responsive Web Design），瀏覽器兼容性問題會更多。iPhone和iPad的默認瀏覽器是Safari（跟Mac版的Safari有所差別）。Android手機和平板的默認瀏覽器是Chrome（跟Mac版和Windows版的Chrome也有所差別）。

2、HTML2WP

WP主題的很多基本功能在WP官方主題中都有反映。將靜態網頁轉換為WP主題的時候可以參考WP官方主題。有些功能，WP官方主題可能沒有。此時，可以在網站安裝WP插件或者直接將WP插件包含到WP主題中。

舉個例子，一般的WP主題都有「主題設置」（Theme Options）功能。有一些WP主題需要網站安裝Options Framework插件。還有一些WP主題直接內置Options Framework（Options Framework Theme）。

有時候，網上搜不到需要的功能，那麼可以直接研究WP代碼。比如，某個WP的菜單項需要鏈接到最新的文章（post），我的實現思路請看「How to make a menu item always point to the latest post」。

不想使用WP插件，又不想直接研究WP代碼，沒有問題，你可以用http://generatewp.com/來生成WP代碼。GenerateWP可以根據你的設置自動生成Custom Taxonomy、Custom Post Type、Custom Post Status、Custom Sidebar、Custom Menu、Custom Admin Bar、Custom WP_Query、Custom Shortcodes……

3、合二為一

選擇全面、簡單的WP主題為起點，製作自己的WP主題。推薦：Underscores | A Starter Theme for WordPress。Underscores主題「麻雀雖小，五臟俱全」。不管是添加HTML/CSS，還是添加各種功能，都比較方便。

需要響應式網頁設計（Responsive Web Design）的時候可以考慮使用Bootstrap或Foundation: The Most Advanced Responsive Front-end Framework from ZURB。

建議安裝Theme-Check插件。在開發的過程中經常用它測試WP主題是個好習慣。

如果想製作完美的WP主題，建議安裝Theme Unit Test ? WordPress Codex提到的測試數據。你很可能會發現設計師（美工）提供的PSD文件漏了一些情況。

參考

WordPress ? Blog Tool, Publishing Platform, and CMS

Main Page ? WordPress Codex （有些地方沒有及時更新。建議直接看代碼。）

WordPress大學

我儘可能清晰地描述我的體會。在懂基本的PHP知識的前提下，WordPress官方每次發布和更新的默認主題，比如Twenty系列的，查看代碼和文件結構，幾乎能代表當下WordPress規範的代碼寫法。

遇到不明白的，去通過官方文檔了解各種函數的用法。我個人覺得，熟悉些這方面的英文會對學習有更多的好處。使用google+英文關鍵詞去搜索，可以獲得更多有用的資料或者社區交流信息。比如我想知道，如何通過一個分類的ID獲取到該分類下所有子分類的名稱，那麼你可以按這種模式去搜索「How to get the children categories name from the parent category ID in WordPress」, 不必過分糾結語法。

另，有很多值得關注的網站，比如tutsplus.com, wptavern.com, http://smashingmagazine.com等等，都是學習和了解WordPress發展的好地方。

當你已經了解了默認主題的結構和其他寫法之類，你可能會開始進軍更複雜的功能定製，那麼你需要了解到很多WordPress Core的東西，並且知道如何使用hooks來做定製，比如add_action(), do_action(), add_filter(), apply_filter()等等的用法，這些東西在國外網站上有大量詳細的資料，和社區成員毫無保留的分享。

我個人開發主題的路線，是從一開始簡單地在HTML模板上嵌套一些動態的PHP或者WP函數來調用內容，到目前幾乎廣泛使用class, hook來開發主題，以供使用者二次開發時，可以在不改動源文件的基礎上，僅使用hook就可以完成煥然一新的定製。

希望以上對你的思路有所啟發。

我一般是設計先Coding好,然後按照Html的樣子實現出來.Wordpress輕量級,完全沒必要再其他的模板上做開發.

推薦一個個人認為最值得學習，最值得拿來做二次開發的wordpress空白主題

HTML5 Blank WordPress Theme 主要是functions.php寫得很好，做了大量的優化。

簡單說，就是先把模版的html文件做出來，然後把裡面靜態的換成wordpress的模版函數，我就是這麼搞的，不清楚的地方可以繼續跟我交流

首先閹割掉Google，別問我為什麼，wp的通病就是打開慢。

基本思路是這樣子的，我先設計好網頁圖片，然後切圖做成html，然後套用wp標籤寫成主題

需要你會一點點php知識，更關鍵的是你要實現什麼樣的需求，php知識可以百度搜搜，利用wordpress提供函數獲取數據，通過一些php的運算輸出你想要的數據，然後html js css搞下前端。大部分開發都是前端方面的開發，wordpress blog基本功能的function函數網上有很多，copy下就可以。

其實wordpress更多的是css的編寫，新手可以先從修改css和簡單php代碼學起，邊學邊用，進步比較快

WordPress開發？

不存在的！我買了個達爾優的滑鼠，側鍵設置成了複製和粘貼，開發速度很快

藝術、設計靈感。

WordPress模板框架 TemplateToaster

wordprss 主要是針對國外用戶開發的，並且有好多的字體和代碼都是調用GOOGLE的。所以速度慢。可以看看我的網站 http://www.yunnantourol.com

我不是搞it出身的，學習wordpress開發也完全是興趣，希望能給同樣是新人的你一些建議。

接觸wordpress至今，我也做過一些插件和主題，放到官方插件庫和主題庫的也有一些。我最初做主題時，是看著codex自己完全從頭寫php,css,js的。

後來為了把主題提交到官方庫，代碼也參考過_s主題，希望能給你一些參考作用。

WordPress定製網站的主題太難了，還要學習PHP，對於網頁設計師來說要完全掌握並熟練地製作網站是一個大門檻。如果能使用像企戶動企業建站平台一樣，只利用6個HTML擴展屬性，如（hal:element、hal:area、hal:attr、hal:text、hal:each、ha:if、hal:remove），加上條件運算和動態數據對象，即可毫無限制使用HTML CSS JS代碼結構來定製動態網站。這樣WordPress才容易讓網頁設計師成為他們定製網站的首選。

推薦一個個人認為最值得學習，最值得拿來做二次開發的wordpress空白主題

l例如：http://www.deals-daily.net 可以從css出發，修改模板，然後針對需求做php方面的修改，再做了大量的優化。

補充一下樓上有一個骨架主題叫做 Toolbox ，是wordpress 以 Automattic 名義發的，你搜 Toolbox 就可以找到，相比那些默認主題更容易看懂也更易拿來做二次開發

噁心的cms