進度條

[WordPress][Mac] 01. 開始利用MAMP設定WordPress開發環境

上一篇我們已經使用MAMP讓PHP跑起來,本篇我們要直接讓完整的WordPress跑起來。

作者: 進度條編輯群 更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. [Mac] 安裝WordPress與建立MySQL使用者 (所屬課程)


以下正式開始文章


經歷過上篇

[PHP][Mac]覺得開發環境設定很麻煩嗎,用MAMP安裝就對了!

[PHP][Windows] 覺得開發環境設定很麻煩嗎,用MAMP安裝就對了!

我們已經成功地讓PHP跑起來了,

本篇則是要開始教大家如何讓開源軟體WordPress跑起來,

  

 

雖然理論上MAMP在Windows還是Mac應該要是一樣的設定,

但實際上還是有些不一樣,下面的文章有著既不一樣的地方

不過我們還是寫了Windows的版本,也可以直接過去看

[WordPress][Windows] 如何在Windows下使用MAMP建立WordPress開發環境

 

  

雖然進度條已經有很多對於WordPress的介紹了

不過之前的文章幾乎都是對於WordPress.com

而不是對WordPress這個PHP的框架做介紹,

簡單的區分的話,WordPress是一個免費的PHP框架,

也就是已經寫好了很多PHP程式讓你可以很簡單的做到部落格的功能。

只需要安裝起來就可以了。

如果你安裝到網路空間上面,它就會變成一個部落格網站。

安裝好後如果只需要單純的樣式變化,可以使用他內建的樣式功能下載免費或付費版本的樣式。

又因為它彈性很高,所以改變樣式後可以變成購物網站或是其他非單純部落格的網站。

因為他功能很多,所以我們會在其他的文章陸續介紹。

  

 

 

 

而WordPress.com則是WordPress公司利用WordPress架設的一個類似痞客邦的網站。

你可以直接在上面申請服務,並付費加購加值服務。

雖然其核心都一樣使用WordPress,但介面基本上是完全不一樣,

WordPress.com畢竟是用來營利的,所以介面上比較新潮。

單純自己使用WordPress框架架站要達到一樣效果,是需要加上不少自己的客製化努力才能達到。

但WordPress.com每一步幾乎都要收錢彈性過少滿不方便的。

只能說如果對動手做不排斥的話,自己使用WordPress框架架站會比較容易符合需求。

關於WordPress.com,可以從我們系列文的第一篇

[WordPress.com] 你想要用WordPress自架網站嗎? 何不先用免費的Wordpress.com 試試水溫?

開始看起。

 

 

接下來我們就開始繼續設定我們的WordPress開發環境

 

 

可能各位觀眾會有疑問,什麼是開發環境?為什麼要有開發環境?

一般來說,修改程式或是安裝新的樣式都是有一定的風險。

當任何程式碼、樣式改變了,都有機會造成系統出錯。

或是樣式跑掉不正確,任何的可能性。

所以我們幾乎都會在另外一台機器上先驗證一切都是正常的。

才上傳到正式的網站做"部署"(這個字眼比較程式一些,可以想成安裝+發布或程式上架)

雖然開發環境與正式環境可能有差異而造成部署上的問題。

不過這就比較吃經驗以及知識,但WordPress考量的滿完善,基本上沒這個問題。

 

 

如果要有開發環境的話,我們建議使用MAMP,因為雖不完全,但他有一點沙盒的概念,

把平常電腦使用的部分程式與他使用的分開,雖然安全性上沒有特別保護,但至少資料不會混雜。

 

 

 

 

當大家照著我們MAMP的安裝教學安裝完成後,

可以直接到WordPress.org下載WordPress。

也可以到https://tw.wordpress.org/ 下載官方中文化的版本。

不過一般中文化的版本不會是最新的。

以我們寫這篇文章的時候,中文化版本是4.7.4,英文版則是4.8

所以如果不在意一定要有中文的話,可以使用英文版。

但因為我們預期進度條的觀眾應該會比較喜歡中文介面,所以我們會以中文來做示範。

 

 

 

 

 

下載下來會是一個Zip檔



 

 

我們需要解壓縮到自己喜歡的目錄,然後把MAMP設定對應到該目錄

如果這一步有問題,請回去看上一篇MAMP設定。

主要應該是Mac按了箭頭圖示但無法選擇資料夾。

必須按資料夾圖示才對。

 

 

 

 

這樣設定完後打開網頁再進到首頁會顯示下圖。

如果忘記怎麼進去,網址直接打localhost:8888

(注意,8888是可以被改的,如果你改過的話請回到MAMP設定的Ports分頁,設回default)

 

 

 

 

上面的頁面是在跟你說你沒有wp-config.php檔,剛下載下來不會有,這是我們要自己填寫的。

這裡我打算教比較麻煩的直接填寫而不是自動生成。

(影片中是教自動生成)

 

首先打開我們的WordPress資料夾,

可以看到他有個預設的樣板叫做wp-confing-sample.php。

我們複製一份wp-confing-sample.php並且改名為wp-config.php放在同一個資料夾底下。

 

 

 

 

再利用文字編輯器去改變它

 

 

 

 

不過很多設定我們還不知道。

像是第一段的MySQL資料庫的設定。

我們需要知道

1. 資料庫名稱

2. 使用者名稱

3. 使用者密碼

這三個

其他的MySQL設定不用改。

 

 

 

其中資料庫我們必須要自己建立

