WordPress安裝 – WordPress 教學 WordPress 網頁設計 必學課程!

大家好~再次謝謝初心者們準時回鵠學苑上課!之前的 WordPress簡介 的教學跟大家說明為何要選擇WordPress的原因,在接下來這一篇 WordPress安裝 教學中,簡化安裝繁雜的程序,並且以圖文教學的方式要來教導大家,如何正確的安裝WordPress,並且使它能正常運作!在開始安裝前,我先解釋一下,什麼是”MAMP”,其實很簡單,我們將英文縮寫拆開來解釋,也就是”Mac OS+Apache+MySQL+PHP”,Mac OS就是作業系統,Apache是網頁伺服器,MySQL是資料庫伺服器,PHP語言就是我們現在要安裝的WordPress。其實MAMP是一套綜合的工具包,它包含了所有可以讓WordPress正常運作的所有元素,也可以理解是懶人包或傻瓜包(這其實是在說我又懶又傻拉….),在安裝完MAMP後,將WordPress放進去裡面後,就可以開始我們學習WordPress自己設計網站的魔幻旅程了喔!!歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略– ,接下來跟著鵠學院的腳步,讓我們開始學習吧!

WordPress Taiwan 正體中文下載
https://tw.wordpress.org/releases/
MAMP下載
https://www.mamp.info/en/downloads/

如何利用MAMP架設localhost(本機伺服器)

第一步:前往MAMP官方網站,點選上方DOWNLOADS進入頁面,點選橘色 Download 下載 (MAMP 網站已改版,點選後請選擇電腦作業系統後才可下載)

WordPress安裝

WordPress安裝

第二步:點選MAMP_MAMP_PRO_版本  進行安裝進入安裝畫面後,按照軟體內建指引的安裝程序,依序的按下繼續及同意,基本上安裝的過程中所提示的內容都不會對下面的步驟有影響,所以請直接略過就好了~小提醒也不要按太快避免按錯選項喔!

WordPress安裝

WordPress安裝

WordPress安裝

WordPress安裝

第三步:點選安裝等待安裝完畢

WordPress安裝

WordPress安裝

第四步:安裝完成,前往電腦的應用程式區,選擇MAMP資料夾,點選 將程式開啟

WordPress安裝

WordPress安裝

WordPress安裝

開啟MAMP畫面,點Preferences…對Web Server路徑進行設置

WordPress安裝

WordPress安裝

小提醒:Preferences是優先的意思,在MAMP裡可以理解為”先期設定”

第五步:路徑設定完畢,點選Start Servers開啟伺服器,等待他變成綠色的

WordPress安裝

WordPress安裝

小提醒:當Start Servers變成綠色的時候,會自動開啟一個新的瀏覽器分頁,也就是下一步的MAMP localhost 網頁

第六步:進入MAMP localhost網頁

wp安裝15

第七步:點選phpMyAdmin

第八步:進入到php管理員頁面

第九步:點選資料庫進入設定,在Create database 標籤底下建立資料庫,名稱要與之後將WordPress資料庫放進MAMP裡的名稱相同(示範圖片中名稱是輸入”Wordpress”),輸入名稱後按下Create鍵。

WordPress安裝

WordPress安裝

小提醒:在輸入名稱時,應該有發現右邊有一個小欄位是”collation”,在這裡的意思是”字元校對”,對應到下方的”utf8_general_ci”,這一段文字是”字元編碼”,用途是轉換不同國家的文字可以在網頁上正確顯示,對於初心者而言這個選項可以暫時略過,等以後長大了再來學習吧!!

第十步:進入 WordPress官方網站 ,下載WordPress

WordPress安裝

進入到 剛剛到在MAMP所設定的路徑,或是直接點選到指定的位置,將剛剛下載的WordPress解壓縮內的檔案放進此路徑。

WordPress安裝

小提醒:路徑設定為application/mamp/htdocs,跟第四步設定的路徑一模一樣。

如何下載WordPress並安裝在電腦上

第一步:點擊 phpMyAdmin 進入到資料庫伺服器的畫面,點選User accounts的標籤頁。在這一步我們是要建立為了等一下安裝WordPress的過程中,將會要求輸入資料庫伺服器的帳號密碼,所以必須在資料庫伺服器建立一組最高權限的帳戶。

點選圖片中紅色方框標示的Add user account。

WordPress安裝

進去之後,會看的一個表格先在User name的地方輸入名稱,在圖片裡是輸入wp-user,可以輸入自己想要的名稱。

WordPress安裝

WordPress安裝

接下來點擊Host name,會出現下拉式選單,因為我們是將WordPress網站架設在本機伺服器上做修改,所以要選擇Local(本機,也就是電腦端、這台電腦的意思)。

WordPress安裝

