wampserver

【WordPress 教學 — 菜鳥系列 (3)】使用 WampServer 安裝 WordPress

WampServer 和我們前面介紹過的 DesktopServer 一樣,也是 Local server 的一種。但 WampServer 可以給你更多彈性,雖然相對 DesktopServer 會稍微複雜一些,但你也會學的更多。

你更可以在 WampServer 中開發你日後將會實際上線的網站,因為你可以依照你的需求設定你的網站伺服器。

目錄


  1. 下載安裝 WampServer
    1. 安裝必要套件
    2. 避免出現遺失 VCRUNTIME140.dll 錯誤
    3. 安裝 Notepad++(非必要)
    4. 安裝 WampServer
  2. 安裝 WordPress
    1. 安裝前設置
    2. 準備安裝 WordPress
    3. 開始安裝 WordPress
  3. 刪除網站
  4. 如何使用虛擬域名來建立網站
  5. 關閉 WampServer

 

本範例基本資訊

電腦作業系統:Windows 10

網頁瀏覽器:Google Chrome

文字編輯器:Notepad++

名詞解釋 WAMP

  • 【W】Windows:電腦作業系統 ( Operating system )
  • 【A】Apache:網站伺服器 ( Web server )
  • 【M】MySQL:資料庫伺服器 ( Database server )
  • 【P】PHP:伺服器端的程式語言

 

下載安裝 WampServer


>>> 前往下載

wampserver

 

依據你的系統類型下載相應的版本,這裡使用 Win10 作為範例

download wampserver

 

查詢你的系統類型

在螢幕左下角的 Win 圖示上點擊右鍵,然後點選「系統」

Win10 system type

 

Win10 system type

 

安裝必要套件

如果你是第一次安裝 WampServer,你需要下載安裝 Visual C++ Redistributable for Visual Studio 2012 Update 4

download wampserver

 

選擇相應系統類型的版本下載

download wampserver

download wampserver

 

開始安裝

download wampserver

 

特別提醒

如果你的電腦已經有安裝此套件,會顯示如下,請點擊關閉 ( Close )

wampserver

wampserver

 

勾選同意條款,點擊 Install 安裝

download wampserver

 

允許最高權限安裝

download wampserver

 

安裝完成

download wampserver

 

避免出現遺失 VCRUNTIME140.dll 錯誤

為了避免在安裝過程中出現如下圖錯誤,我們還需要安裝 Microsoft Visual C++ 2015 Redistributable Update 3 ( 點此下載 )

vcruntime140.dll missing error

 

下載相應系統類型的版本

avoid vcruntime140.dll missing error

 

avoid vcruntime140.dll missing error

 

安裝套件

avoid vcruntime140.dll missing error

 

特別提醒

如果你的電腦已安裝此套件,請直接關閉即可

wampserver

wampserver

 

勾選同意條款並點擊安裝

avoid vcruntime140.dll missing error

 

允許最高權限安裝

avoid vcruntime140.dll missing error

 

安裝完成,關閉結束

avoid vcruntime140.dll missing error

 

安裝 Notepad++(非必要)

Notepad++ 是一款文字編輯器,可以用來取代 Windows 的記事本,也可以作為程式碼編輯器

>>> 下載 Notepad++

install notepadplusplus

 

選擇相應系統的版本

install notepadplusplus

 

安裝

按預設安裝即可,下面快轉

install notepadplusplus

install notepadplusplus

install notepadplusplus

install notepadplusplus

install notepadplusplus

install notepadplusplus

install notepadplusplus

install notepadplusplus

install notepadplusplus

 

安裝 WampServer

回到 WampServer 下載頁,點擊相應系統類型的版本下載

wampserver

 

點擊彈出視窗中的 download directly

install wampserver

 

這時會跳轉到下載頁面,等待讀秒結束自動下載

install wampserver

 

點擊下載安裝

install wampserver

 

允許最高權限執行安裝

install wampserver

 

WampServer 有繁體中文版,但安裝時僅有英文及法文版,我們使用英文安裝

install wampserver

 

勾選同意條款,點擊 Next >

install wampserver

 

關於安裝的一些注意事項
  • 建議你應該將 WampServer 安裝在硬碟的根目錄,而不要安裝在 Program Files 或其他的子目錄下
  • 還有一些你應該先行安裝的套件,這部份我們在前面已經完成

install wampserver

 

選擇你的安裝目錄

如果你的電腦有多個磁碟分割,你可以自行選擇要安裝在哪一個磁碟

install wampserver

 

選擇在「開始」裡的目錄名稱,按預設即可

install wampserver

 

再次確認,然後點擊 Install 開始安裝

install wampserver

 

安裝可能需要一點時間

install wampserver

 

選擇預設瀏覽器

安裝過程會彈出視窗詢問你是否更換預設給 WampServer 使用的瀏覽器,如果你點擊「否」,將會使用 IE 作為預設。這裡我們選擇「是」來更換為 Google 瀏覽器

install wampserver

 

Google 瀏覽器的安裝位置

install wampserver

 

選擇預設文字編輯器

如果選擇「否」將使用 Windows 預設的記事本,這裡我們選擇「是」,更換為早前安裝的 Notepad++

你也可以使用你慣用的文字編輯器,如 Sublime Text、Atom、Brackets 等

install wampserver

install wampserver

 

最後會彈出允許 Apache 通過系統防火牆的視窗,點擊「允許存取」

install wampserver

 

這裡會提醒你 phpMyAdmin 的預設帳號是「root」且密碼為「空」,點擊 Next >

install wampserver

 

安裝完成!點擊 Finish 關閉