利用MAMP預先裝好的PHP My Admin可以很輕鬆的控管MySQL

所以打開MAMP程式,點擊Open WebStart Page按鈕,重新進入MAMP管理首頁。

並且在上方尋找Tools,可以看到phpMyAdmin按鈕,但你可能會跟我一樣發現他不能點。

這是因為我們用的PHP版本太高,必須在MAMP中設定。

 

 

 

 

打開MAMP -> Preference -> PHP

選擇7.0.15

下面的Cache跟PHP程式執行效能有關,但我們先不管。

 

 


 

 

 

PHP版本改了回到網頁以後就可以點擊PHP My Admin 了。

 

 

 

 

打開來後會發見直接進入管理頁面,並沒有要我們登入(一般自己安裝phpMyAdmin還可能會有一個登入頁面)

這是因為MAMP預設用MySql的超級使用者root登入了,所以你不用自己登入。

(這個超級使用者是專屬於MySql這個程式的,跟你的電腦的超級使用者不是同一個)

 

 

 

 

這裡一般來說我們需要新增一個使用者,頻繁的使用超級使用者通常會有安全性問題。

不過MAMP的MySql與自己安裝的會是不同的,加上我們是在測試,所以本文先不教如何新增使用者。

但root的密碼是多少呢?

 

 

去到MAMP的部落格,我們可以看到他寫說密碼也是root

而且也順便說了MAMP所安裝的MySQL在Mac上的安裝位置。

 

 

 

 

再來我們需要新增一個資料庫(database),所以我們按下phpMyAdmin管理頁的databases,

然後打入自己喜歡的名稱,按下Create。記得不要太長,只能有64的字元,也不要打中文。

 

 

[重點補充]  設定資料庫名稱的時候不要有大寫字元!!!
phpMyAdmin 在設定權限的時候如果有大寫會有問題,
應該是phpMyAdmin 程式的問題,並非MySQL的問題,圖片中顯示的是錯誤的。
(但是如果你的帳號的權限是設定為類似超級使用者全部都可以控制的話,設定為大寫就不會有問題。所以圖中教學才會成功。因為用的是root帳號。)

 

 

 

 

 

 

建立好左邊會出現,出現後就可以把phpMyAdmin關了,資料庫建立好就暫時沒它的事。

 

 

 

 

再來回到我們的編輯器,

把DB_NAME 填入剛剛的資料庫名稱,

DB_USER 填入 root 或是你新增的使用者名稱

DB_PASSWORD 填入密碼,這裡密碼一定會是明碼(直接看得到)儲存。

其他不用改。

 

 

 

 

wp-config.php繼續往下滾,會看到要設一些跟安全性有關的值。

我們可以讓WordPress的官網幫我們產生

網址為 https://api.wordpress.org/secret-key/1.1/salt/

 

 

 

 

它會是動態產生的,所以每次值不一樣

 

 

 

 

整個複製貼上就可以了

 

 

 

 

接下來會碰到資料表的前綴字設定,可以不要改。

但因為事後不太好改,如果想改,這裡先改會比較好。

他也有64個字元的限制,而且是包含後面的資料表名字,

所以不要太長會比較好。

(前綴基本上只是避免撞名,假設你有一個資料表叫'product',加上'wp-'就會變成wp-product

整個'wp-xxxxxxxxxx'不能超過64個字元,所以如果前綴很長是有機會超過的)。

 

 

 

 

剩下的設定先不管,記得要儲存。

再回到我們的網頁首頁,也就是WordPress頁面。

按下“衝吧”

 

 

 

 

 

然後他就會抱怨wp-config.php已經存在,

我們直接按下立即安裝即可。

 

 

 

 

一切正常就會出現下圖,

如果設定錯誤就還請仔細檢查一下上面步驟是否有做錯。

 

 

 


如果是照著影片自建使用者卻失敗無法連到資料庫,這有可能是幾種情況。
1.  帳號不對 
2. 密碼不會
3. 權限不夠
4. port 號不是8889
5. 資料庫沒建立
可以先嘗試著使用 帳號 root / 密碼 root 來登入,如果可以登入代表不是4 與 5的問題


接者可以嘗試直接在終端機下
/Applications/MAMP/Library/bin/mysql --host=localhost -upb -p111111
其中pb 要改成你的帳號
111111 要改成你的密碼
中間沒有空白

  
如果這樣不能連線,則代表你的使用者沒產生正確,帳號或密碼有問題。
如果可以連線,就代表權限錯誤,建議刪掉使用者重新試是一次。

 

 

 

 

這個頁面的資訊都可以改,輕鬆填。

使用者名稱與密碼要記得就好,等下會用到。

如果密碼太簡單比需要打勾”確定使用“才能使用。

 

 

 

 

 

完成就會看到這個畫面,一切相當簡單。

 

 

 

 

按下登入可以進入WordPress的管理後台。

登入可以使用使用者名稱或是Email

 

 

 

 

後台長這樣

 

 

 

 

 

然後可以點擊上面到首頁,設定好首頁就長得不一樣了,被套上版型。

 

 

 

 

 

 

 

 

 

最上面的管理員條是因為登入了使用者才看得到,

可以嘗試登出。

 

 

 

 

 

會回到登入頁面

 

 

 

 

直接用網址回來,管理員條就不見了

 

 

 

這篇文章就教到這邊,

WordPress的功能會從下篇開始介紹。

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

圖文系列教學: WordPress 新手基本操作

Small logo

進度條編輯群

進度條編輯團隊