使用Git、Composer、Sublime Text進行WordPress專案開發

建立WordPress新專案的流程

當你要開始建立一個WordPress的新專案，你會怎麼做呢？

以前的我大概會這樣做：

1. 到tw.wordpress.org下載最新的WordPress正體中文版本，Rock!
2. 解開WP壓縮檔，放進htdocs(apache的本機web目錄)再rename成”新專案名稱”
3. 到localhost/phpmyadmin建立一個空的資料庫
4. 到localhost/新專案名稱，開始安裝WordPress
5. 把需要用到的themes和plugins一併裝進WordPress裡
6. 開啟sublime text建立新專案，開工!

這種流程，來自於我一直以來的心智模型：習慣將WordPress視為專案的本體或主體，先將WordPress搞定，再來搞定客製的工作。

嗯，好像有點麻煩，也有點費時。主要是操作上述過程常常需要切換很多視窗，並且若發現需要的themes/plugins有新版本，在下載及管理上常常會有點混亂 (也許是個人的習慣不佳XD)。

將WordPress視為套件，而不是專案主體

先大概描述一下新的心智模型是這樣的：先建立專案的架構(skeleton)，預先決定好你要使用的套件有哪些(包含指定版本)，再一併將套件下載或更新至專案裡，跟過去流程最大的不同是將WordPress也視為一個附掛在你專案上的套件。

實際使用的新流程大部份動作在終端機(console)完成，速度上快很多，重點是後續管理上也更為簡潔單純。步驟如下：

1. 於htdocs執行：git clone https://github.com/mrmu/wp-skeleton-zhtw.git 新專案名稱
2. 建立資料庫：
   • mysql -u root;
   • create database 新專案名稱;
   • quit;
3. 於專案目錄內：subl composer.json；再於sublime text內 myjs-composer (snippet)，存檔離開
4. composer install
5. subl 新專案名稱 (儲存為sublime text專案)，修改wp-config.php內的資料庫資訊及WP_CONTENT_URL設定，存檔離開
6. 到localhost/新專案名稱，開始安裝WordPress
7. 裝完切換到sublime text，開工!

要補充說明的是第1步會clone我在github上的一個wp-skeleton-zhtw的code，實際上它是fork自別人的wordpress skeleton範例，我只是中文化再加上一些提示。

一堆指令看起來沒什麼feel，所以順手錄了一個示意影片 (假設要建立的專案叫NewProj)：

ps.我的composer.json有預先建立sublime text的snippet，因此我在json檔打mywp_composer再enter，就會輸出內容囉。

WordPress Skeleton

通常我們在開發WP網站，大部份的客製成果都儲存在wp-content裡，包含語系(languages)、外掛(plugins)、佈景(themes)及檔案上傳(uploads)，所以 wp-content 裡的檔案其實才是我們專案的主體，而將WordPress核心視為套件也很合理。

所以理想的狀況大概是這樣，將wp-content目錄拉出WP核心，WP核心會去參考外層目錄那個我們額外建立的wp-content，而非裡頭的wp-content，目錄的情況大概會是：

• 專案目錄/
  • wp/ (從tw.wordpress.org下載解開的WordPress核心檔案，什麼設定都不需改變)
  • wp-content/ (自建的外層wp-content目錄，此後開發檔案都放這裡)
  • wp-config.php (資料庫設定、WP_CONTENT目錄設定，利用它讓WP核心讀取外層的wp-content/)
  • index.php (一樣需要一個負責載入wp-blog-header.php的index檔)

這種架構方式已經有人做出來了，就是所謂的WordPress Skeleton，針對正體中文語系，我也fork了一份改寫成zhtw版。Skeleton不太會去更動，畢竟它就是一個簡單的專案初始架構，而且專案目錄進入git控制，也可以將wp目錄設至.gitignore，版本控管就可以略過WP核心了。

接下來的重頭戲是composer。

使用Composer來管理WordPress專案

composer是php管理相依套件的工具，我們可以利用composer預先設定好我們要抓的WordPress是什麼版本，相依於PHP什麼版本、再指定好要裝的Plugins和Themes有哪些，然後再透過一個指令 composer install，一併將它們安裝至專案裡。

如果你還不能在任意目錄執行mysql和subl，可以各別建立一個執行連結放在usr/local/bin，以我自己本機的環境為例：

sudo ln -s “/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl” /usr/local/bin/subl

sudo ln -s “/Applications/XAMPP/bin/mysql” /usr/local/bin/mysql

以下是供你參考的composer.json檔案內容：

{
  "repositories": [
    {
      "type": "composer",
      "url": "http://wpackagist.org"
    },
    {
      "type": "package",
      "package": {
        "name": "wordpress",
        "type": "webroot",
        "version": "3.8.1",
        "dist": {
          "type": "zip",
          "url": "https://github.com/WordPress/WordPress/archive/3.8.1.zip"
        },
        "require": {
          "fancyguy/webroot-installer": "1.0.0"
        }
      }
    }
  ],
  "require": {
    "php": ">=5.3.0",
    "wordpress": "3.8.1",
    "fancyguy/webroot-installer": "1.0.0",
    "wpackagist/redux-framework": "*",
    "wpackagist/advanced-custom-fields": "*",
    "wpackagist/posts-to-posts": "1.4.x"
  },
  "extra": {
    "webroot-dir": "wp",
    "webroot-package": "wordpress"
  }
}

完成後的目錄架構如圖，可以看到wp目錄裡放的是預設的WP版本，裡面沒有wp-config.php，而wp-content目錄裡的檔案也沒有被用到。

參考資源

關於composer在wordpress中的使用可以參考這篇：http://roots.io/using-composer-with-wordpress/ ，上述composer.json設定也是來自這篇的說明。
經由我目前粗淺的了解來稍微簡單的說明一下：wpackagist.org是一個composer套件的管理平台，上頭有很多可供安裝的套件庫(repositories)，每個套件庫各自都有定義composer.json內容(就類似上述wordpress套件的描述)。

原本只要寫require的描述就ok，但wpackagist.org沒有wordpress的套件，所以我們要自行寫repositories的描述。又因為通常更新下來的套件會放進vender目錄，我們希望WordPress可以放進wp目錄，因此還要裝一個fancyguy/webroot-installer的套件，再指定extra的描述，讓下載下來的wordpress存進wp目錄。

標籤：composer, git, Sublime Text, WordPress, WordPress開發

分類：WordPress, 網站設計

本文作者是Audi Lu