install wampserver

 

點擊桌面捷徑啟動

install wampserver

 

使用系統管理員啟動

install wampserver

 

啟動後你會在工作列右下角看到 WampServer 的圖示,你可以將它拖曳到可見區域

install wampserver

 

在圖示上點擊 右鍵 更改介面為繁體

install wampserver

 

安裝 WordPress


安裝前設置

修改 PHP 版本為7(官網建議

左鍵 點擊 WampServer 圖示,找到 PHP >> Version >> 7.x.x(未來可能更新,只要是 7 以上的版本即可)

wampserver

wampserver

 

設置後 WampServer 會自動重啟,請等到圖示變回綠色,表示所有服務皆完成啟動再開始使用

wampserver

 

圖示顏色狀態說明

wampserver

 

左鍵點擊圖示,開啟 Localhost

wampserver

 

確認我們已經將 PHP 改為 7 版

wampserver

 

接下來我們打開 www 目錄,即我們網站的根目錄

wampserver

 

Localhost 所顯示的內容即 www 目錄 的內容

www 目錄

 

準備安裝 WordPress

>>> 到官網下載 WordPress

download wordpress

 

將下載的壓縮檔放置到 www 目錄 中並解壓縮

wampserver

如果你的電腦中沒有 WinRAR,Windows 預設的 zipped 即可解壓縮,你也可以安裝 7-Zip

 

更名解壓縮後的目錄名稱,這裡我們更名為 testwp

wampserver

 

回到瀏覽器並在網址列輸入 localhost/testwp

wampserver

 

開始安裝 WordPress

選擇你想要安裝的 WP 語言,這裡我們選擇繁體中文作為示範

wampserver

 

提醒你安裝 WP 需要哪些資訊

wampserver

 

建立資料庫

請左鍵點擊 WampServer 圖示,點選 phpMyAdmin

wampserver

 

我們在安裝時知道,phpMyAdmin 的使用者名稱為 root 且密碼為「空」

wampserver

 

進入後點擊「新增」

wampserver

 

自訂一個資料庫名稱,這裡和目錄名稱一致,命名為 testwp

wampserver

 

資料庫建立完成

wampserver

 

回到瀏覽器,輸入相應資訊
  1. 資料庫名稱:我們上一步所新增的資料庫
  2. 使用者名稱:同 phpMyAdmin,輸入 root
  3. 密碼:為空(請刪除原本的預設值 password)
  4. 資料庫主機位址:localhost
  5. 資料表前綴:練習時按預設即可

wampserver

 

開始安裝

wampserver

 

WordPress 需要資訊

  1. 網站標題:依需求
  2. 使用者名稱:登入 WP 的帳號(作為練習,我們統一使用 root,方便記憶)
  3. 密碼:登入 WP 的密碼(作為練習,我們統一使用 root,方便記憶)
  4. 確認密碼:如果密碼不符 WP 的安全標準則需要勾選
  5. 你的電子郵件:雖然只是練習,建議輸入一個真實可用的 EMAIL
  6. 搜尋引擎可見度:我們只在本機使用,所以直接忽略即可

wampserver

 

安裝完成,點擊登入

wampserver

 

輸入你剛才設定的 WP 使用者帳密

wampserver

 

刪除網站


STEP.1 刪除網站檔案

開啟 www 目錄,右鍵刪除 testwp 目錄

wampserver

 

STEP.2 刪除資料庫

開啟 phpMyAdmin,點擊「資料庫」

wampserver

 

選取要刪除的資料庫並點擊「刪除」

wampserver

 

點擊「確定」刪除

wampserver

 

成功刪除資料庫

wampserver

 

如何使用虛擬域名來建立網站


先在本機文件中建立一個目錄,用來放置我們的網站

wampserver

 

在這個目錄中建立你的網站目錄(你可以直接解壓縮 WordPress 的安裝檔更名)

wampserver

 

鍵點擊檔案視窗的位址列,然後右鍵複製(Ctrl+C)

wampserver

 

瀏覽器輸入 localhost,找到 Add a Virtual Host

wampserver

 

自訂虛擬域名及網站目錄位址

wampserver

 

重新啟動 DNS

wampserver

 

等圖示變回綠色,你的畫面會跳出一個視窗並很快的自動關閉,即完成重啟

wampserver

 

在瀏覽器輸入你的虛擬域名,接下來你應該知道該怎麼做了

wampserver

 

你可以在 localhost 首頁或左鍵圖示找到 Your VirtualHosts

wampserver

 

刪除虛擬域名網站

打開檔案管理,左鍵點擊位址列並輸入:

c:/wamp64/bin/apache/apache2.4.23/conf/extra/

 

使用文字編輯器開啟 httpd-vhosts.conf

wampserver

 

刪除你不要的網站,儲存並關閉

wampserver

 

再次重啟 DNS

wampserver

 

刪除虛擬域名,開啟檔案管理,貼上下面路徑:

C:\Windows\System32\drivers\etc

用文字編輯器打開 hosts

wampserver

 

刪除相應的網址

wampserver

 

這個提示說明我們必須使用系統管理員權限才能修改,點擊「是」繼續

然後再次儲存即可

wampserver

 

最後刪除網站目錄,done!

wampserver

 

關閉 WampServer


右鍵點擊圖示 > 退出

wampserver

 

寫在最後


我們希望你在看完這篇教學以後就可以開始練習,所以截取了許多圖片,盡可能的避免讓你感到困惑。關於其他沒有提及的功能與設定,容我們日後再補充,對剛入門的你而言,以上的內容足以應付。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *