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


作者: | 2014/03/11 01:32:15 | 留言


建立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"
  }
}

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

參考資源

關於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目錄。


標籤:, , , ,

分類:,

本文作者是Audi Lu

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料