# Wordpress 電商平台 project [TOC] --- 為阿伯架設可以管理的電商平台,訴求:曝光度 + 同業差異性 + 後台 ### tools 1. 雲端伺服器空間:000Webhost(可能測試放github),基於商用,不使用google sites協作 2. 環境:MAMP PRO(Apache,mySQL) 3. WordPress --- ## Day1 ### Download MAMP ![](https://i.imgur.com/SFtoXEu.png) [MAMP下載](https://www.mamp.info/en/downloads/) #### 至官網下載MAMP ### 安裝MAMP PRO #### 軟體使用 .NET core環境,我電腦是乾淨的所以一開始會跳一個除錯視窗 #### 用VS內部的source安裝 .NET core即可 ![](https://i.imgur.com/NmVssau.png) #### 安裝很簡單,除了mac有個坑需要迴避 ![](https://i.imgur.com/8CbUUV6.png) ### 設定MAMP本地伺服器 #### File/Preferences![](https://i.imgur.com/IavDyc7.png) #### 改port![](https://i.imgur.com/UbVUAiC.png) #### 指定路徑![](https://i.imgur.com/C1Is2Xy.png) #### 管理資料庫(WebStart進入網頁後台) ![](https://i.imgur.com/87IU0Qm.png) ![](https://i.imgur.com/jIckGUJ.png) #### PHPmyadmin就可以看到資料庫後端的資料 ![](https://i.imgur.com/g0tYT2f.png) ### WordPress #### WordPress下載![](https://i.imgur.com/toehGBW.png) [載點](https://tw.wordpress.org/download/) #### 解壓縮到剛剛指定的資料夾![](https://i.imgur.com/sJEmYBY.png) #### 瀏覽器127.0.0.1開始安裝WordPress![](https://i.imgur.com/hAIMFKE.png) #### WordPress是市佔率最高的架站軟體,常遭駭客大規模 SQL Injection 攻擊。若把「資料表前置詞」改成 wp 之外的其他英數,能避免這類攻擊 ![](https://i.imgur.com/vlrXfw0.png) update ![](https://i.imgur.com/ncBlfJE.png) #### 把myadmin重新登入,再串連一次MAMP![](https://i.imgur.com/qbQjfRH.png) update ![Uploading file..._7q7ihnqie]() #### 安裝WordPress ![](https://i.imgur.com/EnaJRq9.png) #### 一律透過127.0.0.1登入![](https://i.imgur.com/6q8LwpU.png) #### 設定![](https://i.imgur.com/oQkG7PV.png) ## Day2 ### 網站架設 #### 首頁設定![](https://i.imgur.com/c53LH3c.png) ![](https://i.imgur.com/DnzwHSe.png) #### 可以注意到,他限制個人頭像來源為 Gravatar,所以就先註冊一個合法頭像 ### Gravatar #### 登入 [Gravatar官網](https://en.gravatar.com/) ![](https://i.imgur.com/b1XAs6C.png) #### 允許直接使用wordpress的帳號註冊 ![](https://i.imgur.com/ty5KuD3.png) #### 新增照片 ![](https://i.imgur.com/1bOBK8G.png) ![](https://i.imgur.com/hcF4sEt.png) #### 改變 ![](https://i.imgur.com/8RhLGpu.png) ![](https://i.imgur.com/Nm0R7o6.png) ### 版型配置 #### background img ![](https://i.imgur.com/Ubg6a5g.png) #### media ![](https://i.imgur.com/XG7oUXy.png) #### article ![](https://i.imgur.com/SVFTYa0.png) #### 我覺得很方便的其中一點是,他中文化做得很完整,除了一些外掛上面的設定以及新的功能處理,其他基本設定都是全繁體中文,今天假設是長輩也能夠輕鬆做基本設定以及控管 #### 包括在版本更新 ![](https://i.imgur.com/K1hEwYF.png) #### 在網頁程式的方面也提供圖形化的方式撰寫 ![](https://i.imgur.com/4wEhWFw.png) #### 若是熟悉HTML,CSS,JAVASCRIPT等前端語言,也提供方便的編輯工具 ![](https://i.imgur.com/whCZd8k.png) ![](https://i.imgur.com/PhCFRDP.png) #### 一旁的導覽工具,可以直接很直覺的設定網頁信息 ![](https://i.imgur.com/xZ3lnV9.png) #### 甚至可以在圖形化的編輯工具下寫網頁程式 ![](https://i.imgur.com/29bKP2a.png) ## Day3 ## Day4 ### 000Webhost雲端伺服器 #### 基本上就是當作一個虛擬機的空間來放網頁 [伺服器官網](https://www.000webhost.com/)![](https://i.imgur.com/W53La3v.png) #### 註冊 ![](https://i.imgur.com/FAm8gyZ.png) #### 選擇建立的型態 ![](https://i.imgur.com/5OmLCZm.png) #### 賣物 ![](https://i.imgur.com/iym9fDe.png) #### 設定完後會讓你選擇如何連結網頁,先放上之前製作的PROJECT ![](https://i.imgur.com/WuEzTHo.png) #### 上傳檔案 ![](https://i.imgur.com/dWnaNKF.png) #### 在 000Webhost 免費版本當中,你可以免費創立兩個資料庫,雖然僅可創造兩個資料庫,但這兩個資料庫是沒有大小限制的,同時,你仍然可以使用 phpMyAdmin 的應用程式來管理你的資料庫,也能使用 PHP 函數來自動寄送電子郵件 ![](https://i.imgur.com/hpMxmHl.png) #### 設置自己的域名 ![](https://i.imgur.com/VjJQMZr.png) #### 允許用FTP傳輸檔案 ![](https://i.imgur.com/rejQ6B1.png) #### 這裡我用FileZilla來做ssh加密傳送檔案 ![](https://i.imgur.com/MckV9E2.png) #### 伺服器位置不在亞洲,可能因此跳出警示 ![](https://i.imgur.com/RGDYXy7.png) #### 除錯 ![](https://i.imgur.com/iH0F4v9.png) #### sucess ![](https://i.imgur.com/K2dwkhk.png) [Go my website on 000webhost](https://rubric-plugs.000webhostapp.com/)