接下輸入密碼,旁邊的綠色長條是顯示密碼的強度,通常越複雜就越強,下方的Re-type是要再次輸入密碼。

WordPress安裝

WordPress安裝

將整個建立帳號的畫面(灰底)向下滾動,會看到有許多可以勾選的小框,這裡是設定帳號的權限,勾選的越多可以變更的設定越多,當然身為網站的架設者,直接將所有可以勾選的全部選項打勾,以確保擁有最高的修改權限。

wp安裝28

將整個畫面拉到最下方,會看到右下角(紅色方框處)會有一個Go的按鈕,按下去之後就建立完成資料庫的帳戶了!

WordPress安裝

小提醒:確定建立完成的話,會在畫面的左邊New資料夾圖示的下方會出現剛剛建立的名稱,比如剛剛是用wp-user,建立成功就會出現在左側草綠色區域一排英文字母的最下方喔!

第二步:安裝WordPress,打開瀏覽器,在最上方的網址欄位內輸入 localhost:8888,或直接點擊,將會跳轉到下圖的畫面,直接點擊紅色方框內的WordPress。

WordPress安裝

從這裡開始就表示WordPress在MAMP內已經順利運作,也是開始安裝WordPress的第一步了,在這裡選擇繁體中文作為WordPress的主要語言。

WordPress安裝

在這裡資料庫名稱、資料庫使用者帳號、資料庫密碼我們剛剛都已經在資料庫伺服器裡面設定好了,相信大家都應該記得吧!點擊衝吧!可繼續安裝WordPress。

WordPress安裝

在這一個畫面裡,資料庫名稱就是輸入之前將WordPress解壓縮後放在htdocs裡面的名稱,也就是WordPress,使用者名稱跟密碼就是輸入剛剛在資料庫伺服器內建立帳戶所設定的帳號密碼。

WordPress安裝

我剛剛在資料庫伺服器內設定的帳號是wp-user,所以在使用者名稱輸入一樣的帳號,密碼亦同,輸入完後就可以點擊送出了。

WordPress安裝

直接點擊紅色方框標示的開始安裝。

WordPress安裝

在這裡還要再設定一次使用者名稱跟密碼,不過這一組跟上一次的帳戶不一樣,上次設定的是資料庫伺服器的帳戶,如果以後資料庫伺服器出問題,就要使用資料庫伺服器的帳戶登入修改資料,而在這裡設定的是登入WordPress的帳號密碼,這一點相當重要,請初心者們不要搞混喔!而其他的網站標題、電子郵件等等都可以在登入WordPress控制台後在設定項目裡面修改,所以不用怕打錯喔!輸入完畢後點擊安裝WordPress。

WordPress安裝

安裝已經完成了,接下直接點擊登入的按鈕。

WordPress安裝

接下來的登入畫面,就是剛剛設定的WordPress登入帳號密碼,一樣是設定wp-user,接著點擊登入的按鈕就可以進去WordPress了!

WordPress安裝

小提醒:WordPress登入的帳號密碼務必要牢記在心,或著用記事本抄起來,之後的所有後台管理的教學都會用到這組帳號密碼來登入WordPress的控制台,所以一定要好好記得!如果忘記密碼,WordPress會要求輸入電子郵件信箱重發密碼給用戶,所以一定要輸入有效的電子信箱喔!

第三步:登入WordPress的畫面,有分成前端以及後台,都必須輸入不同的網址,下面依序介紹:

前端網址: http://localhost:8888/wordpress/ ,下圖就是前端的畫面,這裡是網站建立完成後在網路上顯示的畫面,透過後台的選項也可以跳轉到這裡。

wp安裝40

後台網址: http://localhost:8888/wordpress/wp-admin/ ,下圖就是後台的畫面,也是後續WordPress 的各種基本教學所要認識學習的地方,非常重要!

wp安裝39

結語:

所有安裝的步驟都結束了,WordPress已經成功安裝完成拉!!恭喜初心者~離集資上市又邁進了一大步拉!!(誤…) 安裝步驟雖然很繁雜,但是其實也非常簡單,這一堂課的基本安裝,相信初心者們照著步驟走就能很順利的安裝完成!在此也先跟各位預告說明下一次教學的主題,就是WordPress佈景主題的基礎設定,也是決定一個網站外觀的重點!希望大家能持續追蹤 鵠學苑鵠崙設計~如果有遇到安裝的問題,也歡迎在下面迴響的地方發問~我們下一次文章教學見了喔^ _ ^~

站內相關文章:

網站架設知識推薦閱讀:

WordPress版本更新 – 發佈 2019 全新主題及 Gutenberg 編輯器
WordPress 架站 兩種方式比較與分析,哪一種適合建立網站?
WordPress 網站設計-全球大型企業、知名品牌網站案例分享

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端